Theme Code Impacting Variant Pricing

[samanthawillnco]

Hi all - I’ve been on with the Shopify Plus support team and determined that some code in our current theme is causing an issue with how our pricing is displayed. Hoping that by providing a few details, someone might be able to recommend what code needs to be updated in order to fix!

Key info:

• Website: https://www.willandco.com.au
• Theme: Minimog OS 2.0 Version 2.5.0 (yes, a bit older…is probably time for us to consider an update again)
• Page where you see issue live: https://www.willandco.com.au/products/natural-beans-1kg

Description of issue:
When you go to the Natural Beans page, you will see correct pricing for the default variant - 500g. If you change the variant to 1kg, the ‘compare at’ price at the top of the product page updates, but not the price itself. However, you’ll notice this price is correct in our Recharge widget and if you add the 1kg product to cart.

Wondering if this could have to do with the pricing liquid code. In case that would be true, I’ve included an image of the code.

Thanks in advance for anyone’s ability to help!

[Shadab_dev]

On line no 15 add this . You have a closing span tag but there’s no opening tag which is wrong html.

I am not sure if this is really the issue but you see the red squiggly lines, they are probably because of this.

[TheUntechnickle]

Hey @samanthawillnco ,

Hope you’re doing fantastic

I’ve identified and resolved the pricing issue you’re experiencing on your Natural Coffee Beans product page.

What’s happening: When customers switch from the 500g to 1kg variant, the main price stays at $30.00 instead of updating to $55.25. However, the crossed-out “compare at” price updates correctly, and the Recharge subscription widget shows the right price. This tells us the variant data is working, but there’s a display bug in the main price area.

Why it’s happening: This is a known issue with your current Minimog theme version (2.5.0). The JavaScript that handles price updates when variants change has a bug where it updates some price elements but misses the main price display.

The fix: I’ve created a JavaScript solution that properly updates the main price when customers change variants. It works by:

1. Storing all your variant prices when the page loads
2. Listening for when customers change the size dropdown
3. Immediately updating the displayed price to match the selected variant

Implementation: Add this code to your product template file:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Store variant pricing data
  const variantData = {
    {% for variant in product.variants %}
      "{{ variant.id }}": {
        price: "{{ variant.price | money }}",
        comparePrice: {% if variant.compare_at_price %}"{{ variant.compare_at_price | money }}"{% else %}null{% endif %}
      }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  };

  // Listen for size dropdown changes
  const variantSelectors = document.querySelectorAll('.sf-product-variant-option-dropdown');
  
  variantSelectors.forEach(selector => {
    selector.addEventListener('change', function() {
      const hiddenInput = document.querySelector('input[name="id"][data-productid="{{ product.id }}"]');
      const selectedVariantId = hiddenInput.value;
      
      // Update the main price display
      if (variantData[selectedVariantId]) {
        const priceContainer = document.querySelector('.product-prices');
        const variant = variantData[selectedVariantId];
        
        // Update main price
        const priceNode = priceContainer.firstChild;
        if (priceNode && priceNode.nodeType === 3) {
          priceNode.textContent = variant.price;
        }
        
        // Update compare price
        const comparePriceElement = document.querySelector('.prod__compare_price');
        if (comparePriceElement) {
          if (variant.comparePrice) {
            comparePriceElement.textContent = variant.comparePrice;
            comparePriceElement.style.display = '';
          } else {
            comparePriceElement.style.display = 'none';
          }
        }
      }
    });
  });
});
</script>

Steps to implement:

1. Backup your theme first (always!)
2. Go to Online Store > Themes > Actions > Edit code
3. Find your product template file (likely sections/product-form.liquid)
4. Add the code above near the closing tag
5. Test on a duplicate theme first before publishing

After implementation, when customers switch from 500g to 1kg, they’ll see the price change from $30.00 to $55.25 immediately.

Long-term recommendation: Consider updating to the latest Minimog theme version when possible, as this issue was officially resolved in newer releases.

Let me know if you need any help with the implementation!

Best regards,

Shubham | Untechnickle

[tim_1]

As @Shadab_dev pointed out, the line 15 is empty, while it should be .

However, it should be not just , but at least for the theme Javascript to recognize it.

You can also check in older copies of your theme – span may have other attributes…

[samanthawillnco]

Hey @tim_1 - you’re a legend! That did the trick. Thank you so much for adding onto @Shadab_dev 's discovery.

[samanthawillnco]

Hey @TheUntechnickle - thank you so much for taking the time to respond and providing this recommendation! I did initially try this out to no avail, but @tim_1 's suggestion solved it for me. If I run into any other issues down the line, I’ll have another look at your suggestion. Hope you have a great day!

[TheUntechnickle]

Super glad it’s working now

Cheers!