Solved

Trouble Embedding Klaviyo Sign Up Form into Website Footer

  • 14 October 2021
  • 2 replies
  • 38 views

Badge

Hi everyone,

 

I am having trouble embedding my Klaviyo Sign Up form into my Shopify Debut Theme Footer. When I open up my footer.liquid file the code doesn’t look like the code listed on the Klaviyo instructions so I am unsure on the location to paste my sign-up form code. This is what the ‘copyright’ snippet of my footer.liquid code looks like:

 

      <div class="grid__item {% if show_selectors or show_payment_icons %}one-half{% endif %} small--one-whole site-footer-item-tall">
        {%- if social_icons -%}
          <ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list">
            {%- for social in socials -%}
              {%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
              {%- assign icon_link = social | prepend: 'icon-' | downcase -%}
              {%- if settings[social_link] != blank -%}
                <li class="social-icons__item">
                  <a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">
                    {%- include icon_link -%}
                    <span class="icon__fallback-text">{{ social }}</span>
                  </a>
                </li>
              {%- endif -%}
            {%- endfor -%}

            {%- if request.page_type == 'blog' or request.page_type == 'article' -%}
              <li>
                <a class="social-icons__link" href="{{ shop.url }}{{ blog.url }}.atom">
                  {% include 'icon-rss' %}
                  <span class="icon__fallback-text">RSS</span>
                </a>
              </li>
            {%- endif -%} 
          </ul>
        {%- else -%}
        
          <div class="small--hide site-footer-item-align-right {% if show_selectors or show_payment_icons %}site-footer-item-center-vertically{% endif %}">
            <small class="site-footer__copyright-content">© {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
            <small class="site-footer__copyright-content site-footer__copyright-content-powered-by">{{ powered_by_link }}</small>
          </div>        
        {%- endif -%}
      </div>
 
      {%- if show_selectors -%}
        <div class="grid__item small--hide {{ payment_width_class }}">{{ payment_icon_markup }}</div>
      {%- endif -%}

      <div class="grid__item medium-up--hide {{ payment_width_class }} small--one-whole">{{ payment_icon_markup }}</div>

      {%- if social_icons and show_selectors -%}
        <div class="grid__item small--hide site-footer-item-align-right {% if show_payment_icons %}one-half{% endif %}">
          <small class="site-footer__copyright-content">&copy; {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
          <small class="site-footer__copyright-content site-footer__copyright-content--powered-by">{{ powered_by_link }}</small>
        </div>
           
      {%- endif -%}
            
      <div class="grid__item small--one-whole {{ copyright_show_class }} site-footer-item-align-right">
        <small class="site-footer__copyright-content">&copy; {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
        <small class="site-footer__copyright-content site-footer__copyright-content--powered-by">{{ powered_by_link }}</small>
      </div>
    </div>
  </div>
</footer>

 

Is anyone able to advise where I should paste my code? I would like the sign-up form to sit above the social icons and copyright text on the right hand side of the footer.

 

Thanks in advance,

Melita 

icon

Best answer by Dov 14 October 2021, 16:08

View original

2 replies

Userlevel 6
Badge +5

Hello @MelitaM,

Thanks for sharing this question with the Klaviyo community.

I would try adding the embed code above the opening div for the copyright code (this is called out in our documentation):

 <div class="small--hide site-footer-item-align-right {% if show_selectors or show_payment_icons %}site-footer-item-center-vertically{% endif %}">

 

Also keep in mind, by default, browsers who subscribe to your newsletter through your Shopify signup form are automatically added to your Klaviyo newsletter list through the integration. You do not need to replace your Shopify embedded form with a Klaviyo embedded form to ensure that new subscribers are added to your newsletter list.

So if you are still having trouble getting the embed code to function after this, you can feel comfortable proceeding using a Shopify sign-up as an alternative solution.

I hope that is helpful!

 

Badge

Thanks for your help! I tried adding the code into that section and unfortunately nothing came up on the front-end. 

 

I’m keen to have some copy above my sign-up box so would like to embed the Klaviyo code. At this stage I think I’ll just keep the Shopify signup turned off and add the Klaviyo signup via a block in PageFly.  

 

Thanks for your help. 

Reply