Adding custom CSS and JS to Shopify

Question

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

Answer 1

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