{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Comparison table: two to four products or plans side by side. Column blocks take a product
  (image, title, price and link come from it) or a custom image, title and price; one column can
  be highlighted with the merchant's own label. Row blocks hold a feature and one value per column,
  separated by |: yes / no / dash values become icons with screen-reader text, anything else
  shows as typed. Group blocks add a heading row. A real <table>; on small screens it scrolls
  sideways inside its own region while the feature column stays put. No JavaScript.
  Depends on: snippets/lib-button.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign columns = section.blocks | where: 'type', 'column'
  assign column_count = columns.size
  assign eager = false
  if section.index <= 2
    assign eager = true
  endif
  assign yes_values = 'yes,y,true,✓,✔' | split: ','
  assign no_values = 'no,n,false,✗,✕,×,x' | split: ','
  assign dash_values = '-,–,—,n/a' | split: ','
  assign caption = s.caption | default: s.heading | strip_html | strip
-%}

<div
  class="lib-compare lib-compare--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-columns="{{ column_count }}"
  {% if s.animate %}
    data-animate
  {% endif %}
  style="
    --lib-bg: {{ s.color_bg }};
    {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
    --lib-text: {{ s.color_text }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-panel: {{ s.color_panel }};
    --lib-line: {{ s.color_line }};
    --lib-hl: {{ s.color_highlight }};
    --lib-hl-text: {{ s.color_highlight_text }};
    --lib-yes: {{ s.color_yes }};
    --lib-no: {{ s.color_no }};
    --lib-pt: {{ s.padding_top }}px;
    --lib-pb: {{ s.padding_bottom }}px;
    --lib-pt-m: {{ s.padding_top_mobile }}px;
    --lib-pb-m: {{ s.padding_bottom_mobile }}px;
  "
>
  <div class="lib-compare__inner">
    {%- if s.heading != blank or s.text != blank -%}
      <div class="lib-compare__header" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-compare__heading lib-compare__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-compare__text">{{ s.text }}</div>
        {%- endif -%}
      </div>
    {%- endif -%}

    {%- if column_count > 0 -%}
      <div class="lib-compare__scroll" role="region" tabindex="0" aria-label="{{ s.scroll_label | escape }}">
        <table class="lib-compare__table">
          {%- if caption != blank -%}
            <caption class="lib-compare__sr">{{ caption | escape }}</caption>
          {%- endif -%}
          <thead>
            <tr>
              <td class="lib-compare__corner">
                {%- if s.corner_label != blank -%}<span class="lib-compare__corner-label">{{ s.corner_label | escape }}</span>{%- endif -%}
              </td>
              {%- for column in columns -%}
                {%- liquid
                  assign c = column.settings
                  assign p = c.product
                  assign title = c.title
                  if title == blank and p != blank
                    assign title = p.title
                  endif
                  assign image = c.image
                  if image == blank and p != blank
                    assign image = p.featured_image
                  endif
                  assign url = c.button_url
                  if url == blank and p != blank
                    assign url = p.url
                  endif
                -%}
                <th scope="col" class="lib-compare__col" {% if c.highlight %}data-highlight{% endif %} {{ column.shopify_attributes }}>
                  <div class="lib-compare__col-inner">
                    {%- if c.highlight and c.highlight_label != blank -%}
                      <span class="lib-compare__badge">{{ c.highlight_label | escape }}</span>
                    {%- endif -%}
                    {%- if s.show_images and image != blank -%}
                      <div class="lib-compare__media" data-ratio="{{ s.image_ratio }}">
                        {%- assign img_loading = 'lazy' -%}
                        {%- if eager -%}{%- assign img_loading = 'eager' -%}{%- endif -%}
                        {{ image | image_url: width: 600 | image_tag: class: 'lib-compare__img', loading: img_loading, sizes: '(min-width: 990px) 240px, 45vw', widths: '240, 360, 480, 600', alt: '' }}
                      </div>
                    {%- endif -%}
                    <span class="lib-compare__title">{{ title | escape }}</span>
                    {%- if s.show_prices -%}
                      {%- if c.price_text != blank -%}
                        <span class="lib-compare__price">{{ c.price_text | escape }}</span>
                      {%- elsif p != blank -%}
                        <span class="lib-compare__price">
                          {%- if p.price_varies -%}{{ s.from_label | escape }} {% endif -%}
                          {%- if p.compare_at_price > p.price -%}
                            <span class="lib-compare__sr">{{ s.sale_label | escape }}</span>
                            {{- p.price | money -}}
                            <span class="lib-compare__sr">{{ s.regular_label | escape }}</span>
                            <s class="lib-compare__was">{{ p.compare_at_price | money }}</s>
                          {%- else -%}
                            {{- p.price | money -}}
                          {%- endif -%}
                        </span>
                      {%- endif -%}
                    {%- endif -%}
                    {%- if c.button_label != blank -%}
                      <span class="lib-compare__cta">
                        {%- assign btn_style = c.button_style -%}
                        {%- if c.highlight and btn_style == 'outline' -%}{%- assign btn_style = 'primary' -%}{%- endif -%}
                        {%- render 'lib-button', label: c.button_label, url: url, style: btn_style, new_tab: c.button_new_tab, arrow: false -%}
                      </span>
                    {%- endif -%}
                  </div>
                </th>
              {%- endfor -%}
            </tr>
          </thead>
          <tbody>
            {%- for block in section.blocks -%}
              {%- assign b = block.settings -%}
              {%- case block.type -%}
                {%- when 'group' -%}
                  {%- if b.title != blank -%}
                    <tr class="lib-compare__group" {{ block.shopify_attributes }}>
                      <th scope="colgroup" colspan="{{ column_count | plus: 1 }}">{{ b.title | escape }}</th>
                    </tr>
                  {%- endif -%}
                {%- when 'row' -%}
                  {%- assign values = b.values | split: '|' -%}
                  <tr class="lib-compare__row" {{ block.shopify_attributes }}>
                    <th scope="row" class="lib-compare__feature">
                      <span class="lib-compare__feature-label">{{ b.feature | escape }}</span>
                      {%- if b.note != blank -%}
                        <span class="lib-compare__note">{{ b.note | escape }}</span>
                      {%- endif -%}
                    </th>
                    {%- for column in columns -%}
                      {%- assign i = forloop.index0 -%}
                      {%- assign raw = values[i] | strip -%}
                      {%- assign key = raw | downcase -%}
                      <td {% if column.settings.highlight %}data-highlight{% endif %}>
                        {%- if yes_values contains key -%}
                          <span class="lib-compare__mark lib-compare__mark--yes">
                            <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><path d="m5 10.5 3.2 3L15 6.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            <span class="lib-compare__sr">{{ s.yes_label | escape }}</span>
                          </span>
                        {%- elsif no_values contains key -%}
                          <span class="lib-compare__mark lib-compare__mark--no">
                            <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><path d="m6.5 6.5 7 7M13.5 6.5l-7 7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                            <span class="lib-compare__sr">{{ s.no_label | escape }}</span>
                          </span>
                        {%- elsif dash_values contains key or raw == blank -%}
                          <span class="lib-compare__mark lib-compare__mark--none">
                            <span aria-hidden="true">–</span>
                            <span class="lib-compare__sr">{{ s.none_label | escape }}</span>
                          </span>
                        {%- else -%}
                          {{ raw | escape }}
                        {%- endif -%}
                      </td>
                    {%- endfor -%}
                  </tr>
              {%- endcase -%}
            {%- endfor -%}
          </tbody>
        </table>
      </div>
    {%- endif -%}
  </div>
</div>

{% stylesheet %}
  .lib-compare {
    background-color: var(--lib-bg);
    background-image: var(--lib-bg-image, none);
    color: var(--lib-text);
    padding: var(--lib-pt) 1rem var(--lib-pb);
  }
  .lib-compare__inner { max-width: 1200px; margin: 0 auto; }
  .lib-compare--full { padding-inline: clamp(1rem, 3vw, 2.5rem); }
  .lib-compare--full .lib-compare__inner { max-width: none; }
  @media (max-width: 749px) {
    .lib-compare { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-compare[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-compare[data-show='mobile'] { display: none; }
  }

  .lib-compare__header { max-width: 44rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
  .lib-compare__header[data-align='center'] { margin-inline: auto; text-align: center; }
  .lib-compare__header[data-align='right'] { margin-inline-start: auto; text-align: right; }
  @media (max-width: 749px) {
    .lib-compare__header[data-align-m='left'] { margin-inline: 0 auto; text-align: left; }
    .lib-compare__header[data-align-m='center'] { margin-inline: auto; text-align: center; }
    .lib-compare__header[data-align-m='right'] { margin-inline: auto 0; text-align: right; }
  }
  .lib-compare__heading {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .lib-compare__heading--small { font-size: clamp(1.5rem, 2.5vw, 2rem); }
  .lib-compare__heading--medium { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .lib-compare__heading--xlarge { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .lib-compare__text { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.65; opacity: 0.85; }
  .lib-compare__text > :first-child { margin-top: 0; }
  .lib-compare__text > :last-child { margin-bottom: 0; }

  /* Table: scrolls inside its region; the feature column stays visible while it does. */
  /* Positioned so the screen-reader-only labels inside are clipped by the scroll area, not the page. */
  .lib-compare__scroll {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 16px;
    background: var(--lib-panel);
    border: 1px solid var(--lib-line);
  }
  .lib-compare__scroll:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 3px; }
  .lib-compare__table {
    width: 100%;
    min-width: calc(11rem + var(--lib-col-min) * var(--lib-cols, 3));
    --lib-col-min: 10rem;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.9375rem;
  }
  .lib-compare[data-columns='2'] .lib-compare__table { --lib-cols: 2; }
  .lib-compare[data-columns='4'] .lib-compare__table { --lib-cols: 4; }
  .lib-compare__table th,
  .lib-compare__table td {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid var(--lib-line);
    text-align: center;
    vertical-align: middle;
  }
  .lib-compare__table tbody tr:last-child > * { border-bottom: 0; }
  .lib-compare__table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 11rem;
    text-align: left;
    background: var(--lib-panel);
  }
  @media (min-width: 990px) {
    .lib-compare__table tr > :first-child { width: 28%; }
  }
  /* Narrow screens: a slimmer feature column so more than one product shows before scrolling. */
  @media (max-width: 749px) {
    .lib-compare__table { --lib-col-min: 8rem; min-width: calc(8.5rem + var(--lib-col-min) * var(--lib-cols, 3)); font-size: 0.875rem; }
    .lib-compare__table th,
    .lib-compare__table td { padding: 0.8rem 0.65rem; }
    .lib-compare__table tr > :first-child { width: 8.5rem; }
    .lib-compare__media { max-width: 6.5rem; }
    .lib-compare__title { font-size: 0.9375rem; }
  }
  .lib-compare__table [data-highlight] { background: color-mix(in srgb, var(--lib-hl) 9%, var(--lib-panel)); }

  .lib-compare__table .lib-compare__corner { vertical-align: bottom; }
  .lib-compare__corner-label { font-size: 0.8125rem; font-weight: 600; opacity: 0.7; }
  .lib-compare__table .lib-compare__col { position: relative; vertical-align: top; padding-top: 3rem; font-weight: 400; }
  .lib-compare__col-inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
  .lib-compare__badge {
    position: absolute;
    top: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--lib-hl);
    color: var(--lib-hl-text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .lib-compare__media {
    width: 100%;
    max-width: 10rem;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--lib-text) 5%, transparent);
    aspect-ratio: 1;
  }
  .lib-compare__media[data-ratio='portrait'] { aspect-ratio: 4 / 5; }
  .lib-compare__media[data-ratio='landscape'] { aspect-ratio: 4 / 3; }
  .lib-compare__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-compare__title { font-size: 1rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
  .lib-compare__price { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
  .lib-compare__was { margin-inline-start: 0.35em; opacity: 0.6; }
  .lib-compare__cta { margin-top: 0.25rem; }
  .lib-compare__cta .lib-btn { font-size: 0.875rem; padding: 0.75em 1.2em; }

  .lib-compare__feature { font-weight: 500; }
  .lib-compare__feature-label { display: block; }
  .lib-compare__note { display: block; margin-top: 0.2rem; font-size: 0.8125rem; font-weight: 400; opacity: 0.7; }
  .lib-compare__group th {
    padding-top: 1.4rem;
    background: var(--lib-panel);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lib-accent);
    text-align: left;
  }
  .lib-compare__mark { display: inline-grid; place-items: center; }
  .lib-compare__mark--yes {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lib-yes) 14%, transparent);
    color: var(--lib-yes);
  }
  .lib-compare__mark--no { color: var(--lib-no); }
  .lib-compare__mark--none { opacity: 0.55; }
  .lib-compare__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Motion: rows fade in as the table scrolls into view (scroll-driven animations only). */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .lib-compare[data-animate] .lib-compare__table tbody tr {
        animation: lib-compare-in linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
      }
    }
  }
  @keyframes lib-compare-in {
    from { opacity: 0; transform: translateY(10px); }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Comparison table",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 40,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Which set is right for you?" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "xlarge", "label": "Extra large" }
      ],
      "default": "medium"
    },
    { "type": "richtext", "id": "text", "label": "Text" },

    { "type": "header", "content": "Table" },
    { "type": "paragraph", "content": "Add 2 to 4 Column blocks, then Row blocks. Type one value per column in a row, separated by |. yes, no and - become icons." },
    { "type": "checkbox", "id": "show_images", "label": "Show column images", "default": true },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image shape",
      "options": [
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait" },
        { "value": "landscape", "label": "Landscape" }
      ],
      "default": "square"
    },
    { "type": "checkbox", "id": "show_prices", "label": "Show prices", "default": true },
    { "type": "text", "id": "corner_label", "label": "Feature column heading", "info": "Optional. Shown above the feature names." },
    { "type": "text", "id": "caption", "label": "Table name (screen readers)", "info": "The heading is used when this is empty." },
    { "type": "text", "id": "scroll_label", "label": "Table area name (screen readers)", "default": "Comparison table, scrolls sideways on small screens" },
    { "type": "text", "id": "yes_label", "label": "Yes icon text (screen readers)", "default": "Included" },
    { "type": "text", "id": "no_label", "label": "No icon text (screen readers)", "default": "Not included" },
    { "type": "text", "id": "none_label", "label": "Dash text (screen readers)", "default": "Not applicable" },
    { "type": "text", "id": "from_label", "label": "Price prefix when variants differ", "default": "From" },
    { "type": "text", "id": "sale_label", "label": "Sale price (screen readers)", "default": "Sale price" },
    { "type": "text", "id": "regular_label", "label": "Regular price (screen readers)", "default": "Regular price" },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    { "type": "text_alignment", "id": "text_alignment", "label": "Heading alignment on desktop", "default": "center" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Heading alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#F6F1EA" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#231F1B" },
    { "type": "color", "id": "color_accent", "label": "Accent (solid button, group headings)", "default": "#7A5A3A" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#FFFFFF" },
    { "type": "color", "id": "color_panel", "label": "Table background", "default": "#FFFFFF" },
    { "type": "color", "id": "color_line", "label": "Lines", "default": "#E7E0D6" },
    { "type": "color", "id": "color_highlight", "label": "Highlighted column", "default": "#7A5A3A" },
    { "type": "color", "id": "color_highlight_text", "label": "Highlight label text", "default": "#FFFFFF" },
    { "type": "color", "id": "color_yes", "label": "Yes icon", "default": "#3F6B45" },
    { "type": "color", "id": "color_no", "label": "No icon", "default": "#9A3B2E" },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 88 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 88 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 56 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Fade rows in on scroll", "info": "Only in browsers that support scroll-driven animations; never when reduced motion is on.", "default": false }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "limit": 4,
      "settings": [
        { "type": "product", "id": "product", "label": "Product", "info": "Optional. Supplies the image, title, price and link." },
        { "type": "image_picker", "id": "image", "label": "Image", "info": "Replaces the product image." },
        { "type": "text", "id": "title", "label": "Title", "info": "Replaces the product title.", "default": "Product" },
        { "type": "text", "id": "price_text", "label": "Price text", "info": "Optional. Replaces the product price, e.g. for a plan." },
        { "type": "checkbox", "id": "highlight", "label": "Highlight this column", "default": false },
        { "type": "text", "id": "highlight_label", "label": "Highlight label", "info": "Your own words, e.g. Our pick.", "visible_if": "{{ block.settings.highlight }}" },
        { "type": "text", "id": "button_label", "label": "Button label", "default": "View product" },
        { "type": "url", "id": "button_url", "label": "Button link", "info": "The product page is used when this is empty." },
        {
          "type": "select",
          "id": "button_style",
          "label": "Button style",
          "options": [
            { "value": "primary", "label": "Solid" },
            { "value": "outline", "label": "Outline" },
            { "value": "text", "label": "Text link" }
          ],
          "default": "outline"
        },
        { "type": "checkbox", "id": "button_new_tab", "label": "Open link in a new tab", "default": false }
      ]
    },
    {
      "type": "group",
      "name": "Row group heading",
      "settings": [
        { "type": "text", "id": "title", "label": "Heading", "default": "What's included" }
      ]
    },
    {
      "type": "row",
      "name": "Row",
      "settings": [
        { "type": "text", "id": "feature", "label": "Feature", "default": "Feature" },
        { "type": "text", "id": "note", "label": "Note", "info": "Optional short line under the feature." },
        { "type": "text", "id": "values", "label": "Values", "info": "One per column, separated by |. yes, no and - become icons; anything else shows as typed.", "default": "yes | yes | no" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Comparison table",
      "blocks": [
        { "type": "column", "settings": { "title": "Essentials" } },
        { "type": "column", "settings": { "title": "Everyday", "highlight": true, "highlight_label": "Our pick" } },
        { "type": "column", "settings": { "title": "Hosting" } },
        { "type": "row", "settings": { "feature": "Place settings", "values": "2 | 4 | 6" } },
        { "type": "row", "settings": { "feature": "Dinner plates", "values": "yes | yes | yes" } },
        { "type": "row", "settings": { "feature": "Serving bowl", "values": "no | yes | yes" } },
        { "type": "row", "settings": { "feature": "Dishwasher safe", "values": "yes | yes | yes" } }
      ]
    }
  ]
}
{% endschema %}