Custom newsletter form from Klaviyo in footer

Hi,

I have made a website and used the theme “Impact”.

Now i want to integrate my custom Klaviyo newsletter signup form in my footer instead of the Shopify one.

I want to input this form at the location in the red box. The one now needs to be replaced.

Is there someone who can help me where and how i can replace the form on my website?

Here is my footer liquid code:

https://codeshare.io/N3vr4J

Embed code for the newsletter div:

Website;

www.livliv.be

Password: Test

Thank you :grinning_face:

@yannickjee - you can add this code in the newsletter section and check if it appears in footer, if it does then we can simply hide existing newsletter

Hi @suyash1 , i was playing with the code already a few times.

But the website is always showing all or nothing.

If i submit the code like below then i see 2 forms, the footer is now also not clear anymore and not showing the other parts.

I just pasted and replaced the code under newsletter now.

@yannickjee - it will need multiple css settings, but it can be done, this will be the right option to add form to footer

@suyash1 Thanks! Any idea what and where i need to make changes to the code to make it work?

I’m not so good in programming, just only the basics.

@yannickjee - add it in footer only, will need to adjust css to make it look good,

also I recommend to add custom class to it

@suyash1 Can you help with that? I really don’t know what to change in the CSS and where i place it specific in the footer.

@yannickjee - can you please add back to the footer? I will check for css

@suyash1 Done :white_check_mark:

Thanks a lot for checking this for me :wink: .

@yannickjee - newsletter not yet appeared, please check on your side

@suyash1 For me it’s now like this:

Both are visible now.

Only the bottom one needs to be visible, the other one needs to be deleted.

Thanks!

@yannickjee - please add this css to the very end of your theme.css file and check

.footer__wrapper .klaviyo-form .v-stack.gap-6{display: none; visibility: hidden;}

@suyash1 Wow! This fixed my problem.

Thanks a lot for fixing this and looking into my problem :heart_eyes: .

2 Likes