Size Charts: Example of custom size charts based on product type

This example covers how to create custom size chart pop-ups on your product pages based on product type.

A custom size chart link will be shown:

Based on the type of product:

Products that don't match the product type, will not show a size chart link:

How it works:

Create custom size chart pages in your Shopify Page editor.
Use the product type field to match the size charts in your Shopify Product editor.
Add code to check if the current product matches that product type to display a size chart link

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before starting this code change:

Here's how to add custom size charts in Pipeline. Make sure you've made a duplicate theme first:

1: Edit the product.liquid snippet

Find the Actions link for the theme you'd like to edit. Then select Edit code. Example if you're working from your main live published theme:

Verify which version of Pipeline you're using:

Check your version of Pipeline

Next, open product.liquid from the Snippets folder:

If you're using Pipeline 4 or higher:

(1) In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for "form" without the quotes:

(2) Just before the line that has the include product-form, insert a couple extra lines. Our code will be added there.

Example:

If you're using Pipeline 4.3 or higher

There will be 2 spots where include 'product-form' appears. You'll want to add the code in the next step to both places. This is important for v4.3 and higher. Add a couple blank lines above that line in both places.

If you're using an Earlier version of Pipeline:

(1) In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for "<form" without the quotes:

(2) Just before the line that starts with <from action, insert a couple extra lines. Our code will be added there.

Example:

2: Add custom code

The code you add will be based on what product types you have and the corresponding size charts. In our example for demonstration purposes only, I will create a size chart for Wheels and a size chart for Decks. I have already added product types on my product pages.

Example:

Example for decks:

These are case sensitive, be consistent with the labeling.

Sample code for wheels and decks:

<!-- code added for custom size charts -->

<!-- first product -->          
  {% if product.type contains 'wheels' %} 
    <div id="size_chart_link">
    <p class="text-center"><a href="#size-chart-wheels" class="size-chart-open-popup border-bottom-link uppercase">See wheels size chart</a></p>
    </div>
  <div id="size-chart-wheels" class="product-modal mfp-hide">
    <div class="rte"><h2>{{ pages.size-chart-wheels.title }}</h2>{{ pages.size-chart-wheels.content }}</div>
  </div>          
  {% endif %}
<!-- end first product -->

<!-- second product -->    
  {% if product.type contains 'decks' %} 
    <div id="size_chart_link">
    <p class="text-center"><a href="#size-chart-decks" class="size-chart-open-popup border-bottom-link uppercase">See decks size chart</a></p>
    </div>
  <div id="size-chart-decks" class="product-modal mfp-hide">
    <div class="rte"><h2>{{ pages.size-chart-decks.title }}</h2>{{ pages.size-chart-decks.content }}</div>
  </div>          
  {% endif %}
<!-- end second product --> 
          
<!-- end size chart code -->

The first section is checking to see if the current product is a match to your product setup:

Follow this template format, to add as many size chart links as needed:

<!-- size chart product -->          
  {% if product.type contains 'wheels' %} 
    <div id="size_chart_link">
    <p class="text-center"><a href="#size-chart-wheels" class="size-chart-open-popup border-bottom-link uppercase">See wheels size chart</a></p>
    </div>
  <div id="size-chart-wheels" class="product-modal mfp-hide">
    <div class="rte"><h2>{{ pages.size-chart-wheels.title }}</h2>{{ pages.size-chart-wheels.content }}</div>
  </div>          
  {% endif %}
<!-- end size chart product -->

The second part is the pop-up page that will be shown. We will use the page URL here:

Create your size chart pages in the Shopify Page editor:

https://shopify.com/admin/pages

Tip: Title your pages with "Size Chart" and then "type" like "Size Chart Wheels" (without quotes)

After creating, use the View link to find the page url:

The end portion of the URL is what we'll use in our code, that's our page url:

Repeat the template for each product type and size chart page.

Save the file.

3: Add some Javascript

Pipeline 4 - open theme.js from the Assets folder:

Earlier versions of Pipeline, open shop.js.liquid from the Assets folder:

Paste the following code to the very bottom of file:

/* -- Code for Size Chart pop-up -- */
$('.size-chart-open-popup').magnificPopup({
  type:'inline',
  midClick: true
});
/* - end - */

Save the file.

Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing.

Size Charts: Example of custom size charts based on product type

Edit the product.liquid snippet

Add custom code

Add some Javascript

Need help with code changes?