Centering Klaviyo email sign up form embedded into footer

[peter550]

Hi there

I have a Klaviyo sign up form that i've embedded into the footer of my shopify site. I previously added code to the footer so that the footer content would be centered and avoid the plants. This wasd the code:

.footer--blocks { width: 50%; margin: 0 auto !important;}

Now that I have the embedded Klaviyo form it sits above the original footer. How can I make it so they are side by side, like the original content? 

Any help much appreciated 

Pete

(theme is blockshop, site p word is test, site is https://laz-the-plant-scientist.myshopify.com/) 

What I want it to look likeWhat it looks like now

[KetanKumar]

@peter550 

can you please replace your news latter code 

[peter550]

hi there, 

Thanks for the reply!

I assume you want the code here? 

<div class="klaviyo-form-XQev5F"></div>

[KetanKumar]

@peter550 

yes you have replace theme newsletter code 

[peter550]

Please can you explain how to do this? Sorry.

I am not sure where to place the code or how to do it. The following is the footer code

</footer>

{% schema %}
{
"name": "Footer",
"class": "section--footer",
"max_blocks": 3,
"settings": [
{
"type": "header",
"content": "Currency Selector",
"info": "To add a currency, go to your [payment settings](/admin/settings/payments)."
},
{
"type": "checkbox",
"id": "show-currency-selector",
"label": "Show currency selector",
"default": true
},
{
"type": "paragraph",
"content": "To offer multiple currencies on your online store, you must first [edit your store's currency formatting](https://docs.shopify.com/support/settings/general/tell-my-script-where-to-find-money-formats)."
},
{
"type": "header",
"content": "Language Selector",
"info": "To add a language, go to your [language settings](/admin/settings/languages)."
},
{
"type": "checkbox",
"id": "show-locale-selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Payment logos"
},
{
"type": "checkbox",
"id": "show-payment-icons",
"label": "Enable",
"default": true
}
],
"blocks": [
{
"type": "about",
"name": "About and copyright",
"settings": [
{
"type": "text",
"id": "about-title",
"label": "Title",
"default": "About the store"
},
{
"type": "richtext",
"id": "text",
"label": "Description and copyright",
"default": "<p>2021 © Your brand name here.<br><br>A brief store summary, tagline, or vision statement.<p>"
},
{
"type": "checkbox",
"id": "subscribe--show-social-icons",
"label": "Show social icons",
"default": true
}
]
},
{
"type": "menu",
"name": "Menu",
"settings": [
{
"type": "text",
"id": "menu-title",
"label": "Title",
"default": "Quick links"
},
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"default": "footer",
"info": "This menu won't show submenu items."
}
]
},
{
"type": "subscribe",
"name": "Subscribe",
"settings": [
{
"id": "newsletter--heading",
"label": "Newsletter heading",
"type": "text",
"default": "Newsletter"
},
{
"id": "newsletter--info",
"label": "Newsletter information",
"type": "richtext",
"default": "<p>Be the first to receive updates on new arrivals, special promos and sales.</p>"
},
{
"type": "checkbox",
"id": "subscribe--show-newsletter",
"label": "Show newsletter",
"default": true
}
]
}
]
}
{% endschema %}

[marcoswata]

Try this:

Find the piece of code that checks if the block is a newsletter sign up block. Something like:

{% if block.type == "subscribe" %}
...
{% endif %}

Then within the code above, find the {% form %} ... {% endform %} part and replace it all with your Klaviyo code.

[KetanKumar]

@peter550 

i need full footer code

[peter550]

HI Kentan

I sent the code above this message. I'm not sure which footer code you need though? Framework connection footer or framework footer liquid? 

[KetanKumar]

@peter550 

yes please frawork-footer

[peter550]

{%- liquid
assign locale_label_t = 'general.language.dropdown_label' | t
assign currency_label_t = 'general.currency.dropdown_label' | t
assign newsletter_placeholder_t = 'layout.footer.newsletter_placeholder' | t
assign newsletter_button_t = 'layout.footer.newsletter_button' | t
assign navigation_t = 'layout.footer.navigation' | t
assign shopify_disclaimer_t = 'shopify.online_store.spam_detection.disclaimer_html' | t

assign block_count = section.blocks.size
assign locale_enable = false
assign currency_enable = false

if section.settings.show-currency-selector and shop.enabled_currencies.size > 1
assign currency_enable = true
endif

if section.settings.show-locale-selector and shop.published_locales.size > 1
assign locale_enable = true
endif
-%}

