Hi,
I’m using a theme which has a parameter to show dynamic button in product page. When I toggle it off it stops showing the “Buy It Now” button completely. If I toggle it on it’s shows the button with Apple Pay, Paypal etc. brands. I know that’s feature for the Shopify but I want to show “Buy It Now” button without the branding. Is there any way for this case?
Best regards.
Hi @fatihturan ,
According to Shopify’s guide, you can disable those checkout methods in your Payment Settings then only the unbranded button will be displayed. Customers will be redirected to Shopify checkout instead of the cart page, after clicking the button.
I hope this information is helpful for you.
Opinew Team.
Hi @Opinew ,
I know that but I do not want to disable these payment methods. I just want to show checkout button with “Buy It Now” text and when the user clicks on it, it will be redirect to the checkout page.
did you able to set the unbranded button on Shopify?
Did you ever get this resolved, I have the exact same issue/request.
@aminur8400 @Magee Unfortunately, I hadn’t solved the issue at that time. But I don’t know if it is possible to do that now.
@fatihturan No problem, thanks for the update. I’m still having this issue and keep getting pushed to ‘hire an expert’ in order to see if they can sort it. Seems like it should be standard functionality as part of branding your our store. If I get it resolved I’ll let you know!
Hi Fatihturan,
I had to solve this as well and found a way to do it. NOTE: this was done on a Dawn theme and may not work for other themes.
Add the code below inside the {%- if block.settings.show_dynamic_checkout -%} statement to the buy-buttons.liquid file in the snippets section of your code editor.
Buy It Now!
Make sure to do this on a backed-up theme in draft status so you can confirm it is working before putting it live.
Hi Magee,
I had to solve this as well and found a way to do it. NOTE: this was done on a Dawn theme and may not work for other themes.
Add the code below inside the {%- if block.settings.show_dynamic_checkout -%} statement to the buy-buttons.liquid file in the snippets section of your code editor.
Buy It Now!
Make sure to do this on a backed-up theme in draft status so you can confirm it is working before putting it live.
what do you mean inside? delete the original?
Hi A_hs82, Yes, the only thing inside the original block of code should be shown below:
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{% endif %}
The code for {{ form | payment_button }} is contained within the new code in my response above. Paste it inside the if statement (between the “{%- if block.settings.show_dynamic_checkout -%}” and the “{% endif %}” tags)
Sorry to be a bother but could you share a screenshot of your code? I’ve been struggling with this for days. Nobody with card has bought anything from my site so I think the dynamic checkout is hurting me. Thank you so much
Is the “data-testid” supposed to be replace with something else? When I tried your code, the button looked how I wanted it to look, but it was not clickable.
Thanks!
Yeah, I used this code:
{%- if show_dynamic_checkout -%}
Buy It Now!
Thank you so much! That worked perfectly!
Hey guys,
Also did this successfully. You’re theme might be different but this is how I did it:
Online Store → Themes → Edit Code
Locate snippets/buy-buttons.liquid on the sidebar
My last line of code reads:
{%- liquid
if show_dynamic_checkout
echo form | payment_button
endif
-%}
I replaced it with this:
{%- if show_dynamic_checkout -%}
Buy It Now!
Worked for me, good luck!
Hi! I know this is an old post, but I just tried this and got this error: TypeError: Cannot read properties of null (reading ‘click’)
at HTMLButtonElement.onclick (
Any idea why?
Shopify doesn’t support this; you have to use JS.
For Dawn theme:
Go to ‘buy-button’ snippet
search for ‘{{ form | payment_button }}’ and replace it with
‘<button
type=“button”
class=“button button–full-width btn buy-it-now-btn”
data-variant-id=“{{ product.selected_or_first_available_variant.id }}”>
Buy it now
’
After that search for “main-product” section (ctrl + p)
Add this script at the bottom
””
Add this script at the bottom
”<script>
document.addEventListener('DOMContentLoaded', function () {
const productForm = document.querySelector('form[action="/cart/add"]');
if (!productForm) return;
const variantInput = productForm.querySelector('input[name="id"]');
const buyBtn = document.querySelector('.buy-it-now-btn');
if (!variantInput || !buyBtn) return;
buyBtn.dataset.variantId = variantInput.value;
const observer = new MutationObserver(function () {
buyBtn.dataset.variantId = variantInput.value;
});
observer.observe(variantInput, { attributes: true, attributeFilter: ['value'] });
variantInput.addEventListener('change', function () {
buyBtn.dataset.variantId = this.value;
});
});
document.querySelector('.buy-it-now-btn').addEventListener('click', function () {
const variantId = this.dataset.variantId;
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: variantId, quantity: 1 })
})
.then(() => {
window.location.href = '/checkout';
})
.catch(err => console.error('Add to cart failed:', err));
});
</script>"
PSA: Forcing static text “buy it now” DEFEATS THE ENTIRE PURPOSE of the accelerated checkout / buy now buttons.You want purchasing to be as seamless and familiar and fast as possible for customers to buy stuff.
What shows as the buy-button is based on numerous factors.
Don’t muck with it without a really good reason to risk losing money.
The kind of accelerated checkout button that displays to your customers depends on the following factors:
- your payment settings
- whether Shop Promise is active, which will prioritize Shop Pay over other checkouts
- the customer’s browser
- the customer’s device
- the customer’s personal payment history
~ shopify docs on dynamic checkout
If you must have inperformant static “buy now” text just use any old button that then shows the real buy button, hiding the real buy button with CSS till that point.