Email List
{% if block_settings.heading != blank %}
{% stylesheet %}
.email-signup-block {
--arrow-button-size: 58px;
--arrow-button-size-integrated: 42px;
--arrow-button-size-small: 20px;
--arrow-icon-size: 32px;
--arrow-icon-size-small: 24px;
min-width: fit-content;
@media screen and (max-width: 749px) {
width: 100%;
min-width: unset;
}
}
.email-signup__heading {
padding-block: var(--padding-sm);
}
.email-signup__form {
display: flex;
flex-direction: column;
}
.email-signup__input-group {
display: flex;
align-items: stretch;
background-color: transparent;
}
.email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
gap: var(--gap-xs);
align-items: center;
}
.email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
.email-signup__input-group--integrated
) {
@media screen and (max-width: 749px) {
flex-direction: column;
}
}
.email-signup__input-group--integrated {
border-width: var(--border-width);
border-radius: var(--border-radius);
border-style: solid;
border-color: var(--color-input-border);
background-color: var(--color-input-background);
}
.email-signup__input-group--integrated.email-signup__input-group--no-border {
border: none;
}
.email-signup__input {
flex: 1;
min-width: 0;
border-width: var(--border-width);
border-radius: var(--border-radius);
border-style: solid;
border-color: var(--color-input-border);
@media screen and (max-width: 749px) {
width: 100%;
}
}
.email-signup__input-group--integrated .email-signup__input {
background-color: transparent;
border: none;
border-radius: 0;
}
.email-signup__input.paragraph {
color: var(--color-input-text);
outline-color: var(--color-input-background);
}
.email-signup__button {
white-space: nowrap;
padding: 0;
@media screen and (max-width: 749px) {
width: 100%;
}
}
.email-signup__input,
.email-signup__button--text {
padding: var(--padding-lg) var(--padding-3xl);
}
.email-signup__input-group--underline {
--box-shadow-color: var(--color-input-border);
--box-shadow-multiplier: 1;
--box-shadow-focused-multiplier: 1.75;
box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
transition: box-shadow var(--animation-values);
margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));
&:focus-within {
--box-shadow-multiplier: var(--box-shadow-focused-multiplier);
--box-shadow-color: var(--color-input-text);
}
}
.email-signup__input-group .email-signup__input--underline {
color: var(--color-input-text);
background-color: transparent;
padding: 12px 0;
border: none;
border-radius: 0;
&:focus-visible {
outline: none;
}
}
.email-signup__input::placeholder {
color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
}
.email-signup__input-group .email-signup__input--none {
color: var(--color-input-text);
background-color: var(--color-input-background);
border: none;
}
.email-signup__button-icon {
color: currentcolor;
padding: 5px;
@media screen and (max-width: 749px) {
padding: 0;
align-self: center;
justify-self: center;
width: var(--icon-size-lg);
height: var(--icon-size-lg);
}
}
.email-signup__button--arrow {
width: var(--arrow-button-size-small);
height: var(--arrow-button-size-small);
padding: 0;
&:not(.email-signup__button--integrated) {
width: var(--arrow-button-size);
height: var(--arrow-button-size);
display: flex;
align-items: center;
justify-content: center;
> .email-signup__button-icon {
width: var(--arrow-icon-size);
height: var(--arrow-icon-size);
padding: 0;
}
}
}
.email-signup__button--integrated {
--button-offset: var(--margin-xs);
align-self: stretch;
margin: var(--button-offset);
flex-shrink: 0;
@media screen and (max-width: 749px) {
width: fit-content;
}
&.email-signup__button--text {
padding: 0 var(--padding-3xl);
}
&.email-signup__button--text.button-unstyled {
padding: 0 var(--padding-xl);
}
&.button-unstyled {
border-radius: var(--border-radius);
}
> .email-signup__button-icon {
padding: 0;
}
&.email-signup__button--arrow {
width: var(--arrow-button-size-integrated);
height: var(--arrow-button-size-integrated);
align-self: center;
display: flex;
align-items: center;
justify-content: center;
> .email-signup__button-icon {
width: var(--arrow-icon-size-small);
height: var(--arrow-icon-size-small);
}
}
}
.email-signup__input--underline + .email-signup__button--integrated {
margin: 0;
align-self: center;
&.email-signup__button--text {
padding-block: 9px;
}
&.email-signup__button--text.button-unstyled {
padding-inline: 0;
min-width: 44px;
min-height: 44px;
}
&.button-unstyled {
border-radius: 0;
}
&.email-signup__button--arrow {
width: var(--arrow-button-size-integrated);
height: var(--arrow-button-size-integrated);
display: flex;
align-items: center;
justify-content: center;
> .email-signup__button-icon {
width: var(--arrow-icon-size-small);
height: var(--arrow-icon-size-small);
}
}
}
.email-signup__button:not(.button-unstyled) {
background-color: var(--button-background-color);
color: var(--button-color);
text-transform: var(--button-text-case-primary);
}
.email-signup__button.button-secondary {
text-transform: var(--button-text-case-secondary);
}
.email-signup__button.button-unstyled {
background-color: transparent;
color: var(--color-input-text);
}
.email-signup__button.button-unstyled:hover {
color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
cursor: pointer;
}
.email-signup__message {
display: flex;
align-items: center;
gap: var(--gap-xs);
}
.email-signup__message-text {
margin: 0;
}
{% endstylesheet %}
{% schema %}
{
"name": "t:names.email_signup",
"tag": null,
"settings": [
{
"type": "paragraph",
"content": "t:content.email_signups_create_customer_profiles"
},
{
"type": "select",
"id": "width",
"label": "t:settings.width",
"options": [
{
"value": "fill",
"label": "t:options.fill"
},
{
"value": "custom",
"label": "t:options.custom"
}
],
"default": "fill"
},
{
"type": "range",
"id": "custom_width",
"label": "t:settings.custom_width",
"min": 20,
"max": 100,
"step": 1,
"unit": "%",
"default": 100,
"visible_if": "{{ block.settings.width == \"custom\" }}"
},
{
"type": "checkbox",
"id": "inherit_color_scheme",
"label": "t:settings.inherit_color_scheme",
"default": true
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:settings.color_scheme",
"default": "primary",
"visible_if": "{{ block.settings.inherit_color_scheme == false }}"
},
{
"type": "header",
"content": "t:content.heading"
},
{
"type": "text",
"id": "heading",
"label": "t:settings.text"
},
{
"type": "select",
"id": "heading_preset",
"label": "t:settings.type_preset",
"options": [
{
"value": "",
"label": "t:options.default"
},
{
"value": "paragraph",
"label": "t:options.paragraph"
},
{
"value": "h1",
"label": "t:options.h1"
},
{
"value": "h2",
"label": "t:options.h2"
},
{
"value": "h3",
"label": "t:options.h3"
},
{
"value": "h4",
"label": "t:options.h4"
},
{
"value": "h5",
"label": "t:options.h5"
},
{
"value": "h6",
"label": "t:options.h6"
}
],
"default": "h3",
"info": "t:info.edit_presets_in_theme_settings"
},
{
"type": "header",
"content": "t:content.input"
},
{
"type": "select",
"id": "border_style",
"label": "t:settings.border",
"options": [
{
"value": "all",
"label": "t:options.all"
},
{
"value": "underline",
"label": "t:options.underline"
},
{
"value": "none",
"label": "t:options.none"
}
],
"default": "all"
},
{
"type": "range",
"id": "border_width",
"label": "t:settings.border_width",
"min": 0,
"max": 4,
"step": 0.5,
"unit": "px",
"default": 1,
"visible_if": "{{ block.settings.border_style != \"none\" }}"
},
{
"type": "range",
"id": "border_radius",
"label": "t:settings.border_radius",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"default": 100,
"visible_if": "{{ block.settings.border_style != \"underline\" }}"
},
{
"type": "select",
"id": "input_type_preset",
"label": "t:settings.type_preset",
"options": [
{
"value": "",
"label": "t:options.default"
},
{
"value": "paragraph",
"label": "t:options.paragraph"
},
{
"value": "h1",
"label": "t:options.h1"
},
{
"value": "h2",
"label": "t:options.h2"
},
{
"value": "h3",
"label": "t:options.h3"
},
{
"value": "h4",
"label": "t:options.h4"
},
{
"value": "h5",
"label": "t:options.h5"
},
{
"value": "h6",
"label": "t:options.h6"
}
],
"default": "paragraph",
"info": "t:info.edit_presets_in_theme_settings"
},
{
"type": "header",
"content": "t:content.submit_button"
},
{
"type": "select",
"id": "style_class",
"label": "t:settings.style",
"options": [
{
"value": "button",
"label": "t:options.primary"
},
{
"value": "button-secondary",
"label": "t:options.secondary"
},
{
"value": "button-unstyled",
"label": "t:options.link"
}
],
"default": "button"
},
{
"type": "select",
"id": "display_type",
"label": "t:settings.display",
"options": [
{
"value": "text",
"label": "t:options.text"
},
{
"value": "arrow",
"label": "t:options.arrow"
}
],
"default": "text"
},
{
"type": "text",
"id": "label",
"label": "t:settings.label",
"default": "t:text_defaults.sign_up",
"visible_if": "{{ block.settings.display_type == \"text\" }}"
},
{
"type": "checkbox",
"id": "integrated_button",
"label": "t:settings.integrated_button",
"default": false,
"visible_if": "{{ block.settings.border_style != \"underline\" }}"
},
{
"type": "select",
"id": "button_type_preset",
"label": "t:settings.type_preset",
"options": [
{
"value": "",
"label": "t:options.default"
},
{
"value": "paragraph",
"label": "t:options.paragraph"
},
{
"value": "h1",
"label": "t:options.h1"
},
{
"value": "h2",
"label": "t:options.h2"
},
{
"value": "h3",
"label": "t:options.h3"
},
{
"value": "h4",
"label": "t:options.h4"
},
{
"value": "h5",
"label": "t:options.h5"
},
{
"value": "h6",
"label": "t:options.h6"
}
],
"default": "paragraph",
"info": "t:info.edit_presets_in_theme_settings",
"visible_if": "{{ block.settings.display_type == \"text\" }}"
},
{
"type": "header",
"content": "t:content.padding"
},
{
"type": "range",
"id": "padding-block-start",
"label": "t:settings.top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "padding-block-end",
"label": "t:settings.bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "padding-inline-start",
"label": "t:settings.left",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "padding-inline-end",
"label": "t:settings.right",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"default": 0
}
],
"presets": [
{
"name": "t:names.email_signup",
"category": "t:categories.forms"
}
]
}
{% endschema %}
{{ block_settings.heading | escape }}
{% endif %}
{%- form 'customer', class: 'email-signup__form spacing-style' %}
{%- if form.errors and form.id == blank -%}
{%- endif -%}
{%- if form.posted_successfully? and form.id == blank -%}
{%- endif -%}
{% endform %}