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

ちなみに、設定方法は公式サイトにもヘルプがあります。

ただ英語なのでわかりにくいです。

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

「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

各設定項目の説明

管理画面は、

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

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

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

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

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

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

shopify Instagram feed

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

shopify Instagram feed

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

shopify Instagram feed

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

shopify Instagram feed

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

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

shopify Instagram feed

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

shopify Instagram feed

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

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

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

FEED TITLEなし
POST SPACING10%
ON POST CLICKOpen Instagram
NUMBER OF ROWS2
NUMBER OF COLUMNS4
shopify Instagram feed

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

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

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で調整します。

Shopifyではインスタグラムショッピングも連携できる

本記事ではInstagramのフィードを表示させる方法を解説しましたが、ShopifyではInstagramショッピングを実装することも可能です。

Shopifyでのサイト構築を学ぶのにオススメな教材

私も買いましたが「shopifyとは?」という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。

私も買いましたが、Shopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。

shopifyは日本語のリファレンスが少なく、独学しようとすると大変です。

ネットで調べたり、Shopifyサポートに直接質問したりして学ぶこともできますが、知識にムラが出たり、そもそも正しい情報でなかったり、というリスクもあります。

今回紹介したのは、両方とも日本語の教材です。

内容も初心者向けなので、

これからshopifyに関わってみたい!

shopify一通り分かっているけれど、抜けてる部分がないか確認したい!

といった方にはとてもおすすめです。

Shopify×イスタグラム活用の参考書

私が携わったShopify案件の中には、集客がほぼInstagram(インスタグラム)経由というサイトがあります。

  • もともとある程度のフォロワー()がおり
  • かつ自社でプロダクトを持っていて
  • 正直サイトにはカート機能だけであればいい

というパターンのサイトです。

とはいえ、Shopify側で最低限、ブランドコンセプトやプロフィールページは作り込みます。しかし、コンテンツマーケティングのようにページを増やしたりはしません。

インスタグラムをはじめとしたSNSを活用しての集客は、今後勢いを増します。

SEO一本では立ち行かない状況というのもありますが、フォロワーは基本的にはそのブランドのファンであり、CVRが高いという理由もあります。

SNSを活用したブランディングは、手元に一冊ノウハウ本を持っておくと安心です。

まとめ

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

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

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

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

Shopify関連の記事はこちらもおすすめです。

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

この記事を書いた人

hiro

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

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