Unique size charts

Display a custom unique pop-up size chart for individual products

Story can display a custom pop-up size chart for individual products and also not display a link if a size chart is not required. This is the most flexible option when using multiple charts.

Size chart link for Women (click image to zoom)
Size chart link for Men (click image to zoom)

How to setup

Begin by creating a basic product metafield in your Shopify Settings:

Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on Products (click images to zoom):

Create new Product metafield
Choose Add definition
  • Provide a Name for your metafield. In our example, we'll use Size Chart.

  • The default Namespace and key can be used. No modifications are needed.

  • Choose Reference, Page for the Content type.

Save the metafield definition.

Product setup

The next step is performed in the Shopify Admin -> Products. Choose a product and scroll to the bottom where you'll find all the metafields. There will be a new Size Chart option where we can choose a unique Page created in the Shopify Pages editor:

Theme editor setup

The final step is to configure the Product page settings in Story, using the Theme editor. Click on Form under Product page:

Tip: If you've already assigned a static size chart page for all products, Form won't appear, the title of the size chart file will be displayed. Simply click on that instead.

Next, Click on the Connect dynamic source icon:

Choose the metafield you created earlier, Size Chart:

Press the Connect button at the bottom to complete and then Save your changes.

Last updated