Looking to access your theme's code or language options with Shopify's new theme editor layout?
In your Shopify admin click on Online store > Themes
Next to the theme that you want to edit click on the Menu button which is a small square with 3 blue dots
This will open a submenu of options which includes: Edit HTMl / CSS and Edit Language
By default this will show 6 per row on large screens reducing to 4 per row on tablet.
Changing this is very simple and can be done within sections.
- Click on themes > customize theme > theme options > edit HTML / CSS
- On the next page open: Assets > theme.js.liquid
- Scroll down to lines 54 - 61 where you will see the following:
The large number on the left... 0, 450, 600, 700, 1000... represent a minimum screen size.
The small number on the right represents how many products are shown at one time.
For example: 1600, 6 means that 6 items will be shown at once on a screen size with a minimum of 1600px
To change all desktop sizes to show 5 items and tablet to show 3 you would make the following changes:
When you are happy with the numbers click save and test the store - you can always return and adjust these as needed.