向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过滤器就是你要找的.

要在.liquid文件中包含JS文件,请使用:

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

还有一个CSS文件:

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

Answer 3

If you don't want to pollute the global namespace you can restrict the JavaScript or CSS to certain areas.

Shopify uses a simple if statement together with the page-handle for that(for www.foo.com/abcd/bar - "bar" would be the handle).

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

This is extremely useful if you want to make smaller changes to certain pages.