Pro
← All sections
Newsletter Glow
A glowing email-capture card with a clear first-order incentive and live social proof.
Install
One file: sections/mf-newsletter-glow.liquid. It appears in the theme editor as EX · Newsletter glow.
- Connect EXPERAISE Sections to Claude (once). In Claude Code:In the Claude app: Settings → Connectors → Add custom connector →
claude mcp add --transport http experaise-sections https://sections.experaise.com/api/mcphttps://sections.experaise.com/api/mcp. Full setup - Ask Claude. It fetches
sections/mf-newsletter-glow.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.Install the EXPERAISE Sections section "Newsletter Glow" (newsletter-glow) on my Shopify store your-store.myshopify.com. Put it on an unpublished copy of my live theme, then tell me how to add it in the theme editor. - Customize. Online Store → Themes → Customize → Add section → EX · Newsletter glow. Every text, color and product is a setting.
{%- liquid
assign s = section.settings
assign layout = s.layout | default: 'split'
assign tags = s.tags | default: 'newsletter'
assign shop_initial = shop.name | strip | slice: 0 | upcase
-%}
{%- capture form_id -%}mf-news-{{ section.id }}{%- endcapture -%}
<mf-newsletter-glow
class="mf-news mf-news--{{ layout }}{% if s.animate_border %} mf-news--animated{% endif %}{% if layout == 'centered' and s.image != blank %} mf-news--photo{% endif %}"
style="--mf-news-bg: {{ s.color_bg }}; --mf-news-fg: {{ s.color_text }}; --mf-news-card: {{ s.color_card }}; --mf-news-btn: {{ s.color_button }}; --mf-news-btn-fg: {{ s.color_button_text }}; --mf-news-a: {{ s.color_glow_a }}; --mf-news-b: {{ s.color_glow_b }}; --mf-news-pt: {{ s.padding_top }}px; --mf-news-pb: {{ s.padding_bottom }}px;"
>
<div class="mf-news__backdrop" aria-hidden="true">
{%- if layout == 'centered' and s.image != blank -%}
{{
s.image
| image_url: width: 2000
| image_tag:
loading: 'lazy',
sizes: '100vw',
widths: '750, 1100, 1500, 2000',
class: 'mf-news__backdrop-img',
alt: ''
}}
{%- endif -%}
<span class="mf-news__blob mf-news__blob--a"></span>
<span class="mf-news__blob mf-news__blob--b"></span>
<span class="mf-news__blob mf-news__blob--c"></span>
<span class="mf-news__grid"></span>
</div>
<div class="mf-news__inner">
<div class="mf-news__frame">
<div class="mf-news__aura" aria-hidden="true"></div>
<div class="mf-news__card">
<div class="mf-news__ring" aria-hidden="true"></div>
<div class="mf-news__spot" aria-hidden="true"></div>
<div class="mf-news__body">
{%- if s.badge != blank -%}
<p class="mf-news__badge mf-news__reveal" style="--mf-news-d: 0;">
<span class="mf-news__badge-icon" aria-hidden="true">
<svg viewBox="0 0 20 20" width="14" height="14"><path d="M3.5 8.5h13v8a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-8Zm-1-3h15v3h-15zM10 5.5v12M10 5.5C8.6 3 5.8 2.6 5.6 4.4 5.4 5.8 8 5.5 10 5.5Zm0 0c1.4-2.5 4.2-2.9 4.4-1.1.2 1.4-2.4 1.1-4.4 1.1Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
</span>
<span>{{ s.badge | escape }}</span>
</p>
{%- endif -%}
{%- if s.heading != blank -%}
<h2 class="mf-news__title mf-news__reveal" style="--mf-news-d: 1;">{{ s.heading }}</h2>
{%- endif -%}
{%- if s.text != blank -%}
<div class="mf-news__text mf-news__reveal" style="--mf-news-d: 2;">{{ s.text }}</div>
{%- endif -%}
<div class="mf-news__capture mf-news__reveal" style="--mf-news-d: 3;">
{%- form 'customer', id: form_id, class: 'mf-news__form' -%}
<input type="hidden" name="contact[tags]" value="{{ tags | escape }}">
{%- liquid
assign posted = false
if form.posted_successfully?
assign posted = true
endif
-%}
{%- unless posted -%}
<div class="mf-news__field" data-mf-field>
<div class="mf-news__control">
<label class="mf-news__sr" for="{{ form_id }}-email">{{ s.email_label | escape }}</label>
<svg class="mf-news__mail" viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><path d="M3 5.5h14v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-9Zm0 0 7 5.5 7-5.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
<input
class="mf-news__input"
id="{{ form_id }}-email"
type="email"
name="contact[email]"
value="{{ form.email | escape }}"
placeholder="{{ s.email_placeholder | escape }}"
autocomplete="email"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
required
aria-required="true"
{% if form.errors %}
aria-invalid="true"
aria-describedby="{{ form_id }}-error"
{% endif %}
>
</div>
<button type="submit" class="mf-news__button" data-mf-submit>
<span class="mf-news__button-label">{{ s.button_label | escape }}</span>
<svg class="mf-news__arrow" viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M4 10h11m-4.5-5 5 5-5 5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="mf-news__spinner" aria-hidden="true"></span>
</button>
</div>
{%- if form.errors -%}
<p class="mf-news__alert" id="{{ form_id }}-error" role="alert" data-mf-error>
<svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><circle cx="10" cy="10" r="7.5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M10 6v5m0 3v.01" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
<span>
<strong>{{ s.error_text | escape }}</strong>
{%- if form.errors contains 'email' %}
<span class="mf-news__alert-detail">{{ form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email }}</span>
{%- endif -%}
</span>
</p>
{%- endif -%}
{%- endunless -%}
<div class="mf-news__success" role="status" tabindex="-1" data-mf-success{% unless posted %} hidden{% endunless %}>
<span class="mf-news__check" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22"><path d="m6 12.5 4 4 8-9" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="mf-news__success-copy">
<strong>{{ s.success_heading | escape }}</strong>
{%- if s.success_text != blank -%}<span>{{ s.success_text | escape }}</span>{%- endif -%}
</span>
</div>
{%- endform -%}
</div>
{%- if s.consent != blank -%}
<div class="mf-news__consent mf-news__reveal" style="--mf-news-d: 4;">{{ s.consent }}</div>
{%- endif -%}
{%- if s.proof_text != blank -%}
<div class="mf-news__proof mf-news__reveal" style="--mf-news-d: 5;">
{%- if s.show_avatars -%}
<span class="mf-news__avatars" aria-hidden="true">
<i></i><i></i><i></i><i></i><i></i>
</span>
{%- endif -%}
<p class="mf-news__proof-text">{{ s.proof_text }}</p>
</div>
{%- endif -%}
</div>
{%- if layout == 'split' -%}
<div class="mf-news__visual">
{%- if s.image != blank -%}
{{
s.image
| image_url: width: 1400
| image_tag:
loading: 'lazy',
sizes: '(min-width: 990px) 560px, 100vw',
widths: '560, 800, 1100, 1400',
class: 'mf-news__visual-img'
}}
{%- else -%}
<div class="mf-news__art" aria-hidden="true">
<span class="mf-news__art-rays"></span>
<span class="mf-news__art-orb"></span>
<div class="mf-news__ticket-wrap">
<div class="mf-news__ticket">
<div class="mf-news__ticket-main">
<span class="mf-news__ticket-shop">{{ shop.name | escape }}</span>
<span class="mf-news__ticket-value">{{ s.art_value | escape }}</span>
<span class="mf-news__ticket-caption">{{ s.art_caption | escape }}</span>
</div>
<div class="mf-news__ticket-stub">
<span class="mf-news__barcode"></span>
</div>
</div>
</div>
<span class="mf-news__spark mf-news__spark--1"></span>
<span class="mf-news__spark mf-news__spark--2"></span>
<span class="mf-news__spark mf-news__spark--3"></span>
<span class="mf-news__spark mf-news__spark--4"></span>
</div>
{%- endif -%}
{%- if s.show_notification -%}
<div class="mf-news__notif" aria-hidden="true">
<span class="mf-news__notif-icon">{{ shop_initial }}</span>
<span class="mf-news__notif-body">
<span class="mf-news__notif-top">{{ shop.name | escape }}<i></i></span>
<span class="mf-news__notif-title">{{ s.success_heading | escape }}</span>
<span class="mf-news__notif-text">{{ s.badge | escape }}</span>
</span>
</div>
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
</div>
</mf-newsletter-glow>
{% stylesheet %}
@property --mf-news-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.mf-news {
--mf-news-line: color-mix(in srgb, var(--mf-news-fg) 13%, transparent);
--mf-news-muted: color-mix(in srgb, var(--mf-news-fg) 68%, var(--mf-news-card));
--mf-news-mx: 50%;
--mf-news-my: 0%;
position: relative;
isolation: isolate;
display: block;
overflow: hidden;
padding: var(--mf-news-pt, 96px) 0 var(--mf-news-pb, 96px);
background: var(--mf-news-bg, #07070c);
color: var(--mf-news-fg, #f4f2fb);
font-family: inherit;
}
.mf-news *,
.mf-news *::before,
.mf-news *::after {
box-sizing: border-box;
}
.mf-news [hidden] {
display: none !important;
}
/* Backdrop ------------------------------------------------------- */
.mf-news__backdrop {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.mf-news__backdrop-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.42;
}
.mf-news--photo .mf-news__backdrop::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--mf-news-bg) 55%, transparent), var(--mf-news-bg) 78%);
}
.mf-news__blob {
position: absolute;
width: 46vw;
max-width: 720px;
aspect-ratio: 1;
border-radius: 50%;
filter: blur(70px);
opacity: 0.5;
will-change: transform;
}
.mf-news__blob--a {
left: -8%;
top: -22%;
background: radial-gradient(circle, var(--mf-news-a), transparent 66%);
animation: mf-news-drift 18s ease-in-out infinite;
}
.mf-news__blob--b {
right: -10%;
bottom: -30%;
background: radial-gradient(circle, var(--mf-news-b), transparent 66%);
animation: mf-news-drift 22s ease-in-out -6s infinite reverse;
}
.mf-news__blob--c {
left: 38%;
top: 30%;
width: 30vw;
background: radial-gradient(circle, color-mix(in srgb, var(--mf-news-a) 50%, var(--mf-news-b)), transparent 66%);
opacity: 0.28;
animation: mf-news-drift 26s ease-in-out -12s infinite;
}
.mf-news__grid {
position: absolute;
inset: 0;
background:
linear-gradient(var(--mf-news-line) 1px, transparent 1px),
linear-gradient(90deg, var(--mf-news-line) 1px, transparent 1px);
background-size: 64px 64px;
opacity: 0.35;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 75%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 75%);
}
/* Card ----------------------------------------------------------- */
.mf-news__inner {
width: min(100% - 40px, 1180px);
margin: 0 auto;
}
.mf-news--centered .mf-news__inner {
width: min(100% - 40px, 760px);
}
.mf-news__frame {
position: relative;
}
.mf-news__aura {
position: absolute;
inset: 6% 4%;
z-index: -1;
border-radius: 40px;
background:
radial-gradient(60% 80% at 0% 0%, var(--mf-news-a), transparent 70%),
radial-gradient(60% 80% at 100% 100%, var(--mf-news-b), transparent 70%);
filter: blur(56px);
opacity: 0.42;
animation: mf-news-breathe 7s ease-in-out infinite;
}
.mf-news__card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
overflow: hidden;
border-radius: 32px;
background:
radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--mf-news-a) 12%, transparent), transparent 60%),
linear-gradient(180deg, color-mix(in srgb, var(--mf-news-fg) 5%, var(--mf-news-card)), var(--mf-news-card) 45%);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--mf-news-fg) 14%, transparent),
0 40px 90px -40px rgba(0, 0, 0, 0.7),
0 12px 30px -18px rgba(0, 0, 0, 0.5);
}
.mf-news--split .mf-news__card {
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
.mf-news__ring {
position: absolute;
inset: 0;
z-index: 3;
padding: 1.5px;
border-radius: inherit;
pointer-events: none;
background:
conic-gradient(
from var(--mf-news-angle),
transparent 0deg 40deg,
var(--mf-news-a) 80deg,
var(--mf-news-b) 120deg,
transparent 160deg 220deg,
var(--mf-news-b) 260deg,
var(--mf-news-a) 300deg,
transparent 340deg
),
linear-gradient(var(--mf-news-line), var(--mf-news-line));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.mf-news--animated .mf-news__ring {
animation: mf-news-spin 9s linear infinite;
}
.mf-news__spot {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
background: radial-gradient(420px circle at var(--mf-news-mx) var(--mf-news-my), color-mix(in srgb, var(--mf-news-a) 16%, transparent), transparent 62%);
transition: opacity 0.4s ease;
}
.mf-news__card:hover .mf-news__spot {
opacity: 1;
}
/* Copy ----------------------------------------------------------- */
.mf-news__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: clamp(32px, 5vw, 68px);
}
.mf-news--centered .mf-news__body {
align-items: center;
padding: clamp(36px, 6vw, 72px) clamp(24px, 6vw, 72px);
text-align: center;
}
.mf-news__badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
overflow: hidden;
margin: 0 0 26px;
padding: 7px 16px 7px 7px;
border: 1px solid color-mix(in srgb, var(--mf-news-a) 45%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--mf-news-a) 14%, transparent);
color: var(--mf-news-fg);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
text-transform: none;
}
.mf-news__badge::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--mf-news-fg) 28%, transparent) 50%, transparent 70%);
transform: translateX(-120%);
animation: mf-news-sheen 5s ease-in-out 1.2s infinite;
}
.mf-news__badge-icon {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mf-news-a), var(--mf-news-b));
color: #fff;
}
.mf-news__title {
margin: 0;
max-width: 14ch;
font-family: inherit;
font-size: clamp(36px, 4.6vw, 64px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.035em;
text-transform: none;
color: var(--mf-news-fg);
text-wrap: balance;
}
.mf-news--centered .mf-news__title {
max-width: 16ch;
}
.mf-news__title em {
padding-right: 0.06em;
font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
font-style: italic;
font-weight: 400;
letter-spacing: -0.02em;
color: transparent;
background: linear-gradient(100deg, var(--mf-news-fg) 0%, color-mix(in srgb, var(--mf-news-a) 70%, var(--mf-news-fg)) 45%, color-mix(in srgb, var(--mf-news-b) 75%, var(--mf-news-fg)) 100%);
-webkit-background-clip: text;
background-clip: text;
}
.mf-news__text {
max-width: 44ch;
margin: 20px 0 0;
color: var(--mf-news-muted);
font-size: 17px;
line-height: 1.6;
letter-spacing: 0;
}
.mf-news__text p {
margin: 0;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.mf-news__text p + p {
margin-top: 10px;
}
/* Form ----------------------------------------------------------- */
.mf-news__capture {
width: 100%;
max-width: 520px;
margin-top: 34px;
}
.mf-news__form {
margin: 0;
}
.mf-news__field {
display: flex;
align-items: center;
gap: 6px;
padding: 6px;
border: 1px solid var(--mf-news-line);
border-radius: 999px;
background: color-mix(in srgb, var(--mf-news-fg) 6%, var(--mf-news-card));
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.mf-news__field:focus-within {
border-color: color-mix(in srgb, var(--mf-news-a) 80%, transparent);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 4px color-mix(in srgb, var(--mf-news-a) 22%, transparent);
}
.mf-news__control {
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
min-width: 0;
}
.mf-news__mail {
position: absolute;
left: 16px;
color: var(--mf-news-muted);
pointer-events: none;
}
.mf-news__input {
-webkit-appearance: none;
appearance: none;
width: 100%;
min-width: 0;
height: 50px;
margin: 0;
padding: 0 12px 0 44px;
border: 0;
border-radius: 999px;
outline: 0;
background: transparent;
box-shadow: none;
color: var(--mf-news-fg);
font-family: inherit;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
}
.mf-news__input::placeholder {
color: var(--mf-news-muted);
opacity: 1;
}
.mf-news__input:-webkit-autofill {
-webkit-text-fill-color: var(--mf-news-fg);
transition: background-color 9999s ease 0s;
}
.mf-news__input:focus-visible {
outline: 0;
}
.mf-news__button {
-webkit-appearance: none;
appearance: none;
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: 10px;
overflow: hidden;
min-height: 50px;
margin: 0;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: var(--mf-news-btn);
box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--mf-news-a) 70%, transparent), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
color: var(--mf-news-btn-fg);
font-family: inherit;
font-size: 15px;
font-weight: 650;
line-height: 1;
letter-spacing: -0.005em;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
}
.mf-news__button::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--mf-news-a) 35%, transparent) 45%, color-mix(in srgb, var(--mf-news-b) 35%, transparent) 55%, transparent 75%);
transform: translateX(-110%);
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mf-news__button:hover {
transform: translateY(-1px);
box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--mf-news-a) 85%, transparent), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.mf-news__button:hover::before {
transform: translateX(110%);
}
.mf-news__button:focus-visible {
outline: 2px solid var(--mf-news-fg);
outline-offset: 3px;
}
.mf-news__button-label,
.mf-news__arrow {
position: relative;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.mf-news__button:hover .mf-news__arrow {
transform: translateX(3px);
}
.mf-news__spinner {
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
opacity: 0;
}
.mf-news__button[data-state="loading"] {
pointer-events: none;
}
.mf-news__button[data-state="loading"] .mf-news__button-label,
.mf-news__button[data-state="loading"] .mf-news__arrow {
opacity: 0;
}
.mf-news__button[data-state="loading"] .mf-news__spinner {
opacity: 1;
animation: mf-news-spin-el 0.8s linear infinite;
}
.mf-news__alert {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 12px 0 0;
padding: 10px 14px;
border: 1px solid color-mix(in srgb, #ff6b6b 45%, transparent);
border-radius: 14px;
background: color-mix(in srgb, #ff6b6b 12%, transparent);
color: var(--mf-news-fg);
font-size: 14px;
line-height: 1.45;
text-align: left;
}
.mf-news__alert svg {
flex: none;
margin-top: 2px;
color: #ff8a8a;
}
.mf-news__alert strong {
font-weight: 600;
}
.mf-news__alert-detail {
display: block;
color: var(--mf-news-muted);
font-size: 13px;
}
.mf-news__success {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px 14px 14px;
border: 1px solid color-mix(in srgb, var(--mf-news-a) 50%, transparent);
border-radius: 22px;
background: color-mix(in srgb, var(--mf-news-a) 14%, var(--mf-news-card));
text-align: left;
outline: 0;
animation: mf-news-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.mf-news__check {
display: grid;
flex: none;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mf-news-a), var(--mf-news-b));
color: #fff;
box-shadow: 0 8px 22px -8px var(--mf-news-a);
}
.mf-news__check path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: mf-news-draw 0.5s ease 0.25s forwards;
}
.mf-news__success-copy {
display: grid;
gap: 3px;
}
.mf-news__success-copy strong {
color: var(--mf-news-fg);
font-size: 16px;
font-weight: 650;
line-height: 1.3;
}
.mf-news__success-copy span {
color: var(--mf-news-muted);
font-size: 14px;
line-height: 1.45;
}
.mf-news__consent {
max-width: 52ch;
margin: 16px 0 0;
color: var(--mf-news-muted);
font-size: 12.5px;
line-height: 1.55;
letter-spacing: 0;
}
.mf-news__consent p {
margin: 0;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.mf-news__consent a {
color: var(--mf-news-fg);
text-decoration: underline;
text-decoration-color: var(--mf-news-line);
text-underline-offset: 3px;
transition: text-decoration-color 0.2s ease;
}
.mf-news__consent a:hover {
text-decoration-color: currentColor;
}
.mf-news__consent a:focus-visible {
outline: 2px solid var(--mf-news-a);
outline-offset: 2px;
border-radius: 2px;
}
/* Proof ---------------------------------------------------------- */
.mf-news__proof {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
margin-top: 30px;
padding-top: 24px;
border-top: 1px solid var(--mf-news-line);
}
.mf-news--centered .mf-news__proof {
justify-content: center;
max-width: 520px;
}
.mf-news__avatars {
display: flex;
flex: none;
padding-left: 10px;
}
.mf-news__avatars i {
position: relative;
display: block;
width: 32px;
height: 32px;
margin-left: -10px;
border: 2px solid var(--mf-news-card);
border-radius: 50%;
background: linear-gradient(140deg, #ffd9c2, #e0876a);
box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5);
}
.mf-news__avatars i::after {
content: "";
position: absolute;
inset: 18% 30% 44% 26%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
filter: blur(2px);
}
.mf-news__avatars i:nth-child(2) {
background: linear-gradient(140deg, #d8d2ff, var(--mf-news-a));
}
.mf-news__avatars i:nth-child(3) {
background: linear-gradient(140deg, #c7f5e6, #4fb99a);
}
.mf-news__avatars i:nth-child(4) {
background: linear-gradient(140deg, #ffd6ea, var(--mf-news-b));
}
.mf-news__avatars i:nth-child(5) {
background: linear-gradient(140deg, #f5e6c4, #b98a45);
}
.mf-news__proof-text {
margin: 0;
color: var(--mf-news-muted);
font-size: 14px;
line-height: 1.4;
letter-spacing: 0;
}
.mf-news__proof-text strong,
.mf-news__proof-text b {
color: var(--mf-news-fg);
font-weight: 650;
}
/* Visual / art --------------------------------------------------- */
.mf-news__visual {
position: relative;
z-index: 1;
overflow: hidden;
min-height: 420px;
margin: 12px 12px 12px 0;
border-radius: 24px;
background: color-mix(in srgb, var(--mf-news-card) 88%, var(--mf-news-a));
}
.mf-news__visual-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mf-news__art {
position: absolute;
inset: 0;
overflow: hidden;
background:
radial-gradient(90% 70% at 85% 5%, color-mix(in srgb, var(--mf-news-a) 60%, transparent), transparent 62%),
radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--mf-news-b) 52%, transparent), transparent 60%),
linear-gradient(160deg, color-mix(in srgb, var(--mf-news-card) 70%, var(--mf-news-a)), var(--mf-news-card));
}
.mf-news__art::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(color-mix(in srgb, var(--mf-news-fg) 9%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--mf-news-fg) 9%, transparent) 1px, transparent 1px);
background-size: 36px 36px;
-webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 70%);
mask-image: radial-gradient(circle at 50% 45%, #000, transparent 70%);
}
.mf-news__art-rays {
position: absolute;
top: 42%;
left: 50%;
width: 150%;
aspect-ratio: 1;
margin: -75% 0 0 -75%;
background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--mf-news-fg) 7%, transparent) 0deg 4deg, transparent 4deg 18deg);
-webkit-mask-image: radial-gradient(circle, #000 5%, transparent 55%);
mask-image: radial-gradient(circle, #000 5%, transparent 55%);
animation: mf-news-rotate 60s linear infinite;
}
.mf-news__art-orb {
position: absolute;
top: 42%;
left: 50%;
width: 62%;
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 32%),
radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mf-news-a) 80%, #fff), var(--mf-news-b) 55%, transparent 72%);
filter: blur(26px);
opacity: 0.7;
transform: translate(-50%, -50%);
}
.mf-news__ticket-wrap {
position: absolute;
top: 42%;
left: 50%;
width: min(78%, 360px);
filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
transform: translate(-50%, -50%) rotate(-7deg);
animation: mf-news-float 8s ease-in-out infinite;
}
.mf-news__ticket {
display: grid;
grid-template-columns: 1fr auto;
border-radius: 18px;
background:
radial-gradient(120% 90% at 0% 0%, #fffdf8, transparent 60%),
linear-gradient(135deg, #f8f3ea, #ece2d3);
color: #19151f;
-webkit-mask:
radial-gradient(circle 13px at 0 50%, transparent 12px, #000 13px) left / 51% 100% no-repeat,
radial-gradient(circle 13px at 100% 50%, transparent 12px, #000 13px) right / 51% 100% no-repeat;
mask:
radial-gradient(circle 13px at 0 50%, transparent 12px, #000 13px) left / 51% 100% no-repeat,
radial-gradient(circle 13px at 100% 50%, transparent 12px, #000 13px) right / 51% 100% no-repeat;
}
.mf-news__ticket-main {
display: grid;
gap: 4px;
padding: 24px 12px 24px 30px;
}
.mf-news__ticket-shop {
font: 600 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.6;
}
.mf-news__ticket-value {
font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
font-size: clamp(56px, 6.4vw, 88px);
font-style: italic;
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.04em;
background: linear-gradient(120deg, #19151f 20%, color-mix(in srgb, var(--mf-news-a) 70%, #19151f) 60%, color-mix(in srgb, var(--mf-news-b) 70%, #19151f));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mf-news__ticket-caption {
font-size: 12px;
font-weight: 600;
line-height: 1.3;
opacity: 0.7;
}
.mf-news__ticket-stub {
display: grid;
place-items: center;
width: 64px;
border-left: 2px dashed rgba(25, 21, 31, 0.2);
}
.mf-news__barcode {
width: 22px;
height: 70%;
background: repeating-linear-gradient(0deg, #19151f 0 2px, transparent 2px 4px, #19151f 4px 5px, transparent 5px 8px, #19151f 8px 11px, transparent 11px 13px);
opacity: 0.75;
}
.mf-news__spark {
position: absolute;
width: 16px;
height: 16px;
background: #fff;
clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
filter: drop-shadow(0 0 6px var(--mf-news-a));
animation: mf-news-twinkle 3.2s ease-in-out infinite;
}
.mf-news__spark--1 {
top: 14%;
left: 18%;
}
.mf-news__spark--2 {
top: 22%;
right: 16%;
width: 10px;
height: 10px;
animation-delay: -1.1s;
}
.mf-news__spark--3 {
bottom: 34%;
right: 10%;
width: 22px;
height: 22px;
animation-delay: -2s;
}
.mf-news__spark--4 {
top: 64%;
left: 9%;
width: 9px;
height: 9px;
animation-delay: -0.5s;
}
.mf-news__notif {
position: absolute;
z-index: 2;
left: 50%;
bottom: 26px;
display: flex;
align-items: center;
gap: 12px;
width: min(calc(100% - 40px), 360px);
padding: 12px 16px 12px 12px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 20px;
background: rgba(28, 26, 40, 0.55);
box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18);
color: #fff;
-webkit-backdrop-filter: blur(18px) saturate(1.4);
backdrop-filter: blur(18px) saturate(1.4);
transform: translateX(-50%);
}
.mf-news__notif-icon {
display: grid;
flex: none;
place-items: center;
width: 40px;
height: 40px;
border-radius: 11px;
background: linear-gradient(135deg, var(--mf-news-a), var(--mf-news-b));
color: #fff;
font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
font-size: 20px;
font-style: italic;
line-height: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.mf-news__notif-body {
display: grid;
gap: 1px;
min-width: 0;
}
.mf-news__notif-top {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.72;
}
.mf-news__notif-top i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #7dffb5;
box-shadow: 0 0 8px #7dffb5;
}
.mf-news__notif-title,
.mf-news__notif-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mf-news__notif-title {
font-size: 14px;
font-weight: 650;
line-height: 1.35;
}
.mf-news__notif-text {
font-size: 13px;
line-height: 1.35;
opacity: 0.78;
}
/* Entrance (only when JS is running) ----------------------------- */
.mf-news--js .mf-news__frame {
opacity: 0;
transform: translateY(28px) scale(0.985);
transition: opacity 0.9s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mf-news--js .mf-news__reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
transition-delay: calc(0.25s + var(--mf-news-d, 0) * 0.08s);
}
.mf-news--js .mf-news__notif {
opacity: 0;
transform: translate(-50%, 24px);
transition: opacity 0.6s ease 0.8s, transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.8s;
}
.mf-news--js.mf-news--in .mf-news__frame,
.mf-news--js.mf-news--in .mf-news__reveal {
opacity: 1;
transform: none;
}
.mf-news--js.mf-news--in .mf-news__notif {
opacity: 1;
transform: translateX(-50%);
}
.mf-news__sr {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
@keyframes mf-news-spin {
to { --mf-news-angle: 360deg; }
}
@keyframes mf-news-spin-el {
to { transform: rotate(360deg); }
}
@keyframes mf-news-rotate {
to { transform: rotate(360deg); }
}
@keyframes mf-news-drift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(6%, 8%, 0) scale(1.08); }
66% { transform: translate3d(-5%, 4%, 0) scale(0.94); }
}
@keyframes mf-news-breathe {
0%, 100% { opacity: 0.32; transform: scale(0.98); }
50% { opacity: 0.5; transform: scale(1.02); }
}
@keyframes mf-news-sheen {
0% { transform: translateX(-120%); }
30%, 100% { transform: translateX(120%); }
}
@keyframes mf-news-float {
0%, 100% { transform: translate(-50%, -50%) rotate(-7deg); }
50% { transform: translate(-50%, -54%) rotate(-4deg); }
}
@keyframes mf-news-twinkle {
0%, 100% { opacity: 0.25; transform: scale(0.6) rotate(0deg); }
50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
@keyframes mf-news-pop {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: none; }
}
@keyframes mf-news-draw {
to { stroke-dashoffset: 0; }
}
@media screen and (max-width: 989px) {
.mf-news--split .mf-news__card {
grid-template-columns: minmax(0, 1fr);
}
.mf-news--split .mf-news__visual {
order: -1;
min-height: 320px;
margin: 10px 10px 0;
}
}
@media screen and (max-width: 749px) {
.mf-news {
padding-top: min(var(--mf-news-pt, 96px), 64px);
padding-bottom: min(var(--mf-news-pb, 96px), 64px);
}
.mf-news__inner,
.mf-news--centered .mf-news__inner {
width: min(100% - 32px, 1180px);
}
.mf-news__card {
border-radius: 26px;
}
.mf-news__body {
padding: 28px 22px 26px;
}
.mf-news--centered .mf-news__body {
padding: 34px 22px 28px;
}
.mf-news__badge {
margin-bottom: 20px;
font-size: 12.5px;
}
.mf-news__title {
font-size: clamp(32px, 9.4vw, 44px);
}
.mf-news__text {
margin-top: 14px;
font-size: 16px;
}
.mf-news__capture {
margin-top: 24px;
}
.mf-news__field {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
.mf-news__field:focus-within {
box-shadow: none;
}
.mf-news__control {
border: 1px solid var(--mf-news-line);
border-radius: 16px;
background: color-mix(in srgb, var(--mf-news-fg) 6%, var(--mf-news-card));
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.mf-news__control:focus-within {
border-color: color-mix(in srgb, var(--mf-news-a) 80%, transparent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--mf-news-a) 22%, transparent);
}
.mf-news__input {
height: 54px;
border-radius: 16px;
}
.mf-news__button {
width: 100%;
min-height: 54px;
border-radius: 16px;
}
.mf-news__proof {
gap: 12px;
margin-top: 24px;
padding-top: 20px;
}
.mf-news__proof-text {
font-size: 13px;
}
.mf-news--split .mf-news__visual {
min-height: 286px;
border-radius: 20px;
}
.mf-news__ticket-wrap {
top: 37%;
width: min(70%, 272px);
}
.mf-news__ticket-main {
padding: 16px 8px 16px 24px;
}
.mf-news__ticket-value {
font-size: 52px;
}
.mf-news__ticket-stub {
width: 48px;
}
.mf-news__notif {
bottom: 14px;
padding: 9px 12px 9px 9px;
border-radius: 16px;
}
.mf-news__notif-icon {
width: 34px;
height: 34px;
border-radius: 9px;
font-size: 17px;
}
.mf-news__notif-title {
font-size: 13px;
}
.mf-news__notif-text {
font-size: 12px;
}
.mf-news__blob {
width: 90vw;
}
}
@media (prefers-reduced-motion: reduce) {
.mf-news__blob,
.mf-news__aura,
.mf-news__badge::after,
.mf-news--animated .mf-news__ring,
.mf-news__art-rays,
.mf-news__ticket-wrap,
.mf-news__spark,
.mf-news__success,
.mf-news__check path,
.mf-news__button[data-state="loading"] .mf-news__spinner {
animation: none;
}
.mf-news__check path {
stroke-dashoffset: 0;
}
.mf-news__badge::after {
display: none;
}
.mf-news__button,
.mf-news__button::before,
.mf-news__arrow,
.mf-news__spot {
transition: none;
}
.mf-news__button:hover,
.mf-news__button:hover .mf-news__arrow {
transform: none;
}
.mf-news--js .mf-news__frame,
.mf-news--js .mf-news__reveal {
opacity: 1;
transform: none;
transition: none;
}
.mf-news--js .mf-news__notif {
opacity: 1;
transform: translateX(-50%);
transition: none;
}
}
{% endstylesheet %}
{% javascript %}
if (!customElements.get('mf-newsletter-glow')) {
customElements.define(
'mf-newsletter-glow',
class extends HTMLElement {
connectedCallback() {
this.reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
this.form = this.querySelector('.mf-news__form');
this.card = this.querySelector('.mf-news__card');
this.button = this.querySelector('[data-mf-submit]');
this.onSubmit = this.onSubmit.bind(this);
this.onPageShow = this.onPageShow.bind(this);
if (this.form) this.form.addEventListener('submit', this.onSubmit);
window.addEventListener('pageshow', this.onPageShow);
if (!this.reduce && 'IntersectionObserver' in window) {
this.classList.add('mf-news--js');
this.observer = new IntersectionObserver(
(entries) => {
if (entries.some((entry) => entry.isIntersecting)) {
this.classList.add('mf-news--in');
this.observer.disconnect();
}
},
{ rootMargin: '0px 0px -10% 0px' }
);
this.observer.observe(this);
}
if (!this.reduce && this.card && window.matchMedia('(pointer: fine)').matches) {
this.frame = 0;
this.onMove = (event) => {
this.px = event.clientX;
this.py = event.clientY;
if (this.frame) return;
this.frame = requestAnimationFrame(() => {
this.frame = 0;
const rect = this.card.getBoundingClientRect();
this.card.style.setProperty('--mf-news-mx', this.px - rect.left + 'px');
this.card.style.setProperty('--mf-news-my', this.py - rect.top + 'px');
});
};
this.card.addEventListener('pointermove', this.onMove);
}
const success = this.querySelector('[data-mf-success]');
if (success && !success.hidden && /customer_posted=true/.test(window.location.search)) {
success.focus({ preventScroll: true });
}
}
disconnectedCallback() {
if (this.form) this.form.removeEventListener('submit', this.onSubmit);
window.removeEventListener('pageshow', this.onPageShow);
if (this.observer) this.observer.disconnect();
if (this.card && this.onMove) this.card.removeEventListener('pointermove', this.onMove);
if (this.frame) cancelAnimationFrame(this.frame);
clearTimeout(this.timer);
}
onPageShow(event) {
if (event.persisted && this.button) {
delete this.button.dataset.state;
this.button.removeAttribute('aria-busy');
}
}
onSubmit(event) {
if (!this.button || this.button.dataset.state === 'loading') return;
this.button.dataset.state = 'loading';
this.button.setAttribute('aria-busy', 'true');
// The real Shopify form posts natively. The preview has no backend,
// so it only simulates the confirmation state.
if (window.__MF_PREVIEW__) {
event.preventDefault();
this.timer = setTimeout(() => this.showSuccess(), 900);
}
}
showSuccess() {
const field = this.querySelector('[data-mf-field]');
const error = this.querySelector('[data-mf-error]');
const success = this.querySelector('[data-mf-success]');
if (!success) return;
if (field) field.hidden = true;
if (error) error.hidden = true;
success.hidden = false;
success.focus({ preventScroll: true });
}
}
);
}
{% endjavascript %}
{% schema %}
{
"name": "EX · Newsletter glow",
"tag": "section",
"class": "mf-section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "header",
"content": "Content"
},
{
"type": "text",
"id": "badge",
"label": "Incentive badge",
"info": "State the offer plainly. Create the matching welcome discount in Shopify and send it with your welcome email.",
"default": "−10% on your first order"
},
{
"type": "inline_richtext",
"id": "heading",
"label": "Heading",
"info": "Wrap words in italics for the gradient serif accent.",
"default": "Be the first <em>to glow.</em>"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Early access to launches and restocks, notes from our formulators and members-only rituals. Two emails a month, never more.</p>"
},
{
"type": "header",
"content": "Form"
},
{
"type": "text",
"id": "email_label",
"label": "Email field label",
"info": "Read by screen readers.",
"default": "Email address"
},
{
"type": "text",
"id": "email_placeholder",
"label": "Email placeholder",
"default": "Your email address"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Claim my 10%"
},
{
"type": "text",
"id": "tags",
"label": "Customer tags",
"info": "Comma-separated. Keep “newsletter” so Shopify subscribes the customer to email marketing.",
"default": "newsletter"
},
{
"type": "richtext",
"id": "consent",
"label": "Consent text",
"default": "<p>No spam. Unsubscribe in one click. By subscribing you agree to receive marketing emails and accept our <a href=\"/policies/privacy-policy\">privacy policy</a>.</p>"
},
{
"type": "text",
"id": "success_heading",
"label": "Success heading",
"default": "You’re on the list."
},
{
"type": "text",
"id": "success_text",
"label": "Success text",
"default": "Your welcome code is on its way. Check your inbox in a few minutes."
},
{
"type": "text",
"id": "error_text",
"label": "Error message",
"default": "That didn’t go through. Please check your email address."
},
{
"type": "header",
"content": "Social proof"
},
{
"type": "inline_richtext",
"id": "proof_text",
"label": "Social proof line",
"default": "Join <strong>48,000+</strong> subscribers who hear about launches first"
},
{
"type": "checkbox",
"id": "show_avatars",
"label": "Show avatar stack",
"default": true
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"options": [
{ "value": "split", "label": "Split with visual" },
{ "value": "centered", "label": "Centered card" }
],
"default": "split"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "Split: fills the visual panel. Centered: softly fills the background. Leave empty for the welcome-gift artwork."
},
{
"type": "text",
"id": "art_value",
"label": "Artwork offer figure",
"info": "Large figure on the gift card shown when no image is selected.",
"default": "−10%"
},
{
"type": "text",
"id": "art_caption",
"label": "Artwork caption",
"default": "Welcome gift · first order"
},
{
"type": "checkbox",
"id": "show_notification",
"label": "Show welcome email card on the visual",
"default": true
},
{
"type": "checkbox",
"id": "animate_border",
"label": "Animate the glowing border",
"default": true
},
{
"type": "range",
"id": "padding_top",
"label": "Top padding",
"min": 0,
"max": 160,
"step": 8,
"unit": "px",
"default": 96
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom padding",
"min": 0,
"max": 160,
"step": 8,
"unit": "px",
"default": 96
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "color_bg",
"label": "Background",
"default": "#07070c"
},
{
"type": "color",
"id": "color_card",
"label": "Card",
"default": "#11101a"
},
{
"type": "color",
"id": "color_text",
"label": "Text",
"default": "#f4f2fb"
},
{
"type": "color",
"id": "color_glow_a",
"label": "Glow color one",
"default": "#8b7bff"
},
{
"type": "color",
"id": "color_glow_b",
"label": "Glow color two",
"default": "#ff7eb8"
},
{
"type": "color",
"id": "color_button",
"label": "Button",
"default": "#f4f2fb"
},
{
"type": "color",
"id": "color_button_text",
"label": "Button text",
"default": "#12101c"
}
],
"presets": [
{
"name": "EX · Newsletter glow"
}
]
}
{% endschema %}
Why it converts
An explicit incentive beside the field turns anonymous browsers into an owned email channel you can sell to again.
Specs
About this section
Newsletter Glow is a free Shopify Online Store 2.0 email-capture section built on Shopify's native customer form. The email field posts contact[email] with a hidden contact[tags] value taken from a setting (newsletter by default), so every sign-up lands in Shopify Customers subscribed to email marketing, ready for Shopify Email, Klaviyo or any tool that syncs customers. The card sits on a slowly drifting aurora backdrop and is outlined by a gradient border that travels around its edge. Above the heading, an incentive badge states the offer, for example 10% off the first order. Below the form, consent text (rich text, with a link to your privacy policy) and a social-proof line with an overlapping avatar stack reassure the shopper. Two layouts are available: a split card whose visual panel shows your own image or a designed welcome-gift artwork (a perforated gift card with the offer figure and a floating welcome-email notification), and a centered card that can use your image as a soft background. Merchants edit every label, the success and error messages, customer tags, padding, the two glow colors, card, text and button colors. After submitting, Shopify reloads the page and the section shows a confirmation; errors from Shopify are shown inline and announced to screen readers. On mobile the field and button stack full width with 54px touch targets. With prefers-reduced-motion the border, backdrop and entrance animations stop. It is one self-contained Liquid file with scoped CSS and a small JavaScript custom element.
Questions
Where do the email sign-ups go?
Into Shopify. The section uses Shopify's native customer form, so each email creates or updates a customer tagged with the value of the Customer tags setting and subscribed to email marketing. Apps that sync Shopify customers, such as Shopify Email or Klaviyo, pick them up from there.
How do I deliver the 10% welcome discount?
The badge only states the offer. Create the discount code in Shopify under Discounts, then send it with a welcome automation in Shopify Email or your email app, triggered when a customer subscribes. Keep the badge, button label and artwork figure in line with the real offer.
What happens after a shopper submits the form?
Shopify processes the form and reloads the page at the section. The field is replaced by your success heading and text, which receives focus for screen readers. If Shopify rejects the email, your error message appears under the field together with Shopify's own explanation.
Can I use my own image instead of the gift-card artwork?
Yes. In the split layout, the Image setting fills the visual panel and the welcome-email card can stay on top of it or be switched off. In the centered layout, the image becomes a soft background behind the glowing card.
More sections
Pro