A user is trying to set different background images for each collection page in the Dawn theme. They initially added CSS code targeting a specific section class to display a background image behind products, not as a collection banner.
Current approach:
Challenge:
The user wants unique images per collection page, but their current CSS applies one image globally.
Suggested solution:
Another user recommends adding a common class (e.g., “product-listing”) to the “main-collection-product-grid” section, then applying CSS with the background image URL. However, this still applies the same image across all collections.
Status:
The discussion remains open with no clear solution yet for dynamically changing images per collection page. The fundamental issue—how to conditionally apply different backgrounds based on which collection is being viewed—has not been addressed.
Any one know how to have this image change on each collection page? I used the below code in the base.css.
.section-template–18428917973292__product-grid-padding {
background: url(https://cdn.shopify.com/s/files/1/0739/9771/3708/files/4.png?v=1679512904)!important!important);
background-repeat: no-repeat !important;
background-color: transparent !important;
background-position: center!important;
background-size: cover !important;
}
A collection banner you do this in the ’ product’ - collection location on the dashboard
To show the background image in the product list section, You need to first add a common class to the section.
For example “product-listing” in “main-collection-product-grid” section.
After that, you can add CSS which applies to all collections like below
.product-listing {
background: url(https://cdn.shopify.com/s/files/1/0739/9771/3708/files/4.png?v=1679512904)!important!important);
background-repeat: no-repeat !important;
background-color: transparent !important;
background-position: center!important;
background-size: cover !important;
}
