Variant Descriptions Not Updating Dynamically

Online Store and Theme Development
,
1

Hello, Shopify Dev Community,

I’m having trouble getting my variant descriptions to update dynamically when a customer selects a different variant on my product page. The descriptions are stored as variant-level metafields, and while they change after refreshing the page, they don’t update automatically when a variant is selected.

:warning: Important Note: I have zero experience with coding or Shopify development, and ChatGPT has guided me through the process so far. I’m hoping for a simple, step-by-step solution that I can follow.

What I’ve Done So Far:

  1. Created a variant metafield under Settings > Custom Data > Variants
  • Name: Variant Description
  • Type: Rich text
  • Namespace & Key: custom.variant_description
  1. Populated the metafields for each product variant with unique descriptions.
  2. Added a Custom Liquid block under the Variant Picker in my theme, using:
<div id="variant-description">
  {{ product.selected_or_first_available_variant.metafields.custom.variant_description.value }}
</div>
  1. Tried JavaScript solutions to detect variant selection and update the description dynamically, including:
  • Listening for variant:change events.
  • Fetching the product JSON and updating the description.
  1. Checked for conflicts with my theme’s default variant selection logic.

Current Issue:

  • The description only changes when the page is refreshed but not when selecting a different variant.
  • I need the description to update instantly when a new variant is selected.
  • Since I have no coding experience, I’d appreciate a clear, beginner-friendly solution that I can implement.

I’d really appreciate any help! Thank you.

2

Hi @Evian_Redd :sunglasses:

It can be a lot of things. First of all, are you sure that a variant:change event exist? What theme are you using? All themes are built different regarding events and everything.

You can look in your Chrome Developer Tools under Elements and Event Listeners when you’re on your product page.

image
image1532×1706 623 KB

Also, how and where do you initialise the Javascript that runs the event listener?

3

Following along with @curzey’s notes.

TL:DR: As you change the variant selection on the data you need to figure out how you are going to update the page content with data from the selected variant.

The Long:

You have to realize that Liquid is a server side rendered content you’re getting back from Shopify. Your Liquid code only executes and results in a static render when it being served to you at the time of request. As you change variants you may need to do a fetch request to some endpoint (a custom template or just fetch the whole product page and scrape content) to grab the latest selected variant’s custom data. Alternatively in your product page liquid could store the custom description of every variant of the given product to some kind of map you can access on the page in JS.

The reason you see the content change on page refresh, is because that ?variant=1234567891 value in your URL is updating. When the product page is served with variant= in the URL, shopify updates the value of selected_variant on the page, where product.selected_or_first_available_variant is now going to do it’s best to be equal to the variant in the URL when the page rendered.

1 Like