<footer
class="footer--root"
data-js-class="Footer"
data-section-id="{{ section.id }}"
data-section-type="footer"
>
<div class="klaviyo-form-XQev5F"></div>
<div class="footer--blocks">
{% for block in section.blocks limit: block_count %}

{% case block.type %}
{% when 'about' %}
{% assign show_social = false %}
{% if
settings.social--facebook--url.size > 0 or
settings.social--twitter--url.size > 0 or
settings.social--tiktok--url.size > 0 or
settings.social--instagram--url.size > 0 or
settings.social--pinterest--url.size > 0 or
settings.social--vimeo--url.size > 0 or
settings.social--youtube--url.size > 0
%}
{% assign show_social = true %}
{% endif %}

{% if block.settings.subscribe--show-social-icons == false %}
{% assign show_social = false %}
{% endif %}

<div class="footer--block" data-block-type="about">
<div class="footer--block--container">
{% if block.settings.about-title != blank %}
<div class="footer--block--heading" data-item="block-heading">
{{ block.settings.about-title | escape }}
</div>
{% endif %}

<div class="footer--block--body">
{% if block.settings.text != blank %}
<div class="footer--about-text" data-item="rte-content">
{{ block.settings.text }}
</div>
{% endif %}

{% if show_social %}
<div class="footer--social-icons">
{% render 'framework--social-follow' %}
</div>
{% endif %}
</div>
</div>
</div>

{% when 'menu' %}
<div class="footer--block" data-block-type="menu">
<div class="footer--block--container">
{% if block.settings.menu-title != blank %}
<div class="footer--block--heading" data-item="block-heading">
{{ block.settings.menu-title | escape }}
</div>
{% endif %}

<div class="footer--block--body" role="navigation" data-item="paragraph">
{% if linklists[block.settings.menu].links.size > 0 %}
{% assign footer_nav = block.settings.menu %}

