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?
You can find it by going to your store admin > Online Store > Themes > Actions > Edit code > Assets folder. Once you open it you can edit or add any CSS you want.
Go to your Shopify admin page. You will find various tabs on the left-hand side, from there click Online Store. Themes page will open by default, on the top right-hand side will appear more “…” button, click on that, and then from the drop-down menu select Edit HTML/CSS.
Login to your Shopify account. In your Shopify administration panel, click Online Store > Themes in the left navigation. Click the Actions dropdown menu in the current theme section, then select Edit Code. Paste the snippet of JavaScript at the bottom of your theme.
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!
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 }}
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.
For JS files, never create the file directly via Shopifys "Create a blank file"-dialogue. Instead, create the file locally as .js (not .js.liquid), then upload to the assets folder.
You can then simply reference the file in the theme.liquid head section:
{{ 'filename.js' | asset_url | script_tag }}
Background:
It seems that Shopify always sets the mime type to text/x-liquid when creating new files and if liquid is used for the theme, regardless of the file extension. This will then result in a browser error like this one from Chrome:
Refused to apply style from ... because its MIME type ('text/x-liquid') is not a supported stylesheet MIME type, and strict MIME checking is enabled
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With