How to add size chart popup to Shopify product pages without app

If you sell clothing items that require customers to know their size before they make a purchase, you can add a custom size chart to your product page.

All products that require reference to the size chart must have a Size option:

Follow the below steps to know how to add a size chart to Shopify product pages without app.

Step 1: Creating a size chart page

  1. From your Shopify admin, go to Online Store > Pages.
  2. Click Add page.
  3. Enter Size chart for the page title:
  4. In the Content box, create a table that contains your size chart information. Customize the table to look the way you want it to:
  5. In the Visibility section, make sure the page is set to Visible.
  6. Click Save.

Step 2: Adding the size chart to your theme

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Sections directory, click to open your product-template.liquid file.
  4. Add a Size chart button by pasting the following code above the Add to cart button:
  5. Add the following code to the bottom of the product-template.liquid file:
  6. Click Save.
  7. In the Assets directory, click theme.js. Add the following code to the bottom of the file:
  8. Click Save.

Step 3: Adding Magnific Popup jQuery plugin

  1. In the Assets directory, click to open your theme.scss.liquid file, or your timber.scss.liquid file, and add the below CSS code to the bottom.
  2. Do one of the following:
    • If your theme has a vendor.js file in the Assets directory, open the file and add this code to the bottom.
    • If your theme does not have a vendor.js file in the Assets directory, place this code just above the $('.size-chart-open-popup').magnificPopup code in your theme.js file.
  3. Click Save.

Source: Shopify

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *