How to update page background for password page ONLY in Dawn theme

Shopify Discussion
1

Hello,

I am trying to make my password page (Dawn theme) an image. I will be removing the newsletter sign up, so it needs to be the page background. Ideally, I’d love one image for desktop and another for mobile, and for each to fill the screen. Can someone please help me with this?

2

Hello, @BSPOKE_STUDIO Could you please share the store URL and Password? This will allow me to inspect it and provide a more tailored solution.

3

https://www.roem.co.nz/password

bspoke24

4

Hello! @BSPOKE_STUDIO Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
body.password.gradient .newsletter__wrapper {
    display: none !important;
}
body.password.gradient{
    background-size: cover !important;
}

HuptechWeb_0-1730870094769.png
HuptechWeb_0-1730870094769.png1910×927 308 KB

HuptechWeb_1-1730870110251.png
HuptechWeb_1-1730870110251.png507×753 233 KB

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the Accepted Solution.
Best regards
K.K

5

Hi, I’m removing the newsletter block as I’m replacing it with a Klaviyo embedded form. That’s why I want the actual page background to be an image, not the newsletter block. Are you able to help with this?

6

Hi @BSPOKE_STUDIO

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Code for Desktop view:

@media screen and (min-width: 768px){
body.password.gradient {
    background-image: url("link-image") !important;
}
}

Code for Mobile view:

@media screen and (max-width: 767px){
body.password.gradient {
    background-image: url("link-image") !important;
}
}

You can replace the image link you want to use as the background for the Desktop and Mobile in the code we shared here: https://prnt.sc/cFWs6PoPB33I

image (1).png
image (1).png2403×894 319 KB

Please let me know if it works. Thank you!

Best,

Daisy - Avada

7

Hi, it worked for mobile but now the desktop version is also using the mobile version. Is there a way to differentiate them? Or do I need to use one image that can work for both desktop & mobile?

8

Hi @BSPOKE_STUDIO

Could you please adjust both 2 codes I shared above? Then please attach image you want to use for Mobile and Desktop differently. Then it will work. Thank you!

Best,

Daisy - Avada

9

This is the code I used:

@media screen and (min-width: 768px) {
body.password.gradient {
background-image: url(“https://cdn.shopify.com/s/files/1/0578/8775/2321/files/password_collage.webp?v=1730439749”) !important;
}
}
@media screen and (max-width: 767px) {
body.password.gradient {
background-image: url(“https://cdn.shopify.com/s/files/1/0578/8775/2321/files/ROEM_Password_Mobile.jpg?v=1730865123”) !important;
}
}

and screenshots attached of how it’s appearing..

desktop: https://prnt.sc/ZfyxhBfQWi3I

mobile: https://prnt.sc/JpmU2fz7NcbJ

10

Hi @BSPOKE_STUDIO

Please adjust the code below like the screenshot here: https://prnt.sc/RaMKbZQzJPNR

background-size: contain;

image (4).png
image (4).png2536×904 526 KB

image (5).png
image (5).png1428×786 278 KB

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team.

11

This worked! Thank you so much :folded_hands:

12

Are you able to help with this @DaisyVo ?