Show the price inside the Shopify add to cart button

Show the price inside the Shopify add to cart button
Reading Time

You can put the product price inside the Add to cart button so it updates when the shopper picks a variant. This is a small Liquid plus JS paste on Dawn and the other free themes. No app. Last tested in 2026.

This tutorial is compatible only with Shopify's official free themes: Colorblock, Craft, Crave, Dawn, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste & Trade.

Looking to install this on a premium or custom theme? Contact us.

Before diving into the tutorial, make sure you download the theme, so in case you face any issues you can easily revert back.

Step 1: editing the button code

  1. From your Shopify admin, go to Online Store > Themes
  2. Find the theme you want to edit, click on the 3 dots Edit Code.
  3. Find the file named:

    buy-buttons.liquid.

    If you don't have a file named "buy-buttons.liquid", you're using an older version of the Dawn/free theme. In this case, search for "main-product.liquid" instead.

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

    loading-



    Note: depending on your theme's version the text you find may vary, but the process is still the same.
  5. Paste the following code above the line you found:

    <span class="ezfyButtonPrice">- {{ product.selected_or_first_available_variant.price | money }}</span>

Step 2: adding javascript to handle real time changes

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

    ezfy-button-price

  2. Paste the following code inside and save.

  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 accidentally deleted it at some point. It's a crucial part of every theme. In this case, although I'd recommend reverting back to an unmodified version of your theme, you can paste the code at the very bottom of the file.
  5. Paste the following code above the line you found:

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

This is it! Now, whenever a variant changes the price inside the button is updated.

Conclusion

In conclusion, when you add your product's price inside the Add to Cart button - also known as the "ATC" button - you immediately boost your store's UX even if by the slightest. Such a simple yet powerful enhancement for your Shopify store!

Making sure that your customers have ease of access to pricing information always guarantees an improved shopping experience, and the smoother this shopping experience is, the better your conversion rates will be improved, even if it's only a 0.01%. A 10% is an accumulation of lots of 0.01%s, so... keep reading our tutorials and improving your store!

Price in the button is one product-page tweak. Color swatches (no app) is the other one I get asked about a lot: add color swatches to the Shopify product page without apps.

Back to blog

Leave a comment