How to add a size chart to the storefront

In this article, you’ll learn how to choose the position of your size chart on the product page. This feature allows you to place the size chart exactly where you want and preview it visually on your live store. Let’s get started!

Go to Appearance → Button type section, then select an option from the dropdown menu:

There are three ways to display the size chart button: Inline Button, Floating Button and Both option.

1. Button

• Inline Button – Displays the size chart within the product page content (e.g., near the Add to Cart button)

• Floating Button – Shows a floating size chart button on the side of the screen for quick access

• Both – Displays both inline and floating buttons for maximum visibility

Popup Settings

The Popup Settings allow you to control how your size chart appears when customers open it on your store.

4.1. Show popup title

Enable Show popup title to display a title at the top of the size chart popup.

• Helps customers clearly understand what the chart is for
• Recommended for better clarity and user experience

4.2. Choose title source

Select how the popup title should be generated:

• Product Title
• Automatically uses the product name as the popup title
• (e.g., “Men’s Shirt Size Chart”)
• Custom
• Enter your own title for full control
• (e.g., “Size Guide”, “Find Your Perfect Fit”)



4.3. Select popup position

Choose where the size chart popup will appear on the screen:

• Center – Displays the popup in the middle of the screen (default & most recommended)
• Fullscreen – Expands the popup to cover the entire screen
• Left – Opens the popup from the left side
• Right – Opens the popup from the right side

4.4. Best practices

• Use Center for a balanced and focused experience
• Use Fullscreen for detailed charts with lots of content
• Use Left/Right for a modern slide-in experience