Adding custom CSS and JS to Shopify

问题

I am working on getting vertical tabs for a page on Shopify, using the 'Atlantic' theme. As this theme does not have vertical tabs by default, I have used the external JS and CSS "jquery-jvert-tabs".

My question is, if I upload the JS and CSS files as assets, how do I link them to the page on which I want to use these and how to make use of these on the page after that, if I have certain style elements available there too?

回答1:

Simply upload your filename.js file in the assets folder.

then drop the following in your theme.liquid head section:

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

by the way, you should rename your file and add .liquid extension

filename.js.liquid

Good luck!

回答2:

If I understand correctly, the asset_url filter is what you are looking for.

To include a JS file in a .liquid file, you use:

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

And a CSS file:

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

回答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.

来源：https://stackoverflow.com/questions/20467240/adding-custom-css-and-js-to-shopify

标签

javascript

jquery

html

css

shopify