How Do I Make Background Image On Password Page Sense Theme

How Do I Make Background Image On Password Page Sense Theme

priscychavez
Shopify Partner
10 0 0

I'd like to put a background image in the password page in the sense theme. I want it to look like this:
0B3FEB7F-D7F2-4C1E-A22F-4FC025E5BFA5.JPG

Replies 10 (10)

Dan-From-Ryviu
Shopify Partner
8579 1692 1703

Hi @priscychavez 

You can do that by adding this code at the bottom of the base.css file 

body.password {
background-image: url("your image link") !imporatant;
}

 

 

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

priscychavez
Shopify Partner
10 0 0

I did that, and now it looks like this

 

Captura de pantalla 2024-06-17 a la(s) 10.42.15 p.m..png

Dan-From-Ryviu
Shopify Partner
8579 1692 1703

Please update the code 

body.password { background-image: url("your image link") !imporatant; }
body.password .gradient { background: transparent !important; }

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

priscychavez
Shopify Partner
10 0 0

It is working better but the image is not showing correctly. I am attaching you how the page looks now and the background image I want to put

Captura de pantalla 2024-06-18 a la(s) 9.27.00 a.m..pngbackground.jpg

priscychavez
Shopify Partner
10 0 0

Look I used this code:


body.password { background-image: url("https://cdn.shopify.com/s/files/1/0878/7528/9361/files/Portada_desktop_54.png?v=1718692316") !important; }
body.password .gradient { background: transparent !important; }
body.gradient.password {
background-size: 100% 100% !important;
}

 

And the image is showing well now. Now how can I place an image for desktop and another image for mobile?

techlyser_web
Shopify Partner
1849 345 373

Hello @priscychavez 
.password {
     background-image: url(" image url") !imporatant;

     background-repeat: no-repeat;
     background-position: center;
     background-attachment: fixed;
     background-size: cover;

}

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
priscychavez
Shopify Partner
10 0 0

This is the image i am trying to put as a background, and this is how it is showing right now

Captura de pantalla 2024-06-17 a la(s) 10.49.57 p.m..pngAEF7B3D2-26F3-4960-86E7-B8F5D550CF96.jpg

techlyser_web
Shopify Partner
1849 345 373

can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
priscychavez
Shopify Partner
10 0 0

INA_MSWEB
Shopify Partner
1279 143 163

Hello,

 

I am San from MS Web Designer.

 

Go to Themes > customize > select password template from dropdown > select email signup banner > upload background image

 

If you have further queries do let me know.

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin