FreeNewBlockAlert

Highlight Banner

Name: Highlight Banner
Brand: modblo

Compact attention strip with icon, headline, and CTA.

#banner#highlight#callout#attention#custom-liquid

Live preview

See it in action.

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

About this block

A small banner block for between-section attention: free-shipping reminders, return policy, gift-wrap callouts, member benefits. Inline icon plus headline plus subline plus optional CTA. Stacks the CTA full-width on mobile. Pure HTML/CSS, zero JavaScript.

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

Paste the snippet below into the Custom Liquid setting on a Custom Liquid section in your Theme Editor. Edit text, colors, and links directly in the code, every editable spot is marked with an EDIT comment.

modblo-highlight-banner.liquid

{%- comment -%}
  modblo. Highlight Banner Block
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
  Compact attention strip with icon + headline + subline + optional CTA.
  Great for free-shipping reminders, return policy, gift wrap callouts.
{%- endcomment -%}

<style>
  .modblo-hb { background:transparent; padding:clamp(20px,3vw,32px) 0; }            /* EDIT outer padding */
  .modblo-hb__inner { max-width:1100px; margin:0 auto; padding:0 24px; }

  .modblo-hb__bar {
    display:flex; align-items:center; gap:18px;
    background:linear-gradient(135deg,#0b0b0c 0%,#1f2030 100%);                  /* EDIT bar bg */
    color:#fafafa;                                                                /* EDIT bar fg */
    padding:18px 22px;
    border-radius:14px;
    box-shadow:0 8px 28px -10px rgba(0,0,0,.25);
  }

  .modblo-hb__icon {
    flex-shrink:0; width:44px; height:44px; border-radius:12px;
    background:rgba(255,255,255,.1);
    display:grid; place-items:center;
    color:#a78bfa;                                                                /* EDIT icon color */
  }
  .modblo-hb__icon svg { width:22px; height:22px; }

  .modblo-hb__body { flex:1; min-width:0; }
  .modblo-hb__h { font-size:15px; font-weight:600; margin:0 0 2px; line-height:1.3; }
  .modblo-hb__sub { font-size:13px; opacity:.7; margin:0; line-height:1.4; }

  .modblo-hb__cta {
    flex-shrink:0;
    background:#fff; color:#0b0b0c;                                               /* EDIT CTA colors */
    padding:9px 16px; border-radius:9px;
    font-size:13px; font-weight:600;
    text-decoration:none;
    transition:opacity .2s, transform .15s;
  }
  .modblo-hb__cta:hover { opacity:.92; transform:translateY(-1px); }

  @media (max-width:540px) {
    .modblo-hb__bar { flex-wrap:wrap; padding:16px; gap:12px; }
    .modblo-hb__cta { width:100%; text-align:center; padding:10px; }
  }
</style>

<section class="modblo-hb">
  <div class="modblo-hb__inner">
    <div class="modblo-hb__bar">
      {%- comment -%} EDIT icon: any inline SVG works {%- endcomment -%}
      <span class="modblo-hb__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14M12 5l7 7-7 7"/>
        </svg>
      </span>
      <div class="modblo-hb__body">
        <p class="modblo-hb__h">Free shipping on orders over $75.</p>          {%- comment -%} EDIT headline {%- endcomment -%}
        <p class="modblo-hb__sub">Plus 30-day returns on everything. Always.</p> {%- comment -%} EDIT subline {%- endcomment -%}
      </div>
      <a href="/collections/all" class="modblo-hb__cta">Shop now</a>             {%- comment -%} EDIT CTA + link {%- endcomment -%}
    </div>
  </div>
</section>

What you can customize

Custom Liquid sections don't expose theme-editor settings, so customization happens in the code. Here's what to edit:

What	How to edit
Icon SVG	Replace the inline SVG with any 24x24 icon you want.
Headline	Find the value in the code and change it directly.
Subline	Find the value in the code and change it directly.
CTA label and link	Find the value in the code and change it directly.
Bar / icon / CTA colors	Find the value in the code and change it directly.

SEO & accessibility notes

Pure semantic HTML, fully crawlable.
Zero JavaScript, no layout shift on load.
Real <a> for the CTA, native keyboard navigation.
Stacks gracefully on mobile via flex-wrap, no media-query gymnastics.

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.

Newsletter Signup

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

100 perf·beginner

Free