<ul
class="footer--menu"
aria-label="{{ navigation_t }}"
>
{% for link in linklists[footer_nav].links %}
<li>
<a href="{{ link.url }}" title="{{ link.title }}">
{{ link.title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</div>

{% when 'subscribe' %}
<div class="footer--block" data-block-type="subscribe">
<div class="footer--block--container">
<div class="footer--subscribe">

{% if block.settings.subscribe--show-newsletter or show_social %}
{% if block.settings.newsletter--heading != blank %}
<div class="footer--block--heading" data-item="block-heading">
{{ block.settings.newsletter--heading }}
</div>
{% endif %}
{% endif %}

<div class="footer--block--body">
{% if
block.settings.subscribe--show-newsletter or
settings.popup--newsletter--enabled
%}
<div
id="mailing-list-module"
{%-
if block.settings.subscribe--show-newsletter == false and
settings.popup--newsletter--enabled
-%}
style="display:none;"
{%- endif -%}
>
{% if block.settings.newsletter--info != blank %}
<div class="footer--subscribe--info" data-item="rte-content">
{{ block.settings.newsletter--info }}
</div>
{% endif %}

{% form 'customer', id: 'footer_form' %}
{% if form.errors %}
<p class="error feedback">
{% for field in form.errors %}
{{ field }} {{ form.errors.messages[field] }}
{% endfor %}
</p>
{% endif %}

<div class="footer--form-container">
<input type="hidden" name="contact[tags]" value="newsletter" />
<input
type="hidden"
name="contact[first_name]"
value="Newsletter"
/>
<input
type="hidden"
name="contact[last_name]"
value="Subscriber"
/>
<label for="footer-email" data-item="hidden-text">
{{ newsletter_placeholder_t }}
</label>
<input
class="small"
id="footer-email"
type="email"
placeholder="{{ newsletter_placeholder_t }}"
name="contact[email]"
/>
<div class="footer--form-submit" data-item='button'>
<button type="submit" value="{{ newsletter_button_t }}">
{{ newsletter_button_t }}
</button>
</div>
</div>

{% if form.posted_successfully? or form.errors %}
<script>window.location.hash = '#feedback-bar--newsletter';</script>
{% endif %}

<div data-item="hidden-text">
{% comment %} remove the below line to display reCAPTCHA badge {% endcomment %}
{{ shopify_disclaimer_t }}
</div>
{% endform %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endcase %}
{% endfor %}

{% if section.blocks.size == 0 %}
{% render 'framework--no-blocks' %}
{% endif %}
</div>

<div class="footer--sub">
{% if locale_enable or currency_enable %}
<div class="footer--sub--block" data-type="localization">
<div class="footer--sub--container">
{% form 'localization', id: 'footer-localization' %}

{% if locale_enable %}
{%- capture locale_values -%}
{%- for locale in form.available_locales -%}
{{ locale.iso_code }},
{%- endfor -%}
{%- endcapture -%}

{% assign locale_values = locale_values | split: "," %}

{%- capture locale_names -%}
{%- for locale in form.available_locales -%}
{{ locale.endonym_name }},
{%- endfor -%}
{%- endcapture -%}

{% assign locale_names = locale_names | split: "," %}

{%
render 'framework--disclosure',
label_name: locale_label_t,
option_names: locale_names,
option_values: locale_values,
current_value: form.current_locale.iso_code,
id: 'footer-locale',
input_name: 'locale_code',
type: 'localization'
%}
{% endif %}

{% if currency_enable %}
{%- capture currency_values -%}
{%- for currency in form.available_currencies -%}
{{ currency.iso_code }},
{%- endfor -%}
{%- endcapture -%}

{% assign currency_values = currency_values | split: "," %}

{%- capture currency_names -%}
{%- for currency in form.available_currencies -%}
{{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%},
{%- endfor -%}
{%- endcapture -%}

{% assign currency_names = currency_names | split: "," %}

{%
render 'framework--disclosure',
label_name: currency_label_t,
option_names: currency_names,
option_values: currency_values,
current_value: form.current_currency.iso_code,
id: 'footer-currency',
input_name: 'currency_code',
type: 'localization'
%}
{% endif %}

{% endform %}
</div>
</div>
{% endif %}

{% assign powered_check = powered_by_link | split: '>' %}
{% if powered_check[1] != ' </a' %}
<div class="footer--sub--block" data-type="powered-by">
<div class="footer--sub--container" data-item="paragraph">
<span class="footer--sub--shopify-link">{{ powered_by_link }}</span>
</div>
</div>
{% endif %}

{% unless shop.enabled_payment_types == empty %}
{% if section.settings.show-payment-icons %}
<div class="footer--sub--block" data-type="payment-icons">
<div class="footer--sub--container">
{% render 'framework--payment-icons' %}
</div>
</div>
{% endif %}
{% endunless %}
</div>

</footer>

{% schema %}
{
"name": "Footer",
"class": "section--footer",
"max_blocks": 3,
"settings": [
{
"type": "header",
"content": "Currency Selector",
"info": "To add a currency, go to your [payment settings](/admin/settings/payments)."
},
{
"type": "checkbox",
"id": "show-currency-selector",
"label": "Show currency selector",
"default": true
},
{
"type": "paragraph",
"content": "To offer multiple currencies on your online store, you must first [edit your store's currency formatting](https://docs.shopify.com/support/settings/general/tell-my-script-where-to-find-money-formats)."
},
{
"type": "header",
"content": "Language Selector",
"info": "To add a language, go to your [language settings](/admin/settings/languages)."
},
{
"type": "checkbox",
"id": "show-locale-selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Payment logos"
},
{
"type": "checkbox",
"id": "show-payment-icons",
"label": "Enable",
"default": true
}
],
"blocks": [
{
"type": "about",
"name": "About and copyright",
"settings": [
{
"type": "text",
"id": "about-title",
"label": "Title",
"default": "About the store"
},
{
"type": "richtext",
"id": "text",
"label": "Description and copyright",
"default": "<p>2021 © Your brand name here.<br><br>A brief store summary, tagline, or vision statement.<p>"
},
{
"type": "checkbox",
"id": "subscribe--show-social-icons",
"label": "Show social icons",
"default": true
}
]
},
{
"type": "menu",
"name": "Menu",
"settings": [
{
"type": "text",
"id": "menu-title",
"label": "Title",
"default": "Quick links"
},
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"default": "footer",
"info": "This menu won't show submenu items."
}
]
},
{
"type": "subscribe",
"name": "Subscribe",
"settings": [
{
"id": "newsletter--heading",
"label": "Newsletter heading",
"type": "text",
"default": "Newsletter"
},
{
"id": "newsletter--info",
"label": "Newsletter information",
"type": "richtext",
"default": "<p>Be the first to receive updates on new arrivals, special promos and sales.</p>"
},
{
"type": "checkbox",
"id": "subscribe--show-newsletter",
"label": "Show newsletter",
"default": true
}
]
}
]
}
{% endschema %}

[KetanKumar · Accepted solution]

@peter550 

yes please update here your code

[peter550]

Hi 

where would I find this code? Can you direct me as ti where to look for it please. 

Pete