All things Shopify and commerce
does anyone know how to add a background image to a section generated by shopify which is the product grid section. this is my website link: https://euwumd-v0.myshopify.com/collections/all and this is the image I want it changed to: https://cdn.shopify.com/s/files/1/0734/1175/6250/files/milky-way-starry-sky-night-sky-star-956981.jp...
Hi @SixTwoSix
Do you mean like this?
If it is try this one.
.section-template--18783816155354__product-grid-padding {
background-image: url(https://cdn.shopify.com/s/files/1/0734/1175/6250/files/milky-way-starry-sky-night-sky-star-956981.jpg?v=1733346155);
background-repeat: no-repeat;
background-size: cover;
background-color: transparent;
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Yes this is perfect but how do I make the white around the product transparent
Hi @SixTwoSix
here is the solution please add this css on theme.css file
#ProductGridContainer {
background-image: url(https://cdn.shopify.com/s/files/1/0734/1175/6250/files/milky-way-starry-sky-night-sky-star-956981.jpg?v=1733346155);
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 100%;
}
I hope it will work.
Thanks And Regards
Hi @SixTwoSix
For white around the product transparent
.card.card--standard.card--text {
background: #fff !important;
color: #000 !important;
}
If the solution is working please accept solution as mark as acceptable.
Thanks
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