|  Pipeline theme
Latest
Latest
  • About Pipeline
    • Pipeline theme documentation
    • Learn Pipeline
  • Updates
    • What's new in Pipeline
    • Pipeline releases
  • Sections
    • Pipeline sections
      • Explore all the sections
      • Accordion group
      • Accordion single
      • Blog posts
      • Collections list
      • Collection product grid
      • Contact form
      • Custom HTML
      • Custom Liquid
      • Custom content
      • Featured article
      • Featured product
      • Gallery
      • Gallery text
      • Icon columns
      • Image banner
        • Countdown timer
        • Collage
      • Image with text
      • Logo list
      • Map
      • Mosaic
      • Newsletter
      • Page
      • Product grid
      • Product slider
      • Product slider tabs
      • Products with image
      • Recently viewed products
      • Rich text
      • Scrolling promotion
      • Shop the look
      • Slideshow
      • Tabs
      • Text columns with images
      • Video
      • Video banner
  • Settings
    • Theme settings
      • Global theme settings
      • Color
      • Typography
      • Layout
      • Search
      • Product card
      • Product form
      • Cart
      • Social media
      • Currency
      • Favicon
      • Advanced
      • Checkout
      • Custom CSS
      • Theme style
  • Header
    • Announcement bar
      • Settings and colors
      • Free shipping message
      • Text announcement
      • Icon column
      • Custom HTML
    • Header
      • Header styles
      • Icon styles
      • Toolbar
      • Navigation images
      • Collection block
      • Linking to menu items
      • Transparent header
      • Sticky header
      • Highlight sale menu
      • Collection images
  • Footer
    • Pipeline footer
      • Footer
      • Subfooter
  • Products
    • Product pages
      • Pre-orders
      • Breadcrumbs
      • Tabs and accordions
      • Tabs with metaobjects
      • Product page layout options
      • Product zoom
      • Inventory count down
      • Size charts
      • Unique product content
      • Alt-text sizing information
      • Swatch size
      • Color swatches (legacy)
      • Product siblings
      • Complementary products
      • Buy it with
  • Collections
    • Collection pages
      • Subcollections
      • Badges / Stickers
      • Custom filter options
      • Collection sorting
      • Layout options
      • Speed performance
  • Cart
    • Pipeline Cart
      • Cart types
      • Cart page
      • Cart drawer
      • Cart popup
      • Editing cart text
      • Cart upselling
      • Settings
  • Promotions
    • Upselling
      • Complementary products
      • Buy it with
      • Upsell with Quick View
      • Cart upselling
      • Upsell multiple products
      • Basic version
  • overlay
    • Cart drawer
      • Drawer cart
      • Popup cart
    • Popups
      • Cookies consent message
      • Newsletter popup
      • Text popup
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Siblings metafields
      • Cutline
      • Siblings collection
      • Siblings product setup
      • Add siblings block
  • Search
    • Predictive search
  • Pages
    • Page templates
      • Overview
      • Unique page content
  • FAQ
    • Frequently asked questions
      • Default theme content
      • Context picker
      • Check your theme version
      • Share preview link
      • How to download latest theme version
      • Migrating your settings
      • Improving the speed of your site
      • Optimizing performance of your Product Card & Collection pages
  • Apps
    • Shopify apps
      • Supported apps
      • App integration
      • Search and Discovery
  • License
    • Theme license
  • Support
    • Contacting support
Powered by GitBook
On this page
  • Single size chart for all product pages
  • Multiple Size Charts - Custom size chart for individual products
  • Link placement and language support
  • How to setup custom size charts for individual products
  • Create a reference metafield
  • Connect the size chart metafield
  • Setup products
  • Videos about setting up metafields
  • Alternate usages
  1. Products
  2. Product pages

Size charts

Display a pop-up size chart to help customers find the right choice to purchase

PreviousInventory count downNextUnique product content

Last updated 3 years ago

With Pipeline, you can display a size chart page as a popup on any or all your product pages. Pipeline includes an option to select a Shopify Page as a size chart for all your products or use multiple Shopify Pages and customize each product to use a custom size chart page when using metafields.

Single size chart for all product pages

This method allows you to instantly add any Shopify page as a size chart popup to all your product pages when using the default product template.

Click on Form to view the theme block settings and select a Shopify Page you've created for the popup size chart.

For best results, create a size chart page in your Shopify Admin which includes a wide range of sizes. Use that page as your size chart page option.

Multiple Size Charts - Custom size chart for individual products

Feature added in Pipeline 6.1

If your store has multiple size charts, Pipeline can use metafields to customize which size chart page is displayed for each of your products. For example, this is ideal when displaying a size chart for Women's products and another for Men's products. See below for how to setup.

Link placement and language support

By default, Pipeline will place the size chart link next to a variant option called Size. If Pipeline doesn't see a variant option labeled Size, the link will be placed below the quantity selector.

If your store uses a different label name or is spelled differently for various languages, you can use the Language Editor to update the value from Size to another value. This will ensure the size chart link is mapped to the variant option you prefer and appears next to that variant option:

Only one variant name option is supported, you cannot add multiple names in this language editor field.

How to setup custom size charts for individual products

Begin by creating as many size chart pages as needed in your Shopify Admin Page editor. If you have an image already created for your size chart, add that to the content section of the page:

Create a reference metafield

The next step is to define a Product metafield using Page as the Reference type:

Connect the size chart metafield

After the size chart metafield has been created, simply choose that as your Dynamic data source in the Theme Editor:

Setup products

Your products will now have a Metafields section at the bottom. Use this to select which size chart page should be displayed when a customer is viewing this product.

This allows you to choose which size chart each individual product will display in the popup.

Videos about setting up metafields

To learn more about setting up metafields, we recommend viewing our videos located on the Cart upselling:

Alternate usages

Products without a size variant will display the size-chart link lower down, just above the add to cart button, and also styled as a badge. If any of your products are not using the size variant, you can repurpose this feature to be used as a badge with a link to promotional or brand information:

Cart upselling
Example of using one Size Chart page on all products
The label "Size" can be updated in the Language Editor
Example page when using an image
Example page when using a table using the Page editor
Allows you to assign any page to your products
Use the Form theme block to configure
Choose which size chart to display for each product in the Product setup
Men's size chart associated with men's shoes only
Badge styled link used