向Shopify添加自定义CSS和JS

Question

我正在使用“大西洋”主题为Shopify上的页面获取垂直标签。由于这个主题默认没有垂直标签，我使用了外部JS和CSS“jquery-jvert-tabs”。

我的问题是，如果我将JS和CSS文件作为资源上传，我如何将它们链接到我想要使用它们的页面以及如何在页面之后使用这些文件，如果我有某些样式元素可用那里呢？

Answer 1

只需将您的filename.js文件上传到assets文件夹即可。

然后将以下内容放入theme.liquid头部：

{{ 'filename.js' | asset_url | script_tag }}

顺便说一下，你应该重命名你的文件并添加.liquid扩展名

filename.js.liquid

祝好运！

Answer 2

如果我理解正确，asset_url filter就是你要找的。

要在.liquid文件中包含JS文件，请使用：

{{ 'script.js' | asset_url | script_tag }}

还有一个CSS文件：

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

Answer 3

如果您不想污染全局命名空间，可以将JavaScript或CSS限制在某些区域。

Shopify使用简单的if语句和页面句柄（对于www.foo.com/abcd/bar - “bar”将是句柄）。

{% if page.handle == "bar" %}
    {{ 'your_custom_javascript.js' | asset_url | script_tag }}
    {{ 'your_custom_css.css' | asset_url | stylesheet_tag }}
{% endif %} 

如果您想对某些页面进行较小的更改，这非常有用。