PremiumNewProduct Sections

Size Guide Modal

Name: Size Guide Modal
Brand: modblo
Price: 29.00 USD
Availability: InStock

Tabbed inch/cm size chart in a clean modal. Replaces Kiwi Size Chart.

#size-chart#size-guide#pdp#modal#kiwi-replacement

Live preview

See it in action.

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

About this section

A polished modal-based size guide for apparel PDPs. Inch/cm tab toggle, configurable measurement table (columns and rows are theme blocks), how-to-measure body, and a fit note. Trigger is a styled link you drop next to the variant picker. Pure Liquid + a few lines of JS, no app needed.

Install in 90 seconds

01
Create /sections/modblo-size-guide-modal.liquid.
02
Paste the section code and save.
03
Add the section to product.json (or wherever you want the trigger to render).
04
In the theme editor, add Column blocks (Chest, Waist, Length, etc.), then Row blocks for each size with comma-separated values matching the column order.
05
(Optional) Wrap the trigger in a flex row next to the variant picker so it sits inline with the size pills.

The Liquid

modblo-size-guide-modal.liquid

{%- comment -%}
  modblo. Size Guide Modal
  Replaces Kiwi Size Chart / Avada Size Chart / similar size-chart apps.
  Renders a "Size guide" trigger link on PDPs, opens a modal containing:
    - Tabbed measurement tables (e.g. inches / cm)
    - A how-to-measure illustration / instructions
    Configure the table rows and columns via theme blocks.
{%- endcomment -%}

<div class="modblo-sg" data-modblo-sg
     data-section-id="{{ section.id }}"
     style="--modblo-sg-bg: {{ section.settings.bg }};
            --modblo-sg-fg: {{ section.settings.fg }};
            --modblo-sg-accent: {{ section.settings.accent }};">

  <button type="button" class="modblo-sg__trigger" data-modblo-sg-open>
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M3 9h18M3 15h18M9 3v18M15 3v18"/>
    </svg>
    {{ section.settings.trigger_label | default: 'Size guide' }}
  </button>

  <div class="modblo-sg__overlay" data-modblo-sg-close></div>

  <div class="modblo-sg__panel" role="dialog" aria-modal="true" aria-labelledby="modblo-sg-h-{{ section.id }}">
    <header class="modblo-sg__head">
      <h2 class="modblo-sg__h" id="modblo-sg-h-{{ section.id }}">{{ section.settings.heading | default: 'Size guide' }}</h2>
      <button type="button" class="modblo-sg__x" data-modblo-sg-close aria-label="Close size guide">×</button>
    </header>

    {%- if section.settings.unit_tabs -%}
      <div class="modblo-sg__tabs" role="tablist">
        <button type="button" class="modblo-sg__tab is-active" data-modblo-sg-tab="primary" role="tab" aria-selected="true">
          {{ section.settings.unit_primary | default: 'Inches' }}
        </button>
        <button type="button" class="modblo-sg__tab" data-modblo-sg-tab="secondary" role="tab" aria-selected="false">
          {{ section.settings.unit_secondary | default: 'Centimeters' }}
        </button>
      </div>
    {%- endif -%}

    <div class="modblo-sg__body">
      {%- comment -%} Measurement table {%- endcomment -%}
      <div class="modblo-sg__table-wrap">
        <table class="modblo-sg__table" data-modblo-sg-table="primary">
          <thead>
            <tr>
              <th>Size</th>
              {%- for block in section.blocks -%}
                {%- if block.type == 'column' -%}
                  <th>{{ block.settings.label }}</th>
                {%- endif -%}
              {%- endfor -%}
            </tr>
          </thead>
          <tbody>
            {%- for block in section.blocks -%}
              {%- if block.type == 'row' -%}
                <tr {{ block.shopify_attributes }}>
                  <th>{{ block.settings.size }}</th>
                  {%- assign vals = block.settings.values_primary | split: ',' -%}
                  {%- for v in vals -%}
                    <td>{{ v | strip }}</td>
                  {%- endfor -%}
                </tr>
              {%- endif -%}
            {%- endfor -%}
          </tbody>
        </table>

        {%- if section.settings.unit_tabs -%}
          <table class="modblo-sg__table" data-modblo-sg-table="secondary" hidden>
            <thead>
              <tr>
                <th>Size</th>
                {%- for block in section.blocks -%}
                  {%- if block.type == 'column' -%}
                    <th>{{ block.settings.label }}</th>
                  {%- endif -%}
                {%- endfor -%}
              </tr>
            </thead>
            <tbody>
              {%- for block in section.blocks -%}
                {%- if block.type == 'row' -%}
                  <tr>
                    <th>{{ block.settings.size }}</th>
                    {%- assign vals = block.settings.values_secondary | split: ',' -%}
                    {%- for v in vals -%}
                      <td>{{ v | strip }}</td>
                    {%- endfor -%}
                  </tr>
                {%- endif -%}
              {%- endfor -%}
            </tbody>
          </table>
        {%- endif -%}
      </div>

      {%- if section.settings.how_to != blank -%}
        <div class="modblo-sg__how">
          <h3 class="modblo-sg__how-h">{{ section.settings.how_to_heading | default: 'How to measure' }}</h3>
          <div class="modblo-sg__how-body">{{ section.settings.how_to }}</div>
        </div>
      {%- endif -%}

      {%- if section.settings.fit_note != blank -%}
        <p class="modblo-sg__note">{{ section.settings.fit_note }}</p>
      {%- endif -%}
    </div>
  </div>
