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?
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!
.liquid extension?
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 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 }}
asset_url filter in any .liquid file, so it should work fine in page.liquid. Perhaps you could post some of your code if you're still having problems with it.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
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
