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?
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.
Open theme.liquid and check how the css and js are included and add yours by following them.Add your custom file to assets.Css And Js Add Image attached
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
