# Product highlights: free Shopify section

> Icon points under the buy box for material, care, origin, size or warranty, typed or linked to product metafields. Empty points hide per product.

Product highlights is a free Shopify section that lists a product's key facts as short icon points under the buy box: material, care, origin, size, warranty. Each point is a block whose title and text you type or connect to a product metafield in the theme editor, so one product template shows each product's own details, and a point that is empty for a product is left out. There are twelve built-in line icons or your own icon images, a list or grid layout, and plain, card or divided styles. Pure Liquid and CSS for Online Store 2.0 themes, without an app.

- **Category:** Product page
- **Use on:** Product
- **Reads:** Content only, or product metafields
- **Size:** 16 KB in 1 file, no JavaScript
- **License:** MIT, © 2026 Lintel
- **Page:** https://lintelagency.com/resources/shopify-sections/product-highlights
- **Live demo:** https://lintelagency.com/resources/shopify-sections/demo/lib-product-highlights.html
- **Added:** 2026-11-02

## What it’s for

- Material, care and origin points under the add to cart button
- Dimensions and capacity from metafields on furniture or kitchenware
- A row of product promises (handmade, recycled packaging, two-year warranty) on a landing page

## Editor settings

In the theme editor the section is called “Lib · Product highlights”. IDs, types, labels and defaults come from the section’s schema; the labels are what the theme editor shows.

### Content

| ID | Type | Label | Default | Options or range |
| --- | --- | --- | --- | --- |
| `heading` | `inline_richtext` | Heading | – |  |
| `heading_tag` | `select` | Heading tag | h2 | `h1`, `h2`, `h3`, `p` |
| `heading_size` | `select` | Heading size | small | `small`, `medium`, `large` |

### Layout

| ID | Type | Label | Default | Options or range |
| --- | --- | --- | --- | --- |
| `layout` | `select` | Layout | list | `list`, `grid` |
| `item_style` | `select` | Point style | divided | `plain`, `card`, `divided` |
| `columns` | `range` | Columns on desktop (grid) | `3` | 2–4, step 1 |
| `columns_mobile` | `range` | Columns on mobile (grid) | `1` | 1–2, step 1 |
| `icon_size` | `range` | Icon size | `22` | 16–40 px, step 2 |
| `section_width` | `select` | Width | page | `page`, `full` |
| `text_alignment` | `select` | Alignment on desktop | left | `left`, `center` |
| `text_alignment_mobile` | `select` | Alignment on mobile | left | `left`, `center` |

### Colors

| ID | Type | Label | Default | Options or range |
| --- | --- | --- | --- | --- |
| `color_bg` | `color` | Background | #FFFFFF |  |
| `color_bg_gradient` | `color_background` | Background gradient | – |  |
| `color_text` | `color` | Text | #1F1B17 |  |
| `color_accent` | `color` | Icons | #7A5A3A |  |
| `color_card` | `color` | Card background | #FAF6F1 |  |
| `color_border` | `color` | Dividers | #E7E0D8 |  |

### Spacing and visibility

| ID | Type | Label | Default | Options or range |
| --- | --- | --- | --- | --- |
| `padding_top` | `range` | Top padding on desktop | `24` | 0–200 px, step 4 |
| `padding_bottom` | `range` | Bottom padding on desktop | `24` | 0–200 px, step 4 |
| `padding_top_mobile` | `range` | Top padding on mobile | `20` | 0–160 px, step 4 |
| `padding_bottom_mobile` | `range` | Bottom padding on mobile | `20` | 0–160 px, step 4 |
| `show_on` | `select` | Show on | all | `all`, `desktop`, `mobile` |
| `anchor_id` | `text` | Anchor ID | – |  |

### Motion

| ID | Type | Label | Default | Options or range |
| --- | --- | --- | --- | --- |
| `animate` | `checkbox` | Fade points in on scroll | `false` |  |

## Blocks

Up to 12 blocks in total.

### Point (`point`)

| ID | Type | Label | Default | Options or range |
| --- | --- | --- | --- | --- |
| `icon` | `select` | Icon | leaf | `leaf`, `hand`, `thread`, `drop`, `wash`, `heat`, `sun`, `recycle`, `globe`, `ruler`, `shield`, `check`, `none` |
| `icon_image` | `image_picker` | Custom icon | – |  |
| `title` | `inline_richtext` | Title | Highlight |  |
| `text` | `inline_richtext` | Text | – |  |

## Install

### In Shopify admin

