Skip to content

Set up SmartSize for the first time

Guide type: Step-by-step tutorial
Difficulty: Beginner
Applies to: Getting started

In this tutorial, you will go from a fresh SmartSize installation to a live Size Chart button on one of your product pages. By the end, shoppers will be able to open a size chart directly from your storefront.

This is the single happy path for first-time setup. It takes about 10–15 minutes. If you are on a Pro plan, you can create a fit quiz afterward using Create your first fit quiz.

When you first open SmartSize, the app may show Quick start checklist cards on the Home page. You can follow those cards or this tutorial — both cover the same steps.

Before you start

Make sure you have:

  • SmartSize installed from the Shopify App Store
  • access to your Shopify theme editor
  • at least one published product in your store
  • size measurements for that product

1. Open SmartSize

In your Shopify admin, go to Apps and open SmartSize.

SmartSize opens to the Home page. If this is your first time, you may see Quick start checklist cards prompting you to embed the app, create a chart, and review your store.

2. Turn on the app extensions

SmartSize needs your theme to load the storefront buttons. This is done through Shopify App embeds.

From the SmartSize Home page, find the App extensions card.

If the card says Inactive, click Show details.

SmartSize Home page showing the App extensions card with all app extensions inactive

The expanded card shows the status for each extension. Click Add to theme next to any inactive extension.

Expanded App extensions card showing inactive Size chart extension and Fit quiz extension with Add to theme buttons

Shopify opens the theme editor. In App embeds, find SmartSize and select Size chart. Turn on the Size chart app embed.

Shopify theme editor App embeds panel with the SmartSize Size chart app embed selected

Click Save. When Shopify shows Changes saved, the extension is active in your theme.

Shopify theme editor showing the Size chart app embed enabled and a Changes saved message

Go back to SmartSize. The App extensions card should now show Active.

SmartSize Home page showing all app extensions active on the live theme

If you need detailed help with any extension step, see Turn on the SmartSize app extensions.

3. Create a size chart

Go to Size charts and click Create size chart.

Choose who the chart is for. For this tutorial, select the option that matches your test product, such as Women.

SmartSize size chart setup showing the first step for choosing who the chart is for

Choose the garment type that matches your product, such as Dress.

SmartSize size chart setup showing garment type options

Choose a visual style. For a first chart, pick a simple style that is easy to read.

SmartSize size chart setup showing visual style options

Enter a clear name for the chart. Use a name that helps you recognize the product or audience, such as Women's dress size chart.

SmartSize size chart setup showing the chart name field

Click Create size chart. SmartSize opens the size chart editor with a draft chart.

For this tutorial, keep the default chart content. You can customize it later.

4. Connect the chart to a product

A size chart must match at least one product before shoppers can see it.

In the editor, open Product display rules and click Select products.

SmartSize size chart setup prompting the merchant to connect product display rules

Choose one test product and click Select.

SmartSize product selection modal for connecting a size chart to a product

SmartSize shows the selected product in the product display rule.

SmartSize size chart product display rule with one selected product

Click Save. SmartSize confirms when the chart has been saved.

5. Publish the size chart

New size charts start in Draft status. Shoppers cannot see a draft chart on your storefront.

At the top of the editor, open the Status dropdown and choose Active.

Click Save again. SmartSize confirms the active chart has been saved.

6. Check your storefront

Open the product page you connected to the size chart. Look for the Size Chart button near the product options.

Storefront product page with inline Size Chart button beside product options

Click the button and confirm the size chart opens with the correct measurements.

Close the popup and continue shopping to make sure it does not block the page.

Test on mobile

Most shoppers browse on mobile devices. Use your smartphone or your browser's device preview mode to check the mobile view.

Tap the Size Chart button. The popup should open and fit within the screen. You should be able to scroll through the content and close the popup without difficulty.

Test a second product

Pick a second product that should match the same size chart. Open its product page and repeat the checks above.

If the button appears on the first product but not the second, the second product may not match the display rule. Open SmartSize and review the product display rules for that chart.

Check your result

You should see:

  • the App extensions card in SmartSize showing Active
  • the Size Chart button on your test product page
  • the size chart opening when the button is clicked
  • the correct size measurements displayed in the chart
  • a clean, readable experience on mobile

If the button does not appear, check that:

  • the Size chart extension is active on your live theme
  • the size chart has been saved
  • the product display rule matches the product you are viewing
  • you are testing the live storefront, not a draft theme

For detailed troubleshooting, see SmartSize button is missing from my product page.

Next steps

After your first size chart is working: