Specs bar

Show the key facts about a product in a clean row, like weight, drop or material, with an optional info tooltip for each one.

Overview

The Specs bar section shows short specs side by side: a small uppercase title above a bold value, such as "Weight" and "240 g". Each spec can have an info icon that opens a tooltip with a longer explanation, so shoppers get the details without leaving the page. Add the specs one by one as blocks, or connect a single block to a metaobject list to fill the bar from your product data. The specs sit in a grid with its own number of columns for desktop, tablet and mobile.

Section settings

Setting	Type	Default	Description
Color scheme	Color scheme	Default	The colors of the section.
Text alignment	Text alignment	Left	Aligns the titles and values of all specs.
Show dividers	Toggle	On	Shows thin lines between the specs. With one column on mobile, the stacked specs get horizontal lines between them.

Desktop layout

Setting	Type	Default	Description
Columns per row	Range	`4`	Specs in one row. Between 2 and 6.
Margin top / bottom	Range	`40` px	Space above and below the section. Between 0 and 160 px. Also used on tablets.
Title size	Select	Tiny	Size of the spec titles. Options: Tiny, Small, Default, Large, Huge, Gigantic, Outrageous.
Text size	Select	Default	Size of the spec values. Same options as Title size.

Tablet layout

Setting	Type	Default	Description
Columns per row	Range	`2`	Specs in one row on tablets. Between 1 and 4. Tablets use the desktop margins.

Mobile layout

Setting	Type	Default	Description
Columns per row	Select	One	Options: One (specs stacked), Two.
Title size	Select	Tiny	Size of the spec titles on mobile.
Text size	Select	Default	Size of the spec values on mobile.
Margin top / bottom	Range	`40` px	Space above and below the section on mobile. Between 0 and 160 px.

Spec block

Setting	Type	Default	Description
Title	Text	`Spec title`	The small label above the value, for example "Weight".
Text	Text	`Spec value`	The value itself, for example "240 g".
Tooltip	Rich text	—	Optional. Adds an info icon next to the title; the text opens in a tooltip when the icon is clicked.

Setup

Add a specs bar

In the theme editor, open the page where you want the specs, for example your product template.
Click Add section and choose Specs bar. It comes with four spec blocks.
Select a Spec block and enter its Title and Text.
Optionally, write a longer explanation in Tooltip.
Repeat for the other blocks, and add or remove blocks as needed.
Choose the Columns per row under Desktop layout, Tablet layout and Mobile layout.
Click Save.

A spec shows as long as it has a title or a value. When every spec is empty, the whole section is hidden.

Show specs from your product data

Instead of typing each spec, you can keep them in a metaobject: a reusable content entry you define in your Shopify admin, such as a "Spec" with a title, a value and a description. When one Spec block is connected to a metaobject list, the section shows one spec for each entry in the list. Each product can then have its own specs, while one Specs bar on the product template shows them all.

Connect a block to a metaobject list

In your Shopify admin, go to Content → Metaobjects and create a definition with fields for the title, the value and, if you want tooltips, a rich text description.
Add a product metafield that holds a list of these metaobjects, and fill it in for your products.
In the theme editor, open the product template and select a Spec block in the Specs bar.
Connect the block to the product's metaobject list, and its Title, Text and Tooltip to the matching metaobject fields.
Remove the other Spec blocks, unless you also want fixed specs next to the connected ones.
Click Save.

Keep values short

The values are shown large and bold. Short values like "240 g" or "8 mm" read best, and longer explanations belong in the tooltip.

Info tooltips

When a spec has a tooltip, an info icon appears with its title: at the end of the spec when dividers are shown, and right after the title without them. Shoppers click or tap the icon to open the tooltip below the spec, as wide as the spec's content, and close it by clicking anywhere else or pressing Esc. Near the bottom of the screen, the tooltip opens above the spec instead.

Older browsers

In browsers that can't place the tooltip next to the spec, it opens near the bottom of the screen instead. It works the same way and closes the same way.

Answer questions before they're asked

Shoppers compare products on a handful of numbers. Putting those numbers at a glance, with a tooltip that explains what "8 mm drop" means, helps new customers choose with confidence and reduces returns from wrong expectations.

Works well for

Sports gear, footwear, electronics and furniture: anywhere weight, size, materials or performance figures drive the decision.

Advanced

This section is intended for developers customising the theme. No changes here are required for normal use.

Files

sections/specs-bar.liquid: the section, a plain grid (grid-cols-{mobile}, sm-grid-cols-{tablet}, md-grid-cols-{desktop}). Mobile columns are a select (1 or 2), because a range can't have only two values. Only blocks with a title or text are counted and rendered; the section outputs nothing when none remain.
snippets/specs-bar-item.liquid: one spec (title, value and tooltip). The value is escaped and line breaks become <br>.
snippets/info-tooltip.liquid: a reusable info icon and tooltip. Renders nothing when content is blank. part: 'trigger' or part: 'content' renders only one half, and content_tag sets the content element (default div).
assets/section-specs-bar.css: the section and tooltip styles.

Markup

The specs are term and value pairs, so the track is a description list:

<dl class="specs-bar-list grid …">
  <div class="specs-bar-item">
    <dt class="specs-bar-header">
      <span class="specs-bar-title subheading">Weight</span>
      <span class="info-tooltip"><button class="info-tooltip-trigger" popovertarget="…">…</button></span>
    </dt>
    <dd class="specs-bar-value h4">240 g</dd>
    <dd class="info-tooltip-content" id="…" popover="auto">…</dd>
  </div>
</dl>

The title uses the subheading class, so its font, weight, case and letter spacing follow the theme's subheading typography settings. Each group always has a <dt> and a <dd>; an empty half is output with hidden. The info icon is 20 px, and a transparent ::after on .info-tooltip-trigger extends its click area to 44 px without changing the layout.

Tooltip

The tooltip uses the native Popover API (popovertarget with popover="auto"), so opening, closing, Esc and outside clicks work without JavaScript. It's placed with CSS anchor positioning: each .specs-bar-item is an anchor (anchor-name: --specs-tip with anchor-scope), and the tooltip uses position-area: bottom span-left, so it lines up with the item's end edge and grows towards the start. Its width is anchor-size(width) minus the item's inline padding (--specs-pad-start and --specs-pad-end), so it matches the item's content. Narrow columns keep a 20rem minimum, and position-try-fallbacks flips it above the item or to grow from the start edge when it doesn't fit.

{% render 'info-tooltip', id: 'unique-id', content: block.settings.tooltip, label: block.settings.title %}

label goes into the trigger's accessible name through the accessibility.more_info_about translation.

The tooltip styles live in section-specs-bar.css. To use info-tooltip in another section, load that stylesheet there or move the .info-tooltip rules to a shared file. Browsers without anchor positioning get a fixed tooltip near the bottom of the viewport through @supports not (anchor-name: --a). The arrow is hidden when the tooltip flips above with an @container anchored(fallback: …) query; browsers that support anchor positioning but not that query keep showing the arrow.

Metaobject lists

When a block is connected to a metaobject list, Shopify renders it once per entry with the same block.id. The section appends forloop.index to the item and tooltip ids, so each repeated spec keeps a unique tooltip id.