InstagramアイコンをShopifyストアに表示する方法

この記事ではInstagram(インスタグラム)のフィードの埋め込みではなく、Instagramのアイコン & リンクをストアに表示する方法を紹介しています。

Instagramアカウントにフッターなどから誘導したい際におすすめです。
また、この記事で紹介する手動設定の方法と、弊社が提供するShopifyアプリを利用した2つの方法があります。

Instagramアイコンの用意が面倒な方や、その他のSNSアイコンも設定したい方はぜひShopifyアプリの利用をご検討下さい。

Pafit Social Media Icons| Shopify アプリストア
LINE公式アカウントのチャットでお問い合わせ対応 & InstagramやTwitterのSNSリンクをストアに設置!

Instagramアイコンの埋め込み

Instagramのロゴパックをダウンロード

InstagramのアイコンをShopifyストアに表示する前に、公式サイトからロゴパックをダウンロードする必要があります。

Instagramのロゴをアップロード

上記URLからロゴパックのダウンロード後、pngの画像ファイルをShopifyにアップロードします。
アップロードは、「設定」→「ファイル」→「ファイルをアップロード」から行います。

Shopify_settings_instagram1

以下のように、リンクコピーアイコンをクリックして、アップロードしたファイルのURLをコピーします。

Shopify_settings_instagram2

Instagramアイコンをテーマに追加

また、Instagramアイコンのコードを追加するために「カスタマイズされたLiquid」を任意の場所に追加します。

LINE_Friend_Add_4

以下のコードを編集し、ペーストします。
黒太字のInstagramのプロフィールURLと、アップロードした画像ファイルのURLはご自身のものに置き換えて下さい。
以下のコードでは大きさは36pxにしつつ、中央に表示されます。

<div style="text-align: center">
  <a href="InstagramのプロフィールURL">
    <img src="アップロードした画像ファイルのURL" width="36px">
  </a>
</div>

以下は完成形のコードの例になります。

<div style="text-align: center">
  <a href="https://www.instagram.com/pafit_official/">
    <img src="https://cdn.shopify.com/s/files/other_URL" width="36px">
  </a>
</div>

以下のように表示されることを確認します。

instaragm_icon_shopify

以上でインスタグラムアイコンの設定は完了となります。

Pafit Social Media Iconsについて

Pafit株式会社ではShopifyストアにLINE公式アカウントなどのチャットサービス、SNSへのリンクを設置するためのアプリを提供しています。
フリートライアルを提供していますので、ぜひお試し下さい。

Pafit Social Media Iconsのメリット

  1. SNSのチャットでカスタマーサポートを実現
  2. ストア訪問者様が使い慣れたSNSでお問い合わせ可能
  3. SNSアイコンとリンクをノーコードで設置可能
Pafit Social Media Icons| Shopify アプリストア
LINE公式アカウントのチャットでお問い合わせ対応 & InstagramやTwitterのSNSリンクをストアに設置!
Instagram
シェアする
村馬賢介

Pafit株式会社の代表取締役。
GoogleアナリティクスやBigQueryを利用したデータ分析の経験をもとにShopifyアプリPafit Tag Managementを開発中です。

村馬賢介をフォローする
Pafit株式会社(パフィット)
タイトルとURLをコピーしました