How do I expose the weight and size of a variant to the customer when they select the variant?

[Gina-Marie]

I have an art website, where I offer original drawings for sale.  These are usually framed for shows, but I want to offer my website customers the option to select the drawing unframed, so that shipping will be less expensive.

I have created a product to represent each original.  Then I have given it two variants.  One is framed.  The other is unframed.  This has led to two problems;

1). The system is seeing each variant as a separate item for inventory count.  I have to give both of them an inventory of 1, in order for the system to activate both options; but this is misleading for the customer, since when one variant is sold, the item is not disabled because the system believes there is still one remaining.  How do I fix it so that it is only one product with two different choices?

2).  I've been using metadata to organize my page, and it displays the product sku and dimensions right under the title.  At the moment, this metadata is linked to product data.  Not variant data.  Unfortunately, the weight and size of the piece change according to which variant is selected.  Selecting the variants shows the same weight and dimensions for both variants, which is incorrect.  I've tried to edit the metadata for the page itself, but it will not allow me to select variant metadata, only product metadata.  How do I expose the variant metadata to the product page, so that the data changes depending on which variant is selected?  I want my customers to be able to see the difference in weight and dimension when they select them.

https://gyazo.com/11c29415f4c9a2fb26daec8b1c794cba

Any suggestions would be appreciated.  I've been at it all day trying to answer these two questions.

Thanks!

[tim]

This actually depends on your theme. Say, modern Shopify-built themes do update the SKU per variant.

Again, it's possible to add code to display product weight and update it per variant, but this depends on what theme you have.

Finally, there are apps, like "Variant description" (https://apps.shopify.com/dynamic-variant-description) which can help here.

Ah, yes and about it being a single item offered as two variants -- inventory synching apps may help here.

[Gina-Marie]

Thanks, I'll look into that.  I'm using the Craft theme.

[tim]

Here is the code you can paste into "Custom liquid" block to show variant weight and update it with variant change:

<div class=variant-weight>
  {{ product.selected_or_first_available_variant.weight }}
</div>

<script>
  let updateElementOnVariantChange = ({data}) => {
    let { html, sectionId, variant } = data;
    if( html && sectionId && variant) {
      let currentEl = document.querySelector(`#shopify-section-${ sectionId } .variant-weight`);
      let newEl = html.querySelector(`#shopify-section-${ sectionId } .variant-weight`);
      if (currentEl && newEl) currentEl.innerHTML = newEl.innerHTML;
    }
  };

  if (window.subscribe) subscribe(PUB_SUB_EVENTS.variantChange, updateElementOnVariantChange);
  else document.addEventListener('DOMContentLoaded', ()=>{
    subscribe(PUB_SUB_EVENTS.variantChange, updateElementOnVariantChange);
  });
</script>

The code should work for any free Shopify theme and you can output different content inside the div, it will be updated with variant change.

[Gina-Marie]

This is ultimately how I thought it should work.  I didn't realize that I couldn't give a single product optional choices with it.  I don't know anything about coding, though, so hacking the javascript would not be an option for me.  I can barely figure out metadata tags, lol

[Gina-Marie]

Thanks for the offer, but I don't have the funds to hire help right now.  I appreciate the thought, though.

[Gina-Marie]

Not yet.  Still looking into options, though.

[Easify-Jolie]

Hi @Gina-Marie 

If you want to offer framed or unframed without splitting inventory, I recommend using Easify Product Options. It lets you add a custom “Frame” option without creating extra variants, so you can keep just 1 product in stock. Plus, you can show different info based on what the customer selects — no coding needed! Here's how it works:

• This is the result

• This is the app setting:

To make sure Frame information will only show up when your customers choose "With Frame and Mat" option, go to Advanced Settings of the information and set up like this:

This app is straightforward, and I believe it will work well for you. Reach out to Easify if you need any assistance! 🤗