Shopifyでインスタ連携する方法【フィードを埋め込み表示】

shopify Instagram feed

Shopifyとインスタグラムを連携したい。

インスタのフィードをShopifyで作ったサイトに埋め込んで表示させたい。

こんなことを考えている方へ。

この記事のポイントは以下です。

Shopifyで作ったサイトにインスタのフィードを掲載する方法

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。

Shopifyでインスタ連携する方法【フィードを表示】

Shopifyで作ったサイトにインスタグラムのフィードを表示させる方法を解説します。

以下のように投稿画像をサイトに埋め込み表示するのが目的です。

shopify Instagram feed

標準機能にはついていないので、無料のアプリを利用します。「Instafeed ‑ Instagram Feed」です。

アプリの概要は以下。

設定方法は公式サイトにもヘルプがありますが、英語なのでわかりにくいです。

なので本記事で詳しく解説します。

また、このアプリは基本無料ですが有料プランもあります。

shopify Instagram feed

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

shopify Instagram feed

【関連記事はこちら】
【レビュー】Udemyで日本語のShopify講座を買ってみた感想を読む >>

「Instafeed ‑ Instagram Feed」をインストールする

まずは「Instafeed ‑ Instagram Feed」をインストールします。以下のリンク先からインストールできます。

shopify Instagram feed

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

shopify Instagram feed

インストール直後の初期画面は以下です。

まずはインスタグラムのアカウント接続をします。

Connect an Instagram Account」をクリックします。

shopify Instagram feed

インスタグラムのログイン画面が表示されます。

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

shopify Instagram feed

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

Mintt Studioとはアプリの開発元です。

shopify Instagram feed

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

shopify Instagram feed

これでひとまず連携は完了です。

続いてストアフロントの表示設定(3列x2行など)をしていきます。

【関連記事はこちら】
Shopifyを使ったECサイト参考事例まとめ【国内海外】を読む >>

各設定項目の説明

管理画面は、

  • 右側にプレビュー
  • 左側に各種設定項目

というレイアウトになっています。

そして、

  • FEED TITLE
  • POST SPACING
  • ON POST CLICK
  • NUMBER OF ROWS
  • NUMBER OF COLUMNS

という5つの項目でフロントでの表示を編集できます。

shopify Instagram feed

各設定項目を順番に解説します。

FEED TITLEは文字通りフィードのタイトルです。

shopify Instagram feed

ここに入れた文字はフロントで表示されます。後述する管理画面で文字サイズやフォントも調整できます。もちろん、cssを弄ればもっと自由にカスタマイズできます。

shopify Instagram feed

POST SPACING を編集することで、投稿画像の間隔を調整できます。たとえば「0%」だと、投稿画像は隙間なく並べられます。

shopify Instagram feed

「10%」にすると、以下のように隙間ができます。

shopify Instagram feed

NUMBER OF ROWSNUMBER OF COLUMNS で表示する投稿の行数と列数を調整できます。

NUMBER OF ROWS が 行数(縦並び)でNUMBER OF COLUMNSが列数(横並び)です。

shopify Instagram feed

ON POST CLICK で投稿画像がクリックされた時の挙動を調整します。私は基本「Open Instagram」にしています。クリックでインスタ起動です。

shopify Instagram feed

【関連記事はこちら】
Shopifyをカスタマイズする際に参考にするサイトを読む >>

フィード表示の設定をする

各種設定が完了したら、いよいよストアフロントにフィードを表示させます。

今回は例として以下のように設定しました。

項目設定内容
FEED TITLEなし
POST SPACING10%
ON POST CLICKOpen Instagram
NUMBER OF ROWS2
NUMBER OF COLUMNS4
shopify Instagram feed

続いてフィードをストアフロントに表示させていきます。

今回は「Atlantic」というテーマに導入しました。実際に案件で使ったテーマでして、ザ・ECという使い勝手のいいテーマです。

【関連記事】
Shopifyの有料テーマAtlanticを実際に使ってみた感想を読む >>

まずは 管理画面 > オンラインストア > テーマ を選択します。

shopify Instagram feed

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

shopify Instagram feed

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

shopify Instagram feed

「Instafeed App」を選択して追加します。

shopify Instagram feed

