Shopify size chart colors and trigger (popup or inline)

The centimetres are right. Chest 36–38 is in the cell. On the product page the trigger is a grey link on a white header, or the overlay opens in a palette that never met the theme. Shoppers skip it. You edit Structure. Wrong tab.

Shopify size chart colors and trigger belong in Design, not in the measurement grid. Size charts: display mode is popup trigger or plain content; plus trigger label, colours, fonts, table surface. Design settings overview: size charts — popup vs plain, trigger, table colors.

App Store name: OO - Advanced Table Builder, Free, 5.0 from 1 review. Docs still say Tables, Specs & Comparisons in places. CTA stays https://apps.shopify.com/tables-specs-comparisons.

Popup versus plain (25 September) is when to overlay versus in-page. This article is the rest of Design: label, colour, surface — and why Structure can stay still.

Structure holds the grid. Design holds the chrome.

Structure: text blocks, table blocks, optional measurement diagram as an image. Sizes in the first column or the first row. Men / women as separate table blocks, not one mega-grid.

Design does not rewrite those cells. It decides whether the shopper sees a control or an already-open table, what that control says, and whether the overlay matches the theme. A weak trigger is not a wrong chest measurement.

Native variants stay S/M/L (or numeric option values). Adding variants: three options, 2048 variants. The chart explains the picker. It is not a fourth option.

Edits that land in the wrong place

Trigger copy as a table row. “Click for sizes” in row one. That is content. Popup mode expects the label in Design.

Jumping to Custom CSS. The listing includes Custom CSS. Use Design first: table surface, fonts, trigger colours. Refine with AI on Design can take a written look, a screenshot, or a website URL for brand colours/fonts — structure stays as-is until you confirm.

Popup because “size charts are popups”. A twelve-column plain table on a phone shoves Add to cart down. An invisible trigger never opens. Pick display mode, then colour the trigger so it exists next to the button.

Specs templates on a size chart. Design is per type. Specs have layout templates. Comparison has tray/modal. This article is size charts only.

What Design actually stores

From the size-chart docs:

• Display mode — popup trigger or plain content.

• Trigger label — the control text. Translatable per locale in Settings; see translate size chart content.

• Colors, fonts, table surface — overlay and grid in brand colours, not default grey.

Placement is not Design:

• Size chart theme app block, or

• App embed so matching size charts can sit above Add to cart (auto-placement). Embed off means no auto-inject, no shortcode, no compare tray. A block on the template is then the remaining path.

The table must be enabled in Settings. Disabled means nothing on the storefront, whatever Design looks like. Selected-products-only is a different topic; do not drag those rules in here.

Docs tip: a measurement diagram as an image block above the table so Chest / Waist / Length have a picture. That is Structure. The trigger beside Add to cart is Design.

Example: oversized hoodie, high-contrast theme

The grid is done. Two blocks for the two charts. Plain is too tall on a phone.

1. Design → display mode popup.

2. Trigger label in the storefront language, not an English SEO string on a local market.

3. Trigger colour that contrasts next to Add to cart. Light table surface, header in the brand colour.

4. Theme: block near the button, or embed on for auto-placement.

5. Phone width: control visible, overlay readable, centimetres unchanged.

Refine with AI: “dark green accents, cream background” or the brand URL. Re-check trigger contrast. AI is a draft. You confirm.

Get it on the product

1. Install OO - Advanced Table Builder (Free).

2. Size chart: Structure first, Design second.

3. Popup or plain. Label. Colours. Fonts.

4. Enable. Block or embed. Save the theme.

5. Translate chrome in Settings if you sell in more than one language — that is labels, not centimetres, unless you also translate cells.

Do not promise Specs auto-inject next to Add to cart. Size charts can auto-place above ATC when the embed is on. Keep that distinction.

The listing also mentions import/export and Works with Excel, Google Sheets, and AI. That feeds Structure (paste cells, or an AI draft), not Design. Header colours from a spreadsheet do not become the trigger colour. After an import, walk Design again — display mode and phone contrast first.

Fonts in Design are table chrome, not the shop’s heading font. If the overlay disagrees with your theme headings, this is the setting — not a second app. Custom icons appear on the listing as chrome; do not invent an icon pack the size-chart docs never list. Stick to what those docs name: mode, label, colours, fonts, table surface.

A collection template is rarely the place for a plain size grid. The docs put the chart on the product page next to Add to cart (block or auto-placement). On a dedicated size-guide page, prefer plain: a trigger with no product context gets no clicks. Colour still matters. A cream table on a cream template is as invisible as a grey link.

Wrap-up

Shopify size chart colors and trigger is Design: popup or plain, label, colours, table surface. Structure stays the measurement grid. Do not swap the tabs.

A grey trigger is not a bad chest row. Set chrome in Design, place the chart, check a phone. Listing: OO - Advanced Table Builder.