自定义 css 某些 url Liquid Shopify

Question

我正在尝试在某些 URL Liquid Shopify 上添加 css。只有在该子页面上，我才需要与其他页面样式不同的元素。我在其他 liquid 代码中发现了一些附加在里面的例子，但它不起作用。这些是我试过的例子：我想要设置样式的元素没有唯一的 class 或 id.

<style>
{% if page.url == 'fullUrl' '%}
  #someEmelent {margin: 0 auto}
{% endif %}
{% if page.url == '/subpage/subpage' '%}
  #someEmelent {margin: 0 auto}
{% endif %}
{% if page.url == '/subpage' '%}
  #someEmelent {margin: 0 auto}
{% endif %}
</style>

我在纯 CSS 中尝试过其他东西，例如：

@document url("http://www.example.com/subpade/") {
#someEmelent {margin: 0 auto}
}

Answer 1

您可以使用请求对象： https://shopify.dev/docs/themes/liquid/reference/objects/request#request-path

所以像这样的东西应该可以工作：

{% if request.path contains 'variable_part_of_url' %}
    <style>
        /* your styles */
    </style>
{% endif %}

另一种方法是创建特定模板并将其应用到您的页面。然后你可以添加一个特定的 class 到 body 并在你的 CSS 文件中使用它。

Answer 2

我认为您想要的是 CSS 基于模板标题。例如：如果你想要 CSS class 用于特定的 collection 你可以使用 :

class="{{ collection.title | handleize }}"

您可以使用任何模板名称更改collection

自定义 css 某些 url Liquid Shopify

custom css on certain url Liquid Shopify

css

styles

liquid

shopify