klaviyo-embedded-subscription.liquid

{%- comment -%}
#############################################################################
   Easy Step To Add a Custom Legacy Embedded Email Signup Form in Shopify  
   ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
###############################################################################
#    Paypal Me: https://paypal.me/elghorfimed  #
#              Buy Me A Coffee:                #
#    https://www.buymeacoffee.com/elghorfi     #
###############################################################################
    [email protected]
    https://medium.com/p/3d999390c4c5/
#############################################################################
{%- endcomment -%}

{%style%}
  {% if section.settings.background_image %}
    #shopify-section-{{section.id}}::before {
      content: "";
      position: absolute;
      top: 0; 
      left: 0;
      width: 100%; 
      height: 100%;  
      opacity: {{section.settings.background_opacity}};
      z-index: -1;
      background: url({{section.settings.background_image | img_url: 'master'}}) center center no-repeat;
    }
  {% endif %}
  #shopify-section-{{section.id}} {
    margin-top: {{ section.settings.margin_top }}px;
    marin-bottom: {{ section.settings.margin_bottom }}px;
    background: {{ section.settings.background_color }};
    position: relative;
    z-index: 1;
    display:grid;
    justify-content:{{section.settings.align_items}};
    text-align:{{section.settings.text_align}};
  }
  #shopify-section-{{section.id}} * {
    font-familty:{{section.settings.font}};
  }
  .klaviyo-newsletter {
    padding: 20px;
  }
  .klaviyo-newsletter-body h3 {
    color: {{section.settings.heading_text_color}};
    margin: 10px 0;
    font-weight: bold;
    font-size:{{section.settings.heading_font_size}}px;
    text-transform:{{section.settings.heading_text_transform}};
    {% if section.settings.heading_text_bold %}
    font-weight: bold;
    {% endif %}
  }
  
  .klaviyo-newsletter-body p {
    color: {{section.settings.subheading_text_color}};
    font-size:{{section.settings.subheading_font_size}}px;
    text-transform:{{section.settings.subheading_text_transform}};
    padding: 0;
    margin: 0;
    {% if section.settings.subheading_text_bold %}
    font-weight: bold;
    {% endif %}
  }
  form#email_signup button,
  form#email_signup input {
    outline: none;
    border: none;
    box-shadow: none;
  }
  form#email_signup input {
    height: {{section.settings.input_height}}px;
    background: {{section.settings.input_background}};
    border-radius: {{section.settings.input_radius}}px;
    padding-left: 10px;
  }
  form#email_signup button:hover {
    background: {{section.settings.button_background_hover}};
    color: {{section.settings.button_color_hover}};
    cursor: pointer;
    transition: all .4s ease-in-out;
  }
  form#email_signup button {
    height: {{section.settings.button_height}}px;
    border-radius: {{section.settings.button_radius}}px;
    background: {{section.settings.button_background}};
    color: {{section.settings.button_text_color}};
    font-weight: bold;
    font-size: 14px;
  }
  .klaviyo-newsletter-logo img{
    border-radius: {{section.settings.logo_radius}}px;
  }
{%endstyle%}
<div class="klaviyo-newsletter">
  <div class="klaviyo-newsletter-logo">
    {{ section.settings.logo | img_tag }}
  </div>
  <div class="klaviyo-newsletter-body">
    <h3>{{section.settings.heading}}</h3>
    <p>{{section.settings.subheading}}</p>
    <div class="klaviyo_messages" style="color: {{section.settings.klaviyo_message_color}}; padding: 10px;">
      <div class="success_message" style="display:none;"></div>
      <div class="error_message" style="display:none;"></div>
    </div>
    <form action="//manage.kmail-lists.com/subscriptions/subscribe"
      data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe"
      method="GET"
      target="_blank"
      novalidate="novalidate"
      id="email_signup">
      <input type="hidden" name="g" value="{{section.settings.klaviyo_id}}">
      <input type="hidden" name="$fields" value="$consent">
      <input type="hidden" name="$list_fields" value="$consent">
      <input type="text" placeholder="{{section.settings.email_placeholder}}" name="email" autocomplete="email">
      <input type="hidden" name="challenge" value="false" />
      <button type="button">{{section.settings.button_text}}</button>
      <button type="submit" style="display: none">{{section.settings.button_text}}</button>
    </form>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
  document.querySelector("#email_signup button").addEventListener("click", (e)=>{
    e.preventDefault()
    if(document.querySelector("#email_signup input[name=\"email\"]").value != ""){
      if(validateEmail(document.querySelector("#email_signup input[name=\"email\"]").value)){
        document.querySelector(".error_message").innerHTML = ""
        document.querySelector(".error_message").style.display = "none"
        document.querySelector("#email_signup input[name=\"email\"]").style.borderBottom = "2px solid #fff" 
        document.querySelector("#email_signup button[type=\"submit\"]").click()
      }else{
        document.querySelector("#email_signup input[name=\"email\"]").style.borderBottom = "2px solid red"
        document.querySelector(".success_message").style.display = "none"
        document.querySelector(".error_message").innerHTML = "<small>Please enter a valid email.<small>"
        document.querySelector(".error_message small").style.color = "red"
        document.querySelector(".error_message").style.display = "block"
        }
      }else{
        document.querySelector("#email_signup input[name=\"email\"]").focus()
        document.querySelector("#email_signup input[name=\"email\"]").style.borderBottom = "2px solid red"
        document.querySelector(".success_message").style.display = "none"
        document.querySelector(".error_message").innerHTML = "<small>Email is required*<small>"
        document.querySelector(".error_message small").style.color = "red"
        document.querySelector(".error_message").style.display = "block"
    }
  })

  function validateEmail(email){return String(email).toLowerCase().match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)}
  KlaviyoSubscribe.attachToForms('#email_signup', {
    hide_form_on_success: true,
    success_message: "{{section.settings.success_message}}",
    extra_properties: {
      $source: '$embed',
      $method_type: "Klaviyo Form",
      $method_id: 'embed',
      $consent_version: 'Embed default text'
    }
  });
</script>

{% schema %}
{
"name": "Klaviyo Newsletter",
"settings": [
{
  "type": "header",
  "content": "Section Styles"
},
{
  "type": "color",
  "id": "background_color",
  "label": "Background Color",
  "default": "#eee"
},
{
  "type": "image_picker",
  "id": "background_image",
  "label": "Background Image",
  "info": "If set, the background color will be skipped."
},
{
  "type": "range",
  "id": "logo_radius",
  "label": "Logo Radius",
  "min": 0,
  "max": 100,
  "step": 1,
  "default": 100
},
{
  "type": "range",
  "id": "background_opacity",
  "label": "Background Opacity",
  "min": 0,
  "max": 1,
  "step": 0.1,
  "default": 1
},
{
  "type": "select",
  "id": "align_items",
  "label": "Align Items",
  "default": "center",
  "options": [
    {
      "value": "left",
      "label": "Left"
    },
    {
      "value": "center",
      "label": "Center"
    },
    {
      "value": "right",
      "label": "Right"
    }
  ]
},
{
  "type": "select",
  "id": "text_align",
  "label": "Text Align",
  "default": "center",
  "options": [
    {
      "value": "left",
      "label": "Left"
    },
    {
      "value": "center",
      "label": "Center"
    },
    {
      "value": "right",
      "label": "Right"
    }
  ]
},
{
  "type": "font_picker",
  "id": "font",
  "label": "Font Family",
  "default": "work_sans_n6"
},
{
  "type": "header",
  "content": "Heading Styles"
},
{
    "type": "color",
    "id": "heading_text_color",
    "label": "Heading Text Color",
    "default": "#000"
},
{
  "type": "range",
  "id": "heading_font_size",
  "label": "Heading Font Size",
  "min": 10,
  "max": 50,
  "step": 1,
  "default": 30,
  "unit": "px"
},
{
  "type": "select",
  "id": "heading_text_transform",
  "label": "Text Format",
  "default": "none",
  "options": [
    {
      "value": "none",
      "label": "Default"
    },
    {
      "value": "lowercase",
      "label": "Lowercase"
    },
    {
      "value": "capitalize",
      "label": "Capitalize"
    },
    {
      "value": "uppercase",
      "label": "Uppercase"
    }
  ]
},
{
  "type": "checkbox",
  "id": "heading_text_bold",
  "label": "Text Bold",
  "default": true
},
{
  "type": "header",
  "content": "Sub-Heading Styles"
},
{
    "type": "color",
    "id": "subheading_text_color",
    "label": "Text Color",
    "default": "#999"
},
{
  "type": "range",
  "id": "subheading_font_size",
  "label": "Font Size",
  "min": 10,
  "max": 50,
  "step": 1,
  "default": 25,
  "unit": "px"
},
{
  "type": "select",
  "id": "subheading_text_transform",
  "label": "Text Format",
  "default": "none",
  "options": [
    {
      "value": "none",
      "label": "Default"
    },
    {
      "value": "lowercase",
      "label": "Lowercase"
    },
    {
      "value": "capitalize",
      "label": "Capitalize"
    },
    {
      "value": "uppercase",
      "label": "Uppercase"
    }
  ]
},
{
  "type": "checkbox",
  "id": "subheading_text_bold",
  "label": "Text Bold",
  "default": false
},
{
  "type": "header",
  "content": "Email Input Style"
},
{
  "type": "text",
  "id": "input_height",
  "label": "Input Height",
  "default": "50",
  "info": "in px"
},
{
  "type": "color",
  "id": "input_background",
  "label": "Input Background",
  "default": "#fff"
},
{
  "type": "range",
  "id": "input_radius",
  "label": "Border Radius",
  "min": 0,
  "max": 20,
  "step": 1,
  "default": 0
},
{
  "type": "header",
  "content": "Button Style"
},
{
  "type": "text",
  "id": "button_height",
  "label": "Button Height",
  "default": "50",
  "info": "in px"
},
{
  "type": "color",
  "id": "button_background",
  "label": "Button Background",
  "default": "#aaa"
},
{
  "type": "color",
  "id": "button_text_color",
  "label": "Button Text Color",
  "default": "#000"
},
{
  "type": "color",
  "id": "button_background_hover",
  "label": "Button Background on hover",
  "default": "#000"
},
{
  "type": "color",
  "id": "button_color_hover",
  "label": "Text color on hover",
  "default": "#fff"
},
{
  "type": "range",
  "id": "button_radius",
  "label": "Border Radius",
  "min": 0,
  "max": 20,
  "step": 1,
  "default": 0
},
{
  "type": "header",
  "content": "Section Content"
},
{
    "type": "image_picker",
    "id": "logo",
    "label": "Logo"
},
{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "NEW DROPS COMING SOON"
},
{
  "type": "textarea",
  "id": "subheading",
  "label": "Subheading",
  "default": "Get early access to new releases."
},
{
  "type": "text",
  "id": "email_placeholder",
  "label": "Email Placeholder",
  "default": "Your email"
},
{
  "type": "text",
  "id": "button_text",
  "label": "Button Text",
  "default": "GET UPDATES"
},
{
  "type": "header",
  "content": "Klaviyo Settings"
},
{
  "type": "text",
  "id": "success_message",
  "label": "Success Message",
  "default": "Thank you for signing up!"
},
{
  "type": "color",
  "id": "klaviyo_message_color",
  "label": "Klaviyo Message Color",
  "default": "#28a745"
},
{
  "type": "text",
  "id": "klaviyo_id",
  "label": "Klaviyo List ID",
  "default": "00000"
},
{
  "type": "header",
  "content": "Spacing Settings"
},
{
  "type": "range",
  "id": "margin_top",
  "label": "Top spacing",
  "min": 0,
  "max": 80,
  "default": 0,
  "unit": "px"
},
{
  "type": "range",
  "id": "margin_bottom",
  "label": "Bottom spacing",
  "min": 0,
  "max": 80,
  "default": 10,
  "unit": "px"
}
],
"presets": [
  {
    "category": "Newsletter",
    "name":"Klaviyo Newsletter"
  }
]
}
{% endschema %}