Skip to content

Size chart blocks reference

Guide type: Reference Difficulty: Beginner Applies to: Size chart content blocks

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

SmartSize table block clean style

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.

SmartSize image block with a sweater measurement illustration

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.

SmartSize video block with a YouTube preview

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.

SmartSize button block showing a Find my size button

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.