Klaviyo Form Embed

Store Design
, , ,
1

Hi There,

I am trying to embed a form on to a password page. I have built the form on Klavioy and it has a transparent background - however, if there seems to be a block behind it?

I would also like it to be at the bottom of the page rather than the top.

Thanks,

Mary

Screenshot 2025-11-11 at 11.24.23
Screenshot 2025-11-11 at 11.24.231920×1023 164 KB

3

Which ever is easiest for you? Can you put the code here? Or can I help somehow?

4

Sure thing, Mary! Could you please share the embed code for the Klaviyo form here? Once I have that, I’ll place it on the password page and adjust it so it appears at the bottom without the block background.

5

Here:

6

Hello, @marycrichton123

  1. In the code editor, find the password.liquid file. Click to open it.

  2. You have likely pasted your Klaviyo embed code near the top of this file. Find the Klaviyo code and cut it.

  3. Now, scroll down in the password.liquid file. You want to paste the code near the end of the main content area. A good place is often right before the {% schema %} tag at the bottom, or just before a closing or tag.

  4. Paste your Klaviyo embed code in this new location.

  5. Click Save.

After this step, the form will now be located at the bottom of the page.

Remove the Background Block with CSS

  1. Find file named base.css or theme.css.

  2. Scroll to the very bottom of this file.

  3. Paste the following code exactly as it is into the bottom of the file:

.password-main__content .klaviyo-form {
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

Click Save.

Thank You!

1 Like
7

@websensepro AMAZING THANK YOU

1 Like
8

Hello, @marycrichton123

Glad to hear that!
Could you please mark my comment as the solution?

Thank you!

9

@websensepro

Screenshot 2025-11-13 at 15.05.58
Screenshot 2025-11-13 at 15.05.581920×1019 213 KB

I have tried the following code to remove the background of the countdown timer app using this code:

.countdown-timer-block, .countdown-timer-block * { background: transparent !important; } .countdown-timer-block { margin-top: 100px; }

However, it did not work - can you advise?

10

Hello, @marycrichton123

Please add in base.css or theme.css

.password-main .color-scheme-1.gradient {
    --gradient-background: none !important;
}
countdown_timer_wrapper_cmfla6tao00dznrztnomu3aag {
    padding-top: 140px !important;
}

This should remove the background from the countdown timer, making it blend seamlessly with your beautiful page design.

image
image1026×618 122 KB

Let me know if that does the trick!

Thank You!