Question

好的，所以几个星期前我曾在Shopify论坛（慢响应）上询问如何在收集页面上只定位一个产品，这样就没有悬停效果，但现在我只想定位首页收藏和不是我网站上的许多其他收藏页面。主题是砌体，这里是我正在使用的代码的狙击手：

{% if settings.prod_block_display  contains 'hover' %}
  {% unless forloop.index == 1%}
  <div class="hoverinfo{% if forloop.index == 1 %}no-overlay {% endif %}"> 
    <a href="{{ product_url }}">
      <div class="info-box">
      <div class="title">{{ product-block.title }}</div>
      <div class="price">
        {% if product-block.compare_at_price_max > product-block.price %}
        <span class="previously">{{ product-block.compare_at_price_max | money }}</span>
        {% endif %}

        {% if product-block.price_varies %}<span class="from">{{ 'products.listing.from' | t }}</span>{% endif %}
        <span class="actual">{{ product-block.price | money }}</span>
      </div>
      </div>
        </a>
  </div>
  {% endunless %}
  {% endif %}
  {% if settings.prod_block_qv and no_quick_buy == false %}
  {% unless forloop.index == 1 %}
  <div class="quick-buy-row{% if forloop.index == 1%}no-overlay {% endif %}">
    <a href="#" class="quick-buy button">{{ 'products.listing.quick_view' | t }}</a>
  </div>
  {% endunless %}
  {% endif %}

“{％除非forloop.index == 1％} “代码是我想要应用于首页的效果。任何帮助都会很棒！

Answer 1

您可以将{{ collection.handle }}添加到要应用效果的产品div的类中。然后在 styles.css.liquid 中根据需要为集合句柄（collection.handle）添加样式。

Answer 2

@HymnZ试图指出的是你可以做一些像styles.liquid.css：

然后在你的模板中：

这是使用此策略的最简单方法。我试图添加的是，您可以在与句柄连接的类上使用前缀和后缀，以提供更多功能。风格：

然后在你的模板中：

由于大多数浏览器都支持堆叠选择器，因此您可能不需要-hide，-show变体，但它们可能会有所帮助，具体取决于您的思维方式如何运作。上面的示例可用于显示/隐藏各种情况下的内容。例如您可以定位各种集合的元素：

当然，你也可以在液体中做很多事情：

或

尝试仅定位首页集合以应用样式（Shopify）

2 个答案: