How to Use HTML, CSS, and Javascript with Shopify Code

There are three ways to use HTML, CSS, and Javascript on Shopify. Each of them has its limitations and it’s important to first know what your goals are and if an App might be a better use-case scenario for your business.

1- Directly Edit your Shopify Code in your Theme

In your theme, you have the options to add code to any part of your theme. Its important to make sure you understand your abilities and know what you can and cannot do with code because its very possible to make mistakes in your theme that cannot be removed or changed. To reduce this risk, follow the below best practices:

1. Always duplicate your theme before making edits to your code.
2. Have a master backup theme with everything working just in case
3. If you are a developer, make sure to document any edits you make in your code to make it easier for future developers to return to your code and make adequate adjustments.

You can access your theme code by going to your “Online Store” and in the ellipses next to the green “Customize” button, you can click and a drop-down menu will appear. From there, there will be an option to edit your theme code. Shopify will then open an in-browser theme code editor with rich text editing features and full access to every non-data point bit of code for your website.

2- Edit your theme code using in-theme Sections

In the latest Shopify OS 2.0 update, Shopify added the ability to add a section called “Custom Liquid.” By adding this section to your theme, you can add your own HTML, CSS, and Liquid Web code in this dedicated block and move it around using the theme customizer.

You can also use these same “Custom Liquid” sections in pages, collections, products, blogs, and more.

3- Add CSS code to customize and Existing section on Shopify

We touched on this in the previous section regarding CSS on Shopify, but you can customize almost every section on shopify using custom css as well. If you just need to make some customizations without wanting to go directly into your theme code, you can actually now customize your theme directly in the CSS.