商品ページのメイン画像が最初のバリエーション画像になってしまう問題を解決するカスタマイズ

はじめに DawnをはじめShopifyテーマの多くは、商品ページのメイン画像とバリエーション画像を登録した場合、最初のバリエーション画像が大きく表示され、商品カードのサムネイル用としての用途になってしまいます。 これは商品ページに遷移した際、最初のバリエーションが選択状態になるからであり、前提としてバグやエラーではなく「仕様」である事を念頭に置いてください。 ただし、モデル画像やカラーバリエーション画像のある商品など、どうしても「メイン画像を最初に表示させたい」というショップも多く、Shopifyコミュニティでも同様のよく質問を見かけます。 基本的には画像ギャラリー出力用のコードを編集するだけでもいけるのですが、バリエーション選択時にメイン画像が切り替わるイベントを残しつつ安全に実装するには、バリエーションピッカーや購入ボタンに対し未選択時の機能を持たせることで、さらに使い勝手が良くなります。 バリエーションピッカー：未選択時を採用（初期値） 購入ボタン：未選択時は操作不可 本件ではDawn（v15.3.0）テーマをベースにご紹介しますが、他テーマをご利用の場合、ご利用のテーマ構造を理解した上で、Liquidコードの知識や編集スキルがある程度必要です。 編集ファイル Dawn（v15.3.0）の場合は、以下の3ファイルを編集します。 snippets/product-media-gallery.liquid snippets/product-variant-options.liquid snippets/buy-buttons.liquid ※同じDawnでもバージョンによって構造が異なりますのでご注意ください。 product-media-gallery.liquid ファイルを開き、64-65行目あたりにあるコードを以下のように編集します。 {%- if product.selected_or_first_available_variant.featured_media != null -%} {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%} ↓ 編集 {%- liquid assign featured_media = product.featured_media assign featured_media_id = featured_media.id if product.selected_variant assign featured_media = product.selected_variant.featured_media assign featured_media_id = product.selected_variant.id endif -%} {%- if featured_media != null -%} 最初のバリエーション画像がメインとして出力される原因はこの「selected_or_first_available_variant」にあり、「選択中または最初に利用可能なバリエーション」が「featured_media」として定義されているからです。 この「featured_media」を「product.featured_media」と指定し、バリエーション選択時は「product.selected_variant.featured_media」になるよう分岐させて定義します。 「featured_media_id」は次のメイン画像以外の分岐出力に使いますので、一緒に定義しています。 続いて97行目あたりにあるコードを以下のように編集します。 {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} ↓ 編集 {%- unless media.id == featured_media_id -%} unlsee分岐で「featured_media」以外を出力させており、メイン画像と併せて編集します。 255行目あたりにあるコードも同様に編集します。 {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} ↓ 編集 {%- unless media.id == featured_media_id -%} 最後に293-296行目辺りのコードを編集します。 {% if media == product.selected_or_first_available_variant.featured_media or product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} ↓ 編集 {% if media == featured_media or featured_media == null and forloop.index == 1 %} 最終的にはこのファイルから「selected_or_first_available_variant」が無くなっていればOKです。 他テーマの場合もこちらを参考に編集してみてください。 product-variant-options.liquid 次にバリエーションピッカーに未選択時の状態を設けます。 まずは86行目あたりのラジオボタンの「checked」を付与する分岐を以下の様に編集します。 {% if value.selected %} checked {% endif %} ↓ 編集 {% if value.selected and product.selected_variant %} checked {% endif %} 最初のバリエーションが選択済みになるのを防ぐために、バリエーション選択時以外はラジオボタンに「checked」が入らないようにします。 続いて99-112行目あたりにあるセレクトボックスの タグを以下の様に編集します。 ↓ 編集 {% if forloop.first %} {{ '選択してください' }} {% endif %} <option id="{{ input_id }}" value="{{ value | escape }}" {% if value.selected and product.selected_variant %} selected="selected" {% endif %} {% if swatch_value and picker_type == 'swatch_dropdown' %} data-option-swatch-value="{{ swatch_value }}" {% if swatch_focal_point %} data-option-swatch-focal-point="{{ swatch_focal_point }}" {% endif %} {% endif %} {{ input_dataset }} > 配列の最初に選択不可の「選択してください」の タグを設けます。多言語展開しているショップは、テキストを言語ファイルに指定するのをお勧めします。 buy-buttons.liquid 最後はバリエーション未選択時に購入ボタンを操作不可にします。 64-72行目あたりのLiquidコードにバリエーション未選択時の状態を定義します。 {%- liquid assign check_against_inventory = true if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue' assign check_against_inventory = false endif if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory assign quantity_rule_soldout = true endif -%} ↓ 編集 {%- liquid assign check_against_inventory = true if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue' assign check_against_inventory = false endif if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory assign quantity_rule_soldout = true endif assign unselected = false if product.selected_variant == null and product.has_only_default_variant == false assign unselected = true endif -%} バリエーション未選択時とバリエーションが無い場合は「unselected」が「true」になるよう定義を追加しました。 続いて、78-83行目あたりにある購入ボタンの「disabled」属性を分岐出力するコードを編集します。 {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout or product.selected_or_first_available_variant == null %} disabled {% endif %} ↓ 編集 {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout or product.selected_or_first_available_variant == null or unselected %} disabled {% endif %} デフォルト状態ではバリエーションが「利用不可」「在庫切れ」の場合、商品の「選択中または最初に利用可能なバリエーションが無い」場合に「disabled」属性が付与されて購入ボタンが操作不可になりますが、それらに加えて先ほど定義した「unselected」を加えます。 カスタマイズは以上です。 「selected_or_first_available_variant」が不要になったことで、もっと編集しても良いかもしれませんが、これだけで充分に機能しますので必要最低限の編集としております。 Dawnテーマ以外の場合は、Javascriptの編集が必要だったり、ファイル構造が異なるので「どのファイルを編集したら良いか」すらわからないケースがあるかと思います。 カスタマイズ後は充分に検証してください。

カートにアイテムが追加されました

商品ページのメイン画像が最初のバリエーション画像になってしまう問題を解決するカスタマイズ

メイン画像の初期値をバリエーション画像にしたくない場合のカスタマイズ方法

2025年7月

2025年8月