Centering Klaviyo email sign up form embedded into footer

Solved
peter550
Explorer
76 1 36

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 I want it to look likeWhat it looks like nowWhat it looks like now

 

 

 

 

 

 

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
24923 2498 9039

This is an accepted solution.

@peter550 

yes please update here your code

KetanKumar_0-1635264884229.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 11 (11)
KetanKumar
Shopify Partner
24923 2498 9039

@peter550 

can you please replace your news latter code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
peter550
Explorer
76 1 36

hi there, 

Thanks for the reply!

 

I assume you want the code here? 

 

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

 

Screenshot 2021-10-22 at 12.28.09.png

KetanKumar
Shopify Partner
24923 2498 9039

@peter550 

yes you have replace theme newsletter code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
peter550
Explorer
76 1 36

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 %}

 

marcoswatanabe
Shopify Partner
37 4 9

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.

If my answer was helpful then please Like and Accept Solution :)
If you need help with design, development or marketing your store, talk to one of our experts at https://whymatters.co.uk/
KetanKumar
Shopify Partner
24923 2498 9039

@peter550 

i need full footer code

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
peter550
Explorer
76 1 36

Hi 

 

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


Pete

 

peter550
Explorer
76 1 36

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? 

 

Screenshot 2021-10-25 at 12.42.33.png

KetanKumar
Shopify Partner
24923 2498 9039

@peter550 

yes please frawork-footer

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing