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

Store Design
1

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!

2

@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.

3

@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

4

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.

5

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.

6

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;
}
}
7

Perfect, thanks so much!