How do I edit the HTML and CSS for my store?


Go to the 'Storefront' tab in your Admin Panel. To edit the HTML, click 'HTML Pages' and then click the page you want to work on and 'Use Custom HTML'

The 'Layout' file affects the elements which are visible on every page in your store, except the maintenance and checkout pages. You can edit this file to change the header, sidebar and footer of your store pages, as well as to add any elements behind-the-scenes in the <head> tag.

The 'Home' page is the first page people are taken to when they click or type your store URL. By default, it shows the collection which is top of your collections list but you can customize it to show anything else you choose.

The 'Collection' page displays all the products in a specific collection, or all the products found when someone uses the Search box in your store.

The other pages should be self-explanatory, showing the part of your store named in the title. If you want to change the elements displayed on the pages, you will need this list of liquid elements.


Go to the ‘Storefront’ tab in your Admin Panel. To edit the CSS, click ‘Theme’ and scroll down to the ‘Styles’ section. Then click ‘CSS Mode’.

If you only want to make minor changes, just change or add to the visible section at the bottom. If you want more complete customization you can download and edit the full CSS file (or add your own completely from scratch) and remove the import line.


Did you find this article helpful?