https://www.bannershallmark.com/
Hi, i’m using the Expanse theme and hoping to use the collection list feature to show multiple categories on my front page. The issue is that behind the product images for each category is a gray box. I can change the shape of the box in the theme settings menu by selecting “collection tiles”, but I cannot hide that box or change it’s color to white so it blends in with the background. Even when I use an image with a white background and have it cover the gray box entirely, Shopify seems to recognize that the background is white and forces it to be transparent, revealing the gray box behind.
My question is this: How can I either hide these gray boxes (in my collection list widget) or color them white so they’ll blend in with the background? There are no settings in the “colors” section of theme settings that will change the color of these boxes. below you can see the gray boxes behind the Drinkware and Inspirational category images, despite them having purely white backgrounds when you open the images separately.
@b0sw0rth
Please give us the store URL then we will able to help you.
Can you provide your store URL?
Hello B0sw0rth!
Please send your store url
Try to go to the theme.css file, it is in the assets folder, find the class [data-grid-style*=grey] .grid-product:after and change the background-color property to the color that you want
1 Like
@miguel_liquify Hi Miguel, that actually almost solved my problem! It actually removed the gray boxes for all the products on my landing page except those in the “collection list” widget.
here’s what it looks like:
and this is what my code looks like after making your suggested change:
thank you again for all your help.
No problem
on this class .collection-image-wrap::after is the background property to change, but it dosn’t seems to be on the theme.css file, try to find it on the collections-list.liquid file
1 Like
Hi @b0sw0rth ,
This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:
Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :
Hope my answer will help you.
Best regards,
Victor | PageFly
1 Like
Hey @miguel_liquify
Thanks for all your help. I’m sorry to bother you further but i’m unable to find the collections-list.liquid file that you described. I posted two photos of my search for collection and collections in the sidebar and these are the pages that come up. Do any of these look familiar to you?
