Hello! I have a Featured Product component on my product template page.
https://www.eliseelsenheimer.com/products/honeycomb-warm-white-blue-fabric
See the block further down this page with a header that says “Get this pattern in inverted colors”. That’s my Featured Product component.
Nothing in the component updates when I select different options from the dropdowns in this Featured Product component. For example, selecting the ‘Large’ Pattern size should show a different image, but it doesn’t. Choosing a different ‘Fabric Option’ or ‘Size’ should change the price shown, but it doesn’t.
Can you help?
Thank you!
Elise
Hi Elise,
Thank you for providing such a detailed explanation of the issue with your Featured Product component. I understand how frustrating it can be when the variant selections (like Size or Fabric Option) don’t update the product display or pricing as expected.
This seems to be a JavaScript event handling issue within the Dawn theme’s Featured Product component. Here’s how we can work through this:
Steps to Resolve the Issue:1. Verify the Variant Picker in the Theme Files:
Check if the variant section in your featured-product.liquid file has the correct variant picker logic. Look for something like this:
{%- when 'variant_picker' -%}
{%- render 'product-variant-picker', product: product, block: block -%}
-
Ensure Event Handlers Are Set Up in product-form.js:
Confirm that your product-form.js file includes the necessary event handlers for variant changes. The key function should look similar to:
onVariantChange() {
this.updateMedia();
this.updateURL();
this.updateVariantInput();
this.renderProductInfo();
this.updateShareUrl();
}
-
Initialize the Featured Product Component:
Make sure the Featured Product component is properly initialized in your JavaScript with:
customElements.define('product-form', ProductForm);
Quick Fix to Try:1. Go to Online Store > Themes.
- Click Customize on your active Dawn theme.
- Navigate to the page with the Featured Product component.
- Remove and re-add the Featured Product section.
- Save your changes.
If this doesn’t resolve the issue, it might require a code update in the Featured Product component to ensure it listens to and handles variant changes correctly. Let me know if you want us to do this for you, would love you help 
Best regards,
Shreya | Revize
Hello, thank you so much!
On Steps to Resolve the Issue:
-
It does look like this variant picker code is in the featured-product.liquid file.
-
I don’t see this exact chunk of code, but there may be something like it already in there.
-
I’m not sure where to try and locate this.
I’m not code savvy on Shopify so I’m not sure I’d be able to resolve it myself. Can you help? Thank you!
Sure! Please send me your collaborator code, and I’ll send you a store access request. Once you accept it, I’ll be able to help you further. Looking forward to assisting you!
Best,
Shreya | hello@untechnickle.com
Thank you! I just sent the Collaborator Request Code to you.