Size Chart Setup Guide

The Size Chart section (found in the default Product Page template) helps customers match their measurements to your product’s sizes (e.g., clothing bust/waist sizes). It reduces return rates by clarifying fit details upfront, and is built by adding/editing Row blocks to define measurements (e.g., Size, Bust, Waist) and their corresponding values.

Global Size Chart Settings

These settings control the overall title, notes, and spacing of the Size Chart section.

Heading

Sets the title of the Size Chart (displayed at the top of the section).

• Default: Size Chart (clear and universally understood).
• Customize if needed (e.g., Fit Guide for multi-category products).

Note

Adds a small disclaimer/context below the chart (critical for avoiding size confusion).

• Example: Sizes are American and expressed in inches. (clarifies size standard and unit).
• Include: Size system (e.g., US, EU), measurement unit (e.g., inches, cm), or fit notes (e.g., "Runs small — size up").

Section Spacing

Adjusts padding above/below the Size Chart to fit your Product Page flow.

• Top spacing (default: 44 px): Gap between the Size Chart and content above (e.g., Product Content).
• Bottom spacing (default: 44 px): Gap between the Size Chart and content below (e.g., Related Products).
• Match to other section spacing for visual consistency.

Theme Settings

Controls styling for the chart’s border:

• No border (default): Clean, minimal look (blends with page background).
• Border: Adds a visible outline to the chart (helps it stand out as a distinct section).

Row Block Settings (Build the Chart)

The Size Chart is constructed with Row blocks — each Row represents a measurement (e.g., Size, Bust, Waist) and its values across sizes. Add new Rows with the + button in the customizer.

This is a row header

Toggle to mark a Row as the header row (defines the size labels, e.g., XS, S, M).

• Enabled: The Row acts as the chart’s header (use for the Size row).
• Disabled: The Row is a standard measurement row (e.g., Bust, Waist).
• Only enable this for one Row (the top row with size labels).

Row name

Names the measurement for the Row (displayed in the leftmost column of the chart).

• For header Row: Use Size (labels the size columns).
• For measurement Rows: Use clear terms (e.g., Bust, Waist, Hip).

Column values

Enter the values for each size column (comma-separated, matches the order of the header Row’s sizes).

• For header Row: List sizes (e.g., XS, S, M, L, XL, 1X).
• For measurement Rows: List corresponding values (e.g., Bust sizes: 32, 34, 36, 40, 43, 45).
• Ensure the number of values matches the number of size columns (e.g., 6 sizes = 6 comma-separated values).

Example Row Setup (From Preview)

• Header Row:
  • This is a row header: Enabled
  • Row name: Size
  • Column values: XS, S, M, L, XL, 1X
• Bust Row:
  • This is a row header: Disabled
  • Row name: Bust
  • Column values: 32, 34, 36, 40, 43, 45
• Waist Row:
  • This is a row header: Disabled
  • Row name: Waist
  • Column values: 24, 26, 28, 32, 35, 37

Best Practices

• Match product variants: Ensure chart sizes (e.g., XS, S) exactly match the product’s variant options (avoids customer confusion).
• Be specific: Include units (inches/cm) and size system (US/EU) in the Note field.
• Keep it simple: Only include measurements relevant to the product (e.g., skip hip measurements for tops).
• Test mobile layout: Ensure the chart is readable on mobile (avoid too many columns — split into tabs for products with 8+ sizes).
• Update for fit changes: If you adjust product sizing, update the Size Chart immediately (outdated charts cause returns).