How to center vertically on password page: Klaviyo embed sign-up form

Highlighted
New Member
4 0 0

Hello, 

I am using the Boost paid theme.  I have managed to embed my Klaviyo sign-up form on the password page to avoid the server delays between Shopify and Klaviyo and to include the First Name (which wasn't offered in my theme).

However, am trying to figure out how to have it appeared centered vertically.  You can see current on thekindervoice.com.

Below is the current code:

 

{%- assign bg_image = section.settings.background_image -%}
{%- assign bg_image = section.settings.background_image -%}
{%- assign bg_image = section.settings.background_image -%}
{%- assign bg_image = section.settings.background_image -%}
{%- assign bg_image = section.settings.background_image -%}
{%- assign bg_image = section.settings.background_image -%}

<style>
#shopify-section-password-template {
background-color: {{ section.settings.background_color }};
}

.password-page-container,
.password-login-link a,
.password-form-email {
color: {{ section.settings.text_color }};
}

{% if section.settings.show_overlay_color == true %}
.password-background-image::after {
background-color: {{ section.settings.background_overlay_color }};
opacity: {{ section.settings.overlay_opacity | divided_by: 100.00 }};
}
{% endif %}

{% if section.settings.logo != blank %}
.store-logo {
width: {{ section.settings.logo_width }}px;
}
{% endif %}
</style>

{% if bg_image.src != blank %}
<div class="password-background-image">
<div class="rimage-background fade-in lazyload"
data-bgset="{% render 'bgset', image: bg_image %}"
data-sizes="auto"
data-parent-fit="cover">
<noscript>
<img src="{{ bg_image | img_url: '1024x1024' }}" alt="{{ bg_image.alt | escape }}" class="rimage-background__image">
</noscript>
</div>
</div>
{% endif %}
<aside class="password-login-link page-width">
<a href="#password-login">
{{ 'general.password_page.password_link' | t }}
</a>
</aside>

<div class="password-page-container container">
<header class="page-width large-row">
<h1 class="h1 store-logo" itemscope itemtype="http://schema.org/Organization">
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_width | times: 2 }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
alt="{{ section.settings.logo.alt | default: shop.name }}"
itemprop="logo">
{% else %}
{{ shop.name }}
{% endif %}
</h1>
</header>

<main id="MainContent" class="page-width">
<!-- DELETE THIS TO MOVE UP? <h2 class="large-title large-row password-page-content">{{ section.settings.heading }}</h2>

{% unless shop.password_message == blank %}
<p class="large-row">
{{ shop.password_message }}
</p>
{% endunless %}
-->
<!-- BEGIN KLAVIYO FORM -->
<div class="klaviyo-form-XXXXXX"align="center" style="text-align: center;"></div>
<!-- END KLAVIYO FORM -->
<!-- KLAVIYO EDIT OUT {% if section.settings.show_newsletter %}
{% form 'customer' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<ul class="form-success">
<li>{{ 'general.password_page.signup_form_success' | t }}</li>
</ul>
{% else %}
<h3 class="password-form-title">{{ section.settings.newsletter_heading }}</h3>
<div class="password-form-subtitle rte">{{ section.settings.newsletter_subheading }}</div>
<input type="hidden" name="contact[tags]" value="prospect, password page, newsletter">
<div class="password-form-container">
<div class="input-wrapper">
<label for="email" class="password-form-label">
{{ section.settings.newsletter_label }}
</label>
<input type="email"
name="contact[email]"
id="email"
spellcheck="false"
autocomplete="off"
autocapitalize="off"
class="password-form-email"
required>
</div>
<button type="submit" name="commit" class="btn password-form-submit">
{{ section.settings.newsletter_button }}
</button>
</div>
{% endif %}
{% endform %}
{% endif %}

{% if section.settings.show_social_icons %}
<div class="password-social-icons large-row">
<h4 class="password-social-icons-title small-text">{{ section.settings.social_icons_title }}</h4>
{% if section.settings.show_social_icons %}
{% render 'social-icons', icon_setting: settings.social_custom_icon, icon_size: '48x' %}
{% endif %}
</div>
{% endif %}
</main>


<footer class="password-footer page-width">
{% capture shopify_link %}
<a href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify" class="password-shopify-link">
{% render 'icon-shopify-logo' %}
<span class="icon-fallback-text">Shopify</span>
</a>
{% endcapture %}
<p>{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify_link }}</p>
</footer>
</div>

<div id="password-login-modal" class="hidden">
<div id="password-login">
<p class="h4">{{ 'general.password_page.login_form_heading' | t }}</p>
{% form 'storefront_password' %}
{{ form.errors | default_errors }}
<label for="password" class="visually-hidden">{{ 'general.password_page.login_form_password_label' | t }}</label>
<div class="input-group">
<input type="password" name="password" id="password" class="input-group-field" placeholder="{{ 'general.password_page.login_form_password_placeholder' | t }}">
<span class="input-group-btn">
<input type="submit" class="btn password-page__login-form__submit" value="{{ 'general.password_page.login_form_submit' | t }}">
</span>
</div>
{% endform %}
<p class="admin-login">{{ 'general.password_page.admin_link_html' | t }}</p>
</div>
</div>


{% schema %}
{
"name": "Password page",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Opening Soon"
},
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "text",
"id": "logo_width",
"label": "Logo width (in pixels)",
"default": "250"
},
{
"type": "header",
"content": "Background"
},
{
"type": "paragraph",
"content": "Choose between a background color or background image."
},
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#333333"
},
{
"type": "image_picker",
"id": "background_image",
"label": "Background image"
},
{
"type": "checkbox",
"id": "show_overlay_color",
"label": "Show background tint",
"default": false
},
{
"type": "color",
"id": "background_overlay_color",
"label": "Background tint color",
"default": "#333333"
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "Color tint opacity",
"default": 30
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#ffffff"
},
{
"type": "header",
"content": "Newsletter"
},
{
"type": "checkbox",
"id": "show_newsletter",
"label": "Show newsletter signup",
"default": true
},
{
"type": "text",
"id": "newsletter_heading",
"label": "Heading",
"default": "Find out when we open"
},
{
"type": "richtext",
"id": "newsletter_subheading",
"label": "Subheading"
},
{
"type": "text",
"id": "newsletter_label",
"label": "Label",
"default": "Email"
},
{
"type": "text",
"id": "newsletter_button",
"label": "Button",
"default": "Submit"
},
{
"type": "header",
"content": "Social sharing"
},
{
"type": "checkbox",
"id": "show_social_icons",
"label": "Show social icons",
"default": false
},
{
"type": "text",
"id": "social_icons_title",
"label": "Social icons title",
"default": "Spread the word"
}
]
}
{% endschema %}

<!--BEGIN KLAVIYO CODE -->
<div align="center">
<script async type="text/javascript" src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=XXXXXX"></script>
<!--END KLAVIYO CODE -->

0 Likes
Highlighted

Hello,

Thank you for your question.

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

I'll help you to the best of my ability.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes