将外部CSS样式表与Shopify产品页面链接

Question

我通常将这些代码放在下面，以便为我的产品页面做额外的样式。但我正在寻找一种方法，我想在产品页面中链接CSS样式表并在不同的目录中进行CSS设计，例如：“assets/custom.css”。

那么我如何链接下面制作的样式。

<style>
.checkmarks li {
  list-style-type: none;
background: url("https://i.imgur.com/FqEWdiJ.png") 0px 5px no-repeat;
background-size: 20px;
padding-left: 30px;
  line-height: 200%;
}
</style>

<ul class="checkmarks">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

Answer 1

如果

assets

文件夹中有文件，您可以使用 Liquid 中的

asset_url

过滤器访问它。 （参考：https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#asset_url）

如果您将样式表创建为

assets/custom.css

，您可以使用以下方式获取 URL：

{{ 'custom.css' | asset_url }}

由于它是样式表，您可以添加

stylesheet_tag

过滤器，让 Shopify 自动将其转换为适合您的 HTML 标签：

{{ 'custom.css' | asset_url | stylesheet_tag }}

进一步可能的改进是将样式表设为

scss

文件而不是标准

css

文件。这允许您使用一些奇特的功能来帮助保持较长的 CSS 文件更具可读性/可维护性。此外，Shopify 在将所有内容编译成最终的

scss

文件时会缩小

css

文件 - 这意味着文件大小会稍微小一些，因为所有空白都会被删除。如果您决定这样做，则文件的编译（浏览器友好）版本将作为

<filename>.scss.css

访问 - 因此

custom.scss

可以输入为：

{{ 'custom.scss.css' | asset_url | stylesheet_tag }}

最后，如果您希望此文件仅出现在您的

product

页面上，您可以：

• 将此代码放入您的

  templates/product.liquid

  文件中，或者

• 将此代码放入

  layout/theme.liquid

  文件中，包装在一个简单的模板中，检查我们是否位于产品页面上：

  {% if template.name == 'product' %}
   {{ 'custom.scss.css' | asset_url | stylesheet_tag }}
  {% endif %}
  

Answer 2

在 Shopify 2024 中链接资产的完整代码

<link rel="stylesheet" href="{{ 'style.css' | asset_url  }}" media="print" onload="this.media='all'">