</div>

<style>
  .modblo-sg__trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: inherit; cursor: pointer;
    border: 0; padding: 4px 0; margin: 0;
    font-size: 13px; font-weight: 500;
    text-decoration: underline; text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }
  .modblo-sg__trigger:hover { text-decoration-thickness: 2px; }

  .modblo-sg__overlay,
  .modblo-sg__panel {
    position: fixed; z-index: 80;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, visibility .25s, transform .35s cubic-bezier(.16,1,.3,1);
  }
  .modblo-sg__overlay { inset: 0; background: rgba(0,0,0,.55); }
  .modblo-sg__panel {
    left: 50%; top: 50%; transform: translate(-50%, -45%) scale(.96);
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--modblo-sg-bg, #fff); color: var(--modblo-sg-fg, #0b0b0c);
    border-radius: 18px;
    box-shadow: 0 32px 80px -24px rgba(0,0,0,.45);
  }
  .modblo-sg.is-open .modblo-sg__overlay,
  .modblo-sg.is-open .modblo-sg__panel {
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .modblo-sg.is-open .modblo-sg__panel { transform: translate(-50%, -50%) scale(1); }

  .modblo-sg__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid color-mix(in oklab, var(--modblo-sg-fg) 8%, transparent);
  }
  .modblo-sg__h { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
  .modblo-sg__x {
    background: transparent; border: 0; color: inherit; cursor: pointer;
    width: 36px; height: 36px; border-radius: 8px;
    font-size: 24px; line-height: 1; opacity: .6;
  }
  .modblo-sg__x:hover { opacity: 1; background: color-mix(in oklab, var(--modblo-sg-fg) 6%, transparent); }

  .modblo-sg__tabs {
    display: inline-flex; padding: 4px; margin: 16px 24px 0;
    background: color-mix(in oklab, var(--modblo-sg-fg) 5%, transparent);
    border-radius: 10px;
  }
  .modblo-sg__tab {
    background: transparent; border: 0; color: inherit; cursor: pointer;
    padding: 7px 14px; border-radius: 7px;
    font-size: 12px; font-weight: 600;
    transition: background .2s, color .2s;
  }
  .modblo-sg__tab.is-active {
    background: var(--modblo-sg-bg, #fff);
    color: var(--modblo-sg-fg, #0b0b0c);
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
  }

  .modblo-sg__body { padding: 20px 24px 24px; }

  .modblo-sg__table-wrap { overflow-x: auto; margin-bottom: 24px; }
  .modblo-sg__table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .modblo-sg__table th, .modblo-sg__table td {
    padding: 10px 14px; text-align: left;
    border-bottom: 1px solid color-mix(in oklab, var(--modblo-sg-fg) 8%, transparent);
  }
  .modblo-sg__table thead th {
    background: color-mix(in oklab, var(--modblo-sg-fg) 4%, transparent);
    font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    font-size: 11px; opacity: .7;
  }
  .modblo-sg__table tbody th { font-weight: 600; }
  .modblo-sg__table tbody tr:last-child th, .modblo-sg__table tbody tr:last-child td { border-bottom: 0; }

  .modblo-sg__how {
    background: color-mix(in oklab, var(--modblo-sg-fg) 4%, transparent);
    border-radius: 12px;
    padding: 16px 18px; margin-top: 8px;
  }
  .modblo-sg__how-h {
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    margin: 0 0 10px; opacity: .75;
  }
  .modblo-sg__how-body { font-size: 13px; line-height: 1.6; opacity: .85; }
  .modblo-sg__how-body p { margin: 0 0 8px; }
  .modblo-sg__how-body p:last-child { margin-bottom: 0; }

  .modblo-sg__note {
    font-size: 12px; opacity: .55;
    margin: 16px 0 0; padding-top: 16px;
    border-top: 1px solid color-mix(in oklab, var(--modblo-sg-fg) 8%, transparent);
  }

  @media (max-width: 540px) {
    .modblo-sg__head { padding: 16px 18px; }
    .modblo-sg__body { padding: 16px 18px 18px; }
    .modblo-sg__table th, .modblo-sg__table td { padding: 9px 10px; font-size: 12px; }
  }
</style>

<script>
  (function () {
    var root = document.querySelector('[data-modblo-sg][data-section-id="{{ section.id }}"]');
    if (!root) return;

    function open() { root.classList.add('is-open'); document.body.style.overflow = 'hidden'; }
    function close() { root.classList.remove('is-open'); document.body.style.overflow = ''; }

    root.querySelector('[data-modblo-sg-open]').addEventListener('click', open);
    root.querySelectorAll('[data-modblo-sg-close]').forEach(function (el) {
      el.addEventListener('click', close);
    });
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && root.classList.contains('is-open')) close();
    });

    // Tab switcher
    var tabs = root.querySelectorAll('[data-modblo-sg-tab]');
    tabs.forEach(function (tab) {
      tab.addEventListener('click', function () {
        var target = tab.dataset.cbSgTab;
        tabs.forEach(function (t) {
          var on = t.dataset.cbSgTab === target;
          t.classList.toggle('is-active', on);
          t.setAttribute('aria-selected', on);
        });
        root.querySelectorAll('[data-modblo-sg-table]').forEach(function (table) {
          table.hidden = table.dataset.cbSgTable !== target;
        });
      });
    });
  })();
