Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding custom CSS and JS to Shopify

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?

like image 983
gagneet Avatar asked Dec 09 '13 09:12

gagneet


People also ask

Can you add custom CSS to Shopify?

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.

How do I add HTML and CSS to Shopify?

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.

Can you add custom code to Shopify?

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.


4 Answers

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!

like image 59
jlcharette Avatar answered Oct 09 '22 10:10

jlcharette


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 }}
like image 30
Steph Sharp Avatar answered Oct 09 '22 10:10

Steph Sharp


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.

like image 28
Peter Piper Avatar answered Oct 09 '22 10:10

Peter Piper


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

like image 34
Andreas Avatar answered Oct 09 '22 10:10

Andreas