Change background image in the collection page

Store Design
, , ,

Topic summary

A user wants to add a background image to their collection page’s name container section. An attached screenshot shows the target area for the background image.

Proposed Solutions:

  • One responder confirms this can be achieved using CSS but doesn’t provide specific code
  • Another requests the store URL and password to provide a tailored solution
  • A third provides detailed implementation steps:
    • Navigate to Shopify admin → Online Store → Themes → Edit code
    • Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
    • Add CSS targeting the collection section with background-image, background-size: cover, and background-position: center properties

Status: The discussion remains open with no confirmation whether any solution was implemented successfully.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

How can I place this image in the background of the collection name container?

Captura de ecrĂŁ 2025-04-12 155654.png
Captura de ecrĂŁ 2025-04-12 155654.png1026Ă—399 131 KB

2

Hi! You can place the image in the background of the collection name container using CSS.

1 Like
3

Hi @pimpaoclothing ,

Could you please share your Store URL and password (if applicable) so that I can review it and provide you with the appropriate solution code?

Looking forward to your response.

Thanks!

1 Like
4

Hi there @pimpaoclothing You should try out the following steps

  • 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.section-template--21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding {
    background-image: url('your-background-image.jpg');
    background-size: cover;
    background-position: center;
}

Let me know if it works for you!

1 Like