Shopify Variant Picker Description Issue

[alcafloes]

Can anyone help me with this? As you can see in the image when you click one of the variant options the descriptions appear at the button. I try to add a custom liquid and this is the code that I create. And that code works perfectly in the theme customization. THE PROBLEM IS when I save and preview the website, when I click one of the variant option the description still doesn't appear. I try so many time edited my code but it still the same work in the theme customization but not in the preview website. I ask ai and my client maybe the problem is the java script. Can anyone help me on how to resolve this issue please.

[rajweb · Accepted solution]

Hey @alcafloes ,

The issue you're describing might indeed be related to JavaScript not properly handling the variant selection on the live preview. While the Liquid code for displaying the description works in the theme editor, it might not be interacting well with the JavaScript when the website is loaded on the storefront. 

Debugging Steps:

1. Ensure the JavaScript is Listening for Variant Changes: Shopify uses the  change  event to detect when a variant is selected. Your custom Liquid code might need JavaScript to update the description dynamically.

2. Check Console Errors: Open the developer tools in your browser (F12 or right-click > Inspect) and navigate to the "Console" tab. Look for JavaScript errors that might explain why the description is not updating.

3. Ensure Event Binding: If the event binding for variant change is not working properly, the description won't update. Verify if you are using Shopify's   Shopify.optionSelectors or Shopify.onVarientChange functionality, which is typically used for handling variant selection.

4. Check Published Code: Ensure the code you've written in the theme customization is saved and properly published.

Code Review Suggestions:

Please share the custom Liquid and JavaScript code you’ve written so I can analyze it. Meanwhile, here's a general guide for implementing variant-specific descriptions:

Liquid Code

Ensure each variant has a description in its meta fields or JSON.

<div id="variant-description">
  <p>{{ current_variant.metafields.custom.description }}</p>
</div>

JavaScript

Update the description dynamically when a variant is selected.

document.addEventListener('DOMContentLoaded', () => {
  const variantSelect = document.querySelector('[name="id"]'); // Dropdown or radio buttons

  if (variantSelect) {
    variantSelect.addEventListener('change', (event) => {
      const selectedVariantId = event.target.value;
      
      // Fetch the selected variant's description dynamically
      const variantDescription = document.querySelector(`#variant-desc-${selectedVariantId}`);
      const descriptionContainer = document.getElementById('variant-description');
      
      if (variantDescription && descriptionContainer) {
        descriptionContainer.innerHTML = variantDescription.innerHTML;
      }
    });
  }
});

Debugging Checklist

- Make sure the correct JavaScript file is linked in your theme.

- Confirm that the Liquid placeholders render the variant data correctly.

- If you're using an app or other scripts, verify they aren't overriding your JavaScript logic.

Let me know if you can share your code for more tailored support!

or Please send me a message via email so we can discuss this in more detail. I’d be happy to assist you further with my 5 years of experience. Looking forward to helping you!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[alcafloes]

Thanks,

Here it the screenshots from the chrome console errors.

and here is the code that I create for the custom liquid section:

<div id="flavor-description-container">
<p id="flavor-description"></p>
</div>
<style>
#flavor-description-container {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f6f6f6;
max-width: 600px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#flavor-description {
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
font-size: 1.6rem;
color: #222;
line-height: 1.8rem;
margin: 0;
text-align: left;
}

#flavor-description-container.hidden {
display: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const flavorDescriptions = {
};

const descriptionElement = document.getElementById("flavor-description");

const updateDescription = () => {
const selectedInput = document.querySelector("input[type='radio'][name^='Flavor']:checked");
if (selectedInput) {
const cleanFlavor = selectedInput.value
.toLowerCase()
.replace(/\[készlethiány\]|\[out of stock\]/gi, "")
.trim();

descriptionElement.innerHTML = flavorDescriptions[cleanFlavor] || "<p>Válassz egy ízt a leíráshoz!</p>";
} else {
descriptionElement.innerHTML = "<p>Válassz egy ízt a leíráshoz!</p>";
}
};

// Add event listeners to all inputs
const flavorInputs = document.querySelectorAll("input[type='radio'][name^='Flavor']");
flavorInputs.forEach((input) => {
input.addEventListener("change", updateDescription);
});