セクションの右側の「・・・」(6つの点)をドラックして動かすことで、フィードの表示位置を変えることができます。

shopify Instagram feed

「Instafeed App」をクリックすると設定画面が開きます。ここでも表示レイアウトの調整ができます。

shopify Instagram feed

「Feed Width」でコンテンツ幅を調整できます。デフォルトは100%(インナーの全幅)です。

たとえば、70%にすると左右の余白が広がります。

shopify Instagram feed

Custom Code(optional)はhtmlを記述できます。

shopify Instagram feed

入力した内容はフィードのタイトル部分に表示されます。

shopify Instagram feed

クラス名をあてることができるので、cssで調整が可能です。

複雑なカスタマイズをしたい場合はおすすめです。

shopify Instagram feed

ちなみに、ストアフロントへの表示方法は公式ヘルプが動画付きで解説しています。アプリの管理画面のページ下部にある「ADD INSTAFEED TO YOUR HOMEPAGE」をクリックすると、

shopify Instagram feed

動画が起動して、設定方法をレクチャーしてくれます。

shopify Instagram feed

アプリ公式サイトの以下のページにも解説があります。

表示を確認する

管理画面 > オンラインストア > プレビュー でストアフロントでの表示を確認します。

意図した場所に表示されていれば完了です。

インスタグラムのパスワードを変えてしまったら?

インスタグラムのログインパスワードを変えると、Shopifyとの連携が切れます。

このパターンは実際に経験がありまして、クライアントから連絡が来ました。「インスタのパスワードを変えたらフィードが表示されなくなった」と。

対処方法はシンプルで、もう一度アカウント連携をすればOKです。

初期設定時と同じように「Connect an Instagram Account」をクリックして進めます。

私が行ったときは、以前の設定もちゃんと引き継いでくれました。

shopify Instagram feed

スマホとPCで表示カラム数を変えたい

PC時は4カラム、スマホ時は2カラムのように表示を変えたい時があると思います。

管理画面からノーコードで変えるには、有料プランを契約する必要があります。

ただ、

無料でなんとかしたい!

という場合はcssを編集することで可能です。

以下は375px時の4カラム表示です。1つの画像は80pxくらい。小さくて見にくいですね。iPhone SEクラスの画面サイズ(320px)だと相当小さくなります。

shopify Instagram feed

widthとpadding-topは25%で、画面幅の1/4になっていることが分かります。また当該クラス名は「instafeed-container」です。

shopify Instagram feed

2カラムにしたかったら、widthとpadding-topの数値を50%に近づければOKです。ちなみに「! important」を付けないとスタイルが当たりません。

shopify Instagram feed

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のリファレンスは基本的には英語です。自己学習をする際には言語の壁にブチあたります。不安な思いを抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。

  • オンラインスクールで学ぶ

TechAcademy(テックアカデミー)に、専属のパーソナルメンターがマンツーマンでサポートする「Shopifyコース」が誕生しました。
安い買い物ではないので、TechAcdemyの講座を無料体験で試してみるのがおすすめです。

  • 本で学ぶ

商品売るならShopify 世界標準かつ最先端のECサイト構築入門」がおすすめです。shopifyとは?という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
実際に読んだ私のレビューはこちらの記事をご覧ください。

  • 動画で学ぶ

Udemyの「Shopifyでクライアントのストアを作る人のための講座 」がオススメです! 私も買いましたがShopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
実際に購入した私のレビューはこちらの記事をご覧ください。

【Udemyがセール中(2021年7月30日(金)まで)】
対象コースが ¥1,730から。
2021年7月30日(金)まで!【Udemy】セール中のShopifyの講座一覧を見る >>

まとめ

この記事のポイントをまとめます。

Shopifyで作ったサイトにインスタのフィードを掲載する手順は以下です。

・アプリ「Instafeed ‑ Instagram Feed」をインストールする
・管理画面からの操作でストアフロントに表示させる(ノーコード)

アプリのダウンロード先と公式のヘルプは以下です。

こちらの記事のおすすめです。

【関連記事はこちら】
Shopifyでの商品登録のやり方【分かりやすく解説します】を読む >>

【関連記事はこちら】
Shopifyの有料テーマを紹介します【実際に案件で使用】を読む >>

今回の記事はここまでです。

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。