【Shopify】商品の色見本を作成する方法（Dawnテーマ）

商品の色を表示することで、商品を見に来た人が使いやすいストアを作っていきます。

 

メタフィールドの設定

はじめに、メタフィールドの設定をしていきます。ストアの管理画面から設定をクリックします。

メタフィールドをクリック後、バリエーションを選択します。

「定義を追加」を押します。

 

それぞれ、次のように設定していきます。

保存をしたら、メタフィールドの設定は以上です。次に商品を追加していきます。

商品を追加する

管理画面に戻り商品を追加します。

タイトル、メディア、価格等を設定します。商品のステータスをアクティブにすることを忘れないようにしてください。

オプションで色の設定を追加し、数量を設定した後、一度保存をします。

保存をしたら、バリエーションの部分にある編集をクリックします。

下にスクロールすると、メタフィールドの表示があると思うので、それぞれの色を設定します。

色の設定ができたら、一度ストアを確認してみましょう。商品管理画面から「オンラインストアでプレビュー」をクリックすると確認できます。

設定した色が表示されていません。表示させるためには、コードを編集する必要があります。

コードを編集する

コードの編集していきます。コードの編集に慣れていない方は複製を押してバックアップを取ることをおすすめします。

Sections > main-product.liquidを開きます。

検索（Windowsはctrl+f, Macはcommand+f）で「variant_picker」と入力すると、199行目に{%- when ‘variant_picker’ -%}というコードが見つかります。その下の213行目にある次のコードを編集していきます。

<label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
　　　　{{ value }}
</label>

 

試しに、以下のように{{ value }}の後にHelloを追加してみます。

<label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
　　　　{{ value }}Hello
</label>

商品画面を見ると、「黒Hello」と変更されました。

商品の色見本を作成するために、以下のコードを追加します。

{% if product.variants[forloop.index0].metafields.color.value and option.name == '色' %}
  <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}" style="background-color:       
    {{product.variants[forloop.index0].metafields.color.value}}">
    &nbsp;
  </label>
{% else %}
  <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
    {{ value }}
  </label>
{% endif %}

 

色が追加されました。お疲れ様でした。