Add a Background Image to Featured Collection on Homepage

Shopify Discussion

Topic summary

Goal: add a background image to the homepage Featured Collection in the Taste theme.

What worked: adding CSS in the section’s Custom CSS:

  • Selector used: .section-template–21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding.
  • Properties: background-image (use image URL from Shopify Admin > Content > Files), background-size: cover, background-position: center.
  • Outcome: original poster confirmed success after identifying the correct section/container via Inspect Element.

Alternative approach: edit theme stylesheet (base.css/style.css/theme.css):

  • Add CSS with selector .collection.section-template–21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding.
  • Note: edits may need re-adding after theme updates.

Another workaround: add a Custom Liquid section in the header and hide its div via CSS (display:none!important) to persist across updates; the exact code snippet was not provided and the method is unconventional.

Key details:

  • The section-template class/ID is store-specific; others must find their own via Inspect.
  • One sample misspelled background-position; use correct spelling.

Open questions:

  • How to target a specific collection when adding CSS in base.css.
  • A user reported the provided selector didn’t work, likely due to mismatched section ID.

Artifacts: code snippets central; screenshot not essential.

Summarized with AI on December 28. AI used: gpt-5.
5

Hi @LibertyJason

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