The Size Chart Editor is the main workspace where you create and customize your SmartSize size charts. It is divided into two panels:
- The left panel contains all your editable settings and components.
- The right panel shows a live preview of your chart as it could appear in your store (somet
You can expand the editor at any time by clicking “Expand” (↔️ icon) in the top-right corner of the settings panel. This hides the preview and gives you a full-page editing view — useful when working on large tables or multi-tab charts. You can also click on the button 'hide preview' to achieve this effect.
Chart Name and Status
At the top of the editor, you can define the chart name and status:
- Name: Use a clear, descriptive title (e.g., “Women Dresses”, “Men Jackets”, or “Kids Shoes”). This name helps you identify your chart within the SmartSize dashboard. You customers won't see this name.
- Status: Choose between:
- Draft: The chart is saved but not visible in your store.
- Active: The chart is published and visible to shoppers when linked to products.
- You can change the name or status at any time — updates take effect immediately once you click Save.
Linked Products and Collections
This section informs where your chart will appear in your store. Click Select products or Select collections to navigate to the 'Link to products' section.
Tabs for Multiple Views
Tabs allow you to organize your size chart into different sections, keeping content easy to navigate.
- Use tabs to separate content such as:
- Size Chart (measurements table)
- How to Measure (measurement instructions or visuals)
- Fit by model (generate a tab for each size with a picture of the model wearing that size)
- Click “+” to add a new tab and name it clearly.
- You can rename, or delete tabs at any time.
- The first (leftmost) tab will always open first for shoppers.
- If you only have one tab, this tab will not be visible in your size chart.
- Important: tabs cannot be rearranged, as such, plan your content upfront.
Components List
Each chart is built from individual components that you can expand and configure:
- Header: Add a title, subtitle, or short introduction to your size chart.
- Size Chart: The main measurement table. Add rows and columns, input data, and control column width and conversion behavior.
- Automatic Unit Conversion: Let shoppers switch between inches and centimeters with a simple toggle.
- Measurement Instructions: Include visuals, text, or videos to explain how to take body measurements accurately.
- Footer: Add optional notes (e.g., “Measurements are approximate” or “Model wears size M”).
- Layout Settings: Adjust size chart width and order of components in size chart (example: picture first, instructions second, size table third)
- Animation Settings: Define how the chart appears (e.g., fade-in, slide-in). This animation plays when the size chart opens in the store.
- Fit Scale: Add a visual scale to communicate fit or stretch levels (e.g., “Tight”, “Regular”, “Relaxed”).
- Multi-language: Manage translations of your chart content. This ensures shoppers see the correct language based on their Shopify market or translation app.
Global Settings
At the bottom of the editor, you’ll find Global Settings — these apply to all size charts across your store.
They allow you to maintain a consistent brand style without editing each chart individually.
Global options include:
- Product title: Choose whether to display the product name above the chart.
- Position on screen: Adjust where the chart modal appears (center, right, or left).
- Corner radius: Set how rounded the chart’s corners appear.
- Size chart border: Add or remove borders in the chart for contrast.
- Size chart color: Define the accent colors to match your theme (header background, header font color, zebra lines and focus)
- Font style: Choose font families (either your theme's font style or SmartSize font style) and sizes to align with your store’s typography.
Any changes made here automatically apply to all active charts in your store.
Live Preview Panel
The preview panel (on the right side) updates instantly as you make edits.
- Switch between desktop and mobile views using the icons at the top-right.
- Preview how your size chart tabs and layout look before publishing.
- The preview helps ensure that your chart maintains good readability and balance across devices.
- Important: not all settings are reflected in the live preview (size chart width, animations, position on screen).