商品情報にスキップ
1 1
公開日:2024.11.18

Shopifyでメタフィールドを使って商品詳細に関連Instagramの簡易リンクを表示する設定例

Shopifyでメタフィールドを使って商品詳細に関連Instagramの簡易リンクを表示する設定例

用途

  • 商品情報管理・編集

実装方法

  • LIQUID
  • HTML/CSS
詳細を表示する

ShopifyにはInstagramと連携できるアプリが豊富に揃っているのでそれらのアプリを使って商品情報と連携するのが一番良いのですが、簡易的にリンクだけでも表示させたい場合の設定例です。

◆実装のメリット
・ビジュアル重視の購入検討者の満足度向上
・SNSとECの相乗効果で購買を促進

◆具体的な設定手順
①メタフィールド作成
InstagramのURL登録欄を設定

②商品情報セクションにカスタムLiquidブロックを追加
Instagramアイコンリンクを表示するためのコードを挿入

③Instagram連携
対象商品のメタフィールドにInstagramのURLを入力


メタフィールドを使って商品詳細に関連Instagramの簡易リンクを表示する設定例


【設定方法①】InstagramのURLを登録するための商品メタフィールドを作成


【(テーマRise/Dawnの場合)設定方法②】商品テンプレートの商品情報セクションにカスタマイズされたLiquidブロックを追加しコードを挿入(InstagramアイコンはテーマRise/Dawnに予め保存されているものを使用)


【使用方法】商品詳細画面のメタフィールドにInstagramのコンテンツURLを設定


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

商品テンプレートの商品情報セクションにカスタマイズされたLiquidブロックを追加しコードを挿入

関連ポスト

すべてのShopify TIPS