modblo, modular sections, better stores
Browse
FreeNewBlockPromo

Pricing Tier Cards

Three-tier SaaS-style pricing block, pastes into Custom Liquid.

#pricing#tiers#saas#plans#custom-liquid

Live preview

See it in action.

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

About this block

A clean three-column pricing layout, the middle tier highlighted as 'Most popular'. Each card has tier name, description, price, CTA, and feature list. Stacks vertically on mobile. Pure HTML/CSS, zero JavaScript.

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

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-pricing-tier-cards.liquid
{%- comment -%}
  modblo. Pricing Tier Cards Block
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
  Three-tier SaaS-style pricing layout. Middle column highlighted as
  "most popular". Edit each card directly in the code.
{%- endcomment -%}

<style>
  .modblo-pt { background:#fff; color:#0b0b0c; padding:clamp(56px,7vw,96px) 0; }   /* EDIT colors */
  .modblo-pt__inner { max-width:1100px; margin:0 auto; padding:0 24px; }
  .modblo-pt__head { text-align:center; margin-bottom:48px; }
  .modblo-pt__h { font-size:clamp(28px,3.5vw,40px); letter-spacing:-.02em; margin:0 0 12px; }
  .modblo-pt__sub { font-size:16px; opacity:.65; max-width:520px; margin:0 auto; }

  .modblo-pt__grid { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
  .modblo-pt__card {
    background:#fff;
    border:1px solid rgba(11,11,12,.08);
    border-radius:18px;
    padding:32px 28px;
    display:flex; flex-direction:column;
    position:relative;
  }
  .modblo-pt__card.is-popular {
    border-color:#6366f1;                                                       /* EDIT highlighted card border */
    background:linear-gradient(180deg,rgba(99,102,241,.04) 0%,#fff 100%);
    transform:translateY(-4px);
  }
  .modblo-pt__badge {
    position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    background:#6366f1; color:#fff; font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.12em;
    padding:4px 10px; border-radius:999px;
  }

  .modblo-pt__name { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; opacity:.65; margin:0 0 6px; }
  .modblo-pt__tag { font-size:13px; opacity:.7; margin:0 0 18px; line-height:1.5; }

  .modblo-pt__price { display:flex; align-items:baseline; gap:6px; margin:0 0 24px; }
  .modblo-pt__amt { font-size:42px; font-weight:700; letter-spacing:-.02em; line-height:1; }
  .modblo-pt__per { font-size:13px; opacity:.6; }

  .modblo-pt__cta {
    display:block; text-align:center;
    background:rgba(11,11,12,.06); color:#0b0b0c;
    padding:13px 18px; border-radius:11px;
    font-size:14px; font-weight:600; text-decoration:none;
    transition:background .2s;
    margin-bottom:28px;
  }
  .modblo-pt__cta:hover { background:rgba(11,11,12,.1); }
  .modblo-pt__card.is-popular .modblo-pt__cta {
    background:#6366f1; color:#fff;                                             /* EDIT primary CTA color */
  }
  .modblo-pt__card.is-popular .modblo-pt__cta:hover { opacity:.92; }

  .modblo-pt__feat { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
  .modblo-pt__feat li {
    display:flex; align-items:flex-start; gap:10px;
    font-size:13px; line-height:1.5;
  }
  .modblo-pt__feat li::before {
    content:""; flex-shrink:0; margin-top:5px;
    width:14px; height:14px; border-radius:50%;
    background:#16a34a;
    background-image:linear-gradient(135deg,rgba(255,255,255,.25),transparent);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  }

  @media (max-width:880px) {
    .modblo-pt__grid { grid-template-columns:1fr; gap:14px; }
    .modblo-pt__card.is-popular { transform:none; }
  }
</style>

<section class="modblo-pt">
  <div class="modblo-pt__inner">
    <div class="modblo-pt__head">
      <h2 class="modblo-pt__h">Pricing that scales with you.</h2>                  {%- comment -%} EDIT heading {%- endcomment -%}
      <p class="modblo-pt__sub">Pick the plan that fits today. Switch anytime.</p>  {%- comment -%} EDIT sub {%- endcomment -%}
    </div>

    <div class="modblo-pt__grid">

      {%- comment -%} EDIT each card. Duplicate / remove .modblo-pt__card to add or remove tiers. {%- endcomment -%}
      <article class="modblo-pt__card">
        <p class="modblo-pt__name">Starter</p>
        <p class="modblo-pt__tag">For makers and side projects.</p>
        <div class="modblo-pt__price"><span class="modblo-pt__amt">$0</span><span class="modblo-pt__per">/mo</span></div>
        <a href="#" class="modblo-pt__cta">Start free</a>
        <ul class="modblo-pt__feat">
          <li>1 project</li>
          <li>Community support</li>
          <li>Basic integrations</li>
        </ul>
      </article>

      <article class="modblo-pt__card is-popular">
        <span class="modblo-pt__badge">Most popular</span>
        <p class="modblo-pt__name">Pro</p>
        <p class="modblo-pt__tag">For growing teams shipping fast.</p>
        <div class="modblo-pt__price"><span class="modblo-pt__amt">$29</span><span class="modblo-pt__per">/mo</span></div>
        <a href="#" class="modblo-pt__cta">Start Pro</a>
        <ul class="modblo-pt__feat">
          <li>Unlimited projects</li>
          <li>Priority email support</li>
          <li>All integrations</li>
          <li>Advanced analytics</li>
        </ul>
      </article>

      <article class="modblo-pt__card">
        <p class="modblo-pt__name">Team</p>
        <p class="modblo-pt__tag">For studios and agencies.</p>
        <div class="modblo-pt__price"><span class="modblo-pt__amt">$99</span><span class="modblo-pt__per">/mo</span></div>
        <a href="#" class="modblo-pt__cta">Talk to sales</a>
        <ul class="modblo-pt__feat">
          <li>Everything in Pro</li>
          <li>Unlimited seats</li>
          <li>Private Slack channel</li>
          <li>SLA &amp; SSO</li>
        </ul>
      </article>

    </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:

WhatHow to edit
HeadingFind the value in the code and change it directly.
SubheadingFind the value in the code and change it directly.
Each tier cardDuplicate one .modblo-pt__card to add a tier. Add the .is-popular class to highlight one.
ColorsLook for /* EDIT colors */ and /* EDIT highlighted card border */.

SEO & accessibility notes

  • Pure semantic HTML, every tier and feature fully crawlable.
  • Zero JavaScript, instant render with no layout shift.
  • Stacks cleanly on mobile via grid template column override.
  • Real <a> CTAs, keyboard navigable.

Related

Pairs nicely with

Browse all
Free
Featured
CTA

CTA Banner

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

100 perf·beginner
Free
Free
Content

Icon Feature Cards

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

100 perf·beginner
Free
Free
Stats

Animated Stat Counter

Big numbers that count up when scrolled into view.

100 perf·beginner
Free