Shopify幻灯片锚点递增类名失效求助（GTM追踪用）

问题分析 #

你当前的代码里，虽然用{% assign banner_index = forloop.index %}获取了循环索引，但没有把这个索引应用到锚标签的class属性中——这就是所有幻灯片类名都显示为banner1（实际是根本没添加上目标类）的核心原因。

修正方案 #

直接在锚标签的class属性里拼接banner{{forloop.index}}即可，无需额外赋值变量（当然赋值也可行，但直接引用更简洁）。

修正后的完整代码：

<!-- Slider main container -->
<div class="main-swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    {%- for block in section.blocks -%}
    <!-- Slides -->
    <div class="swiper-slide">
      <!-- 核心修改：在class中直接拼接forloop.index生成递增类名 -->
      <a href="{{ block.settings.button_link}}" class="full-width-link banner{{forloop.index}}" ></a>
      <picture>
        <source media="(min-width:750px)" srcset="{{ block.settings.image  | img_url: '1600x'}}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload" >
        <img data-src="{{ block.settings.mobimage | img_url: '400x' }}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload">
      </picture>
      {% comment %}
      <div class="sticky--shop-box">
        <div class="slider--content setu-flex setu-direction-column height_100p">
          <p>{{ block.settings.subheading}}</p>
          <h1>{{ block.settings.slide_title}}</h1>
          {% if block.settings.button_label != blank %}
          <div class="hide shop-button--wrapper">
            <a href="{{ block.settings.button_link}}" class="hide btn brad_100 text-transform--none fw-500 btn--fill">{{ block.settings.button_label}}</a>
          </div>
          {% endif %}
        </div>
      </div>
      {% endcomment %}
    </div>
    {%- endfor -%}
  </div>
    
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

关键说明 #

• {{forloop.index}}在Shopify Liquid循环中会自动从1开始递增，直接拼接到class属性里就能生成banner1、banner2……的唯一类名
• 若之前尝试添加类名但未生效，大概率是写法错误（比如引号闭合问题、变量引用格式不对），按上述方式直接拼接即可确保生效

内容的提问来源于stack exchange，提问作者Ali Zaveri