Re: How do I make "Featured Collection" section wider and product cards bigger?

Solved

How do I make "Featured Collection" section wider and product cards bigger?

Chicha7272
Explorer
50 1 7

Hey, I haven't figured it out myself so need some help here. This is what my website looks like right now:

 

Chicha7272_0-1699839368189.png

 

This is how I want it to be:

Chicha7272_1-1699839385695.png

 

The differences here are the size of each product card (on the second image product cards are way bigger), and the size/width of this overall section. Specifically, you can see that the width is bigger on the second image if you look at the padding on the sides of the screen and also at the distance where the "HOT SALE" text is located on both images. So can I achieve the result I want?

My website URL: https://trivlen.com/

Accepted Solutions (2)
Dan-From-Ryviu
Shopify Partner
11708 2294 2476

This is an accepted solution.

So please add this code to your theme.liquid file before </head> tag

#shopify-section-template--20103583957316__featured_collection .page-width { max-width: 100% !important; }

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
11708 2294 2476

This is an accepted solution.

Please move code that you added in Custom CSS to theme.liquid file too but change code to this 

#shopify-section-template--20103583957316__featured_collection .grid { column-gap: 19px }

Screenshot 2023-11-14 at 08.41.48.png

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

View solution in original post

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
11708 2294 2476

Add this code to Custom CSS of that section in Online store > Themes > Customize 

 

.page-width { max-width: 100% !important; }

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

Chicha7272
Explorer
50 1 7

Tried, but it doesn't work. It says "Invalid custom CSS", and highlights ".page-width" red

Chicha7272_1-1699893145012.png

 

 

Dan-From-Ryviu
Shopify Partner
11708 2294 2476

This is an accepted solution.

So please add this code to your theme.liquid file before </head> tag

#shopify-section-template--20103583957316__featured_collection .page-width { max-width: 100% !important; }

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

Chicha7272
Explorer
50 1 7

Hey @Dan-From-Ryviu, thanks, this one does work, but I had to put it not before the </head>, but here: 

Chicha7272_0-1699902190435.png

Also, as good as everything looks on the desktop, there's something insane going on on mobile:

Chicha7272_1-1699902350406.png

It already was bad on mobile after I added this into the custom CSS:

Chicha7272_2-1699902435804.png

But now after I applied the last code it looks entirely broken. So is there a way to make these two codes work only on PC? (I mean the one you gave me in this post and the one that is in the custom CSS)

Dan-From-Ryviu
Shopify Partner
11708 2294 2476

This is an accepted solution.

Please move code that you added in Custom CSS to theme.liquid file too but change code to this 

#shopify-section-template--20103583957316__featured_collection .grid { column-gap: 19px }

Screenshot 2023-11-14 at 08.41.48.png

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

Chicha7272
Explorer
50 1 7

It fixed everything. Thank you very much

Dan-From-Ryviu
Shopify Partner
11708 2294 2476

Very welcome, @Chicha7272 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.