Solved

Narrative theme - Changing the background of Newsletter Section to Image

PartyOfGoods
Excursionist
23 2 9

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/c/Shopify-Design/Adding-a-background-image-to-the-password-page-on-the.... 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

Accepted Solution (1)
PartyOfGoods
Excursionist
23 2 9

This is an accepted solution.

Thank you SO MUCH!!!

View solution in original post

Replies 9 (9)

Hardik29418
Shopify Partner
2858 407 1073

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.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
PartyOfGoods
Excursionist
23 2 9

This is an accepted solution.

Thank you SO MUCH!!!

NadineLerner
Tourist
3 0 2

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

ttezera1
New Member
5 0 0

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

asdfsdafdsasadffdsfdsafddasgasgafs.PNG

 

Hardik29418
Shopify Partner
2858 407 1073

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.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
ttezera1
New Member
5 0 0

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

 

Hardik29418
Shopify Partner
2858 407 1073

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' }});
}

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
ttezera1
New Member
5 0 0

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

 

 

Hardik29418
Shopify Partner
2858 407 1073
.newsletter-content > *, .newsletter-content h2, .newsletter-content p {
color: #ffffff !important;
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email