How to change buy know button text to Checkout

[NotYourBeast]

Fabric theme 

[BiDeal-Discount]

Hi @NotYourBeast 

To change the "Buy Now" button text to "Checkout" on your Shopify store (using themes like Dawn or others), you can do this in a few ways:

Method 1: Change Button Text via Theme Language Editor

1. Go to your Shopify Admin.

2. Navigate to Online Store > Themes.

3. Find your current theme and click Actions > Edit languages.

4. In the search bar, type "Buy Now".

5. Locate the string for the "Buy Now" button text (it might be under Products or Cart).

6. Replace "Buy Now" with "Checkout".

7. Save your changes.

This method changes the text globally without editing code.

Method 2: Edit Button Text in Theme Code (if language editor doesn't work)

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

2. Open the product template or section file where the button is rendered, often sections/main-product.liquid or templates/product.liquid.

3. Search for the button markup containing "Buy Now".

4. Replace the button text with "Checkout".

<button type="submit" class="btn">
  Checkout
</button>

     5. Save and preview your store.

[swym]

Hi @NotYourBeast!

Unfortunately, Shopify doesn’t have a method to directly change the text content of the default accelerated checkout button. However, a workaround for this would be to use a custom script to change the text content dynamically. Here’s a script that changes it to “Checkout”:

{% if template contains 'product' %}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const observer = new MutationObserver(() => {
      const button = document.querySelector('button.shopify-payment-button__button--unbranded');
      if (button && button.innerText.trim() === 'Buy it now') {
        button.innerText = 'Checkout';
        observer.disconnect();
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });
</script>
{% endif %}

You need to add this text to a snippet. For example, you can create a snippet called “update-accelerated-checkout-button-text.liquid”.

After that, add the line {% render update-accelerated-checkout-button-text %} right before the closing </body> tag in your theme.liquid file.

Done? now the button will display with the “Checkout” text on your store as shown in the screenshot below: 

Note: This script is more of a front-end workaround since Shopify doesn’t officially support changing the “Buy it now” text. It only affects the default unbranded button, so options like Apple Pay or Google Pay won’t be changed. There might also be a slight flicker as the button loads and the text updates. It’s working fine as of now, but if Shopify updates the setup, this solution might not work as expected.

I hope this helps! 

If my response helped you, please consider giving it a like (👍) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Regards, 

Matthew from Swym