html - 特色系列产品下方的自定义“添加到购物车”按钮 Shopify

Question

我正在定制 Shopify 的“Debut”主题，从现有的“精选系列”中创建一个可定制的主页部分。该部分的基本格式是一排来自所选系列的 4 张水平产品图像，照片下方带有标题和价格。在价格下方，我希望能够从每个单独的产品图像下方排列的 .png 资产文件中添加一个自定义的“添加到购物车”按钮。

到目前为止，我已经使用此代码片段将我的 4 个自定义按钮放在页面上，但我无法让它们正确格式化，因此它们在每张照片的标题和价格下完美排列：

<div>
 <a href=“#”&gt;<img src="//cdn.shopify.com/s/files/1/0559/2871/7472/t/1/assets/ROLL_OVER_CTA_BUTTON.png?v=6917840547249396695" width="300"></a>
<a href=“#”&gt;<img src="//cdn.shopify.com/s/files/1/0559/2871/7472/t/1/assets/ROLL_OVER_CTA_BUTTON.png?v=6917840547249396695" width="300"></a>
<a href=“#”&gt;<img src="//cdn.shopify.com/s/files/1/0559/2871/7472/t/1/assets/ROLL_OVER_CTA_BUTTON.png?v=6917840547249396695" width="300"></a>
<a href=“#”&gt;<img src="//cdn.shopify.com/s/files/1/0559/2871/7472/t/1/assets/ROLL_OVER_CTA_BUTTON.png?v=6917840547249396695" width="300"></a>
</div>

这是原始代码，似乎是网格中显示的产品图像、标题和价格：

    {%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

  <ul class="grid grid--uniform grid--view-items">
    {% for product in collection.products limit: product_limit %}
      <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
        {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
      </li>
    {% else %}

      {% for i in (1..product_limit) %}
        <li id="list" class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
          <div class="grid-view-item product-card">
          <!-- <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="#">
              <span class="visually-hidden">{{ 'homepage.onboarding.product_title' | t }}</span>
            </a>-->
            <div class="grid-view-item__image-wrapper">
              {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
              {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
            <div class="h4 grid-view-item__title" aria-hidden="true">{{ 'homepage.onboarding.product_title' | t }}</div>
           {% include 'product-price' %}
          </div>
        </li>
      {% endfor %}
    {% endfor %}
  </ul>

我怎样才能实现这种布局？让图像按钮自动显示在该部分的所有产品下也非常有帮助，以防在下面添加另一行 4。

任何帮助都非常感谢提前。

标签： htmlcssshopifyliquid