FROM CACHE - en_header

Adding a background image to the password page on the narrative theme

Solved
Blueskiesskiesa
Tourist
9 0 4

Hi everyone!

I was hoping to get some help with the coding to get a background image added to the narrative theme. Any help would be appreciated!

Thanks 🙂

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
35809 3580 11590

This is an accepted solution.

Hello, @Blueskiesskiesa 

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

body.password-template {
 background-color: transparent;
  background: url({{ 'nnatural_scrub_background.jpg' | asset_url }});
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

 

 

 

also, please check attachment this flow step

Design Sky _ Edit _ Narrative _ Shopify.png

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 18 (18)
gasston
Explorer
40 9 16

hello @Blueskiesskiesa 

Welcome to the Shopify community! and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

Belgacem Ben ltaif
Web consultant /Shopify Expert/ Founder @Funkydev.io
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
https://benltaif.dev
https://funkydev.io/
KetanKumar
Shopify Partner
35809 3580 11590

This is an accepted solution.

Hello, @Blueskiesskiesa 

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

body.password-template {
 background-color: transparent;
  background: url({{ 'nnatural_scrub_background.jpg' | asset_url }});
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

 

 

 

also, please check attachment this flow step

Design Sky _ Edit _ Narrative _ Shopify.png

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Blueskiesskiesa
Tourist
9 0 4
Blueskiesskiesa
Tourist
9 0 4

I have:

.password-html {
//background-color: $color-main-bg;
background: url({{ 'nnatural_scrub_background.jpg' | asset_url }});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

KetanKumar
Shopify Partner
35809 3580 11590

@Blueskiesskiesa 

Yes, i have update my above code can you please read again proper li ignore attachment 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Blueskiesskiesa
Tourist
9 0 4
KetanKumar
Shopify Partner
35809 3580 11590

@Blueskiesskiesa 

Thanks for your support and your compliments.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
abaptiste
Tourist
3 0 0

Is there an easier way  to find that one line of code where we place the password background image?

There are 14,000 lines I'm looking at lol

forrester33
New Member
3 0 0

Super helpful! Building on what you've already provided, how can I add opacity to the background image itself (not the entire page)?


dyeheart
Tourist
3 0 2

anyone able to assist me on how to add the background?

KetanKumar
Shopify Partner
35809 3580 11590

@dyeheart 

yes please flow above step if now able to this please share store url so i will check and guide 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
35809 3580 11590

@dyeheart 

thanks for store url

let me know where do you have add?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
freehueman
New Member
2 0 1

Please help! Not working for me. I'm using Narrative Theme. my url is Freehueman.com

freehueman
New Member
2 0 1

currently what code looks like:

 

.password-html {
//background-color: $color-main-bg;
body.password-template {
background-color: transparent;
background: url({{ 'password_background.png' | asset_url }});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}

KetanKumar
Shopify Partner
35809 3580 11590

@freehueman 

do you have your css file to liquids that should be work

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
officialjewelry
New Member
3 0 0

 Hi Im using Debut theme and there is no password.html in the theme.css anywhere ( I searched for it exactly how it looked) so I don't know where to paste that code 😕 Please help if you can, my website is www.officialkollection.com@KetanKumar