FreeFeaturedBlockCTA

CTA Banner

Name: CTA Banner
Brand: modblo

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

#cta#banner#conversion#button#hero#custom-liquid

Live preview

See it in action.

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

About this block

A focused CTA block, eyebrow, heading, subtext, and one big button on a soft brand-color gradient. Drops into any Online Store 2.0 theme via the Custom Liquid section.

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-cta-banner.liquid

{%- comment -%}
  modblo. CTA Banner Block
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
{%- endcomment -%}

<style>
  .modblo-cta {
    position:relative; isolation:isolate;
    background:#0b0b0c;                                                 /* EDIT background */
    color:#fafafa;                                                      /* EDIT foreground */
    padding:clamp(64px,9vw,128px) 0;
    text-align:center; overflow:hidden;
  }
  .modblo-cta::before {
    content:""; position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(60% 50% at 30% 20%, rgba(99,102,241,.40), transparent 70%),
      radial-gradient(50% 50% at 80% 80%, rgba(16,185,129,.30), transparent 70%);
  }
  .modblo-cta__inner { max-width:720px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
  .modblo-cta__eyebrow { font-size:12px; letter-spacing:.22em; text-transform:uppercase; opacity:.7; margin:0 0 14px; font-weight:600; }
  .modblo-cta__h { font-size:clamp(32px,5vw,56px); letter-spacing:-.025em; line-height:1.05; margin:0 0 16px; }
  .modblo-cta__sub { font-size:clamp(15px,1.6vw,18px); line-height:1.55; opacity:.82; margin:0 0 28px; max-width:560px; margin-inline:auto; }
  .modblo-cta__btn {
    display:inline-flex; align-items:center; gap:8px;
    background:#fafafa; color:#0b0b0c;                                  /* EDIT button colors */
    padding:14px 28px; border-radius:999px;
    font-weight:600; font-size:15px; text-decoration:none;
    transition:transform .15s, opacity .15s;
  }
  .modblo-cta__btn:hover { opacity:.92; }
  .modblo-cta__btn:active { transform:scale(.98); }
</style>

<section class="modblo-cta">
  <div class="modblo-cta__inner">
    <p class="modblo-cta__eyebrow">Free shipping</p>                        {%- comment -%} EDIT eyebrow {%- endcomment -%}
    <h2 class="modblo-cta__h">Ready to ship faster?</h2>                    {%- comment -%} EDIT heading {%- endcomment -%}
    <p class="modblo-cta__sub">
      Drop premium sections into your theme today. No app, no commitment, just code.
    </p>                                                                 {%- comment -%} EDIT subtext {%- endcomment -%}
    <a class="modblo-cta__btn" href="/collections/all">                     {%- comment -%} EDIT link {%- endcomment -%}
      Browse the library
      <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
        <path d="M3 8h10M9 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </a>
  </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
Eyebrow	Find the value in the code and change it directly.
Heading	Find the value in the code and change it directly.
Subtext	Find the value in the code and change it directly.
Button URL	Change the href on the <a> tag.
Colors	Look for /* EDIT background / and / EDIT button colors */.

SEO and accessibility notes

Uses CSS-only gradient, no image weight, instant render.
Inline SVG arrow icon, no font dependency.
Real <a> link works for keyboard navigation and SEO crawl.

Pairs nicely with

Newsletter Signup

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

100 perf·beginner

Free

Stats

Animated Stat Counter

Big numbers that count up when scrolled into view.

100 perf·beginner

Free

Content

Image with Text

Editorial side-by-side image and text, pastes into Custom Liquid.

100 perf·beginner

Free