Adding custom CSS and JS to Shopify
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!
How to inject custom js to shopify via app
Well it's pretty straightforward.
You must create a public URL for the script file first. (so that you can access it from everywhere)
After that you make a post request with the following end point: https://shopify.dev/docs/admin-api/rest/reference/online-store/scripttag#create-2020-07
Where "src": "https://djavaskripped.org/fancy.js"
is your public URL for the the javascript.
This should be done only once when the user is installing their APP.
After that the script will be loaded every time automatically for each theme, there will be no need for additional logic to output it.
When you uninstall the app the script is removed from the admin automatically as well.
Now for the question, how to add your css?
You have two ways:
- create a public URL for the CSS file and create a
link
tag and append that to the document via JS - create a
style
tag and append that to the DOM and insert the styles there via AJAX or just have them as a string inside the javascript file
In shopify while using custom theme the shopify app functionality and css not working, Its taking the theme css as default
The app should have a supported template list, contact the app support team.
Additionally, it seems your theme css it's overriding the app files. That's the reason why you shouldn't use unsupported themes unless you know what you are doing. Nevertheless, you can disable the theme css by creating a new layout file without the main css file in the header and only using the app css specific for that page.
Shopify styling isses
Sometimes developers add two versions of the stylesheet (.css and min.css), this is just a good practice, but most of the time the minified version (min.css) is connected to theme.liquid. Same happens with .js files.
If you want to add custom styles I recommend to add a new file in the assets folder named "custom.css", for example, and connect it to theme.liquid using the liquid stylesheet tag, something like this:
{{ 'custom.css' | asset_url | stylesheet_tag }}
is important to place this tag right under 'theme.min.css' stylesheet tag in the theme.liquid. This way it will override most of the theme.min.css styles.
I don't recommend to use SCSS in Shopify since it is deprecated.
Related Topics
Overflow:Auto Not Working in Touch Devices(Ios)
Expand/Collapse Mobile Navbar Without JavaScript
Click Table Row and Get Value of All Cells
How to Override the CSS Scroll Behavior with Scrollto in JavaScript
CSS Select All Previous Siblings for a Star Rating
Jquery If Then Statement for CSS Value
Jquery .Css() Function with Variables and Multiple Values
Bootstrap - Datetimepicker Add Custom Button Like Today
How to Prevent iOS Safari Alert When Trying to Open Non-Installed Native App
Animation for Newly Rendered Elements, But Not on Page Load
Hover Effects on Irregular Polygons in CSS
Jquery - "Fadein Is Not a Function"
Making an Element Visible by Hovering Another Element (Without :Hover-Property)
How to Over-Ride CSS with User-CSS on Mobile Safari
Animating Max-Height with Pure Js
Jquery UI Datepicker: Don't Highlight Today When It Is Also Selected