Show product price on add to cart button (Motion theme)

[jasminsharp97]

I’m working on this site: https://jj1w7le42gvk5pbb-17677281.shopifypreview.com and I’m trying to make it so the product price shows up on the add to cart button. I want it to look like “Add to Cart - $22”

How can I accomplish that?

[Papillonos]

@jasminsharp97 I can give you the steps for the Dawn theme but i’m not sure how its done on the Motion theme but it should be similar.

You go into edit code and find buy-buttons in the snippets folder.
You find the text that says add to cart usually it will be a translation text something like {{ ‘products.product.add_to_cart’ | t }}

Then you can add - {{ product.selected_or_first_available_variant.price | money }} right next to it so it looks something like

{{ ‘products.product.add_to_cart’ | t }} - {{ product.selected_or_first_available_variant.price | money }}

And then save and hope that helps

[EmbedAny]

In the Motion theme on Shopify, the “Add to Cart” button doesn’t show the product price by default. However, you can customize it by editing the theme code. Here’s a step-by-step guide:

---

1. Backup Your Theme

Before making any changes:

1. Go to Online Store > Themes.

2. Click Actions > Duplicate to create a backup.

---

2. Edit the Code

1. Go to Online Store > Themes > Actions > Edit code.

2. Open the file:

   • Usually: sections/product-template.liquid or sections/main-product.liquid

   • Or check: snippets/product-form.liquid (depends on Motion theme version)

---

3. Add Price to “Add to Cart” Button

Find the Add to Cart button code, it usually looks like:

<button type="submit" class="btn product-form__cart-submit">
  {{ 'products.product.add_to_cart' | t }}
</button>

Replace it with:

<button type="submit" class="btn product-form__cart-submit">
  {{ 'products.product.add_to_cart' | t }} – {{ product.price | money }}
</button>

This will show the product price next to the button text, like:
Add to Cart – $49.99

---

4. Save and Preview

1. Click Save.

2. Refresh your product page to see the price displayed on the button.

---

Optional: For Dynamic Variants

If your product has multiple variants:

<button type="submit" class="btn product-form__cart-submit">
  {{ 'products.product.add_to_cart' | t }} – {{ current_variant.price | money }}
</button>

This ensures the price updates automatically when the customer selects a different variant.

[devcoders]

Hi @jasminsharp97

Has your issue been resolved? If not, please let me know and I will help you.

[rajweb]

@jasminsharp97

I’m working on this site: https://jj1w7le42gvk5pbb-17677281.shopifypreview.com and I’m trying to make it so the product price shows up on the add to cart button. I want it to look like “Add to Cart - $22”

How can I accomplish that?

Hey @jasminsharp97 ,

You can definitely display the product price on the Add to Cart button like this: “Add to Cart – $22”. Here’s how you can implement it:

1. Open your product template or the relevant snippet where the Add to Cart button is coded (usually product-form.liquid or similar).
2. Find the Add to Cart button code, which looks like:

<button type="submit" name="add">
  Add to Cart
</button>

3. Replace it with:

<button type="submit" name="add">
  Add to Cart – {{ product.price | money }}
</button>

This will dynamically display the product’s price beside the button text.

4. If you have variants, you can use:

Add to Cart – {{ current_variant.price | money }}

This way, the price will change based on the selected variant.

Make sure to test it on both desktop and mobile views, and clear your cache after saving changes.

In the past, I’ve already worked on similar issues where clients wanted the price displayed on the Add to Cart button. If you want me to implement this for you, feel free to reach out anytime! Also, you can check my past work and get my contact information here: https://www.rajatweb.dev/

I’d be happy to assist you in setting this up smoothly!

Best ,

Rajat | Shopify Expert

[jasminsharp97]

That didn’t work! This is my liquid for my product-form, how do I make the change in this liquid specifically?

{% form ‘product’, product, id: form_id, class: ‘product-single__form’ %}

