Call out css and js files to a new page in shopify

Question

I purchased a template of an HTML landing page online and I'm trying to integrate it in my current theme in Shopify. The landing page contains html, css and js that I have to integrate. I read a previous thread that explained that I have to upload the css and js files to the "Assets" folder and add those lines to the "theme.liquid" file :

{{ 'script.js.liquid' | asset_url | script_tag }}

{{ 'style.css.liquid' | asset_url | stylesheet_tag }}

Then I created a page template and copy pasted the html code, but no styling comes out only plain html. I was wondering what I was doing wrong. Do I have to add some code to call out the css and js files into the newly created page or just adding the above line of codes in the "theme.liquid file is sufficient?

Thank you in advance for your help.

Answer 1

Try removing the .liquid suffix when trying to load a stylesheets or scripts for a given template:

{{ 'script.js' | asset_url | script_tag }}
{{ 'style.css' | asset_url | stylesheet_tag }}

If the stylesheet is a SCSS stylesheet, you'll need to have .scss. added to the stylesheet identity to ensure it get's compiled to CSS.

{{ 'style.scss.css' | asset_url | stylesheet_tag }}

If it still doesn't load, try clearing cache after saving/pushing the changes to the template or viewing from a incognito browser tab while not logged in as admin.