Display Variant Weights on Product Page

English Shopify Shopify Design
1

Does anyone know if you can display variant weights on a product page? I’ve got about 100 variants for every product and each one has a specific weight. Ideally I’d like a customer to be able to select a variant and the correct weight display on the product page somewhere. Thanks in advance.

2

Hi @tailormade1,

You can use this code to display it:

{{ product.selected_or_first_available_variant.weight }}

Please send me the theme name you are using, I will check it.

4

Found a solution now. Thanks anyway.

5

Hi @tailormade1,

It’s my pleasure :blush:

6

Hi,

Hope this will help

  • Step 1: Add Weights to Your Product Variants
  • Step 2: Add a Place on Product Page to Show Weight
  • Step 3: Edit Product Template File

Example
{{ product.selected_or_first_available_variant.title }}

  • Step 4: Add JavaScript to Update Weight When a Variant is Selected

JavaScript Example:

document.addEventListener('DOMContentLoaded', function () {
  const weightBox = document.getElementById('variant-weight');

  // Listen for variant change
  document.querySelector('form[action^="/cart/add"]').addEventListener('change', function (e) {
    const variantId = document.querySelector('[name="id"]').value;
    const variant = window.meta.product.variants.find(v => v.id == variantId);

    if (variant && weightBox) {
      const weight = variant.weight;
      const unit = variant.weight_unit;
      weightBox.innerText = `Weight: ${weight} ${unit}`;
    }
  });
});