Shopify 'Buy Now' Button Showing Wrong Price? Here's How to Fix the 0.01 AED Glitch
Hey everyone, it’s your friendly Shopify expert here, diving into another interesting puzzle from the community forums. You know, sometimes the most head-scratching issues aren't massive, platform-wide bugs, but subtle conflicts in our store setups. That’s exactly what caught my eye in a recent thread started by a store owner named dorame, who was wrestling with a tricky pricing glitch on their product pages.
Imagine this: a customer lands on your product page, sees a fantastic item, and decides to use a speedy payment option like Google Pay or Apple Pay via the “Buy Now” button. They click, the payment window pops up, and… instead of the actual product price, it shows 0.01 AED (or whatever your local currency equivalent of a penny might be). Talk about a confusing moment for a potential buyer, right?
Understanding the Mysterious 0.01 AED Glitch
Dorame described the problem perfectly: the dynamic checkout button on the Product Description Page (PDP) was consistently showing an incorrect price of 0.01 AED. What made it even more perplexing was that if a customer went through the normal “Add to Cart” and then “Checkout” flow, everything worked perfectly, displaying the correct price. This immediately tells us the product pricing itself isn't the issue, nor is the core checkout process broken.
As our community member tim_tairli pointed out, this isn't a widespread Shopify bug affecting thousands of stores. It's usually something specific to a store's particular setup. This means we're looking for a conflict or misconfiguration within the theme, custom code, or perhaps an app.
Peeking Under the Hood: What's Happening with the Code?
Dorame was kind enough to share some relevant code snippets, specifically from their buy-buttons.liquid and main-product.liquid files. This is where we start to piece together the puzzle.
The dynamic checkout buttons are rendered using the {{ form | payment_button }} Liquid tag. This tag relies heavily on the product object and, crucially, the selected_or_first_available_variant.id to know what product and price to send to the payment app. If this information isn't correctly passed or isn't available at the exact moment the payment button initializes, it can default to a placeholder or an incorrect value.
Let's look at the buy-buttons.liquid snippet dorame shared:
{% comment %}
Renders product buy-buttons.
Accepts:
- product: {Object} product object.
- block: {Object} passing the block information.
- product_form_id: {String} product form id.
- section_id: {String} id of section to which this snippet belongs.
- show_pickup_availability: {Boolean} for the pickup availability. If true the pickup availability is rendered, false - not rendered (optional).
Usage:
{% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true %}
{% endcomment %}
{%- if product != blank -%}
{%- liquid
assign gift_card_recipient_feature_active = false
if block.settings.show_gift_card_recipient and product.gift_card?
assign gift_card_recipient_feature_active = true
endif
assign show_dynamic_checkout = false
if block.settings.show_dynamic_checkout and gift_card_recipient_feature_active == false
assign show_dynamic_checkout = true
endif
-%}
{%- liquid
assign fallback_variant = product.selected_or_first_available_variant
if product.selected_or_first_available_variant.available == false
for variant in product.variants
if variant.available
assign fallback_variant = variant
break
endif
endfor
endif
-%}
{%- form 'product',
product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
{%- if gift_card_recipient_feature_active -%}
{%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
{%- endif -%}
{%- endform -%}
{%- else -%}
{%- endif -%}
{%- if show_pickup_availability -%}
{{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}
{%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities
| where: 'pick_up_enabled', true
-%}
0 %}
available
{% endif %}
data-root-url="{{ routes.root_url }}"
data-variant-id="{{ product.selected_or_first_available_variant.id }}"
data-has-only-default-variant="{{ product.has_only_default_variant }}"
data-product-page-color-scheme="gradient color-{{ section.settings.color_scheme }}"
>
{% render 'icon-unavailable' %}
{{ 'products.product.pickup_availability.unavailable' | t }}
{%- endif -%}
And how it's called in main-product.liquid:
In main-product.liquid :
{%- when 'buy_buttons' -%}
{%- render 'buy-buttons',
block: block,
product: child_product,
product_form_id: product_form_id,
section_id: section.id,
show_pickup_availability: true
-%}
Notice the within the product form. This hidden input is critical for telling the dynamic checkout button what variant ID (and thus, what price) to use. If fallback_variant.id isn't correctly populated or updated, especially when variant options are selected, it could lead to this 0.01 AED issue.
Also, the call in main-product.liquid uses product: child_product. We need to be sure that child_product is always correctly assigned the main product object, especially if there are multiple products on a page or if this is part of a custom product grid.
Practical Steps to Debug and Fix the Issue
Based on dorame's detailed description and the community's general understanding of these buttons, here's a methodical approach to debugging this kind of problem:
1. Inspect the Hidden Variant ID Field
- On your product page, open your browser's developer tools (usually F12 or right-click -> Inspect).
- Find the
element that wraps your product details and add-to-cart button. - Look for the hidden input field:
. - Crucially, check the
valueattribute of this input. Does it correctly reflect the ID of the currently selected product variant? If it's empty, 0, or an incorrect ID, that's likely your culprit. - Try selecting different variants (if applicable) and observe if this
valueupdates correctly.
2. Isolate Theme/App Conflicts
- Test with a clean theme: Duplicate your current theme and, in the duplicate, temporarily revert any recent customizations or switch to a fresh, unedited version of a default Shopify theme like Dawn. Does the issue persist there? If not, the problem lies within your theme's custom code.
- Disable apps: One by one, temporarily disable any apps that interact with product pages, variant selection, or the checkout process (e.g., upsell apps, variant apps, quantity breaks). Test after each disablement. This can help pinpoint an app conflict.
3. Review Custom JavaScript
- If you have custom JavaScript that modifies how variants are selected or how product data is handled on the PDP, it might be interfering with the native Shopify scripts that power the dynamic checkout buttons.
- Look for scripts that manipulate the
product-formor the hidden variant ID input. Ensure they are updating thevalueattribute correctly and in a timely manner. - Check your browser's console for any JavaScript errors that might be preventing scripts from running fully.
4. Liquid Logic Check in buy-buttons.liquid and main-product.liquid
- Verify
fallback_variant: Ensure the logic assigningfallback_variantis robust and always returns a valid, available variant ID. Sometimes, if a product has no available variants or complex inventory rules, this could return an unexpected value. - Check
child_product: Inmain-product.liquid, confirm thatchild_productis consistently and correctly assigned the product object. If this is somehow null or malformed, thebuy-buttonssnippet won't receive the necessary context. - Ensure
show_dynamic_checkoutis truly active when you expect it to be.
5. Shopify Admin Sanity Checks
- While less likely given regular checkout works, double-check that your product prices in the Shopify admin are correctly set and not accidentally 0.00.
- Review your payment provider settings to ensure there are no unusual configurations there.
This 0.01 AED issue with dynamic checkout buttons is typically a sign that the underlying product data, specifically the variant ID, isn't being properly communicated to the payment gateway at the exact moment the button is triggered. By systematically working through these debugging steps, starting with inspecting that crucial hidden input field, you should be able to pinpoint whether it's a theme customization, an app conflict, or a specific piece of custom JavaScript that's causing the hiccup. It's all about methodically isolating the problem areas until you find that one piece of code or configuration that's a bit out of sync.