Show Dynamic Checkout Button as Always Unbranded

[fatihturan]

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.

[Opinew]

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.

[fatihturan]

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.

[aminur8400]

@fatihturan 

did you able to set the unbranded button on Shopify?

[Magee]

Did you ever get this resolved, I have the exact same issue/request.

[fatihturan]

@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.

[Magee]

@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!

[s4n]

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.

<button type="button" class="shopify-payment-button__button shopify-payment-button__button--unbranded" onclick="document.querySelector('[data-testid]').click();">Buy It Now!</button>
<div style="display:none;">
{{ form | payment_button }}
</div>

Make sure to do this on a backed-up theme in draft status so you can confirm it is working before putting it live.

[a_hs82]

what do you mean inside? delete the original?

[s4n]

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)

[a_hs82]

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

[joshuafitz]

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!

[zahra_ahn]

Yeah, I used this code:

{%- if show_dynamic_checkout -%}
<button type="button" class="shopify-payment-button__button shopify-payment-button__button--unbranded" onclick="document.querySelector('[data-testid=sheet-open-button]').click();">Buy It Now!</button>
<div style="display:none;">
{{ form | payment_button }}
</div>
{%- endif -%}

[joshuafitz]

Thank you so much! That worked perfectly!

[talkintees]

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
      -%}
    </div>
  {%- endform -%}
</div> 

I replaced it with this:

{%- if show_dynamic_checkout -%}

<button type="button" class="shopify-payment-button__button shopify-payment-button__button--unbranded" onclick="document.querySelector('[data-testid=sheet-open-button]').click();">Buy It Now!</button>
<div style="display:none;">
{{ form | payment_button }}
</div>
  {%- endif -%}
      
    </div>
  {%- endform -%}
</div>

-----------

Worked for me, good luck!

[s4n]

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.

<button type="button" class="shopify-payment-button__button shopify-payment-button__button--unbranded" onclick="document.querySelector('[data-testid]').click();">Buy It Now!</button>
<div style="display:none;">
{{ form | payment_button }}
</div>

Make sure to do this on a backed-up theme in draft status so you can confirm it is working before putting it live.