Unmasking the Shopify 'Buy Now' Glitch: Why Your Dynamic Checkout Shows 0.01 AED

Alright, let's talk about one of those head-scratching Shopify issues that makes you question everything for a moment: the dreaded 'Buy Now' button showing an incorrect price, specifically that mysterious 0.01 AED. We recently saw this pop up in the community, and it's a perfect example of how a seemingly small glitch can throw a wrench into your customer's checkout experience.

Our fellow store owner, dorame, kicked off a thread detailing this very problem: their 'Buy Now' button, when clicked directly from the Product Description Page (PDP) and linked to payment apps like Google Pay, was displaying 0.01 AED instead of the actual product price. The kicker? If a customer went through the standard 'Add to Cart' and then proceeded to checkout, everything worked perfectly. Talk about confusing!

The Community Weighs In: It's All About Your Setup

When dorame first shared a link to their store (without a preview password, initially), a helpful community member, tim_tairli, quickly pointed out something crucial: thousands of other stores have this dynamic checkout function working flawlessly. This immediately shifted the focus from a general Shopify bug to something specific within dorame's unique store configuration. And that's often the case with these kinds of issues – the devil is in the details of your theme, apps, or custom code.

dorame then elaborated, providing more context:

  • Store Type: Shopify
  • Problem: Only on the Buy Now button from the product page
  • Symptom: Payment app popup/window shows 0.01 AED
  • Observation: Product information/context seems missing in the payment window
  • Confirmation: Regular checkout flow works fine

This clear breakdown, along with the shared code snippets, really helped narrow down the potential culprits. It tells us that the product data itself is correct, but something is going awry in the hand-off process specifically for the dynamic checkout button.

Diving into the Code: The `buy-buttons.liquid` Clue

The most valuable piece of information dorame provided was the code from their buy-buttons.liquid snippet and how it's called in main-product.liquid. This is where the magic (or in this case, the glitch) often happens when dealing with product forms and variant selections.

Let's look at the key parts of the code:

{% 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 -%}
{%- liquid assign check_against_inventory = true if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue' assign check_against_inventory = false endif if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory assign quantity_rule_soldout = true endif -%} {% capture content %} {%- if product.selected_or_first_available_variant == nil -%} {{ 'products.product.unavailable' | t }} {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout or product.selected_or_first_available_variant.price == 0 -%} {{ 'products.product.sold_out' | t }} {%- else -%} {{ 'products.product.add_to_cart' | t }} {%- endif -%} {%- render 'loading-spinner' -%} {% endcapture %} {% capture attributes %} {% if fallback_variant.available == false or quantity_rule_soldout or fallback_variant == null %} disabled {% endif %} id="ProductSubmitButton-{{ section_id }}" {% endcapture %} {% render 'button', text: content, size: 'desktop-btn-l', mobile_size: 'mobile-btn-l', style: 'filled', btn_theme: 'black', custom_classes: 'product-form__submit button button--full-width', custom_attributes: attributes, button_type:"submit" %} {%- if show_dynamic_checkout -%} {{ form | payment_button }} {%- 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 }}" > {%- endif -%}
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
              -%}

The crucial part is within the tag. This input is what tells the 'Add to Cart' form (and by extension, the dynamic checkout button) which specific product variant to add to the cart. In dorame's code, this input's value is set to {{ fallback_variant.id }}.

There's also a commented-out line right below it: {% comment %} value="{{ product.selected_or_first_available_variant.id }}" {% endcomment %}. This immediately flags a potential area of concern. The fallback_variant logic is designed to find an available variant if the initially selected or first available one isn't. While this is a good practice, if fallback_variant somehow resolves to an invalid, null, or default (e.g., product ID 0 or an ID that doesn't exist) value under certain conditions, the payment app might not receive the correct product context, leading to that 0.01 AED placeholder.

Common Culprits Behind the 0.01 AED Glitch:

  • Theme Customizations: As highlighted, changes in your buy-buttons.liquid or related theme files are prime suspects. The fallback_variant logic might be robust for your 'Add to Cart' button but could misfire for the dynamic checkout button if it's not correctly passing a valid variant ID at the exact moment the dynamic checkout button script is initialized or clicked.
  • App Conflicts: Third-party apps are notorious for stepping on each other's toes. Product options apps, currency converters, upsell/cross-sell apps, or anything that modifies the PDP's form or variant selection could interfere with how the dynamic checkout button grabs its data.
  • JavaScript Issues: Sometimes, custom JavaScript on your product page might be trying to manipulate the variant ID or product form, and an error or timing issue could prevent the dynamic checkout button from getting the correct information.
  • Missing Product Context: If the payment app's script fires before the product variant is fully selected or identified by the underlying form, it might default to a minimal or placeholder value like 0.01 AED.

Your Action Plan: Debugging Steps

When you're facing an issue like this, a methodical approach is your best friend. Here's how you can investigate and hopefully resolve the 0.01 AED dynamic checkout button problem:

  1. Inspect the Hidden Variant ID:
    • Go to your product page in your browser.
    • Open your browser's developer tools (usually F12 or right-click -> Inspect).
    • Find the element within your product form.
    • Check its value attribute. Is it the correct variant ID for the product/variant you're viewing? This is the ID that the dynamic checkout button *should* be using. If it's missing, 0, or an incorrect ID, you've found your primary lead.
  2. Check for JavaScript Errors:
    • While in developer tools, go to the 'Console' tab.
    • Look for any red error messages. These could indicate a script conflict or a problem preventing the variant ID from being correctly updated.
  3. Isolate the Issue (Theme vs. App):
    • Try a Default Shopify Theme: Temporarily switch your store's live theme to a clean, uncustomized Shopify theme like Dawn (you can do this without affecting your current theme by duplicating and publishing a new one for testing). If the issue disappears, it's definitely theme-related.
    • Disable Recently Installed Apps: If switching themes isn't an option or doesn't fix it, try disabling product page-related apps one by one. If the problem resolves after disabling an app, you've found the culprit.
  4. Scrutinize buy-buttons.liquid (The Key Area):
    • Go back to the code you shared. Pay close attention to the value="{{ fallback_variant.id }}" line for the hidden variant ID input.
    • Consider what happens if fallback_variant isn't correctly assigned a valid ID. For instance, if product.selected_or_first_available_variant *is* available but maybe hasn't fully loaded or been processed by the dynamic checkout script, the fallback_variant logic might somehow lead to an unintended ID.
    • A good test might be to temporarily revert that line to value="{{ product.selected_or_first_available_variant.id }}" (if product.selected_or_first_available_variant is reliably present and correct for your main 'Add to Cart' flow) and see if the dynamic checkout button starts working.
    • Ensure the product object being passed to buy-buttons.liquid (as child_product from main-product.liquid) is always the correct, active product you're viewing.
  5. Test with Different Products/Variants: Does the issue occur on all product pages, or just specific ones? Does it happen regardless of which variant is selected? This can help narrow down if it's a general theme issue or something specific to certain product data.
  6. Reach Out to Shopify Support or Theme Developer: If you've tried these steps and are still stuck, gather all your findings (screenshots, console errors, steps you've taken) and reach out to Shopify Support. If you're using a paid theme, your theme developer might also be able to offer specific insights into their code.

It's always a journey when debugging these kinds of specific setup issues. The key is to systematically eliminate variables. More often than not, it comes down to a small interaction between your theme's Liquid code, some JavaScript, and how external payment apps expect product data to be presented. Stay persistent, and you'll get to the bottom of that pesky 0.01 AED!

Share:

Use cases

Explore use cases

Agencies, store owners, enterprise — find the migration path that fits.

Explore use cases