Customize your SmartSize storefront appearance¶

The popup position controls where the size chart appears on desktop screens so it does not block important product information or the add-to-cart area.

Choose a desktop popup position¶

In Global settings, open the Size chart settings section and find Position.

Look for the desktop popup layout options:

• Center — the popup appears in the middle of the screen over a background overlay
• Side — the popup slides in from the side, leaving more of the product page visible

SmartSize shows a live preview of the popup position next to the settings. The preview helps you see how the popup will look on a real product page before you save. If the preview shows the popup covering important content, try a different position.

When a shopper opens a size chart, the rest of the product page dims behind the popup. This background overlay helps focus attention on the chart, but the default darkness or blur may not match every store design.

SmartSize lets you adjust the background overlay so it feels natural with your theme. You can make it darker for a stronger focus effect, lighter to keep the product visible, or add a blur to soften the page behind the popup.

A dark overlay works well for stores with light-colored themes. A lighter overlay may look better on dark themes. The blur setting is useful when you want shoppers to sense the product page behind the popup without being distracted by it.

Adjust darkness and blur¶

In Global settings, open the Size chart settings section and find Background overlay.

Use the Darkness slider or percentage field to control how much the product page dims behind the popup. A higher percentage makes the background darker. A lower percentage keeps more of the product page visible.

Use the Blur setting to soften the product page behind the popup. A larger blur size creates a frosted-glass effect. A smaller blur size keeps the background sharper.

You can use darkness and blur together, or adjust only one. Try a few combinations and watch the live preview to find the look that matches your store.

The font inside the size chart popup affects readability and how well the chart matches your store's brand. SmartSize lets you choose the font family, size, and scale so the popup looks consistent with the rest of your product pages.

A clean, readable font helps shoppers scan size tables quickly. A font that matches your theme makes the popup feel like a natural part of your store rather than a separate overlay.

Choose font family, size, and scale¶

In Global settings, open the Size chart settings section and find Typography.

Use the Font family dropdown to select a typeface. SmartSize provides a set of common web-safe fonts that load quickly on all devices. Choose a font that is close to the one used in your Shopify theme.

Use the Font size field to set the base text size inside the popup. A slightly larger size can help shoppers read size chart tables, especially on mobile screens.

Use the Font scale setting to control how headings and labels scale relative to the base size. A higher scale makes section titles stand out more. A lower scale keeps the text more uniform.

Most shoppers browse on mobile devices, so the size chart popup needs to fit smaller screens without hiding the product or forcing excessive scrolling. SmartSize lets you choose how the popup behaves on phones and tablets.

You can select a mobile layout that keeps the popup easy to read while leaving product images and the add-to-cart button visible.

Choose a mobile layout option¶

In Global settings, open the Size chart settings section and find Mobile layout.

SmartSize offers mobile popup display options:

• Full screen — the popup takes the entire screen, giving the size chart maximum space
• Bottom sheet — the popup slides up from the bottom, keeping the product page visible above it

Choose the layout that matches your product page design. If your product page is long, a bottom sheet can help shoppers return to the product quickly. If your size chart has many columns, a full-screen layout may be easier to read.

A phone preview appears next to the layout options. Check that the popup is large enough to read the size chart text and that the close button is easy to tap.

The fit quiz accent color appears on buttons, selected options, progress indicators, and highlights inside the quiz popup. Choosing an accent color that matches your store brand makes the quiz feel like a native part of your product page.

SmartSize lets you pick any color using a built-in color picker. The change applies to every fit quiz on your storefront, so you only need to set it once.

Pick an accent color¶

In Global settings, open the Fit quiz settings section and find Accent color.

Click the color swatch to open the color picker. You can enter a hex code if you know your brand color, or use the visual picker to choose a shade.

Choose a color that has enough contrast against both light and dark backgrounds. The accent color appears on white popup panels and over the product page overlay, so it needs to remain readable in both contexts.

SmartSize shows a live preview of the accent color applied to the fit quiz interface. The preview updates as you adjust the color, so you can see the result before saving.

SmartSize fit quizzes ask shoppers for body measurements to recommend the best product size. The default measurement unit controls whether shoppers see metric values such as centimeters and kilograms, or imperial values such as inches and pounds.

Choose the unit that matches your store's primary market. For example, use metric for European, Australian, and most Asian markets. Use imperial for the United States and the United Kingdom.

Shoppers can still switch between units during the quiz if they prefer the other system. The default simply controls which unit appears first.

You only need to set this once. The unit applies to every active fit quiz on your storefront.

Choose metric or imperial¶

In Global settings, open the Fit quiz settings section and find Measurement unit.

The current default is shown in a dropdown. Most new stores start with metric.

Click the dropdown to open the unit options. Select Metric for centimeters and kilograms. Select Imperial for inches and pounds.