Need help figuring out how to get 4 columns for products instead of 5

[MaiaMonange]

I currently have 5 columns wide on desktop, the slider to adjust the columns in my editor doesn’t work so I think I’m going to have to do it through code, i was hoping to make it 4, any help would be greatly appreciated.

[Moeed]

Hey @MaiaMonange

Share your Store URL and Password if enabled.

Best,
Moeed

[ZestardTech]

Hello @MaiaMonange ,

Could you please provide the URL/ password to your store so that I can check it and provide you with the exact solution?

[BiDeal-Discount]

Hi @MaiaMonange

Let’s go to Shopify Admin → Sales Channels → Online Store → click to edit code your current theme → open file base.css then add this custom CSS code to the bottom of file:

@media screen and (min-width: 768px) {
    .product-grid .grid__item {
        width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
    }
}

This is the result:

[namphan]

Hi @MaiaMonange,

Please go to Customize > Sections > Featured collection > Custom CSS and add code:

@media screen and (min-width: 990px) {
    .grid.product-grid .grid__item {
        width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
        max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    }
}

[ZestardTech]

Hello @MaiaMonange ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

@media screen and (min-width:768px){
    .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
}
  .grid{
        gap:4px !important;
    }
}

Let me know if you need further assistance!

[mageplaza-cs]

Hi @MaiaMonange ,

Typically, most themes offer a setting to control how many products are displayed per row in a collection on desktop. For example, as shown in the screenshot below:

In case your theme doesn’t support this feature, you can manually override it by adding some custom CSS to display 5 items per row. For instance, the following CSS snippet:

@media screen and (min-width: 990px) {
    .product-grid .grid__item {
        width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
    }
}

I’d be happy to give you the best advice if you could share your store URL with me. I’m more than happy and willing to help!

[MaiaMonange]

my url is link

[Moeed]

Hey @MaiaMonange

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
.grid li {
    width: 25% !important;
    max-width: 25% !important;
}
</style>

RESULT

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[namphan]

Hi @MaiaMonange,

Please go to Customize > Sections > Featured collection > Custom CSS and add code:

@media screen and (min-width: 990px) {
    .grid.product-grid .grid__item {
        width: 25% !important;
        max-width: 25% !important;
    }
}

If I helped you, then a Like would be truly appreciated.

[Moeed]

Try this updated code instead with the same steps mentioned above.

<style>
.grid li {
    width: 25% !important;
    max-width: 25% !important;
    margin-left: -1px !important;
}
</style>

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed