Klaviyo back in stock integration, the Shopify edition.

klaviyo-back-in-stock.liquid

{% if settings.klaviyo_public_api_key != blank %}
  {% # theme-check-disable %}
  <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
  {% # theme-check-enable %}
  <script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "{{ settings.klaviyo_public_api_key }}",
      {%- if settings.klaviyo_bis_list_id != blank %}
      list: "{{ settings.klaviyo_bis_list_id }}",
      {%- endif %}
      platform: "shopify"
    });
    klaviyo.enable("backinstock", {
      trigger: {
        product_page_text: {{ settings.klaviyo_bis_product_page_text | json }},
        product_page_class: {{ settings.klaviyo_bis_product_page_class | json }},
        product_page_text_align: {{ settings.klaviyo_bis_product_page_text_align | json }},
        product_page_margin: {{ settings.klaviyo_bis_product_page_margin | json }},
        {%- if settings.klaviyo_bis_alternate_anchor != blank -%}
          alternate_anchor: {{ settings.klaviyo_bis_alternate_anchor | json }},
        {%- endif -%}
        replace_anchor: {{ settings.klaviyo_bis_replace_anchor | json }}
      },
      modal: {
        headline: {{ settings.klaviyo_bis_headline | json }},
        body_content: {{ settings.klaviyo_bis_body_content | json }},
        email_field_label: {{ settings.klaviyo_bis_email_field_label | json }},
        button_label: {{ settings.klaviyo_bis_button_label | json }},
        subscription_success_label: {{ settings.klaviyo_bis_subscription_success_label | json }},
        footer_content: {{ settings.klaviyo_bis_footer_content | json }},
        close_label: {{ settings.klaviyo_bis_close_label | json }},
        additional_styles: {{ settings.klaviyo_bis_additional_styles | json }},
        drop_background_color: {{ settings.klaviyo_bis_drop_background_color | json }},
        background_color: {{ settings.klaviyo_bis_background_color | json }},
        text_color: {{ settings.klaviyo_bis_text_color | json }},
        button_text_color: {{ settings.klaviyo_bis_button_text_color | json }},
        button_background_color: {{ settings.klaviyo_bis_button_background_color | json }},
        close_button_color: {{ settings.klaviyo_bis_close_button_color | json }},
        error_background_color: {{ settings.klaviyo_bis_error_background_color | json }},
        error_text_color: {{ settings.klaviyo_bis_error_text_color | json }},
        success_background_color: {{ settings.klaviyo_bis_success_background_color | json }},
        success_text_color: {{ settings.klaviyo_bis_success_text_color | json }},
        font_family: {{ settings.klaviyo_bis_font_family | json }},
        headers_font_family: {{ settings.klaviyo_bis_headers_font_family | json }},
        subscribe_checked: {{ settings.klaviyo_bis_subscribe_checked }},
        newsletter_subscribe_label: {{ settings.klaviyo_bis_newsletter_subscribe_label | json }},
      }
    });
  </script>
{% endif %}

settings_schema.json

