カラースウォッチの実装（コピペOK）

投稿日 12月 14, 2022
更新日 1月 15, 2023
著者 spachill
カテゴリー liquid
カテゴリー shopify

通常、商品の登録ページで商品オプションに「カラー」でオプションに色を選択しても

上段の「リストボックス」だけが出力されて、カラースウォッチは出力されません。

今回は下段にあるような「カラースウォッチ」のリンク付きでの実装をしてきたいと思います。

どのテーマでも対応できるように編集していますので見ていただけたらと思います。

※商品が人であることについては画像のカラー分けが簡単だったという理由だけですので深くは触れないでください。笑

事前の商品登録

カラースウォッチの出力をするには、商品設計の段階から考えないといけません。

今回は「うし」という商品を登録してみたいと思います。

①まずは商品名に「うし」を登録

②商品のオプションに「color」のオプション名を入れて「オプション値」にそれぞれ英語で入力する。

③商品タグに「color-variant」を入力

④商品登録を一度すると、「バリエーション」が選択できるようになるので、画像挿入。

これで商品登録は完了です。

カラースウォッチの出力場所

商品ページを開いて「検証ツール」でHTMLに当てられてるクラス名などを確認します。

今回は、カートボタンの上に出力しようと思いますので、こちらをクラス名を探しました。

「product-form」こちらのクラス名のHTMLを探します。（Down以外のテーマは確認していませんので、テーマに応じて出力場所を確認ください）

管理画面に戻って「オンラインストア」→「テーマ」を選択

現在のテーマを選んでいるところに３つの点があるのでそちらを選択し「コードを編集」

テーマにもよるかもしれませんがセクションフォルダにある

「product.liquid」または「main-product.liquid」を開く

今回は「Down」での編集のため「main-product.liquid」を選択。

Windowsの人は「Ctrl ＋F」、Macの人は「Command ＋ F」を入力すると検索窓が出力されます。

そこに「product-form」を入力するとハイライトで文字が出てくるので、「form」タグの上側にカラースウォッチのコードを書いていきます。

liquidのコーディング

では結論から書きます。

コードは以下の通りのコードとなります。

            {%- for tag in product.tags -%}
 {%- if tag contains "color-variant" -%}
  {% for option in product.options_with_values %}
   {%- if option.name =="color" -%}
      {{ option.name }}
       <div class="color-swatch" style="display:flex ;gap:15px;margin-bottom:30px;">
        {%- for variant in product.variants -%}
         <a href="{{product.url}}?variant={{variant.id}}" style="display:flex ;flex-direction:column;justify-content:center;align-items: center;">
           <span style="background-color:{{variant.option1}};width:50px;height:50px;display:inline-block; border-radius:50%;"></span>{{variant.title}}
        </a>
        {%- endfor -%}
       </div><!-- /.color-swatch -->
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}
{%- endfor -%}

では、順番に説明していきます。

 {%- for tag in product.tags -%}

{%- endfor -%}

このコードでは商品のタグを全てループさせます。

 {%- if tag contains "color-variant" -%}

{%- endif -%}

このコードでは、「color-variant」というタグを持っているものだけをこれより下に出力してねというものになります。

 {% for option in product.options_with_values %}

{%- endfor -%}

このコードは商品のバリエーションを持っている情報をループさせてというコードになります。

{%- if option.name =="color" -%}

{%- endif -%}

こちらのコードでは、オプション名が「color」のものだけをこれより下に出力してねというものになります。

 {{ option.name }}
 <div class="color-swatch" style="display:flex ;gap:15px;margin-bottom:30px;">
   {%- for variant in product.variants -%}
      <a href="{{product.url}}?variant={{variant.id}}" style="display:flex ;flex-　　　direction:column;justify-content:center;align-items: center;"><span style="background-color:{{variant.option1}};width:50px;height:50px;display:inline-block; border-radius:50%;"></span>{{variant.title}} 
      </a>
 　{%- endfor -%}
 </div><!-- /.color-swatch -->