modblo, modular sections, better stores
Browse
FreeBlockContent

Icon Feature Cards

Three-up icon + title + text grid, pastes into Custom Liquid.

#features#icons#grid#custom-liquid

Live preview

See it in action.

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

About this block

A flexible feature-card grid with inline SVG icons. Auto-fit responsive grid means it works whether you have 2, 3, or 6 cards. Just duplicate one .modblo-feat__cell to add more.

Install in 90 seconds

  1. 01

    Open your Shopify admin and go to Online Store → Themes → Customize.

  2. 02

    On any template, click "Add section" where you want the block to appear.

  3. 03

    Choose "Custom Liquid" from the section list.

  4. 04

    Paste the code from this page into the Custom Liquid setting and click Save.

  5. 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-icon-feature.liquid
{%- comment -%}
  modblo. Icon Feature Cards Block
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
  Add or remove cards by duplicating/deleting one .modblo-feat__cell.
{%- endcomment -%}

<style>
  .modblo-feat { background:#fff; color:#0b0b0c; padding:clamp(48px,7vw,96px) 0; }   /* EDIT colors */
  .modblo-feat__inner { max-width:1180px; margin:0 auto; padding:0 24px; }
  .modblo-feat__h { font-size:clamp(26px,3.4vw,40px); letter-spacing:-.02em; margin:0 0 12px; max-width:640px; }
  .modblo-feat__sub { font-size:16px; opacity:.72; max-width:540px; margin:0 0 36px; line-height:1.55; }
  .modblo-feat__grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
  .modblo-feat__cell {
    padding:24px; border-radius:16px;
    background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.08);
    transition:transform .25s, border-color .2s;
  }
  .modblo-feat__cell:hover { transform:translateY(-3px); border-color:rgba(99,102,241,.35); }
  .modblo-feat__icon {
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    border-radius:12px;
    background:rgba(99,102,241,.12); color:#6366f1;                      /* EDIT icon color */
    margin-bottom:16px;
  }
  .modblo-feat__cell h3 { font-size:16px; letter-spacing:-.01em; margin:0 0 6px; font-weight:600; }
  .modblo-feat__cell p { font-size:14px; line-height:1.55; opacity:.75; margin:0; }
</style>

<section class="modblo-feat">
  <div class="modblo-feat__inner">
    <h2 class="modblo-feat__h">Built for serious operators.</h2>            {%- comment -%} EDIT heading {%- endcomment -%}
    <p class="modblo-feat__sub">
      Three reasons modern brands move off bundled apps and onto native Liquid.
    </p>                                                                 {%- comment -%} EDIT subheading {%- endcomment -%}

    <div class="modblo-feat__grid">
      {%- comment -%} EDIT each card: change the SVG icon, title, and text {%- endcomment -%}
      <div class="modblo-feat__cell">
        <div class="modblo-feat__icon">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
        </div>
        <h3>Native performance</h3>
        <p>Pure Liquid + scoped CSS. 95+ Lighthouse out of the box.</p>
      </div>
      <div class="modblo-feat__cell">
        <div class="modblo-feat__icon">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/></svg>
        </div>
        <h3>You own the code</h3>
        <p>Fork it, edit it, ship it. No SaaS lock-in or per-section fees.</p>
      </div>
      <div class="modblo-feat__cell">
        <div class="modblo-feat__icon">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>
        </div>
        <h3>Lifetime updates</h3>
        <p>Every premium block gets continuous improvements forever.</p>
      </div>
    </div>
  </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:

WhatHow to edit
HeadingFind the value in the code and change it directly.
SubheadingFind the value in the code and change it directly.
Each cardTitle + paragraph text inside each .modblo-feat__cell.
IconsInline SVG, replace with your own or grab from feathericons.com / lucide.dev.
Icon colorLook for /* EDIT icon color */.

SEO and accessibility notes

  • Inline SVG icons, no font dependencies, no extra requests.
  • Auto-fit grid means it works at any cell count without media queries.

Related

Pairs nicely with

Browse all
Free
Stats

Animated Stat Counter

Big numbers that count up when scrolled into view.

100 perf·beginner
Free
Free
Social proof

Quote Block

Single testimonial with serif type, pastes into Custom Liquid.

100 perf·beginner
Free
Free
Trust

Trust Badges

Compact horizontal trust strip, pastes into Custom Liquid.

100 perf·beginner
Free