How to put image on password page that overrides header and footer in Dawn theme?

Store Design
, , , ,

Topic summary

A user wants to create a full-screen background image on their Dawn theme password page, removing the header, footer, and default elements like the logo and social media icons. They’re using Klaviyo for email/SMS marketing integration and want to replicate the aesthetic of another store’s password page, including adding a 3D animated logo.

Solutions Provided:

Two community members offered CSS code snippets to achieve this:

  • Hide footer elements using .password__footer { display: none; }
  • Apply full-screen background image by targeting .password .gradient with background-image and background-size: cover
  • Make Klaviyo form transparent to allow the background image to show through
  • Adjust form height to ensure proper display

Both solutions include adding custom CSS through Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS. Screenshots demonstrate the expected results with the background image covering the entire password page.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have a request that I am not sure if it is complicated or not.

We are trying to put a background image (the one currently on our website), but to have the image completely take over the screen, including the header and footer. We do not want the “Are you store owner? Log in” or Social media icons, or the logo to be at the top.

We are using Klaviyo to insert that image in a combination with email/sms marketing to achieve what we have so far.

We are also looking to have a 3D gif of the logo in the body section instead. In reality, we want to do it similar to this store’s aesthetic: https://trikkobrand.com/password

Any help would be appreciated in any of these parts. I can provide any code if needed.

Here is our website using the Dawn theme: https://wearaleph.com/password

2

Hi @aleph_1

.password__footer {
  display: none;
}

.password .gradient {
  background-image: url('https://d3k81ch9hvuctc.cloudfront.net/company/RWxUGj/images/f929883f-1cfb-4e86-9d76-45bbbbba6350.png');
  background-size: cover;
}

Kyle_liu_0-1736127102721.png
Kyle_liu_0-1736127102721.png1425×863 394 KB

1 Like
3

Hi @aleph_1

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
body.password.gradient form.needsclick.klaviyo-form > .needsclick {
    min-height: 55vh !important;
}
body.password.gradient .gradient {
    background: transparent !important;!I;!;
}
body.password.gradient {
    background-image: url("https://d3k81ch9hvuctc.cloudfront.net/company/RWxUGj/images/f929883f-1cfb-4e86-9d76-45bbbbba6350.png");
}
body.password form.klaviyo-form.klaviyo-form.klaviyo-form {
    background: transparent !important;
}

Here is the result:

image_720.png
image_720.png720×430 500 KB

I hope this helps

Best,

Daisy

1 Like