Featured Product Bug? Dawn Theme

Topic summary

A Shopify store owner reports that their Featured Product component on a product page isn’t functioning correctly. When customers select different variant options (Pattern size, Fabric Option, or Size) from the dropdowns, neither the product images nor the pricing updates as expected.

Proposed Solution:
A support specialist identified this as likely a JavaScript event handling issue within the Dawn theme. They suggested:

  • Verifying the variant picker logic in featured-product.liquid
  • Checking event handlers in product-form.js
  • Ensuring proper component initialization
  • Quick fix: removing and re-adding the Featured Product section

Current Status:
The store owner confirmed limited coding knowledge and requested direct assistance. The support specialist has requested collaborator access to the store, and the owner has sent the collaborator code. The issue remains unresolved pending hands-on troubleshooting.

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

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 -%}
  1. 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();
    }
    
  2. 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.

  1. Click Customize on your active Dawn theme.
  2. Navigate to the page with the Featured Product component.
  3. Remove and re-add the Featured Product section.
  4. 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 :slightly_smiling_face:

Best regards,
Shreya | Revize

Hello, thank you so much!

On Steps to Resolve the Issue:

  1. It does look like this variant picker code is in the featured-product.liquid file.

  2. I don’t see this exact chunk of code, but there may be something like it already in there.

  3. 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.