Prestige theme: How do I replace the code in footer for Klaviyo list?

Shopify Discussion
1

Can someone please tell me how to replace the code in the footer liquid file to connect a Klayvio list instead?

2

Hi @meld78 ,

would you mind to share your store’s link please?

3

@shahrozbabar5 thank you, here it is https://mohi.com.au/

4

To replace the code in your Shopify footer with Klaviyo’s form code, follow these steps:

Step 1: Get the Klaviyo Form Embed Code

  1. Log in to Klaviyo and go to the Lists & Segments section.
  2. Select the list you want people to subscribe to.
  3. Under the list, go to the Signup Forms tab.
  4. Either create a new form or choose an existing one.
  5. Once your form is ready, click on Embed to get the embed code, and copy it.

Step 2: Edit the Shopify Footer Liquid File

  1. Log in to your Shopify Admin panel.
  2. Navigate to Online Store > Themes.
  3. Find your active theme and click on Actions > Edit code.
  4. In the Sections folder, locate the footer.liquid file, or it might be under Snippets named footer-newsletter.liquid or something similar, depending on your theme.
  5. Look for the existing newsletter form code, which may look something like this:
<form action="/contact#contact_form" method="post" accept-charset="UTF-8">
<input type="hidden" name="form_type" value="customer">
<input type="hidden" name="utf8" value="✓">
<!-- Other input fields and submit button -->
</form>
  1. Delete the old form code and replace it with the Klaviyo embed code you copied earlier.

Step 3: Save and Test

  1. Save the changes you made to the footer.liquid file.
  2. Go to your Shopify store and check the footer to make sure the Klaviyo signup form appears correctly.
  3. Test the form by signing up to ensure it connects to your Klaviyo list properly.

By replacing the existing form with Klaviyo’s embed code, all the email signups from the footer will be directed to the specified Klaviyo list.

1 Like
5

@shahrozbabar5 thank you. I really appreciate this. Does this mean the entire form will need to be replaced?

6

Hi @meld78 ,
no, just replace the above code with the Klaviyo code, and it will be all sorted.

if you find this answer helpful, please mark it as a solution, thanks

7

Is this the code I need to replace? and if so, do I replace this complete section?

{%- endif -%}

{%- assign newsletter_form_id = ‘newsletter-form-’ | append: section.id -%}

{%- form ‘customer’, id: newsletter_form_id, class: ‘form’ -%}
{%- if form.posted_successfully? -%}
{%- assign success_message = ‘general.newsletter.subscribed_successfully’ | t -%}
{%- render ‘banner’, content: success_message, status: ‘success’ -%}
{%- else -%}
{%- if form.errors -%}
{%- capture error_message -%}{{ form.errors.translated_fields[‘email’] }} {{ form.errors.messages[‘email’] }}{%- endcapture -%}
{%- render ‘banner’, content: error_message, status: ‘error’ -%}
{%- endif -%}

{%- assign input_label = ‘general.newsletter.email’ | t -%}
{%- render ‘input’, name: ‘contact[email]’, label: input_label, type: ‘email’, required: true, autocomplete: ‘email’, enterkeyhint: ‘send’ -%}

{%- assign button_label = 'general.newsletter.subscribe' | t -%} {%- render 'button', type: 'submit', content: button_label, background: block.settings.button_background, text_color: block.settings.button_text_color -%}
8

Actually, it worked. Thank you so so much, really appreciated!