ShopifyストアにInstagramの投稿を表示する方法(アプリなし)

Shopify公式ヘルプで確認できること

Shopifyヘルプセンターの「アプリでテーマを拡張する」には、テーマに「カスタム Liquid」セクションが用意されている場合は、テーマコードを直接編集する代わりに、テーマエディタでそのセクションにアプリのコードを追加できることがある、と書かれています。外部サービスのコードを、コードエディタを開かずに入れられる場所がこのセクションです。

また「テーマエディタでのセクションのカスタマイズ」では、ページのセクションはヘッダー、テンプレート、フッターの3つのエリアに分かれ、どのエリアにもカスタム Liquid を置けると説明されています。そして、ヘッダーとフッターはオンラインストアのすべてのページで共有される、とも明記されています。

始める前に用意するもの

1. Instagramのプロアカウント(ビジネスまたはクリエイター)。Social Feedで連携できるのはプロアカウントだけです(切り替え方はこちら)。
2. Social Feed by grip spaceのアカウント。メールアドレスとパスワードだけで無料で登録できます。
3. Shopify管理画面でテーマを編集できる権限。カスタム Liquid セクションが選べるテーマかどうかも、後の手順で確認します。

手順1: Social Feedで埋め込みコードをコピーする

1. Social Feedの管理画面でInstagramアカウントを連携します。
2. 「＋ ウィジェットを追加」でウィジェットを作り、「表示設定」で表示形式(グリッドかスライダー)、列数、表示件数、余白などを決めます。
3. ウィジェットが「公開」になっていることを確認し、「WEBサイトにタグを設置」の欄の「コピー」を押します。

コピーされるのは script タグ1行です。URLはウィジェットごとに違うので、必ず管理画面からコピーしたものを使ってください。

<script type="text/javascript" src="https://（管理画面に表示されるURL）"></script>

このタグは iframe を使わず、置かれた場所に投稿一覧を描きます。テーマのレイアウトの幅に合わせて広がり、「表示設定」で決めた最大幅より狭い場所では中央に寄ります。

手順2: 作業の前にテーマを複製しておく

Shopifyヘルプセンターの「テーマエディタ」と「テーマの複製」では、テーマをカスタマイズする前にテーマを複製してバックアップコピーを作るよう勧めています。うまくいかなかったときに、元の状態へ戻しやすくなるためです。

1. 管理画面から、[オンラインストア] > [テーマ] に移動します。
2. 複製するテーマの「...」ボタンをクリックしてアクションメニューを開き、[複製] をクリックします。
3. [テーマ] ページに、名前の前に「Copy Of」が付いた複製が表示されます。

ヘルプによると、管理画面に追加できるテーマは20件までで、すでに20件ある場合は1件削除してから複製する必要があります。

手順3: テーマエディタで「カスタム Liquid」セクションを追加する

ヘルプセンターの「セクションとブロック」にある、セクションの追加手順に沿って進めます。

1. 管理画面から、[オンラインストア] に移動します。
2. 編集するテーマを見つけて、[テーマを編集する] をクリックします。
3. ホームページに置く場合はそのまま、別のページに置く場合は [ホームページ] ドロップダウンメニューから、セクションを追加するテンプレートを選びます。
4. サイドバーで [セクションを追加] をクリックし、リストから「カスタム Liquid」を選びます。見つからないときは [セクションを検索] で探します。
5. 追加したセクションの設定にあるコードの入力欄に、手順1でコピーしたタグを貼り付けます。
6. セクション名の横のハンドルをドラッグして、一覧を出したい位置へ移動します。
7. [保存] をクリックします。

セクションに表示される設定項目は、テーマとそのバージョンによって異なります。ほかのセクションとの間隔などを調整できる項目があれば、ストアのデザインに合わせて整えてください。

手順4: 公開後のストアで表示を確認する

テーマエディタのプレビューウィンドウは、変更を加えると自動的に更新される仕組みです。外部の script が、このプレビューの中でどう扱われるかはヘルプに書かれていません。プレビューに一覧が出なくても、まずは保存して、公開後のストアを新しいタブで開いて確かめてください。

1. 公開中のテーマを編集した場合は、ストアのURLをそのまま開きます。複製したテーマ(下書き)で作業した場合は、そのテーマを公開してから確かめます。
2. PCとスマートフォンの両方で開き、列数や余白が見やすいかを確認します。
3. 投稿をクリックして、拡大表示や Instagram へのリンクが思いどおりに動くか試します。

どこに置くか: ページごとの置き場所

ヘルプセンターの「テーマの構造」によると、セクションはギフトカードページとチェックアウトページを除き、オンラインストアのどのページにも追加できます。置き場所ごとの違いをまとめました。

ヘルプには、テンプレートを編集すると、そのテンプレートを使うすべてのページに変更が適用されると書かれています。商品テンプレートに置けば、全商品のページに同じ一覧が出ます。全ページに出したいならフッターエリア、と覚えておくとわかりやすいです。

一部の商品ページにだけ出したいとき

「この商品群だけに着用例を見せたい」という場合は、テンプレートを分けます。ヘルプセンターの「テンプレート」によると、既存のテンプレートをもとに新しいテンプレートを作ることができ、元のテンプレートを使うページの表示には影響しません(新しいテンプレートを作れるのは互換性のあるテーマだけです)。

