How can I feature three products in a row on my homepage?

[EllaFS]

Hello, 

When using the 'Featured Collection' section on the homepage - it only lets me have two products in a row. How can I have three products in a row please?

https://futureselfshop.com/ - the Chenille Collection on the homepage is what I'm referring to.

Thanks!

[DelightCart]

@EllaFS Go to the Online Store > Theme > collection.liquid and replace class name "medium-up--one-fifth" to "medium-up--one-third" in that file.

[EllaFS]

@DelightCart The only thing in that file is {% section 'page-collection' %}

Have tried searching for "medium-up--one-fifth" throughout the whole site but can't find it?

Thanks!

Ella

[AvadaCommerce]

HI @EllaFS ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss->paste below code at the bottom of the file:

@media (min-width: 750px) {
.home-section-collection-products {
    justify-content: center !important;
}
.home-section-collection-products .product-list-item {
    width: calc(33% - 5px) !important;
    padding: 0 5px !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[EllaFS]

Thank you @AvadaCommerce - this works but how can I only apply it to certain sections? So only in the Chenille Collection because some collections only have 2 products (New In) and I would want it to fill the page like originally.

[AvadaCommerce · Accepted solution]

Hi @EllaFS ,

You can try below code:

@media (min-width: 750px) {
.home-section-collection-products {
    justify-content: center !important;
}
.home-section-collection-products .product-list-item {
    width: calc(33% - 5px) !important;
    padding: 0 5px !important;
    flex-grow: 1;
}
}

[EllaFS]

Perfect, thanks so much!