How to add product weight to your shop's product page

For physical items, you can display the weight value associated to each variant on your product page. This tutorial requires code change to the theme's Javascript file and is considered intermediate to advanced. Some knowledge and experience with Liquid code is very helpful.

Result:

How to:

1

Verify default weight unit setting

Open your store's general settings:

Quick link:
Click to open General Settings

Under Standards and formats, verify the Default weight unit:

You'll need to know this setting for the next step. 

2

Modify product.liquid

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.

(Don't skip this step) Make a duplicate of your theme before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

From the Snippets folder, open product.liquid:

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

h1

Example:

Add a couple blank lines below the line ending with </h1>. Then add the following code:

<!-- Code added for Weight -->                       
    {% if product.variants.first.weight > 0 %}                      
          <p><span class="text-center uppercase">Weight: </span><span id="variant-weight"></span> grams</p>
    {%- endif -%}      
<!-- end Weight -->

Example:

Modify the text at the end to match your Default weight unit setting from Step 1 - If you're not using grams:

Save the file.

3

Modify theme's Javascript file

This will vary depending on which version of Pipeline you're running: 

Check your version:
Which version of Pipeline am I using?

Pipeline 4 - From the Assets folder, open theme.js

Or

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

Part 1

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and find:

if (variant.available)

Example:

Part 2

Add the following code above the start of the found section:

/* -- code added for weight -- */
$('#variant-weight').text(variant.weight);
/* - end - */

Example (theme.js):

Example for older versions of Pipeline (shop.js):

(be sure to add a couple blank lines before pasting the code). 

Save the file.

Test your product pages

Now you can test your theme's products. If a product doesn't have a weight, there should be no information below the product title. 

Example:

For products with weight added: