Collection product count

[DASCPA]

Hello, this is probably a easy fix but i cant seem to find it. How can i ammend the products displayed in a row on the collection page? in the theme eiditor it shows 3 but on the live site it shows 4 (see photos) how can i change this to show 3 on desktop? Thanks

Theme: Savor

URL: https://www.formafinalis.com/collections/ff-capsule

Password: JSFF25

[Darshan17]

Hi @DASCPA ,

Firstly, on your store’s password page, there is no input field for entering the password. The product count being displayed in one row is due to the responsive properties of the layout.

Thanks!

[topnewyork]

Hi @DASCPA ,

kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[mudasir07]

You can use the Extra Large option, then check the preview

[DASCPA]

Please try again, it now shows (the text was black). how do i change this? The product count being displayed in one row is due to the responsive properties of the layout.

[topnewyork]

Hi @DASCPA ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.resource-list{
    --resource-list-columns: repeat(3, 1fr) !important;
}

[DASCPA]

Didnt work, now shows 2 products on desktop. There used to be a easy slider to show the amount, not sure why they would get rid of this

[DASCPA]

Theme: Savor

URL: https://www.formafinalis.com/collections/ff-capsule

Password: JSFF25

[topnewyork]

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.resource-list{
    --resource-list-columns: repeat(3, 1fr) !important;
}

Thanks!

[DASCPA]

Didnt work, There used to be a easy slider to show the amount, not sure why they would get rid of this

[jakeclifford]

Hi @DASCPA ,

In the theme editor when you click full width in the top right it should appear as 4

The theme is likely set up to be responsive and move to 3 at a certain screen size.

Thanks,
Jake

[topnewyork]

.product-grid,
.resource-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
}

[Darshan17]

Hi @DASCPA

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file and paste the code before tag of the file.

.resource-list--grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

Thanks!

Please accept as solution if it solves.

[topnewyork]

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.product-grid,
.resource-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
}

[Dan-From-Ryviu]

Hi @DASCPA

The number of products displayed varies based on your screen width; that is why you have 3 in your customization and 4 on your desktop. Here is the result when on my 27xx screen’ width.