1. テーマエディタで [ホームページ] ドロップダウンメニューから「商品」を選び、[テンプレートを作成] をクリックします。
2. 名前を付け、[基準] で元にする既存のテンプレートを選んで [テンプレートを作成] をクリックします。
3. 新しいテンプレートに、手順3と同じ方法でカスタム Liquid セクションを追加して保存します。
4. Shopify管理画面で、一覧を出したい商品に新しいテンプレートを割り当てます。

Social Feedでは1つのInstagramアカウントから複数のウィジェットを作れます。キャプションのキーワードで「#新作」を含む投稿だけを出すウィジェットと、それ以外を出すウィジェットを作り、テンプレートごとに別のタグを貼る、といった使い分けもできます。作れる数はフリープランが1つ、ライトプランが3つまで、スタンダードプランが無制限です。

カスタム Liquid セクションが無いテーマの場合

ヘルプセンターの「テーマコードの編集」では、[オンラインストア] > [テーマ] から [コードを編集] を開いて、テーマファイルを直接編集できると説明されています。ただし、同じページに次の注意が書かれています。

1. テーマのコード変更がテーマの更新と互換性がない場合、更新されたコピーではそのコード変更がすべて削除される。
2. Shopifyアプリやテーマエディタで必要な変更ができない場合にのみ、テーマのコードを編集する。
3. HTMLとCSSの知識があり、Liquidの基本を理解している場合にのみ編集する。
4. テーマのコードは購入後にのみ編集できる(有料テーマのトライアル版では編集できない)。

コードの編集に慣れていない場合は、まずテーマのドキュメントやテーマの開発者に、カスタム Liquid セクションのような場所が無いかを確認するのが安全です。Social Feedには、タグの設置をお任せいただける設置代行(12,000円、税込)もあります。

アプリを使う方法との違い

Shopifyのアプリは、ヘルプによると「アプリブロック」「埋め込みアプリ」「テーマコードに追加されるアプリ」の形でテーマに組み込まれます。Social FeedはShopifyのアプリではなく、どのサイトでも使える script タグです。アプリのインストールは不要で、ストアのテーマを変えたときも、新しいテーマに同じタグを貼り直せば使えます。

その一方で、できないこともあります。Social Feedの一覧には、投稿に写った商品へのリンクを付ける「ショッピングタグ」のような機能はありません。また、表示できるのは連携した自社のプロアカウントの投稿だけで、ハッシュタグで集めた他人の投稿は出せません。商品ページへつなげたいときは、一覧を商品テンプレートや該当コレクションの近くに置き、クリック時の動作を「拡大表示」にしてキャプションで商品名を伝える、といった工夫になります。

ストアのデザインに合わせる表示設定

表示されないときの確認点

Shopifyに限らない原因は「Instagramの埋め込みが表示されない原因と直し方」にもまとめています。

よくある質問

Q. Shopifyのどのプランでも使えますか?

確認した範囲のヘルプには、利用できるセクションはテーマとそのバージョンによって異なると書かれていますが、Shopifyのプランごとの条件は明記されていませんでした。ご利用のプランと、テーマのドキュメントをご確認ください。

Q. チェックアウトやカートの画面にも出せますか?

ヘルプには、セクションはギフトカードページとチェックアウトページを除くどのページにも追加できると書かれています。チェックアウトには置けないので、購入前のページで見せるのが基本です。

Q. 費用はいくらかかりますか?

Social Feedはフリープラン(0円、ウィジェット1つ、月3,000回まで、16件まで、反映は1日1回、表記あり)から始められます。有料はライトが月1,200円、スタンダードが月2,980円(いずれも税込)です。詳しくは料金プランをご覧ください。

Q. ストアが重くなりませんか?

タグは1行で、グリッド表示の2段目以降の画像は画面に近づいてから読み込みます(スライダーは送ったときに空白にならないよう、最初にまとめて読み込みます)。Cookieやローカルストレージは使いません。画像はInstagramの配信サーバーから読み込まれます。

まとめ

ShopifyストアにInstagramの投稿一覧を出すには、テーマを複製してから、テーマエディタの「カスタム Liquid」セクションに Social Feed のタグを貼ります。全ページに出すならフッター、商品ページならテンプレート単位で、と置き場所を選び、確認は公開後のストアで行ってください。Instagramウィジェットの紹介ページで見た目を確かめてから、無料登録で試せます。

参考にした資料

1. Shopifyヘルプセンター「アプリでテーマを拡張する」
2. Shopifyヘルプセンター「テーマエディタでのセクションのカスタマイズ」
3. Shopifyヘルプセンター「セクションとブロック」
4. Shopifyヘルプセンター「テーマの構造」
5. Shopifyヘルプセンター「テンプレート」
6. Shopifyヘルプセンター「テーマエディタ」
7. Shopifyヘルプセンター「テーマエディタの機能概要」
8. Shopifyヘルプセンター「テーマの複製」
9. Shopifyヘルプセンター「テーマコードの編集」
10. Shopify.dev「Section groups」