Shopify themes, liquid, logos, and UX
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/)
Solved! Go to the solution
This is an accepted solution.
yes please update here your code
can you please replace your news latter code
hi there,
Thanks for the reply!
I assume you want the code here?
<div class="klaviyo-form-XQev5F"></div>
yes you have replace theme newsletter code
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 %}
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.
i need full footer code
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?
yes please frawork-footer
{%- 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 %}
This is an accepted solution.
yes please update here your code
Hi
where would I find this code? Can you direct me as ti where to look for it please.
Pete
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024