// Initialize with the current selection
updateDescription();
});
</script>

[rajweb]

Hey @alcafloes ,

Thank you for sharing the details and the image. Based on your code and the console errors in the preview, I can suggest a few steps to resolve the issue:

Key Points in the Code:

1. Flavor Descriptions: It looks like you have set up a flavordescriptions object but haven't populated it yet. You should add key-value pairs for each flavor in that object, where the key is the flavor name (cleaned version) and the value is the description text.

Example:

const flavorDescriptions = {
  "chocolate": "A rich and creamy chocolate flavor that everyone loves.",
  "peanut butter": "A delicious peanut butter flavor with a smooth finish.",
  "caramel frappé": "A sweet and creamy caramel frappé flavor, perfect for coffee lovers."
};

2. Error in Console (JavaScript Errors): 

The console shows errors related to loading resources: 

- Uncaught TypeError: l is not a function 

- Failed to load resource: the server responded with a status of 404

These errors suggest there might be a conflict or missing files related to widgets (e.g., a script or asset is missing or incorrectly referenced). You might want to verify if all resources (such as widget.min.js) are correctly loaded and if any external scripts are conflicting.

3. JavaScript Execution: It seems the script responsible for updating the flavor description (updateDescription) should work well if the flavordescriptions object is correctly populated. However, the error about a missing function or incorrect reference could prevent the script from executing properly.

Suggested Fixes:

Populate the flavordescriptions  Object: Make sure you fill in the flavor descriptions for each variant like this: 

const flavorDescriptions = {
  "winter marzipan": "A delightful marzipan flavor with a wintery twist.",
  "chocolate": "A rich and creamy chocolate flavor.",
  "peanut butter": "A smooth, savory peanut butter taste.",
  "caramel frappé": "A sweet and creamy caramel frappé.",
  "vanilla": "A classic, smooth vanilla flavor.",
  "strawberry": "A refreshing strawberry taste.",
  "salted caramel": "A perfect blend of sweet and salty caramel.",
  "pistachio": "A nutty and smooth pistachio flavor."
};

Example of Updated Code: 

here’s an example of the updated code with the  flavordescriptions populated:

<div id="flavor-description-container">
  <p id="flavor-description">Válassz egy ízt a leíráshoz!</p>
</div>
<style>
  #flavor-description-container {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f6f6f6;
    max-width: 600px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  #flavor-description {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    color: #222;
    line-height: 1.8rem;
    margin: 0;
    text-align: left;
  }

  #flavor-description-container.hidden {
    display: none;
  }
</style>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const flavorDescriptions = {
      "winter marzipan": "A delightful marzipan flavor with a wintery twist.",
      "chocolate": "A rich and creamy chocolate flavor.",
      "peanut butter": "A smooth, savory peanut butter taste.",
      "caramel frappé": "A sweet and creamy caramel frappé.",
      "vanilla": "A classic, smooth vanilla flavor.",
      "strawberry": "A refreshing strawberry taste.",
      "salted caramel": "A perfect blend of sweet and salty caramel.",
      "pistachio": "A nutty and smooth pistachio flavor."
    };

    const descriptionElement = document.getElementById("flavor-description");

    const updateDescription = () => {
      const selectedInput = document.querySelector("input[type='radio'][name^='Flavor']:checked");
      if (selectedInput) {
        const cleanFlavor = selectedInput.value
          .toLowerCase()
          .replace(/\[készlethiány\]|\[out of stock\]/gi, "")
          .trim();

        descriptionElement.innerHTML = flavorDescriptions[cleanFlavor] || "<p>Válassz egy ízt a leíráshoz!</p>";
      } else {
        descriptionElement.innerHTML = "<p>Válassz egy ízt a leíráshoz!</p>";
      }
    };

    // Add event listeners to all inputs
    const flavorInputs = document.querySelectorAll("input[type='radio'][name^='Flavor']");
    flavorInputs.forEach((input) => {
      input.addEventListener("change", updateDescription);
    });

    // Initialize with the current selection
    updateDescription();
  });
</script>

Thanks

[rajweb]

@alcafloes  If my solution worked for you, I’d greatly appreciate it if you could like my replies and mark them as the solution. Your support really helps my profile—thank you!