How to show price inside add to cart button

Displaying the product price directly inside the "Add to Cart" button is a simple yet powerful enhancement for your Shopify store, helping customers make informed decisions faster. In this tutorial, we'll guide you through dynamically updating the price based on variant changes using Shopify's free themes like Dawn, Refresh, and others

How to Set Up Free Shipping on Shopify: The Ultimate Guide Reading How to show price inside add to cart button 4 minutes Next Speed Up Shopify Product Pages with a Single Line of Code

By Meeth JainOct 14, 20240 comments

Share

Prices are a fundamental aspect of every e-commerce store, playing a pivotal role in transactions. Properly displaying the price is essential to facilitate your customer's decision-making process and enhance their overall shopping experience.

In this tutorial, we will guide you on how to display the product price directly inside the Add to Cart button, right alongside the button text. While many existing tutorials cover this topic, they often miss an important feature: handling variant price changes.

If your product offers multiple variants with different prices, the price shown on the button should dynamically update based on the selected variant. Don't worry—we've got you covered! We'll show you how to ensure the price adjusts dynamically with variant changes.

This tutorial works only with Shopify’s official free themes, including Dawn, Refresh, Colorblock, Taste, Ride, Studio, Crave, Origin, Spotlight, Publisher, Sense, and Craft.

Before we start, make sure you download the theme so that you can easily revert to the original code if necessary.

Step 1: Editing the Button Code

From your Shopify admin, go to Online Store > Themes.

Locate the theme you want to edit, then click the three dots > Edit Code.

Find the file named:

buy-buttons.liquid.

If you don't see a file named buy-buttons.liquid, you're using an older version of the Dawn or other free themes. In that case, search for main-product.liquid instead.

Inside this file, press CTRL + F (or CMD + F on Mac) to open the search box. Search for:

loading-

Note: Depending on your theme version, the text you find may vary, but the process remains the same.
Paste the following code above the line you found:

Step 2: Adding JavaScript to Handle Real-Time Changes

1.) Below the “snippets” folder, click on “add a new snippet” and name it exactly:

jhango-button-price

2.) Paste the following code inside and save.

{% if request.page_type == 'product' %}
<script>
window.buttonPriceHandlerVariants = [
  {% for variant in product.variants %}
  {
    id: parseInt({{ variant.id }}),
    price: {{ variant.price | money }}
  },
  {% endfor %}
]

window.jhangoButtonPriceHandler = window.jhangoButtonPriceHandler || {};

jhangoButtonPriceHandler = (function () {
  const LOADING_DELAY = 50;

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

function getVariantID() {
    const $id = document.querySelector('[id*="product-form"] > input:nth-child(3)');
    if (!$id) return null;
    const _id = $id.getAttribute("value");
    return _id ? parseInt(_id) : null;
  }

async function updatePrice() {
    const id = getVariantID();
    const found = buttonPriceHandlerVariants.find(e => e.id === id);
    const $button = document.querySelector('.jhangoButtonPrice');
    if (!$button) return;
    $button.textContent = ` - ${found.price}`;
  }

return {
    init: function () {
      document.addEventListener("DOMContentLoaded", function () {
        handleSwatchChange();
        handleDropdownChange();
      });
    },
  };
})();

jhangoButtonPriceHandler.init();
</script>
{% endif %}

Step 3: Find the file named: Theme.liquid

4.) Inside this file, search for:

</body>

Note: If you can't find a </body> inside your theme.liquid file, you may have accidentally deleted it. It's an essential part of every theme. In this case, you can paste the code at the very bottom of the file.

5.) Paste the following code above the closing

{% render 'jhango-button-price' %}

Conclusion

In summary, adding the product price directly into the "Add to Cart" (ATC) button is a small but impactful improvement to your Shopify store's user experience. This simple enhancement makes pricing more accessible, which can significantly streamline the shopping process for your customers.

By ensuring that your customers have quick access to pricing information, you create a smoother shopping experience, which can positively affect your conversion rates— even with a small increase. Remember, even a 0.01% boost in conversions adds up over time, and small improvements like this can lead to big results. Keep following our tutorials to continuously optimize your store!