How to add size chart to storefront?

In this article, you will be guided to select size chart position on your product page. By this, you can choose any size chart position directly and visually on your live site. Let’s get started!

Floating button option: Display a floating button on product pages so customers can easily view the size chart without needing to scroll.

Inline link option: Offer customers access to the size chart via a traditional text link integrated into the product page layout.

Method 1 - Add with App Block (Recommended for Theme 2.0)

This is the recommended method for stores using Shopify Theme 2.0:

Click the “Add app block” button to open a new tab
In the new tab, you can select the exact position for the size chart link on your page
Once you’ve selected a position, the button will change to “Change position”
You can click this button anytime to modify the position

Method 2 - Add with CSS Selector

Use this method if your theme doesn’t support App Blocks or if you need more customization:

Edit the CSS selector for the element where you want the size chart link to appear
Click Reselect button to show popup, then click Start choosing button to select new position on theme.

For assistance with CSS selectors, click the “Contact us” button to open a chat window

Switching Between Methods

If you switch from “Add with app block” to “Add with CSS selector” or vice versa, you’ll need to save your changes before you can see the updated configuration interface.

When changing from “Add with app block” to any other option with inline link, you’ll see the message: “Save changes to display the Size Chart app block on your theme.” Click the “Save” button to update your settings.

Both option

Display both a floating button and an inline link to ensure the size chart is easily discoverable on product pages.

Important Notes:

When configuring the “Both” option, you must save your settings before you can see the app block configuration interface
The inline link will only appear on product pages where you’ve assigned a size chart
Test your size chart link on both desktop and mobile devices to ensure it displays correctly
Consider the placement carefully - the link should be visible but not disruptive to the shopping experience

After completing your settings, remember to “Save” them and check your storefront. You have successfully configure size chart position.