AMAZONや楽天市場への商品リンクブロックの作成方法

おおよその流れ

出来上がりイメージ

１，商品テンプレートを新たに作る

２，商品登録時にURLリンクを入力するためメタフィールドを登録

３，商品情報セクションに外部リンクボタンを作成

４，確認

商品テンプレートを新たに作る

まずは、すべての商品にこの外部リンクボタンが表示してしまわないように、商品追加の際に右下のテーマテンプレートで当該テンプレートを選択した時のみ表示されるようにします。

商品のテーマを新たに作るには、

templatesフォルダ内の「product.json」ファイルを複製し、任意の名前をつける。ここでは「product.affiliate-link.json」とする。

sectionsフォルダ内の「main-product.liquid」ファイルを複製し、任意の名前をつける。ここでは「c_affiliate-link-product.liquid」とする。

templatesフォルダ内の「product.affiliate-link.json」ファイルの上から4行目の"type"コードを以下のように置き換える。

"type": "c_affiliate-link-product",

商品登録時にURLリンクを入力するためメタフィールドを登録

メタフィールドを定義

管理画面左下の「設定」⇒「カスタムデータ」⇒「商品」から商品のメタフィールドを定義します。

商品登録画面で楽天市場のリンクを貼る場所を作るために、ここでは名前に「rakuten-link」と入力し、ネームスペースとキーが自動で「custom.rakuten_link」になります。「URL」⇒「1つの値」を選択。

同様に、AMAZONのリンクを春場所を作るため「custom.amazon_link」の商品メタフィールドを作成してください。

商品メタフィールドが設定されたかの確認

メタフィールド作成後、商品登録ページを確認すると、以下のような表記になります。ここにURLリンクを貼り付けることで、各商品ページにURLリンク付きの遷移ボタンを作成します。

商品情報セクションに外部リンクボタンを作成

コードの貼り付け（Schema）

sectionsフォルダ内の「c_affiliate-link-product.liquid」ファイルのブロックに以下を記載。

{% schema %}
    {
      "name": "t:sections.main-product.name",
      "tag": "section",
      "class": "section",
      "blocks": [
        {
          "type": "@app"
        },
        {
          "type": "affiliate-link",
          "name": "アフィリエイトリンク",
          "limit": 1
        },

コードの貼り付け（Liquid）

Liquidは{%- for block in section.blocks -%}の中にwhen文で追加する。（「section.blocks」で検索するとすぐ見つかる）

{%- when 'affiliate-link' -%}の下は、以下のコードを記載。

コードの内容は

・商品ページの先ほど作ったメタフィールド欄にURLの入力があれば表示されます。

・buttonタグで設置。クリックすると別タブで開きます。

{%- when 'affiliate-link' -%}
      >div class="affiliate-link"<
        {% if product.metafields.custom.amazon_link != blank %}
          >button class="affiliate-button_amazon" onclick="window.open('{{ product.metafields.custom.amazon_link }}')"<AMAZONで購入する>/button<
        {% endif  %}
        {% if product.metafields.custom.rakuten_link != blank %}
          >button class="affiliate-button_rakuten" onclick="window.open('{{ product.metafields.custom.rakuten_link }}')"<楽天市場で購入する>/button<
        {% endif  %}
      >/div<
      >style<
        .c_affiliate-link-product .affiliate-button_amazon,
        .c_affiliate-link-product .affiliate-button_rakuten  {
          width: 100%;
          max-width: 44rem;
          margin: 0 auto;
          letter-spacing: .1rem;
          padding-top: 10px;
          padding-bottom: 10px;
          margin-bottom: 10px;
          border: none;
          font-weight: bold;
          border-radius: 100px;
        }
        .c_affiliate-link-product .affiliate-button_rakuten {
          background-color: #BF0100;
          color: #fff;
        }
        .c_affiliate-link-product .affiliate-button_amazon {
          background-color: #FFA41D;
          color: #0F1111;
        }
        .c_affiliate-link-product button:hover {
          cursor: pointer;
        }
      >/style<

cssはフォルダを分けて記載しても問題ありません。

確認

商品登録ページのメタフィールド欄にURLを記載、ページ右下のテーマテンプレートから「affiliate-link」を選び選択。カスタマイズ画面の商品ページから商品情報のブロックを追加し、ボタンが表示されていることを確認したら、ボタンクリックで指定のURLページが新しいタブで開くかを確認。最後に、商品登録ページのメタフィールド欄のURLを削除するとボタンが表示されなくなるかの確認もし、終了。

最後に

今回は説明を省きましたが、「product.affiliate-link.json」内の表記を変更することで、初期状態から作成したブロクを表記させておく設定も可能です。クライアントさんによっては、タイトル部分やバリエーション部分も動的にするとより使いやすくなると思います。

今回の記事、Shopifyサイト作成の参考になりましたでしょうか？もしよろしければ、Xでのシェアよろしくお願いいたします。

また、お仕事のご依頼もお待ちしております❗