Shopify themes, liquid, logos, and UX
Hey, I haven't figured it out myself so need some help here. This is what my website looks like right now:
This is how I want it to be:
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/
Solved! Go to the solution
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.
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 }
- 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.
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.
Tried, but it doesn't work. It says "Invalid custom CSS", and highlights ".page-width" red
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.
Hey @Dan-From-Ryviu, thanks, this one does work, but I had to put it not before the </head>, but here:
Also, as good as everything looks on the desktop, there's something insane going on on mobile:
It already was bad on mobile after I added this into the custom CSS:
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)
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 }
- 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.
It fixed everything. Thank you very much
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.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025