FreeFeaturedBlockForm

Newsletter Signup

Name: Newsletter Signup
Brand: modblo

Email capture form with consent text, pastes into Custom Liquid in the Theme Editor.

#newsletter#email#form#lead-gen#subscribe#custom-liquid

Live preview

See it in action.

Fully interactive, drag, click, scroll inside the frame, toggle to mobile.

About this block

A focused newsletter block with a real Shopify customer form, accent-colored CTA, GDPR-friendly consent text, and clean mobile stack. Drops into any Online Store 2.0 theme via the Custom Liquid section, no code editor needed.

Install in 90 seconds

01
Open your Shopify admin and go to Online Store → Themes → Customize.
02
On any template, click "Add section" where you want the block to appear.
03
Choose "Custom Liquid" from the section list.
04
Paste the code from this page into the Custom Liquid setting and click Save.
05
Edit text and colors directly in the code (look for the comments marking edit points).

The code

In your Shopify theme editor, add a Custom Liquid section and paste the snippet below into its content field. You can change text, colors, and links right inside the code. Every editable spot is marked with an EDIT comment.

modblo-newsletter-signup.liquid

{%- comment -%}
  modblo. Newsletter Signup Block
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
  Edit text/colors below at the lines marked /* EDIT */.
{%- endcomment -%}

<style>
  .modblo-news { background:#fafafa; color:#0b0b0c; padding:80px 0; }       /* EDIT colors */
  .modblo-news__inner { max-width:600px; margin:0 auto; padding:0 24px; text-align:center; }
  .modblo-news__h { font-size:clamp(24px,3vw,36px); letter-spacing:-.02em; margin:0 0 12px; }
  .modblo-news__sub { font-size:16px; line-height:1.5; opacity:.72; margin:0 0 28px; }
  .modblo-news__form { display:flex; gap:8px; max-width:460px; margin:0 auto; }
  .modblo-news__form input {
    flex:1; min-width:0; background:#fff; color:#0b0b0c;
    border:1px solid rgba(0,0,0,.15); border-radius:12px;
    padding:14px 16px; font-size:15px; font:inherit;
  }
  .modblo-news__form input:focus {
    outline:none; border-color:#6366f1;                                 /* EDIT accent */
    box-shadow:0 0 0 3px rgba(99,102,241,.22);
  }
  .modblo-news__form button {
    background:#6366f1; color:#fff; border:0; cursor:pointer;            /* EDIT button color */
    border-radius:12px; padding:14px 22px;
    font-weight:600; font-size:15px;
    transition:opacity .2s, transform .15s;
  }
  .modblo-news__form button:hover { opacity:.9; }
  .modblo-news__form button:active { transform:scale(.98); }
  .modblo-news__consent { font-size:12px; opacity:.55; margin:14px 0 0; }
  @media (max-width:540px) {
    .modblo-news__form { flex-direction:column; }
    .modblo-news__form button { width:100%; }
  }
</style>

<section class="modblo-news">
  <div class="modblo-news__inner">
    <h2 class="modblo-news__h">Get the drop.</h2>                           {%- comment -%} EDIT heading {%- endcomment -%}
    <p class="modblo-news__sub">
      Be the first to know about new sections, store updates,
      and the occasional discount.                                       {%- comment -%} EDIT subtext {%- endcomment -%}
    </p>

    {%- form 'customer', class: 'modblo-news__form' -%}
      <input type="hidden" name="contact[tags]" value="newsletter">
      <input
        type="email"
        name="contact[email]"
        placeholder="you@brand.com"                                      {%- comment -%} EDIT placeholder {%- endcomment -%}
        required
        aria-label="Email address"
      >
      <button type="submit">Subscribe</button>                          {%- comment -%} EDIT button label {%- endcomment -%}
    {%- endform -%}

    <p class="modblo-news__consent">
      By subscribing you agree to receive marketing emails. Unsubscribe anytime.
    </p>
  </div>
</section>

What you can customize

Custom Liquid sections don't have visual theme editor settings, so changes happen directly in the code. Here's what to edit:

What	How to edit
Heading	The <h2> text, find the EDIT heading comment.
Subtext	The <p class='modblo-news__sub'> content.
Email placeholder	Find the value in the code and change it directly.
Button label	Find the value in the code and change it directly.
Accent color	Look for /* EDIT accent / and / EDIT button color */.

SEO and accessibility notes

Uses Shopify's native customer form, wires into the customer record automatically.
Real <input type='email'> with required attribute, works without JS.
All styles are scoped under .modblo-news to avoid colliding with theme CSS.

Pairs nicely with

CTA Banner

Full-bleed conversion banner, pastes into Custom Liquid in the Theme Editor.

100 perf·beginner

Free

Trust

Trust Badges

Compact horizontal trust strip, pastes into Custom Liquid.

100 perf·beginner

Free

Stats

Animated Stat Counter

Big numbers that count up when scrolled into view.

100 perf·beginner

Free