Horizon theme - want variants to automatically refresh when selected

Ask & Offer

Topic summary

A user is experiencing an issue with the Horizon theme where variant-specific content (ingredients and scent profiles) doesn’t automatically update when customers select different product variants.

Current behavior:

  • Custom metafield data (essential oils) displays correctly using Liquid code
  • Content only updates after manually refreshing the entire page
  • The code checks if a variant is selected and displays the corresponding metafield information

Desired outcome:

  • Automatic, real-time content updates when variant selection changes on the product page

Technical context:

  • Using Liquid template code: {% if product.selected_variant %}{{ product.selected_variant.metafields.custom.essential_oils }}{% else %}<p>No variant selected</p>{% endif %}
  • Likely requires JavaScript to detect variant changes and dynamically update content without full page reload

The issue remains unresolved, with the user seeking assistance on implementing automatic refresh functionality.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hello, I got my products set up on my webpage and I wanted the list of ingredients and scent profile to change as a different variant is selected. I added this to liquid code to the specific field, but it does not refresh when a new variant is selected. I have to manually refresh the page to get it displayed. Can anyone help me make this happen automatically when a new variant is selected on my product page?

{% if product.selected_variant %} 
 {{ product.selected_variant.metafields.custom.essential_oils }}
{% else %}
  <p>No variant selected.</p>
{% endif %}

Thank you!

3

Use JS to listen for variant:change and swap the metafield HTML, Liquid won’t auto-refresh on its own. I’ve used this in a recent client build: store your variant metafields as JSON and update the target div on change.

4

do you have code examples and where I can put that to make it work?

5

Hi @ashpatino I’m @PaulNewton theme customizer.
Custom dynamic behavior like that is an advanced theme customization beyond the scope of the forums.
Reach out to me for services to add this for your customers, :speaking_head: :postbox: click profile-pic for options to connect.

6

This is a common challenge with dynamic content on Shopify product pages, and it requires a bit of JavaScript to make it update automatically without refreshing. And it can be done by an expert.