1. Work on a copy, not your live theme: in Shopify admin go to **Online Store > Themes**, open the **…** menu on your current theme and choose **Duplicate**.
2. On the copy, open the **…** menu and choose **Edit code**.
3. In the `sections` folder, add a new file named `lib-product-highlights.liquid` and paste the contents of `sections/lib-product-highlights.liquid` from the source below. Save.
4. Open **Customize** on the copy, choose **Add section** and pick **Lib · Product highlights**. Replace the sample content with your own and set the colors.
5. Preview the copy, then publish it when it looks right.

### With Shopify CLI

From your local theme folder, download the files and push only them to an unpublished theme (find its ID with `shopify theme list`):

```sh
curl -fsSL -o sections/lib-product-highlights.liquid https://lintelagency.com/resources/shopify-sections/files/lib-product-highlights.liquid
shopify theme push --theme <unpublished-theme-id> --only sections/lib-product-highlights.liquid
```

Never push to the live theme: always pass the ID of an unpublished theme and never use `--live` or `--allow-live`. Then add the section in the theme editor as above.

## Files

- [sections/lib-product-highlights.liquid](https://lintelagency.com/resources/shopify-sections/files/lib-product-highlights.liquid): goes in `sections/`

## Questions

### How do I show different highlights per product?

Create product metafields (for example Material or Care) under Settings > Custom data, fill them in on each product, then connect a point's title or text to the metafield with the dynamic source button in the theme editor. Points whose title and text are both empty for a product don't render.

### Can I use my own icons?

Yes. Each point has twelve built-in line icons (natural, handmade, fabric, water, washing, heat, sun, recycled, origin, size, warranty, check), no icon, or a small image you upload. Icon size is a section setting.

### Where should I put it on the product page?

Usually right after the main product section, in the list layout with divided or card points, so it reads as part of the buy box. The grid layout suits a full-width row further down or on a landing page.

### Is it accessible?

The points are a real list with text titles; icons are decorative and hidden from screen readers, so nothing is said twice.

## Source

### sections/lib-product-highlights.liquid

```liquid
{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Product highlights: short icon-and-line points about a product (material, care, origin, fit,
  warranty) for the area under the buy box. Each point is a block whose title and text can be
  typed or connected to a product metafield in the theme editor (dynamic sources); a point whose
  text and title are empty for a product is left out, so one template serves products with
  different details. List or grid, plain, card or divided. Pure Liquid and CSS; no JavaScript.
  Depends on: nothing
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign shown = 0
  for block in section.blocks
    if block.settings.title != blank or block.settings.text != blank
      assign shown = shown | plus: 1
    endif
  endfor
-%}

{%- if shown > 0 or request.design_mode -%}
  <div
    class="lib-highlights lib-highlights--{{ s.section_width }}"
    {% if s.anchor_id != blank %}
      id="{{ s.anchor_id | handleize }}"
    {% endif %}
    data-show="{{ s.show_on }}"
    data-layout="{{ s.layout }}"
    data-style="{{ s.item_style }}"
    {% 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-card: {{ s.color_card }};
      --lib-border: {{ s.color_border }};
      --lib-cols: {{ s.columns }};
      --lib-cols-m: {{ s.columns_mobile }};
      --lib-icon: {{ s.icon_size }}px;
      --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-highlights__inner" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
      {%- if s.heading != blank -%}
        <{{ heading_tag }} class="lib-highlights__heading lib-highlights__heading--{{ s.heading_size }}">
          {{- s.heading -}}
        </{{ heading_tag }}>
      {%- endif -%}

      <ul class="lib-highlights__list" role="list">
        {%- for block in section.blocks -%}
          {%- assign b = block.settings -%}
          {%- if b.title != blank or b.text != blank -%}
            <li class="lib-highlights__item" {{ block.shopify_attributes }}>
              {%- if b.icon != 'none' or b.icon_image != blank -%}
                <span class="lib-highlights__icon" aria-hidden="true">
                  {%- if b.icon_image != blank -%}
                    {{ b.icon_image | image_url: width: 96 | image_tag: class: 'lib-highlights__icon-img', loading: 'lazy', alt: '' }}
                  {%- else -%}
                    <svg viewBox="0 0 24 24" width="24" height="24" focusable="false" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                      {%- case b.icon -%}
                        {%- when 'hand' -%}
                          <path d="M8 12V5.5a1.5 1.5 0 0 1 3 0V11M11 10V4.5a1.5 1.5 0 0 1 3 0V11M14 10.5V6a1.5 1.5 0 0 1 3 0v7c0 4-2.5 7-6.5 7S5 17.5 4.5 15L3.6 12a1.5 1.5 0 0 1 2.8-1.1L8 14"/>
                        {%- when 'drop' -%}
                          <path d="M12 3.5s6 6.4 6 10.5a6 6 0 0 1-12 0c0-4.1 6-10.5 6-10.5z"/>
                        {%- when 'wash' -%}
                          <path d="M3 7h18l-2 12H5z"/><path d="M6 11c1.5 1 3 1 4.5 0s3-1 4.5 0 3 1 4.5 0"/>
                        {%- when 'heat' -%}
                          <path d="M10 14.5V5a2 2 0 0 1 4 0v9.5a4 4 0 1 1-4 0z"/><path d="M12 9v7"/>
                        {%- when 'recycle' -%}
                          <path d="m7 19-3-5 3-5M4 14h9M17 5l3 5-3 5M20 10h-9M10 4.5 12 3l2 1.5"/>
                        {%- when 'thread' -%}
                          <path d="M7 3h10M7 21h10M8 3v18M16 3v18M8 7l8 3M8 11l8 3M8 15l8 3"/>
                        {%- when 'globe' -%}
                          <circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.5 3.5 5.5 3.5 8.5s-1 6-3.5 8.5c-2.5-2.5-3.5-5.5-3.5-8.5s1-6 3.5-8.5"/>
                        {%- when 'ruler' -%}
                          <rect x="2.5" y="8" width="19" height="8" rx="1.5"/><path d="M6.5 8v3M10 8v4.5M13.5 8v3M17 8v4.5"/>
                        {%- when 'shield' -%}
                          <path d="M12 3l7 3v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6z"/><path d="m9 12 2 2 4-4"/>
                        {%- when 'sun' -%}
                          <circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/>
                        {%- when 'check' -%}
                          <circle cx="12" cy="12" r="8.5"/><path d="m8.5 12 2.5 2.5 4.5-5"/>
                        {%- else -%}
                          <path d="M5 19c0-8 5-13 14-14 0 9-5 14-13 14M5 19l7-7"/>
                      {%- endcase -%}
                    </svg>
                  {%- endif -%}
                </span>
              {%- endif -%}
              <div class="lib-highlights__body">
                {%- if b.title != blank -%}
                  <p class="lib-highlights__title">{{ b.title }}</p>
                {%- endif -%}
                {%- if b.text != blank -%}
                  <p class="lib-highlights__text">{{ b.text }}</p>
                {%- endif -%}
              </div>
            </li>
          {%- endif -%}
        {%- endfor -%}
      </ul>
    </div>
  </div>
{%- endif -%}

{% stylesheet %}
  .lib-highlights {
    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-highlights__inner { max-width: 1200px; margin: 0 auto; }
  .lib-highlights--full .lib-highlights__inner { max-width: none; }
  .lib-highlights[data-layout='list'] .lib-highlights__inner { max-width: 36rem; margin-inline: 0; }
  @media (max-width: 749px) {
    .lib-highlights { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-highlights[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-highlights[data-show='mobile'] { display: none; }
  }

  .lib-highlights__heading { margin: 0 0 1rem; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.2; letter-spacing: -0.01em; }
  .lib-highlights__heading--small { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
  .lib-highlights__heading--large { font-size: clamp(1.75rem, 3vw, 2.5rem); }

  .lib-highlights__list {
    display: grid;
    grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr));
    gap: clamp(0.875rem, 2vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lib-highlights[data-layout='list'] .lib-highlights__list { grid-template-columns: 1fr; gap: 0.75rem; }
  @media (max-width: 749px) {
    .lib-highlights[data-layout='grid'] .lib-highlights__list { grid-template-columns: repeat(var(--lib-cols-m), minmax(0, 1fr)); }
  }
  .lib-highlights__item { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; }
  .lib-highlights[data-style='card'] .lib-highlights__item {
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: var(--lib-card);
  }
  .lib-highlights[data-style='divided'] .lib-highlights__list { gap: 0; }
  .lib-highlights[data-style='divided'] .lib-highlights__item { padding-block: 0.75rem; border-top: 1px solid var(--lib-border); }
  .lib-highlights[data-style='divided'] .lib-highlights__item:last-child { border-bottom: 1px solid var(--lib-border); }
  .lib-highlights[data-style='divided'][data-layout='grid'] .lib-highlights__list { column-gap: 1.5rem; }

  .lib-highlights__icon { flex: none; display: grid; place-items: center; width: var(--lib-icon); height: var(--lib-icon); color: var(--lib-accent); }
  .lib-highlights__icon svg,
  .lib-highlights__icon-img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .lib-highlights__body { min-width: 0; padding-top: 0.1rem; }
  .lib-highlights__title { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
  .lib-highlights__text { margin: 0.15rem 0 0; font-size: 0.875rem; line-height: 1.5; opacity: 0.82; }
  .lib-highlights__title:only-child,
  .lib-highlights__text:only-child { margin: 0; }
  .lib-highlights__text a { color: inherit; text-underline-offset: 0.2em; }
  .lib-highlights__text a:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 2px; }

  .lib-highlights__inner[data-align='center'] { text-align: center; }
  .lib-highlights__inner[data-align='center'] .lib-highlights__item { flex-direction: column; align-items: center; }
  @media (max-width: 749px) {
    .lib-highlights__inner[data-align-m='left'] { text-align: left; }
    .lib-highlights__inner[data-align-m='left'] .lib-highlights__item { flex-direction: row; align-items: flex-start; }
    .lib-highlights__inner[data-align-m='center'] { text-align: center; }
    .lib-highlights__inner[data-align-m='center'] .lib-highlights__item { flex-direction: column; align-items: center; }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .lib-highlights[data-animate] .lib-highlights__item {
        animation: lib-highlights-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }
    }
  }
  @keyframes lib-highlights-rise {
    from { opacity: 0; transform: translateY(12px); }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Product highlights",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 12,
  "settings": [
    { "type": "paragraph", "content": "On a product template, connect a point's title or text to a product metafield with the dynamic source button. Points that are empty for a product are left out." },
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading" },
    {
      "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" }
      ],
      "default": "small"
    },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "info": "List suits the area under the buy box; grid suits a full-width row.",
      "options": [
        { "value": "list", "label": "List" },
        { "value": "grid", "label": "Grid" }
      ],
      "default": "list"
    },
    {
      "type": "select",
      "id": "item_style",
      "label": "Point style",
      "options": [
        { "value": "plain", "label": "Plain" },
        { "value": "card", "label": "Card" },
        { "value": "divided", "label": "Divided" }
      ],
      "default": "divided"
    },
    { "type": "range", "id": "columns", "label": "Columns on desktop (grid)", "min": 2, "max": 4, "step": 1, "default": 3 },
    { "type": "range", "id": "columns_mobile", "label": "Columns on mobile (grid)", "min": 1, "max": 2, "step": 1, "default": 1 },
    { "type": "range", "id": "icon_size", "label": "Icon size", "min": 16, "max": 40, "step": 2, "unit": "px", "default": 22 },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Alignment on desktop",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#FFFFFF" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#1F1B17" },
    { "type": "color", "id": "color_accent", "label": "Icons", "default": "#7A5A3A" },
    { "type": "color", "id": "color_card", "label": "Card background", "default": "#FAF6F1" },
    { "type": "color", "id": "color_border", "label": "Dividers", "default": "#E7E0D8" },

    { "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": 24 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 24 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 20 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 20 },
    {
      "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 points in on scroll", "info": "Only in browsers that support scroll-driven animations; never when reduced motion is on.", "default": false }
  ],
  "blocks": [
    {
      "type": "point",
      "name": "Point",
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "label": "Icon",
          "options": [
            { "value": "leaf", "label": "Leaf (natural)" },
            { "value": "hand", "label": "Hand (handmade)" },
            { "value": "thread", "label": "Fabric" },
            { "value": "drop", "label": "Drop (water)" },
            { "value": "wash", "label": "Washing" },
            { "value": "heat", "label": "Heat" },
            { "value": "sun", "label": "Sun" },
            { "value": "recycle", "label": "Recycled" },
            { "value": "globe", "label": "Origin" },
            { "value": "ruler", "label": "Size" },
            { "value": "shield", "label": "Warranty" },
            { "value": "check", "label": "Check" },
            { "value": "none", "label": "No icon" }
          ],
          "default": "leaf"
        },
        { "type": "image_picker", "id": "icon_image", "label": "Custom icon", "info": "Optional. Replaces the icon above." },
        { "type": "inline_richtext", "id": "title", "label": "Title", "default": "Highlight" },
        { "type": "inline_richtext", "id": "text", "label": "Text", "info": "Connect a metafield for details that differ per product." }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Product highlights",
      "blocks": [
        { "type": "point", "settings": { "icon": "hand", "title": "Made by hand", "text": "Each piece varies a little." } },
        { "type": "point", "settings": { "icon": "wash", "title": "Dishwasher safe", "text": "Hand washing keeps the glaze bright." } },
        { "type": "point", "settings": { "icon": "globe", "title": "Made in our studio", "text": "Thrown, glazed and fired in-house." } }
      ]
    }
  ]
}
{% endschema %}
```

## License

MIT License, © 2026 Lintel. Free to use, change and ship in your own store or in client work; keep the license line at the top of each file.