Preview a size chart on desktop and mobile¶
Guide type: Task guide Difficulty: Beginner Applies to: Size charts
Check how your size chart looks on desktop and mobile before publishing it to your storefront.
Before you start¶
- The size chart has been created and saved.
- The chart contains at least one table or content block.
1. Open the size chart editor¶
In SmartSize, go to Size charts and open the chart you want to preview.
The editor shows your size chart in the center of the screen, with the block list and settings on the sides.
2. Switch to desktop preview¶
The editor starts in desktop preview mode by default. This shows how the chart will look on a laptop or desktop browser.
Check that: - the table is wide enough to read without scrolling - text blocks are easy to scan - images are clear and properly sized - buttons and dividers look balanced with the rest of the content
If anything looks off, select the block and adjust its settings in the right panel.
3. Switch to mobile preview¶
Click the Mobile preview toggle to see how the chart will look on a phone.
Check that: - the table still fits within the screen width - text is large enough to read without zooming - images do not push the measurements too far down - shoppers can scroll through the content smoothly - the first size column stays visible while scrolling horizontally if you turned on the sticky first column setting
If the table feels too wide on mobile, try reducing the number of columns, enabling the sticky first column, or turning on word wrap in the global settings.
Also check that any images you added are not oversized. Large images can push the measurements far down the screen and make shoppers scroll before they see the size table. If an image looks too big, reduce its width in the image block settings or replace it with a smaller version.
4. Save before checking the real storefront¶
Click Save so your latest changes are stored. The editor preview is a close approximation, but it may not match every theme exactly.
To see the final result on your actual store, visit a product page that matches the chart's product display rules. Click the Size Chart button and review the popup.
5. Compare the editor preview with your storefront¶
Open your store in a separate browser tab and navigate to a matching product page.
On desktop: - Check that the popup width matches what you saw in the editor. - Confirm the button placement is where you expect it.
On mobile: - Use your phone or a mobile browser emulator. - Confirm the popup opens in fullscreen and the content is readable.
If the storefront looks different from the editor, small differences are normal because your Shopify theme may add its own spacing or fonts. For significant differences, check your theme settings or contact support.
Check the result¶
Remember, the chart must be set to Active for shoppers to see it on the storefront. Preview works in Draft, but only Active charts are visible to shoppers.
Your size chart should display clearly on both desktop and mobile devices. Shoppers should be able to: - open the chart from the Size Chart button - read the measurements without zooming - scroll through any extra content you added
If the chart does not appear on the storefront, check that: - the chart is Active, not Draft - the Size chart extension is active on your live theme - the product matches the chart's product display rules - you saved the chart after your last change
If the preview looks correct but the storefront looks different, the difference is usually caused by your Shopify theme's fonts or spacing. Minor differences are expected. If the layout is broken or the table is unreadable, check your theme's product page width or contact your theme developer.