Narrative theme - Changing the background of Newsletter Section to Image

Technical Q&A

Topic summary

Goal: change the Shopify Narrative theme homepage Newsletter section background from a solid color to an image.

  • Solution provided: add CSS at the end of theme.scss/theme.scss.liquid to set a background image on the Newsletter section. An initial example targeted a specific section ID; a later, more reusable selector was: #shopify-section-newsletter .newsletter-content-wrapper, sourcing an image uploaded to Assets via the Liquid filter asset_img_url with size ‘original’.

  • Steps:

    1. Upload the desired image in Online Store > Themes > Edit code > Assets.
    2. In theme.scss.liquid, add a rule for the Newsletter wrapper that applies background-image to the uploaded asset URL.

  • Follow-up fix: to change only the newsletter text color to white, add a CSS rule targeting newsletter-content elements (e.g., headings and paragraphs) with color: #ffffff using !important.

  • Outcomes: Multiple users confirmed the approach works. A case where the box stayed grey was resolved by ensuring the image was uploaded to Assets and using the provided selector.

  • Notes: Code snippets are central; screenshots were illustrative. The thread’s issues appear resolved.

  • Unrelated: A later post about course quiz discrepancies is off-topic.

Summarized with AI on December 26. AI used: gpt-5.
1

Hello Community,

I want to change the background of Newsletter section in the Homepage of Narrative Theme. Currently the only options are colour background and I want to change it to an image background. I saw in another post about changing the background for Password Section https://community.shopify.com/post/812781. Can anyone help with the coding and location to change the Newsletter section?

Many thanks in advance.

My website in case you need is securedsphere.com

2

PLease place this code at the end of theme.scss

#shopify-section-160387370583ad5263 .newsletter-wrapper {
    background: url(https://cdn.shopify.com/s/files/1/0475/4659/7536/files/Front_Card_KS_180x.jpg?v=1603968622%27);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

Here in the place of url(https://cdn.shopify.com/s/files/1/0475/4659/7536/files/Front_Card_KS_180x.jpg?v=1603968622%27), please put your image’s link which you want to set.

2 Likes
3

Thank you SO MUCH!!!

1 Like
4

I had been looking everywhere for this! thank you so much!!! worked perfectly for me too

2 Likes
5

Hello I am not sure what I am doing wrong my newsletter box is still grey

asdfsdafdsasadffdsfdsafddasgasgafs.PNG
asdfsdafdsasadffdsfdsafddasgasgafs.PNG1652×942 69.5 KB

6

Hello @ttezera1 ,

Hello,

Welcome to the shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

Also Let me know on which page the news letter section is.

1 Like
7

Thanks for the prompt response. My website is otb2021.com I was specifically trying to do it in this newsletter box pictured below on the bottom of my homepage

ttezera1_0-1621010199108.png
ttezera1_0-1621010199108.png1130×331 10.6 KB

8

Please Go to Online Store → Themes → Edit code → Assets → Upload Image which you want to set as background image.
Then Go to Online Store → Themes → Edit code → Assets → theme.scss.liquid and paste this code at the end of this file.

#shopify-section-newsletter .newsletter-content-wrapper {
    background-image: url({{ 'file-name-with-extension' | asset_img_url: 'original' }});
}
1 Like
9

Thank you so much you made it super easy! My last question is how do I change the font in the newsletter to white without changing the font of the whole website?

newsletterclolo.PNG
newsletterclolo.PNG997×246 140 KB

10 
.newsletter-content > *, .newsletter-content h2, .newsletter-content p {
color: #ffffff !important;
}
1 Like