In the product grid settings for the Impulse, Motion, and Streamline themes, you have the flexibility to modify the number of products displayed in each row. This can be done easily by utilizing the slider to visually adjust the quantity or by directly entering your preferred number in the designated input field.
- In the theme editor, open the page selector at the top.
- Click on Collections, then select Default collection to open the Collection page template.
- In the left sidebar, find and open the Product grid section.
- Click on the Products block.
- Find the Products per row setting and change it to your preference.
In the Expanse, Fetch, Gem and Vino themes, the product grid settings include a product layout option that allows you to customize how products are displayed on your site. This flexibility in layout helps you tailor the shopping experience to better suit your preferences and those of your customers.
- In the theme editor, open the page selector at the top.
- Click on Collections, then select Default collection to open the Collection page template.
- In the left sidebar, find and open the Product grid section.
- Click on the Products block.
- Find the Default product layout setting and change it to your preference.
If you'd like more control over the number of products displayed per row, you can adjust this through Custom CSS. For instance, to show 4 products per row, simply add the following custom CSS code into the Custom CSS box. Here’s how to do it:
- In the theme editor, click Theme settings on the left-hand side navigation.
- Scroll down to the Custom CSS section.
- Paste the CSS code below in the box.
@media only screen and (min-width: 769px) {
[data-view="medium"] .grid-item {
flex: 0 0 25%;
}
} 7. Then click Save.
Adjust the percentage based on the number of products you’d like to display per row: use 25% for 4 products, 20% for 5, 16.67% for 6, etc.