{%- 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 enable_dynamic_buttons = false

if show_dynamic_checkout and gift_card_recipient_feature_active == false

  unless template contains 'preorder'

    assign enable_dynamic_buttons = true

  endunless

endif

-%}

{%- if gift_card_recipient_feature_active -%}

{%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}

{%- endif -%}

{%- if enable_dynamic_buttons -%}

<div class="payment-buttons">

{%- endif -%}

{%- liquid

  assign default_text = 'products.product.add_to_cart' | t

  assign button_text = 'products.product.add_to_cart' | t

  if template contains 'preorder'

    assign default_text = 'products.product.preorder' | t

    assign button_text = 'products.product.preorder' | t

  endif

  unless current_variant.available

    assign button_text = 'products.product.sold_out' | t

  endunless

-%}



<button

  {% if product.empty? %}type="button"{% else %}type="submit"{% endif %}

  name="add"

  data-add-to-cart

  class="btn btn--full add-to-cart{% if enable_dynamic_buttons and product.selling_plan_groups.size == 0 %} add-to-cart--secondary{% endif %}"

  {% unless current_variant.available %} disabled="disabled"{% endunless %}>

  <span data-add-to-cart-text data-default-text="{{ 'products.product.add_to_cart' | t }}">

    {{ button_text }}

  </span>

</button>



{% if enable_dynamic_buttons %}

  {{ form | payment_button }}

{% endif %}

{% if enable_dynamic_buttons %}

</div>

{% endif %}

{{ form | payment_terms }}

{%- for variant in product.variants -%} {% if variant.available %} <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}"> {{ variant.title }} - {{ variant.price | money_with_currency }} </option> {% else %} <option disabled="disabled"> {{ variant.title }} - {{ 'products.product.sold_out' | t }} </option> {% endif %} {%- endfor -%}

{% endform %}

[rajweb]

Thank you for sharing your product-form Liquid code. To display the product price on the “Add to Cart” button, you can modify the button_text assignment within your existing code. Here’s how you can do it:

1. Locate the button_text Assignment:
   Find the section in your code where button_text is assigned. It should look something like this:

assign button_text = ‘products.product.add_to_cart’ | t

2. Modify the Assignment to Include the Price:
   Update the button_text assignment to append the product’s price. Use the following code:

assign button_text = ‘products.product.add_to_cart’ | t | append: ’ - ’ | append: product.price | money

This code will append the product’s price to the “Add to Cart” text, formatted according to your store’s currency settings.

3. Ensure the Button Displays the Updated Text:

Your button code should already be using button_text to display the label. Ensure it looks like this:

<button
{% if product.empty? %}type=“button”{% else %}type=“submit”{% endif %}
name=“add”
data-add-to-cart
class=“btn btn–full add-to-cart{% if enable_dynamic_buttons and product.selling_plan_groups.size == 0 %} add-to-cart–secondary{% endif %}”
{% unless current_variant.available %} disabled=“disabled”{% endunless %}>

{{ button_text }}

This ensures that the button displays the updated button_text with the price included.

4. Handle Variant Pricing (If Applicable):

If your product has multiple variants with different prices, you’ll need to update the price dynamically based on the selected variant. This requires JavaScript to listen for changes in the variant selection and update the button text accordingly.

Here’s a basic example of how you might implement this:

document.addEventListener(‘DOMContentLoaded’, function() {
const variantSelect = document.querySelector(‘[name=“id”]’);
const addToCartButton = document.querySelector(‘[data-add-to-cart-text]’);

if (variantSelect && addToCartButton) {
variantSelect.addEventListener(‘change’, function() {
const selectedOption = variantSelect.options[variantSelect.selectedIndex];
const price = selectedOption.getAttribute(‘data-price’);
addToCartButton.textContent = Add to Cart - ${price};
});
}
});

In this example, each in your variant element should have a data-price attribute containing the variant’s price. If you need further assistance or a more tailored solution, feel free to share your store’s collaboration code, and I can provide more specific guidance. Thanks Rajat https://www.rajatweb.dev/