Css 如何在Shopify首秀主题中编码此产品图像布局？

我目前正在寻找改变我的产品页面上的图像布局。以下是当前布局：

以下是我需要将产品页面更改为的产品图像布局：

---

在首秀主题中我将如何做到这一点？我试过几种方法，但都没能奏效。我应该使用什么代码，应该在哪里插入？提前感谢。

章节/产品模板。液体

查找此代码

  <ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}">
    {% for media in product.media %}
      <li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js">
        <a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
           class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
           data-thumbnail-id="{{ section.id }}-{{ media.id }}"
           {% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

            {%- capture thumbnailAlt -%}
              {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                {{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
              {%- elsif media.media_type == 'model' -%}
                {{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
              {%- else -%}
                {{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
              {%- endif -%}
            {%- endcapture -%}

            <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
            {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
              <div class="product-single__thumbnail-badge">
                {% include 'icon-video-badge-full-color' %}
              </div>
            {%- endif -%}
            {%- if media.media_type == 'model' -%}
              <div class="product-single__thumbnail-badge">
                {% include 'icon-3d-badge-full-color' %}
              </div>
            {%- endif -%}
        </a>
      </li>
    {% endfor %}
  </ul>

{product.media%中的媒体为%1}


{%endfor%}

把它移到上面，下面

  <div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group>
      {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

{%-assign characterized_media=product.selected_或_first_available_variant.characterized_media |默认值：product.characterized_media-%}

添加一些额外的css来获得你想要的

 <div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group style="position: relative">
      {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
      
                    <ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}" data-slider-container style="flex-flow:column; position: absolute; max-width: 15%; top: 0; left: -15%">
              {% if enable_thumbnail_slides == true %}
                <div class="product-single__thumbnails-slider-track" data-slider-track>
              {% endif %}

              {% for media in product.media %}
                <li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} {% if enable_thumbnail_slides == true %} product-single__thumbnails-item-slide{% endif %} js"{% if enable_thumbnail_slides == true %} data-slider-slide-index="{{ forloop.index0 }}" data-slider-item{% endif %}>
                  <a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
                    class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                    data-thumbnail-id="{{ section.id }}-{{ media.id }}"
                    {% if enable_thumbnail_slides == true %} data-slider-item-link{% endif %}
                    {% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

                      {%- capture thumbnailAlt -%}
                        {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                          {{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                        {%- elsif media.media_type == 'model' -%}
                          {{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                        {%- else -%}
                          {{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                        {%- endif -%}
                      {%- endcapture -%}

                      <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
                      {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
                        <div class="product-single__thumbnail-badge">
                          {% include 'icon-video-badge-full-color' %}
                        </div>
                      {%- endif -%}
                      {%- if media.media_type == 'model' -%}
                        <div class="product-single__thumbnail-badge">
                          {% include 'icon-3d-badge-full-color' %}
                        </div>
                      {%- endif -%}
                  </a>
                </li>
              {% endfor %}

              {% if enable_thumbnail_slides == true %}
                </div>
              {% endif %}
            </ul>

      {%- for media in product.media -%}
        {% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
      {%- endfor -%}

      <noscript>
        {% capture product_image_size %}{{ height }}x{% endcapture %}
        <img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
      </noscript>

      {% assign first_3d_model = product.media | where: "media_type", "model" | first %}

      {%- if first_3d_model -%}
        <button
          aria-label="{{ 'products.product.view_in_space_label' | t }}"
          class="product-single__view-in-space"
          data-shopify-xr
          data-shopify-model3d-id="{{ first_3d_model.id }}"
          data-shopify-title="{{ product.title | escape }}"
          data-shopify-xr-hidden
        >
          {% include 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
        </button>
      {%- endif -%}


      {% if product.media.size > 1 %}
        {% if product.media.size > 4 %}
          {%- assign enable_thumbnail_slides = true -%}
        {% endif %}

        <div data-thumbnail-slider>
          <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} slider-active{% endif %}" data-slider>
            {% if enable_thumbnail_slides == true %}
              <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}" data-slider-button>
                {% include 'icon-chevron-left' %}
                <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
              </button>
            {% endif %}


            {% if enable_thumbnail_slides == true %}
              <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}" data-slider-button data-slider-button-next>
                {% include 'icon-chevron-right' %}
                <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
              </button>
            {% endif %}
          </div>
        </div>
      {% endif %}
    </div>

{%-assign characterized_media=product.selected_或_first_available_variant.characterized_media |默认值：product.characterized_media-%}

{%如果启用\u缩略图\u幻灯片==true%}
{%endif%}
{product.media%中的媒体为%1}


{%endfor%}
{%如果启用\u缩略图\u幻灯片==true%}
{%endif%}

{%-用于product.media-%}
{%包括“媒体”，媒体：媒体，特色媒体：特色媒体，高度：高度，启用图像缩放：启用图像缩放，图像缩放尺寸：产品图像缩放尺寸，图像缩放比例：产品图像缩放比例%}
{%-endfor-%}
{%capture-product\u-image\u-size%}{{height}}x{%endcapture%}
{%assign first_3d_model=product.media |其中：“media_type”，“model”| first%}
{%-if first_3d_model-%}
{%include'icon-3d-badge-full-color'}{{{'products.product.view_in_space'|t}
{%-endif-%}
{%如果product.media.size>1%}
{%如果product.media.size>4%}
{%-assign enable_thumbnail_slides=true-%}
{%endif%}
{%如果启用\u缩略图\u幻灯片==true%}
{%include'左V形图标“%”
{{'节.幻灯片放映.上一张幻灯片{t}
{%endif%}
{%如果启用\u缩略图\u幻灯片==true%}
{%include'右V形图标“%”
{{部分。幻灯片放映。下一张幻灯片{t}
{%endif%}
{%endif%}

您需要检查有关产品大拇指的代码，并使用一些CSS和修改JS的代码以使其完美工作。请添加您尝试过的内容或代码片段，人们可以帮助您找到正确的方法或帮助您确定方法中的问题