This One Add to Cart Button Tweak Can Boost Clicks and Sales

Why Just Saying "Add to Cart" Isn’t Enough Anymore

Most Shopify product pages use a simple, generic “Add to Cart” button. It works. But it’s not optimized for clarity or conversions.

Think about it from your customer’s perspective. They scroll through your product page. They see a button that just says "Add to Cart"... but how much is it again?

Even a moment of hesitation or uncertainty can mean lost clicks.

The Simple Fix: Add the Price to Your Button

Instead of just saying Add to Cart, try this:

Add to Cart – $29.99

Why does it work?

• It removes uncertainty: the price is right there

• It builds trust: no hidden costs

• It improves UX: especially on mobile where price may be out of view

• It boosts conversions: A/B tests show this tweak can increase Add to Cart clicks by 10–20%

It’s a small change. But it makes a big impact.

How to Add Product Price to Add to Cart Button in Shopify (Dawn Theme)

If you're using Shopify's Dawn theme, here's how you can customize your Add to Cart button to include the product price.

Step-by-Step Instructions:

1. Go to Your Shopify Admin

• Navigate to Online Store > Themes

• Click Actions > Edit Code on your live theme

2. Open the product form file
In the Dawn theme, you’ll typically find it here:
snippets/buy-buttons.liquid

(Other themes might use product-template.liquid or a similarly named section.)

3. Search for the Add to Cart button markup
Look for something like:

    <span>
              {%- if product.selected_or_first_available_variant == null -%}
                {{ 'products.product.unavailable' | t }}
              {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                {{ 'products.product.sold_out' | t }}
              {%- else -%}
                {{ 'products.product.add_to_cart' | t }}
              {%- endif -%}
            </span>

4. Modify the button to include the product price

Replace the line with this:

<span>
              {%- if product.selected_or_first_available_variant == null -%}
                {{ 'products.product.unavailable' | t }}
              {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                {{ 'products.product.sold_out' | t }}
              {%- else -%}
                {{ 'products.product.add_to_cart' | t }} - {{  product.price | money }}
              {%- endif -%}
            </span>

If you have another template than Dawn, add the product price right after it by writing: {{ 'products.product.add_to_cart' | t }} - {{ product.price | money }}. Each template may have another variable for text, so it depends on the theme.

This will show the translated "Add to Cart" text followed by the current product price, formatted in your store’s currency.

Add to cart button with the price inside

Important Notes Before You Make This Edit

1. Theme Files Vary by Theme
While this guide is written for Dawn, your theme might structure product pages differently. Look for the section or snippet that controls the product form and Add to Cart button.

2. Manual Edits Are Not Permanent
If you manually change the code inside your theme:

• You’ll need to reapply this edit every time you update or change your theme

• Always make a backup copy of your theme before editing files

• Consider using a theme app or metafields for safer, update-proof customizations