商品一覧ページに個別に商品説明文を表示する方法【DAWN】

Shopifyのテーマ「DAWN」で、商品一覧ページの商品名の下に独自の説明文を追加する方法を解説します。商品管理の説明文を使うのではなく、専用の説明文を追加します。

管理画面にログインし、[設定] > [テーマ] に移動します。

[商品]に移動し、「定義を追加する」をクリックします。

以下のように情報を入力します

名前：この入力欄の名前を任意で決定します（今回は商品一覧の説明文にします）

ネームスペースとキー：任意の英単語（今回はintroductionにします）

説明：商品一覧ページの商品名の下の独自の説明文、など今回登録する情報を分かりやすく入力しておく（入力は必須ではありません）

タイプ→単一行のテキスト

入力したら「保存」をクリックします。

[商品管理]から商品情報を確認すると、[メタフィールド]という項目に先ほど作成した入力欄が表示されているはずです。こちらに説明文を入力します。

管理画面の[オンラインストア] > [テーマ] に移動し、「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

「スニペット」フォルダ内のcard-product.liquidファイルを選択します。

該当のコードを、以下のように変更します。

変更前：

            <a
              href="{{ card_product.url }}"
              id="CardLink-{{ section_id }}-{{ card_product.id }}"
              class="full-unstyled-link"
              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
            >
              {{ card_product.title | escape }}
             
            </a>
          </h3>
        
          <div class="card-information">
            {%- if show_vendor -%}

変更後：

            <a
              href="{{ card_product.url }}"
              id="CardLink-{{ section_id }}-{{ card_product.id }}"
              class="full-unstyled-link"
              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
            >
              {{ card_product.title | escape }}
             
            </a>
          </h3>
          <p>{{ card_product.metafields.custom.introduction }}</p> //この行を挿入
          <div class="card-information">
            {%- if show_vendor -%}

「introduction」の部分は、「ネームスペースとキー」で設定した英単語を入力してください。

最後に「保存」をクリックして完了です。