ShopifyテーマのLiquidファイルを少しだけ調整することで、ボタン型オプションを画像や色付きで表示させる方法について紹介します。
Shopifyの商品ページでは、1商品につき最大3つまでオプション（バリエーション）を設定することができます。
たとえば「カラー」「サイズ」「素材」など、購入時に選んでもらいたい要素をユーザーに提示できる仕組みです。基本的にはプルダウン形式かボタン形式の表示が選べますが、実際のユーザー体験を考えると、より直感的に選べる「ボタン形式＋色や画像」での表示が理想的です。
特にカラーオプションでは、単なる文字だけで「ブラック」「ホワイト」と表示するよりも、それぞれの色そのものを見せることで、選び間違いの防止にもなり、見た目の印象もアップします。
また、画像を使えば、柄や素材感の違いもひと目で伝えることができるため、アパレルや雑貨など幅広いジャンルで活用されています。
ただし、Shopifyの標準機能だけでは「色」や「画像」での表現には少し工夫が必要です。今回は、テーマのLiquidファイルを少しだけ調整することで、ボタン型オプションを画像や色付きで表示させる方法について、実例を交えてご紹介していきます。
オプションに画像や色の登録は可能？
さて、「そもそもShopifyの商品オプションに画像や色を登録できるのか？」という疑問を持つ方も多いかもしれません。結論から言うと、Shopifyのデフォルト機能では、バリエーション（＝組み合わせたオプション）ごとに画像を登録することは可能ですが、個別のオプション項目そのものに画像や色を直接紐づけることはできません。
一方で、「色付きのボタン表示」や「オプション選択肢に画像を表示したい」といったニーズに対しては、専用のアプリを使う方法が簡単かつ実用的です。コードに不慣れな場合や、運用面での拡張性を考えるなら、こうしたアプリの導入がベストな選択となることもあります。
どのLiquidファイルをカスタマイズすればいいの？
Shopifyでオプション表示をカスタマイズするには、まず該当のLiquidファイルを特定する必要があります。
※今回はテーマ「Sense」を例に説明しますが、テーマによってファイル名が異なることがある点はご注意ください。
特定のためには、商品ページにおけるオプション選択の構造と知る必要があります。
sections/main-product.liquid
商品ページのメインテンプレートです。この中でオプション表示ブロックを切り替えており、以下の記述がポイントになります。
{%- when 'variant_picker' -%}
{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}ブロック設定で「variant_picker」が有効なら「product-variant-picker」スニペットが呼び出され(render)ます。
snippets/product-variant-picker.liquid
ここでは「プルダウン形式」か「ボタン形式」かといったピッカータイプを制御し、実際の選択肢部分はさらに別ファイルをレンダリングします。
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}snippets/product-variant-options.liquid
実際にオプションの一覧（ボタンやプルダウン）のHTMLを生成しているファイルです。
このファイルを編集すれば、色付きボタンや画像付きボタンへのカスタマイズが可能になります。
色or画像表示のカスタマイズ
では、本題である、色or画像表示のカスタマイズについて見てみましょう。
※今回は色表示のみサンプルコードを交えて紹介します。
「product-variant-options.liquid」の中で、まずはこちらのラベル表示部分を探します。
<label for="{{ input_id }}">
{{ value }}
{{ label_unavailable }}
</label>ここで{{ value }}が「ブラック」「ホワイト」などのオプション名をそのまま出力しています。
これを「カラー」オプションだけ色つきスウォッチ、あるいは画像表示に切り替えるには、以下のように条件分岐を追加します。
<label for="{{ input_id }}">
{% if option.name == 'カラー' %}
{% if value == 'ブラック' %}
{% assign swatch_color = '#000000' %}
{% elsif value == 'ホワイト' %}
{% assign swatch_color = '#ffffff' %}
{% else %}
{% assign swatch_color = '#999999' %}
{% endif %}
<span
class="color-swatch"
style="
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ddd;
border-radius: 50%;
vertical-align: middle;
background-color: {{ swatch_color }};
"
aria-hidden="true"
></span>
<span class="visually-hidden">{{ value }}</span>
{% else %}
<span class="text-swatch">{{ value }}</span>
{% endif %}
{{ label_unavailable }}
</label>簡単に説明すると、
①{% if option.name == 'カラー' %}：オプション名が「カラー」である場合
②{% if value == 'ブラック' %}：値がブラックならswatch_colorという変数に、色コード「#00000」を格納し、
③{% if value == 'ホワイト' %}：値がブラックならswatch_colorという変数に、色コード「#ffffff」を格納する。
③どちらにも当てはまらない場合は、swatch_colorという変数に、色コード「#999999」を格納する。
④<span class="color-swatch" style="(中略)で、色表示の円形を表示する。
になります。
いかがでしょうか。ぜひ活用してみてください。