[
  {
    "name": "Klaviyo",
    "settings": [
      {
        "type": "text",
        "id": "klaviyo_public_api_key",
        "label": "Public api key",
        "info": "[Where to find this?](https://help.klaviyo.com/hc/en-us/articles/115005062267)"
      },
      {
        "type": "header",
        "content": "Back in stock"
      },
      {
        "type": "checkbox",
        "id": "klaviyo_bis",
        "label": "Enable",
        "default": false,
        "info": "Enable Klaviyo's back in stock feature for Shopify so that your customers can subscribe to back in stock alerts. Public api key is required."
      },
      {
        "type": "text",
        "id": "klaviyo_bis_list_id",
        "label": "List ID",
        "info": "Set the ID for the Klaviyo list you want to add subscribers to. Typically, this should be your main newsletter list. [Where to find this?](https://help.klaviyo.com/hc/en-us/articles/115005078647-How-to-Find-a-List-ID#find-your-list-id1)"
      },
      {
        "type": "header",
        "content": "Trigger"
      },
      {
        "type": "text",
        "id": "klaviyo_bis_product_page_text",
        "label": "Product page text",
        "default": "Notify Me When Available",
        "info": "The text that is displayed inside the button that populates when an item goes out of stock."
      },
      {
        "type": "text",
        "id": "klaviyo_bis_product_page_class",
        "label": "Product page class",
        "default": "button button--primary w-full",
        "info": "This class will determine what the button looks like; the default value 'button' will ensure this button matches other basic buttons in your theme."
      },
      {
        "type": "text",
        "id": "klaviyo_bis_product_page_text_align",
        "label": "Product page text align",
        "default": "text-center",
        "info": "The alignment class of the text inside the back in stock button (i.e., center, right, or left)."
      },
      {
        "type": "text",
        "id": "klaviyo_bis_product_page_margin",
        "label": "Product page margin",
        "default": "0px",
        "info": "The margin added around the button, between the text and the button."
      },
      {
        "type": "text",
        "id": "klaviyo_bis_alternate_anchor",
        "label": "Alternate anchor",
        "default": "buy-buttons",
        "info": "If your Shopify theme uses an element other than an \"Add to Cart\" button, replace this text with the ID of the element."
      },
      {
        "type": "checkbox",
        "id": "klaviyo_bis_replace_anchor",
        "label": "Replace anchor",
        "info": "When this is set to false, you will see both a \"Sold Out\" and a \"Notify Me\" button. When this is set to true, the \"Notify Me\" button will replace the \"Sold Out\" button."
      },
      {
        "type": "header",
        "content": "Popup"
      },
      {
        "type": "text",
        "id": "klaviyo_bis_headline",
        "label": "Headline",
        "info": "The headline that appears at the top of the popup; by default, we'll dynamically populate the headline as the product name using Shopify's {product_name} variable.",
        "default": "{product_name}"
      },
      {
        "type": "textarea",
        "id": "klaviyo_bis_body_content",
        "label": "Body content",
        "info": "The text that appears inside the popup instructing the customer what to do.",
        "default": "Register to receive a notification when this item comes back in stock."
      },
      {
        "type": "text",
        "id": "klaviyo_bis_email_field_label",
        "label": "Email field label",
        "info": "The placeholder text inside the Email field.",
        "default": "Email"
      },
      {
        "type": "text",
        "id": "klaviyo_bis_button_label",
        "label": "Button label",
        "info": "The text within the submit button for this popup form.",
        "default": "Notify me when available"
      },
      {
        "type": "text",
        "id": "klaviyo_bis_subscription_success_label",
        "label": "Subscription success label",
        "info": "The message that appears when someone successfully submits the popup form.",
        "default": "You're in! We'll let you know when it's back."
      },
      {
        "type": "text",
        "id": "klaviyo_bis_footer_content",
        "label": "Footer content",
        "info": "Optional text that will appear in the footer, below the submit button."
      },
      {
        "type": "liquid",
        "id": "klaviyo_bis_additional_styles",
        "label": "Additional styles",
        "info": "Add additional styles to the back in stock form. Use CSS syntax. For example: @import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
        "default": "@import url('https://fonts.googleapis.com/css?family=Lato');"
      },
      {
        "type": "text",
        "id": "klaviyo_bis_close_label",
        "label": "Close label",
        "info": "The text of the close button; default is \"Close\".",
        "default": "Close"
      },
      {
        "type": "color",
        "id": "klaviyo_bis_close_button_color",
        "label": "Close button color",
        "info": "The text color of the close button popup form; default is gray.",
        "default": "#cccccc"
      },
      {
        "type": "color",
        "id": "klaviyo_bis_background_color",
        "label": "Background color popup form",
        "info": "The background color of the popup form; default is white.",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "klaviyo_bis_drop_background_color",
        "label": "Drop background color",
        "info": "The drop background color of the popup form; default is black.",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "klaviyo_bis_text_color",
        "label": "Text color",
        "info": "The text color of the popup form; default is black.",
        "default": "#222222"
      },
      {
        "type": "color",
        "id": "klaviyo_bis_button_text_color",
        "label": "Button text color",
        "info": "The text color of the button on the popup form; default is white.",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "klaviyo_bis_button_background_color",
        "label": "Button text color",
        "info": "The background color of the form's submit button; default is blue.",
        "default": "#439fdb"
      },
      {
        "type": "color",
        "id": "klaviyo_bis_error_background_color",
        "label": "Error background color",
        "info": "The background color of an error box that shows when there is an error submitting the form; default is pale red.",
        "default": "#fcd6d7"
      },
      {
        "type": "color",
        "id": "klaviyo_bis_error_text_color",
        "label": "Error text color",
        "info": "The text color of the error message that shows when there is an error submitting the form; default is red.",
        "default": "#C72E2F"
      },
      {
        "type": "color",
        "id": "klaviyo_bis_success_background_color",
        "label": "Success background color",
        "info": "The background color of the success box that shows after someone submits the form successfully; default is pale green.",
        "default": "#d3efcd"
      },
      {
        "type": "color",
        "id": "klaviyo_bis_success_text_color",
        "label": "Success text color",
        "info": "The text color of the success message that shows after someone submits the form successfully; default is green.",
        "default": "#1B9500"
      },
      {
        "type": "text",
        "id": "klaviyo_bis_font_family",
        "label": "Font family",
        "info": "The name of the font family your text is formatted in; Times New Roman is an example of a font family.",
        "default": "Lato, sans-serif"
      },
      {
        "type": "text",
        "id": "klaviyo_bis_headers_font_family",
        "label": "Headers font family",
        "info": "The name of the font family your header text is formatted in; Helvetica is an example of a font family.",
        "default": "Apris, serif"
      },
      {
        "type": "text",
        "id": "klaviyo_bis_newsletter_subscribe_label",
        "label": "Newsletter subscribe label",
        "info": "If you would like to customize what the checkbox says, you can add the text you'd like to display into the \"popup\" section. By default, this checkbox will say, \"Add me to your email list.\" You'll want to make sure this text is very clear so those who opt-in know they will begin receiving marketing emails from you.",
        "default": "Add me to your email list."
      },
      {
        "type": "checkbox",
        "id": "klaviyo_bis_subscribe_checked",
        "label": "Check opt-in checkbox by default",
        "info": "Check the checkbox for the opt-in by default. Make sure this allowed in your country/region.",
        "default": false
      }
    ]
  }
]