shopify 产品详情页面幻灯片去除掉第一张图片

在使用Boot主题的Shopify店铺中,通过修改main-product.liquid文件,将幻灯片组件的第一张图片去除。具体操作包括将`carousel-item active`改为`carousel-item`,并替换`data-target="#carouselExampleIndicators"`为`data-target="#carouselExampleControls"`,共需修改两处。
摘要由CSDN通过智能技术生成

本人使用的是boot主题,

Sections 下的main-product.liquid

1.找到

assign featured_media = current_variant.featured_media | default: product.featured_media

修改成

assign featured_media = current_variant.featured_media | default: product.media[1]

2.找到,共两处

 {% for media in product.media %}

修改成

 {% for media in product.media offset:1 %}

最终代码如下

{%- liquid
  assign current_variant = product.selected_or_first_available_variant
  assign featured_media = current_variant.featured_media | default: product.media[1]
  assign show_size_chart = false

  assign product_form_id = 'product-form-' | append: section.id | append: product.id
  assign installments_form_id = product_form_id | append: '-installments'

  assign form_class = 'row'
  if settings.on_add_to_cart == 'ajax'
    assign form_class = form_class | append: ' ajax-product-form'
  endif
  unless current_variant.available
    assign form_class = form_class | append: ' variant--unavailable'
  endunless
  
-%}

<div data-section-id="{
  { section.id }}" data-section-type="product" data-enable-history-state="true" data-components="custom-select">
  <div class="container product-detail very-large-row-under" data-product-id="{
  { product.id }}">
    <div class="page-width">
      <div class="product-layout-grid product-layout-grid--{
  { section.settings.media_size }}">
        <div class="product-layout-grid__images layout--{
  { section.settings.media_layout }}{% if product.media.size > 1 %} has-multiple-images{% endif %}" data-product-image-layout="{
  { section.settings.media_layout | split: '-' | first }}">
          <div class="product-layout-grid__images-and-thumbs {% if section.settings.enable_sticky_media %} sticky-element{% endif %}">
            <div class="product-detail__images-container">
              {% if product.media.size > 0 %}
                <div class="product-detail__images" data-featured-media-id="{
  { featured_media.id }}">
                  {% for media in product.media offset:1 %}
				  
                    <div class="product-detail__image">
                      {%- if media.media_type == 'image' -%}
                        <a href="{
  { media.preview_image.src | img_url: 'master' }}"
                          data-product-image
                          data-product-media
                          data-media-id="{
  { media.id }}"
                          data-image-w="{
  { media.preview_image.width }}"
                          data-image-h="{
  { media.preview_image.height }}"
                          class="global-border-radius">
                      {%- else -%}
                        <div class="global-border-radius" data-product-media data-media-id="{
  { media.id }}">
                      {%- endif -%}
					
                      {%- render 'media', media: media -%}

                      {%- unless media.media_type == 'image' -%}
                        </div>
                      {%- else -%}
                        </a>
                      {%- endunless -%}
                    </div>
                  {% endfor %}
                </div>
              {% else %}
                {% render 'media' with featured_media %}
              {% endif %}

              {%- assign models = product.media | where: 'media_type', 'model' -%}
              {% if models.size > 0 %}
                <script type="application/json" class="model-json">
                  {
  {- product.media | where: 'media_type', 'model' | json -}}
                </script>
                <button
                  class="view-in-space"
                  data-shopify-xr
                  data-shopify-model3d-id="{
  { models.first.id }}"
                  data-shopify-title="{
  { product.title | escape }}"
                  data-shopify-xr-hidden>
                  {%- render 'icon-3d-badge-full-color' -%}
                  <span class="view-in-space__text">{
  { 'products.product.view_in_space' | t }}</span>
                </button>
              {% endif %}

              <div class="slick-external-controls">
                <div class="slick-arrows"></div>
                <div class="slick-dots"></div>
              </div>
            </div>

            {% if section.settings.media_layout contains 'thumbnails' and product.media.size > 1 %}
              <div class="product-detail__thumbnails">
				
                {% for media in product.media offset:1 %}
				   
                  <a href="{
  { media.preview_image | img_url: 'master' }}"
                    class="product-detail__thumbnail global-border-radius-medium media-thumbnail media-thumbnail--media-{
  { media.media_type }} {% if featured_media.id == media.id %}thumb-active{% endif %}"
                    data-media-id="{
  { media.id }}"
                    data-product-media-thumbnail>
                    {% render 'responsive-image', image: media.preview_image %}

                    {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
                      <div class="media-thumbnail__badge">
                        {%- render 'icon-video-badge-full-color' -%}
                      </div>
                    {%- elsif media.media_type == 'model' -%}
                      <div class="media-thumbnail__badge">
                        {%- render 'icon-3d-badge-full-color' -%}
                      </div>
                    {%- endif -%}
                  </a>
				
                {% endfor %}
              </div>
            {% endif %}
          </div>
        </div>

        <div class="product-layout-grid__detail">
          <div class="product-detail__detail sticky-element">
            {%- for block in section.blocks -%}
              {%- case block.type -%}
                {%- when '@app' -%}
                  {%- render block -%}

                {%- when 'title' -%}
                  <div class="product-detail__title-area row" >
                    <h1 class="product-detail__title small-title">{
  { product.title }}</h1>					
				  </div>
				{%- when 'price' -%}
                   <div class="product-detail__title-area row" {
  { block.shopify_attributes }}>
                    <div class="product-detail__price product-price" data-price-wrapper>
                      <span class="{% if current_variant.compare_at_price > current_variant.price %}product-price__reduced{% endif %}" data-product-price data-product-detail-price>
                        <span class="theme-money large-title blue-title">
                          {%- if settings.product_currency_code_enabled -%}
                            {
  {- current_variant.price | money_with_currency -}}
                          {%- else -%}
                            {
  {- current_variant.price | money -}}
                          {%- endif -%}
                        </span>
                      </s
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值