</script>

{% schema %}
{
  "name": "Size Guide Modal",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Trigger" },
    { "type": "text", "id": "trigger_label", "label": "Trigger label", "default": "Size guide" },
    { "type": "header", "content": "Modal content" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Size guide" },
    { "type": "checkbox", "id": "unit_tabs", "label": "Show inch/cm tabs", "default": true },
    { "type": "text", "id": "unit_primary", "label": "Primary unit label", "default": "Inches" },
    { "type": "text", "id": "unit_secondary", "label": "Secondary unit label", "default": "Centimeters" },
    { "type": "text", "id": "how_to_heading", "label": "How-to-measure heading", "default": "How to measure" },
    { "type": "richtext", "id": "how_to", "label": "How-to-measure body" },
    { "type": "text", "id": "fit_note", "label": "Fit note", "default": "Between sizes? Size up for a relaxed fit, down for a slim fit." },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "settings": [
        { "type": "text", "id": "label", "label": "Column label", "default": "Chest" }
      ]
    },
    {
      "type": "row",
      "name": "Row",
      "settings": [
        { "type": "text", "id": "size", "label": "Size label", "default": "M" },
        { "type": "text", "id": "values_primary", "label": "Primary unit values", "info": "Comma-separated, in column order. e.g. 38, 30, 40", "default": "38, 30, 40" },
        { "type": "text", "id": "values_secondary", "label": "Secondary unit values", "info": "Comma-separated, in column order.", "default": "97, 76, 102" }
      ]
    }
  ],
  "presets": [{
    "name": "Size Guide Modal",
    "blocks": [
      { "type": "column", "settings": { "label": "Chest" } },
      { "type": "column", "settings": { "label": "Waist" } },
      { "type": "column", "settings": { "label": "Length" } },
      { "type": "row", "settings": { "size": "XS", "values_primary": "34, 26, 26", "values_secondary": "86, 66, 66" } },
      { "type": "row", "settings": { "size": "S", "values_primary": "36, 28, 27", "values_secondary": "91, 71, 69" } },
      { "type": "row", "settings": { "size": "M", "values_primary": "38, 30, 28", "values_secondary": "97, 76, 71" } },
      { "type": "row", "settings": { "size": "L", "values_primary": "40, 32, 29", "values_secondary": "102, 81, 74" } },
      { "type": "row", "settings": { "size": "XL", "values_primary": "42, 34, 30", "values_secondary": "107, 86, 76" } }
    ]
  }]
}
{% endschema %}

Unlock the section code

Size Guide Modal is a premium section. Get the full Liquid + scoped CSS paste-ready.

Or unlock all premium with Creator

One-time purchase · Lifetime updates · You own the code

Theme editor settings

Setting	Type	Default
Trigger label trigger_label	text	Size guide
Heading heading	text	Size guide
Show inch/cm tabs unit_tabs	checkbox	true
Primary unit label unit_primary	text	Inches
Secondary unit label unit_secondary	text	Centimeters
How-to-measure heading how_to_heading	text	How to measure
How-to-measure body how_to	richtext	,
Fit note fit_note	text	,
Background bg	color	#ffffff
Foreground fg	color	#0b0b0c
Accent accent	color	#6366f1
Columns + Rows blocks Add Column blocks (one per measurement column) then Row blocks (one per size). Values comma-separated in column order.	blocks	,

SEO & accessibility notes

Modal is a real <dialog>-style overlay, full keyboard navigation (Escape closes), aria-modal labeled.
Tabs use real <button> with role=tab + aria-selected, screen-reader friendly.
Tables use <th scope> implicitly via thead/tbody structure for accessibility.
All content rendered server-side, fully crawlable for SEO.

Pairs nicely with

Variant Picker Pro

Premium swatch and size selector with sold-out detection. Replaces Swatch King.

Sticky Add to Cart

A premium, scroll-triggered sticky bar that lifts conversion.

Comparison Table

Side-by-side feature comparison with highlighted winning column.

100 perf·beginner

$29