Change product grid from 4 columns to 3 columns? (Combine theme)

Store Design
,
1

Hi there, I am using a Combine theme and would like to change my product grid from 4 columns to 3 columns. It is not an option with the template so I will need to inject some custom code. I’ve seen it work for people using other themes in the community discussion. Here is my shop for reference https://oteeum.myshopify.com/

Thank you in advance!!

2

Hi @Oteeum

As you can see the image below. Select 3 columns option instead of 4 columns option.

252.png
252.png1912×960 131 KB

If you like this please mark as accept my solution and like my solution.

Best Regards

Team_OSC

3

Hi @Oteeum , add this code to your theme’s CSS file if you don’t find the settings.

@media screen and (min-width: 768px) {
    #CollectionProductGrid .grid-4 {
        --visible-cols: 3 !important;
    }
}
4

Hi @Oteeum

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1702451398569.png
PageFlyRichard_0-1702451398569.png1920×685 122 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

5

Hi Team_OSC, this setting is not available for the product grid. Your screen shot is showing the settings for a featured collection which is different to the product grid. Thank you anyway!

6

Thanks KabirDev, can you tell me exactly where I should paste it in my theme.css file? Appreciate your help.

7

Sorry but this only changed the grid on my home page which had a featured collection (this changed from 4 to 3 columns, you can actually change this through the theme settings. I am looking for some code that will change the product grid (on the default collection page template) from 4 to 3. Unfortunately it is not available as a theme setting, you can only change featured collections. Hoping you can still help :slightly_smiling_face:

8

You can add it at the end of the CSS file.

9

Thank you so much! it worked :slightly_smiling_face:

10

Hi @Oteeum Sorry for the late response, have you solved the problem?

Let me know if you have any questions