Size charts in SmartSize are built from sections and blocks. A section is a container that holds one or more blocks. Each block is a piece of content — such as a table, text, image, or button — that shoppers see inside the size chart popup.

This reference describes every block type, what it does, and which settings you can adjust.

How sections and blocks work

When you open a size chart in the SmartSize editor, the content is organized into sections. You add a section first, then add blocks inside it.

Available block types include:

Text — headings and paragraphs
Table — measurement grids
Image — fit diagrams and illustrations
Video — embedded media
Recommendation — size recommendation explanations
Button — links to fit quizzes or other actions
Divider — visual separators

For step-by-step instructions on adding and arranging blocks, see Customize size chart blocks.

Text block

Use a text block for headings, measuring instructions, brand notes, or any content that helps shoppers understand the size chart.

Text block settings

Setting	What it controls
Heading	The title or heading text above the body content
Body	The main paragraph or instructional text
Alignment	Left, center, or right alignment for the text

Keep text short and practical. Shoppers usually open a size chart while deciding what to buy, so the most useful text is clear and direct.

Table block

The table block is the core of most size charts. It displays measurements in rows and columns, such as sizes versus body measurements.

Table styles

SmartSize offers four visual styles for table blocks:

Style	Appearance	Best for
Clean	Minimal borders, airy spacing	Modern, light-themed stores
Boxed	Visible outer borders with contained cells	Classic, structured look
Dark header	Contrasting header row with inverted colors	Emphasizing column labels
Pill	Size labels as rounded badges	Modern, compact presentations

The table above describes each style. Choose the one that matches your store design and adjust colors to match your brand.

Table settings

Setting	What it controls
Style	Clean, boxed, dark header, or pill
Borders	Which borders are visible and how thick
Cell spacing	Padding inside and between cells
Column width	How wide each column appears
Colors	Header, row, border, and cell background colors
Typography	Font family, size, weight, and alignment for table text
Display columns	Which measurement columns appear on desktop and mobile
Highlight row	Whether to emphasize a recommended size row

For most stores, start with the Clean or Boxed style and adjust colors to match your brand.

Image block

Use an image block when a visual guide helps shoppers understand where or how to measure. Common examples include body measurement diagrams, garment fit illustrations, or care instructions.

Image block settings

Setting	What it controls
Image file	The image displayed inside the block
Alt text	Description for accessibility and SEO
Width	How wide the image appears inside the popup
Alignment	Left, center, or right placement

Use images that are easy to understand at mobile size. Avoid adding large images that make shoppers scroll past the actual measurements.

Video block

Use a video block when a video adds practical value, such as showing how to measure a body part or explaining garment fit.

Video block settings

Setting	What it controls
Video source	YouTube embed URL or uploaded video file
Thumbnail	Preview image shown before the video plays
Width	How wide the video player appears

If the same instruction can be explained in one sentence, use a text block instead. Videos are most useful for complex measuring techniques.

Recommendation block

A recommendation block explains how SmartSize uses sizing information or guides shoppers toward the best next action. It is useful when you want to add context around a size recommendation.

Recommendation block settings

Setting	What it controls
Layout	Visual arrangement of the recommendation text and icon
Heading	The title of the recommendation explanation
Body	The detailed recommendation text
Style	Colors and spacing around the block

Check that the recommendation block supports the chart instead of distracting from the measurements.

Button block

Use a button block to guide shoppers to another action, such as opening a fit quiz, visiting a size guide page, or starting a measurement tutorial.

Button block settings

Setting	What it controls
Label	The text on the button
Link	Where the button takes the shopper
Position	Inline or full width inside the section
Style	Background color, text color, corner radius
Typography	Font family, size, and weight for the button label

Keep buttons focused. Too many actions inside a size chart can make the chart harder to use.

Divider block

A divider block adds a horizontal line between sections. Use it when the chart has several different content areas and you want to create visual separation.

Divider block settings

Setting	What it controls
Style	Solid, dashed, or dotted line
Thickness	How heavy the line appears
Color	The line color
Spacing	Margin above and below the divider

Use dividers sparingly. A well-organized size chart usually needs fewer separators than you expect.

Notes and limits

Each section can hold multiple blocks. Reorder blocks by dragging them inside the section.
You can add, remove, or duplicate sections and blocks without republishing the size chart. Save the chart when you are finished editing.
Table blocks have the most customization options. Start with a simple style and adjust only what your brand needs.
Image and video blocks increase the size of the popup. Test on mobile to make sure shoppers can still reach the measurements.
Button blocks can link to fit quizzes, other size charts, or external pages.

Customize size chart blocks — Step-by-step guide to adding and editing blocks
Create a size chart — Build a new chart from a template
Create your first size chart — Tutorial for your first chart

Size chart blocks reference