DAWN商品ページにバリエーションが設定されていた場合の商品画像初期値について

[nagisane]

現在、DAWNのテンプレートを使用してショップを制作中なのですが、商品のバリエーション登録を行って、バリエーションごとに画像を設定すると、実際の商品ページを開いた時に、商品のメディア欄に登録したメイン画像ではなく、バリエーションの一番上の画像が表示されてしまいます。

商品ページを開いた時の商品画像初期値は、商品のメイン画像にして、バリエーションを選択すると、バリエーション画像に切り替わるようにしたいです。

※バリエーション選択欄については、ドロップダウン式を採用しており、当方でliquidをいじって初期値が「選択してください」になるようにしました。

お詳しい方がいらっしゃいましたら、是非ご教授願います。

[Jizo_Inagaki]

https://community.shopify.com/c/shopify-%E3%83%86%E3%83%BC%E3%83%9E/%E3%83%86%E3%83%BC%E3%83%9E-dawn...

上記の投稿が類似の内容かと思いますが、違う場合は申し訳ありません。

[Qcoltd · Accepted solution]

Dawnのバージョンにもよるのですが、

もし、9.0.0をお使いであれば、

ストア管理画面 > オンラインストア > テーマ > コード編集

にて、

スニペット(snippets) > product-media-gallery.liquid

を下記のように編集します。

※十分に検証しておりませんので、不具合がある可能性もあります。

68行目付近

        {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}

↓

        {%- assign featured_media = product.featured_media -%}
        {%- if product.selected_variant -%}
          {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
        {%- endif -%}

92行目付近

        {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}

 ↓

        {%- assign exclude_media_id = product.featured_media.id -%}
        {%- if product.selected_variant -%}
          {%- assign exclude_media_id = product.selected_or_first_available_variant.featured_media.id -%}
        {%- endif -%}
        {%- unless media.id == exclude_media_id -%}

お使いのDawnのバージョンによっては、

上記がそのまま適用できない可能性もあります。

その場合はバージョンをお教えいただければ検証できるかもしれません。

ご参考まで。

(キュー田辺) 

[nagisane]

詳しいご回答ありがとうございます！

早速コードを書き換えてみたところ、理想通りの表示になりました！

今のところとくに不具合もなさそうです。

本当にありがとうございました。

[nagisane]

詳しいご回答ありがとうございます！

早速コードを書き換えてみたところ、理想通りの表示になったと思ったのですが、後々よく確認してみると、バリエーションのない商品のメイン画像(大きい画像)が表示されなかったり、バリエーションのある商品に関してはサムネイルに1枚目の画像が2個続けて表示される感じになってしまいました。

こちらについても解決策わかればご教授いただけますと幸いです。

[nagisane]

度々失礼いたします。

教えていただいたコードを元にいろいろ書き換えて試していたら、ひとまず表面上は、理想通りの表示になったようなので、ご報告致します。

※素人のカスタマイズなので、おかしな部分があるかもしれません。

↓68行目付近の教えていただいたコードを下記のように変更

{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
        {%- if product.selected_variant -%}
        {%- assign featured_media = product.featured_media -%}
        {%- endif -%}

・92行目付近は初期コードのまま使用

・232行目付近から下記のように変更

{%- for media in product.media -%}
          {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
            {%- liquid
              capture media_index
                if media.media_type == 'model'
                  increment model_index
                elsif media.media_type == 'video' or media.media_type == 'external_video'
                  increment video_index
                elsif media.media_type == 'image'
                  increment image_index
                endif
              endcapture
              assign media_index = media_index | plus: 1
            -%}
            <li
              id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
              class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}"
              data-target="{{ section.id }}-{{ media.id }}"
              data-media-position="{{ media_index }}"
            >
              {%- if media.media_type == 'model' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-3d-model' -%}
                </span>
              {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-play' -%}
                </span>
              {%- endif -%}
              {%- capture thumbnail_id -%}
                Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
              {%- endcapture -%}
              <button
                class="thumbnail global-media-settings global-media-settings--no-shadow"
                aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
                {% if media == product.selected_or_first_available_variant.featured_media
                  or product.selected_or_first_available_variant.featured_media == null
                  and forloop.index == 1
                %}
                  aria-current="true"
                {% endif %}
                aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
                aria-describedby="{{ thumbnail_id }}"
              >
                {{ media.preview_image | image_url: width: 416 | image_tag:
                  loading: 'lazy',
                  sizes: sizes,
                  widths: '54, 74, 104, 162, 208, 324, 416',
                  id: thumbnail_id,
                  alt: media.alt | escape
                }}
              </button>
            </li>
          {%- endunless -%}
        {%- endfor -%}

↓

{%- if product.selected_variant -%}
        {%- for media in product.media offset:1 -%}          
          {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
            {%- liquid
              capture media_index
                if media.media_type == 'model'
                  increment model_index
                elsif media.media_type == 'video' or media.media_type == 'external_video'
                  increment video_index
                elsif media.media_type == 'image'
                  increment image_index
                endif
              endcapture
              assign media_index = media_index | plus: 1
            -%}
            <li
              id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
              class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}"
              data-target="{{ section.id }}-{{ media.id }}"
              data-media-position="{{ media_index }}"
            >
              {%- if media.media_type == 'model' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-3d-model' -%}
                </span>
              {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-play' -%}
                </span>
              {%- endif -%}
              {%- capture thumbnail_id -%}
                Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
              {%- endcapture -%}
              <button
                class="thumbnail global-media-settings global-media-settings--no-shadow"
                aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
                {% if media == product.selected_or_first_available_variant.featured_media
                  or product.selected_or_first_available_variant.featured_media == null
                  and forloop.index == 1
                %}
                  aria-current="true"
                {% endif %}
                aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
                aria-describedby="{{ thumbnail_id }}"
              >
                {{ media.preview_image | image_url: width: 416 | image_tag:
                  loading: 'lazy',
                  sizes: sizes,
                  widths: '54, 74, 104, 162, 208, 324, 416',
                  id: thumbnail_id,
                  alt: media.alt | escape
                }}
              </button>
            </li>
          {%- endunless -%}
        {%- endfor -%}

※バージョンはDawn 8.0.1でした。

改めて、この度はご回答いただきありがとうございました！