How to use Shopify's Size Chart tutorial in Pipeline

If you're using Pipeline 3 or higher, there is a Size Chart option built-in to the Product page settings. There is no custom code required for size charts in Pipeline 3. The only limitation is that the size chart is displayed on all product pages. For that reason, you'll want to create a size chart that shows multiple categories. Another option is to use local tabs in Pipeline 3 and higher. You can place sizes in tabs for individual products.

Pipeline 3 and higher

In your Product page settings:

https://shopify.com/admin/themes/current/editor

Select a Shopify Page that you've created which has all your size chart content. This page will be used as a pop-up on your product pages to display your sizes. 


Alternative method: Add a pop-up with custom page content

If you are using an older version of Pipeline or would like to have a pop-up link that opens a page, then this Shopify article will help you build the same functionality.

These instructions are to assist you with adding a Size Chart to all your product pages based on an article by Shopify:

https://help.shopify.com/themes/customization/products/features/add-size-chart

Remember, if you're running Pipeline 3 or higher, you can simply use the built-in feature in the  Product page settings - Just above the Tabs setup.

Use the Shopify article (above link) and follow our notes below to help you add this modification. 

1

Create the Size chart page

Follow and complete the instructions from the Shopify article - "Creating a size chart page".

2

Adding the size chart to your theme

For this step, use the following instructions for Pipeline - Skip all instructions in the Shopify article which is meant for other themes. 

Open your snippets/product.liquid file in the Code Editor (use this link if Pipeline is published):

https://shopify.com/admin/themes/current?key=snippets/product.liquid&line=123

Depending on your version of Pipeline, around Line 123, look for the code that starts with:

<form action

Example:

We are going to add the following code above the line that starts with <form action

Code to add:

{% if product.options contains 'Size' %}
<p class="text-center"><a href="#size-chart" class="size-chart-open-popup border-bottom-link uppercase">See size chart</a></p>          
{% endif %}
          
<div id="size-chart" class="mfp-hide">
{{ pages.size-chart.content }}
</div>
<style>
#size-chart {
  border: 2px #555 solid;
  background-color: #ffffff;
  padding: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
  
</style>

Example:

Save the file.

Part 2

Open your assets/shop.js.liquid file (use this link if Pipeline is published):

https://shopify.com/admin/themes/current?key=assets/shop.js.liquid&line=9999

At the very bottom of the file, on a new line - Add the following code:

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

Example:

Save the file.


Notes

The pop-up size chart link will now appear on pages that have "Size" as a variant option. 

Be sure that your variant is called "Size":

Tip - If your pop-up is not showing the Size chart page (or is blank):

When you created your Size chart page - Make sure the URL at the end is exactly "size-chart". You can verify the URL by checking the Search engine listing preview at the bottom of the Size chart page:

If it's not, then the above code will not know how to find the page. If your page URL is different, then modify this part of the code from above to match it (first code section from above):

There must be a match for the pop-up to open the correct page. 

Still need help? Contact Us Contact Us