Story theme
Latest
Latest
  • About Story
    • Story theme documentation
  • Updates
    • What's new in Story
      • Story Releases
  • Sections
    • Story sections
      • Accordion group
      • Blog posts
      • Collection list
      • Collection marbles
      • Collection split
      • Contact form
      • Custom liquid
      • Custom content
      • Featured collection
      • Featured product
      • Gallery
      • Icon columns
      • Image banner
      • Image with text
      • Logo list
      • Map
      • Mosaic
      • Newsletter
      • Overlapping images
      • Page
      • Policy links
      • Press
      • Rich text
      • Slideshow
      • Tabs
      • Team
      • Testimonials
      • Text columns with images
      • Timeline tree
      • Timeline with banner
      • Video banner
      • Video player
  • Settings
    • Theme settings
      • Global theme settings
      • Typography
      • Colors
      • Layout
      • Social
      • Cart
      • Search
      • Product grid
      • Currency format
      • Favicon
      • Advanced
      • Checkout
      • Custom CSS
  • Header
    • Header
      • Header styles
      • Toolbar
      • Navigation images
      • Image menus
      • Transparent header
      • Mega-menu navigation
      • Drop-down navigation
  • Products
    • Product pages
      • Static product tabs
      • Unique product tabs
      • Product tabs
      • Color swatches
      • Inventory countdown
      • Pre-order products
      • Static size chart
      • Unique size charts
      • Creating pages
      • Size Charts
      • Product image sizes
  • Collections
    • Collection pages
      • Product badges
      • Sale badge
      • Savings badge
      • Sold-out badge
      • Custom badges
      • Badge settings
      • Custom filter options
      • Collection filtering
      • Collection sorting
      • Collection navigation
      • Feature image
  • Cart
    • Story cart
      • Cart styles
      • Shipping message
      • Estimate shipping calculator
      • Cart settings
  • Promotions
    • Upselling
      • Upsell promotions
      • How to setup
      • Static upsell promotion
      • Custom upsell promotion
  • Overlay
    • Popups
      • Cookies consent message
      • Newsletter popup
  • Siblings
    • Product siblings
      • About product siblings
      • Multiple images per variant
      • How to setup siblings
      • Siblings metafields
      • Cutline
      • Siblings collection
      • Siblings product setup
      • Siblings block setup
      • Variant image sets with alt-tags
  • Pages
    • Page templates
      • Page navigation
      • How to use page templates
      • Story page templates when using a different theme
      • Contact page
      • Lookbook
      • Team
      • Timeline
  • Blogs
    • Blogs and posts
      • Blogs
      • Articles
  • FAQ
    • Frequently asked questions
      • Where to make CSS changes
      • How to download latest version
      • How to add a line break in your headings
      • Share preview link
      • Remove Shopify link in footer
      • Check your theme version
      • How to use sections
      • Adding a section
      • Hiding a section
      • Reordering sections
      • Section blocks
  • License
    • Theme license
  • Support
    • Contacting support
Powered by GitBook
On this page
  • How to setup
  • Product setup
  • Theme editor setup
  1. Products
  2. Product pages

Unique size charts

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

PreviousStatic size chartNextCreating pages

Last updated 3 years ago

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.

Each product can have a different size chart associated with the Shopify Product admin

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):

  • 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

Now that we've created a product reference metafield, we can easily choose custom size charts for any of our products that require a size chart displayed.

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:

Choose a unique size chart page for each product. For example, all Women's watches can use one file and all Men's watches can use another. For products that don't require a size chart, leave blank and no link will appear.

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.

Products that have a Size Chart file associated with a Size Chart metafield in the product setup will now have a unique and custom link based on the title of the Page. You can update the Page title to modify the link label.

Size chart link for Women (click image to zoom)
Size chart link for Men (click image to zoom)
Create new Product metafield
Choose Add definition