How can I vary the number of products per row in the Prestige theme?

Store Design
, , ,
1

Hello, I am working on a store and I am rather new to shopify in general.
I want to make the store grid have different ammount of products per row. for example one row has 2 products, the next one 1 product (with a taller / bigger picture) and so on. is there a way I can change the ammount of products in a row? I suppose I need to touch code but I really don’t know where to start. We are using Prestige theme for this.

Thank you.

2 Likes
2
  1. Look for a piece of code that generates the product grid or loop. It’s usually a code block that starts with {% for product in collection.products %} and ends with {% endfor %}.
  2. Inside this loop, you’ll find the code responsible for displaying individual products. It typically looks like {% include ‘product-card’, product: product, show_vendor: section.settings.show_vendor %}.
  3. Identify the HTML element that wraps around the product cards, usually a
    . It might have a class like grid grid–uniform or similar.
  4. Depending on your desired layout, you’ll need to change the CSS classes or inline styles of this wrapping element. For example, you can change the class from grid–uniform to grid–one-half for a two-column layout.
3

Hi @Viiictoria

Can you explain further? Is this at your home page or collection page?

4

Hello,

sorry for the misunderstanding. It’s in the collections page, or product catalogue, wherever we can display our products. I want it to have a grid that the ammount of products arent uniform throughout the grid itself. I hope my explanation made sense.

5

I think I understand.

I think you are talking about masonry design. This can be achieve with customized codes. Unfortunately, you will need a developer to write this code for you

1 Like
6

I don’t really mind looking into it. I just want to know where can I see the code that affects the store grid so I can start working