全世界で流行しているInstagramとshopifyを連携させることで更にshopifyサイトを魅力的に見せましょう。
今回紹介するshopify appを使えば、簡単にInstagram連携が可能になりますよ。
概要
・アプリ名称 : Instagram Feed & Slider Pro
・料金 : 月額$4.99（5日間の無料試用期間あり）
・対応言語 : 英語（サイトへの表示内容は日本語化が可能です）
・URL：https://apps.shopify.com/instagram-feed-pro?auth=1&locale=ja
機能紹介
・Instagramで投稿した写真をshopifyのオンラインストアのページに表示できます。
・オンラインストアのページをカスタムすることができます。
・FacebookからログインすることでInstagramで投稿した写真の”いいね””コメント”が表示ができます。
・オンラインストアに表示してるInstagramの投稿写真から直接Instagramの投稿画面に移動が可能です。
設定方法
１ ログイン方法
・Instagramでのログインが必須になります。
（Facebookでのログインは”いいね”や”コメント”を表示させたい方のみ）
ログインするだけで接続可能なので特に難しい手順はありません。
２ オンラインストアにインスタグラムの写真をインストール
右上の６つの項目のうち「Install Instractions」をクリックすると下の写真の画面になる。
①簡単インストール
1.インストールするページを選択する（HOMEなど）
2. 挿入する場所を選択する（「At Top」は画面の最上部、「At Bottom」は画面最下部）
3. 「INSTALL」を選択
②セクションインストール
セクションインストールをすると、Themeのカスタマイズ画面にセクションとして追加されるため、任意の場所に設定することができます。
1. 対象のThemeを選択
2. インストールしたいページを選択
3. 「INSTALL」を選択
③マニュアルインストール
liquidファイルを直接編集する方法です。
これは、記載のコードをコピーして表示したいファイルの指定箇所に挿入をしてください。
※自由度は高いですが、エンジニアなどの担当者に依頼するのがよいです。
このようにインスタグラムで投稿した写真がオンラインストアに掲載されます。
（下の写真は”At Bottom”でインストールした場合）
３ インストールした写真の見出しのカスタム
表示形式が「Grid」と「Slider」の２種類あります。
それを上から順に説明します。
（１）Grid
- Instagram Heading → タイトルのテキスト
- Heading Color → タイトルの色
- Font Size → タイトルの文字の大きさ
- Image border radius → カーソルを合わせたときに表示されるホバーの角丸サイズ
- Image hover effect → カーソルを合わせた場合の挙動（詳細を表示するなど）
- No of Rows → 写真の行数
- No of Columns → 写真の列数
- Gutter → 写真の横の幅
- Overlay color → カーソルを合わせた時の強調カラー
- Font color → カーソルを合わせた時に出てくるマークの色
- Overlay Opacity → カーソルを合わせた時の強調カラーの透明度
- On image click → 写真をクリックしたときの反応
- if you choose to open instagram post option → ”On image lick”で”Open Instagram post”を選択したときのリンク先の行き
方
（２）Slider
- Instagram Heading → タイトルのテキスト
- Heading Color → タイトルの色
- Font Size → タイトルの文字の大きさ
- Image border radius → カーソルを合わせたときに表示されるホバーの角丸サイズ
- Image hover effect → カーソルを合わせた場合の挙動（詳細を表示するなど）
- No of Image in a row in slider → 写真の行数
- Slider Autoplay → ”Enable”をチェックすると自動でスライドする
- Overlay color → カーソルを合わせた時の強調カラー
- Font color → カーソルを合わせた時に出てくるマークの色
- Overlay Opacity → カーソルを合わせた時の強調カラーの透明度
- On image click → 写真をクリックしたときの反応
- if you choose to open instagram post option → ”On image click”で”Open Instagram post”を選択したときのリンク先の行き先
操作説明は以上の３つの手順です。
最後に
このアプリをうまく利用する事で、オンラインストアの見栄えが良くなったり、使用されているInstagramのアカウントのリンクに直接移動できることによりフォロワーの獲得を狙えます。
shopifyとInstagramの連携をしたい場合は、このアプリを使ってみると良いでしょう。