
Shopifyとインスタグラムを連携したい。
インスタのフィードをShopifyで作ったサイトに埋め込んで表示させたい。
こんなことを考えている方へ。
この記事のポイントは以下です。
Shopifyで作ったサイトにインスタのフィードを掲載する方法
この記事を書いている私は大阪在住のweb制作フリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。
Shopifyでインスタ連携する方法【フィードを表示】
Shopifyで作ったサイトにインスタグラムのフィードを表示させる方法を解説します。
以下のように投稿画像をサイトに埋め込み表示するのが目的です。

標準機能にはついていないので、無料のアプリを利用します。「Instafeed ‑ Instagram Feed」です。
アプリの概要は以下。
設定方法は公式サイトにもヘルプがありますが、英語なのでわかりにくいです。
なので本記事で詳しく解説します。
また、このアプリは基本無料ですが有料プランもあります。

機械的に翻訳した料金プランは以下。

【関連記事はこちら】
【レビュー】Udemyで日本語のShopify講座を買ってみた感想を読む >>
「Instafeed ‑ Instagram Feed」をインストールする
まずは「Instafeed ‑ Instagram Feed」をインストールします。以下のリンク先からインストールできます。

「Add app」を押下でショップの管理画面に移動します。そして「アプリをインストール」を押下。

インストール直後の初期画面は以下です。
まずはインスタグラムのアカウント接続をします。
「Connect an Instagram Account」をクリックします。

インスタグラムのログイン画面が表示されます。
サイトにフィードを表示させたいアカウントのログインIDとパスワードを入力します。

「Mintt Studioが以下の認証を求めています」と表示されるので「承認」を押下します。
Mintt Studioとはアプリの開発元です。

連携が完了すると、アプリ管理画面の右側に自分の投稿が表示されます。

これでひとまず連携は完了です。
続いてストアフロントの表示設定(3列x2行など)をしていきます。
【関連記事はこちら】
Shopifyを使ったECサイト参考事例まとめ【国内海外】を読む >>
各設定項目の説明
管理画面は、
- 右側にプレビュー
- 左側に各種設定項目
というレイアウトになっています。
そして、
- 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」にしています。クリックでインスタ起動です。

【関連記事はこちら】
Shopifyをカスタマイズする際に参考にするサイトを読む >>
フィード表示の設定をする
各種設定が完了したら、いよいよストアフロントにフィードを表示させます。
今回は例として以下のように設定しました。
項目 | 設定内容 |
---|---|
FEED TITLE | なし |
POST SPACING | 10% |
ON POST CLICK | Open Instagram |
NUMBER OF ROWS | 2 |
NUMBER OF COLUMNS | 4 |

続いてフィードをストアフロントに表示させていきます。
今回は「Atlantic」というテーマに導入しました。実際に案件で使ったテーマでして、ザ・ECという使い勝手のいいテーマです。
【関連記事】
Shopifyの有料テーマAtlanticを実際に使ってみた感想を読む >>
まずは 管理画面 > オンラインストア > テーマ を選択します。

カスタマイズ へと進みます。

セクションを追加する を押下。

「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で調整します。
実際にスマホ用にスタイル調整したコードの例が以下です。
この例では、
- ブレイクポイントは768px
- PC時は15コ表示(3行×5アイテム)、スマホ時は6コ表示(3行×2アイテム)
- アイテム同士の余白は36px
という設定にしています。
/* ============================================================================
instafeed sp
============================================================================== */
@media screen and (max-width: 768px) {
.instafeed-container {
width: 50.000000% !important;
padding-top: 50.000000% !important;
}
}
@media screen and (max-width: 768px) {
.instafeed-container .js-lazy-image,
.instafeed-container .instafeed-overlay {
width: calc(100% - 18px) !important;
height: calc(100% - 18px) !important;
}
}
@media screen and (max-width: 768px) {
#insta-feed > *:nth-child(n+13) {
display: none;
}
}
Shopifyではインスタグラムショッピングも連携できる
本記事ではInstagramのフィードを表示させる方法を解説しましたが、ShopifyではInstagramショッピングを実装することも可能です。
Shopify×Instagramを活用しよう!
私が携わったShopify案件の中には、集客がほぼInstagram(インスタグラム)経由というサイトがあります。
- もともとある程度のフォロワー()がおり
- かつ自社でプロダクトを持っていて
- 正直サイトにはカート機能だけであればいい
というパターンのサイトです。
とはいえ、Shopify側で最低限、ブランドコンセプトやプロフィールページは作り込みます。しかし、コンテンツマーケティングのようにページを増やしたりはしません。
インスタグラムをはじめとしたSNSを活用しての集客は、今後勢いを増します。
SEO一本では立ち行かない状況というのもありますが、フォロワーは基本的にはそのブランドのファンであり、CVRが高いという理由もあります。
SNSを活用したブランディングは、手元に一冊ノウハウ本を持っておくと安心です。
Shopifyの理解・学習に役立つ方法まとめ
Shopifyのリファレンスは基本的には英語です。自己学習をする際には言語の壁にブチあたります。不安な思いを抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。
- デイトラで学ぶ
デイトラは質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。「Shopify EC構築コース」では、HTML/CSSの基礎からWordPressのオリジナルテーマ制作までを学ぶことができます。サポート体制も充実しており、Slackでプロのエンジニアによるアドバイスやフィードバックを受けることができます。
- 本で学ぶ
「商品売るならShopify 世界標準かつ最先端のECサイト構築入門」がおすすめです。shopifyとは?という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
実際に読んだ私のレビューはこちらの記事をご覧ください。
2021年くらいからShopifyの日本語教材も充実してきました。
下記の2冊もおすすめです。
- 動画で学ぶ
Udemyの「Shopifyでクライアントのストアを作る人のための講座
」がオススメです! 私も買いましたがShopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
実際に購入した私のレビューはこちらの記事をご覧ください。
【Udemyがセール中(2022年4月13日(水)まで!】
対象コースが ¥1,700から。
2022年4月13日(水)まで!【Udemy】セール中のShopifyの講座一覧を見る >>
まとめ
この記事のポイントをまとめます。
Shopifyで作ったサイトにインスタのフィードを掲載する手順は以下です。
・アプリ「Instafeed ‑ Instagram Feed」をインストールする
・管理画面からの操作でストアフロントに表示させる(ノーコード)
アプリのダウンロード先と公式のヘルプは以下です。
こちらの記事のおすすめです。
【関連記事はこちら】
Shopifyでの商品登録のやり方【分かりやすく解説します】を読む >>
【関連記事はこちら】
Shopifyの有料テーマを紹介します【実際に案件で使用】を読む >>
今回の記事はここまでです。