How to change the background to an image on a specific collection page?

Topic summary

A user seeks to add a background image exclusively to one collection page without affecting other pages on their Shopify store (using the Dawn theme).

Proposed Solutions:

  • Two responders provided similar CSS code targeting the collection page wrapper class
  • Instructions involve editing the theme’s CSS file (base.css, style.css, or theme.css) via the Shopify admin
  • The code targets a specific section template class and applies a background-image URL

Current Status:

  • The original poster tested the suggested code but reported it didn’t work
  • Screenshots were shared showing the unsuccessful implementation
  • The user also asked for code to change backgrounds on other collection pages, suggesting interest in page-specific customization
  • The issue remains unresolved with no follow-up solutions provided yet
Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.

On my collection page i want to change the background to an image, i want it only on this page, not my other pages. Any code for this?

Theme: Dawn

Website: Desire-online.net

1 Like

Hi @jakegrieveson

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.collection-list-wrapper.page-width.isolate.no-heading.no-mobile-link.section-template--19958073753890__5384b4b2-1ee6-4cd1-a5eb-66acd626d532-padding {
    background-image: url("path/to/your/image.jpg");
}
  • Change the URL of the image you like to used.
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Hi @jakegrieveson

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

.collection-list-wrapper.page-width.isolate.no-heading.no-mobile-link.section-template--19958073753890__5384b4b2-1ee6-4cd1-a5eb-66acd626d532-padding {
    background-image: url(" URL your image.jpg");
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

Thank you, and what would be the code to change just the decor collection pages background?

Unfortunately this didnt work

Unfortunately the code didn’t work