Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an 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 Go to the Online Store > Theme > collection.liquid and replace class name "medium-up--one-fifth" to "medium-up--one-third" in that file.
@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
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.
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.
This is an 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;
}
}
Perfect, thanks so much!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025