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?
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
