hiro 
Shopifyとインスタグラムを連携したい。
インスタのフィードをShopifyで作ったサイトに埋め込んで表示させたい。
こんなことを考えている方へ。
この記事のポイントは以下です。
Shopifyで作ったサイトにインスタのフィードを掲載する方法
この記事を書いている私は大阪在住のweb制作フリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。
Shopifyでインスタ連携する方法【フィードを表示】
Shopifyで作ったサイトにインスタグラムのフィードを表示させる方法を解説します。以下のように投稿画像をサイトに埋め込み表示するのが目的です。
標準機能にはついていないので、無料のアプリを利用します。「Instafeed ‑ Instagram Feed」です。
アプリの概要は以下。
このアプリ、基本は無料ですが有料プランもあります。
機械的に翻訳した料金プランは以下。
ちなみに、設定方法は公式サイトにもヘルプがあります。
ただ英語なのでわかりにくいです。
本記事で詳しく解説します。
「Instafeed ‑ Instagram Feed」をインストールする
まずは「Instafeed ‑ Instagram Feed」をインストールします。以下のリンク先からインストールできます。
「Add app」を押下でショップの管理画面に移動します。そして「アプリをインストール」を押下。
インストール直後の初期画面は以下です。まずはインスタグラムのアカウント接続をします。「Connect an Instagram Account」をクリックします。
インスタグラムのログイン画面が表示されます。サイトにフィードを表示させたいアカウントのログインIDとパスワードを入力します。
「Mintt Studioが以下の認証を求めています」と表示されるので「承認」を押下します。Mintt Studioとはアプリの開発元です。
連携が完了すると、アプリ管理画面の右側に自分の投稿が表示されます。これでひとまず連携は完了です。続いて、表示設定をしていきます。
各設定項目の説明
管理画面は、
・右側にプレビュー
・左側に各種設定項目
というレイアウトになっています。
・FEED TITLE
・POST SPACING
・ON POST CLICK
・NUMBER OF ROWS
・NUMBER OF COLUMNS
の5つの項目でフロントでの表示を編集できます。
各設定項目を順番に解説します。
FEED TITLEは文字通りフィードのタイトルです。
ここに入れた文字はフロントで表示されます。後述する管理画面で文字サイズやフォントも調整できます。もちろん、cssを弄ればもっと自由にカスタマイズできます。
POST SPACING を編集することで、投稿画像の間隔を調整できます。たとえば「0%」だと、投稿画像は隙間なく並べられます。
「10%」にすると、以下のように隙間ができます。
NUMBER OF ROWS と NUMBER OF COLUMNS で表示する投稿の行数と列数を調整できます。
NUMBER OF ROWS が 行数（縦並び）でNUMBER OF COLUMNSが列数（横並び）です。
ON POST CLICK で投稿画像がクリックされた時の挙動を調整します。私は基本「Open Instagram」にしています。クリックでインスタ起動です。
フィード表示の設定をする
各種設定が完了したら、いよいよストアフロントにフィードを表示させます。
今回は例として以下のように設定しました。
| FEED TITLE | なし |
| POST SPACING | 10% |
| ON POST CLICK | Open Instagram |
| NUMBER OF ROWS | 2 |
| NUMBER OF COLUMNS | 4 |
では、フィードをストアフロントに表示させていきます。
管理画面 > オンラインストア > テーマを選択します。
カスタマイズ へと進みます。
「セクションを追加する」を押下。
「Instafeed App」を選択して追加します。
セクションの右側の・・・（6つの点）をドラックして動かすことで、フィードの表示位置を変えることができます。
「Instafeed App」をクリックすると設定画面が開きます。ここでも表示レイアウトの調整ができます。
「Feed Width」でコンテンツ幅を調整できます。デフォルトは100%（インナーの全幅）です。
たとえば、70%にすると左右の余白が広がります。
Custom Code（optional）はhtmlを記述できます。
入力した内容はフィードのタイトル部分に表示されます。
クラス名をあてることができるので、cssで調整が可能です。複雑なカスタマイズをしたい場合は、おすすめ。
ちなみに、ストアフロントへの表示方法は公式ヘルプが動画付きで解説しています。
「ADD INSTAFEED TO YOUR HOMEPAGE」をクリックすると、
動画が起動して、設定方法をレクチャーしてくれます。
アプリ公式サイトの以下のページにも解説があります。
表示を確認する
管理画面 > オンラインストア > プレビュー でストアフロントでの表示を確認します。意図した場所に表示されていれば完了です。
インスタグラムのパスワードを変えてしまったら？
インスタグラムのログインパスワードを変えると、Shopifyとの連携が切れます。
このパターンは実際に経験がありまして、クライアントから連絡が来ました。「インスタのパスワードを変えたらフィードが表示されなくなった」と。
対処方法はシンプルで、もう一度アカウント連携をすればOKです。初期設定時と同じように「Connect an Instagram Account」をクリックして進めます。
私が行ったときは、以前の設定もちゃんと引き継いでくれました。
スマホとPCで表示カラム数を変えたい
PC時は4カラム、スマホ時は2カラムのように表示を変えたい時。管理画面から変えるには有料プランを契約する必要があります。
ただ、
無料でなんとかしたい！
という場合はcssを編集することで可能です。
以下は375px時の4カラム表示です。1つの画像は80pxくらい。小さくて見にくいですね。iPhone SEクラスの画面サイズ（320px）だと相当小さくなります。
widthとpadding-topは25%で、画面幅の1/4になっていることが分かります。また当該クラス名は「instafeed-container」です。
2カラムにしたかったら、widthとpadding-topの数値を50%に近づければOKです。ちなみに「! important」を付けないとスタイルが当たりません。
cssの調整においては、もちろん「POST SPACING（投稿画像の間隔）」の数値と、ブレイクポイントも考慮します。
POST SPACINGの数値は「instafeed-container」直下のimgタグに当たっているので、ここもcssで調整します。
Shopifyではインスタグラムショッピングも連携できる
本記事ではInstagramのフィードを表示させる方法を解説しましたが、ShopifyではInstagramショッピングを実装することも可能です。
Shopifyでのサイト構築を学ぶのにオススメな教材
- 本なら2020年の12月に発売された「商品売るならShopify 世界標準かつ最先端のECサイト構築入門
」がおすすめ！
私も買いましたが「shopifyとは？」という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
- 動画ならUdemyの「Shopifyでクライアントのストアを作る人のための講座
」がオススメです！
私も買いましたが、Shopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
shopifyは日本語のリファレンスが少なく、独学しようとすると大変です。
ネットで調べたり、Shopifyサポートに直接質問したりして学ぶこともできますが、知識にムラが出たり、そもそも正しい情報でなかったり、というリスクもあります。
今回紹介したのは、両方とも日本語の教材です。
内容も初心者向けなので、
これからshopifyに関わってみたい！
shopify一通り分かっているけれど、抜けてる部分がないか確認したい！
といった方にはとてもおすすめです。
Shopify×イスタグラム活用の参考書
私が携わったShopify案件の中には、集客がほぼInstagram（インスタグラム）経由というサイトがあります。
- もともとある程度のフォロワー（）がおり
- かつ自社でプロダクトを持っていて
- 正直サイトにはカート機能だけであればいい
というパターンのサイトです。
とはいえ、Shopify側で最低限、ブランドコンセプトやプロフィールページは作り込みます。しかし、コンテンツマーケティングのようにページを増やしたりはしません。
インスタグラムをはじめとしたSNSを活用しての集客は、今後勢いを増します。
SEO一本では立ち行かない状況というのもありますが、フォロワーは基本的にはそのブランドのファンであり、CVRが高いという理由もあります。
SNSを活用したブランディングは、手元に一冊ノウハウ本を持っておくと安心です。
まとめ
この記事のポイントをまとめます。
Shopifyで作ったサイトにインスタのフィードを掲載する方法は以下です。
・アプリ「Instafeed ‑ Instagram Feed」をインストールする
・管理画面からの操作でストアフロントに表示させる（ノーコード）
アプリのダウンロード先と公式のヘルプは以下です。
Shopify関連の記事はこちらもおすすめです。
今回の記事はここまでです。