Add an Add to Cart button (without Dynamic Checkout)

[thomasmrgn99]

Hi,

Is there a way to enable the Buy it now button, but without the dynamic checkout feature that changes the button to paypal/etc

I would like it to stay as Buy it now, and redirect to the checkout

Using debut theme,

Appreciate any help, thanks

[Dirk]

Hey, @thomasmrgn99

Great question. To answer this we’ll need to go over how the dynamic checkout feature works. There are two different kinds of dynamic checkout buttons, Unbranded and branded.In addition, The button dynamically changes to reflect the customer’s preferred accelerated checkout method based on their local settings.

Unbranded - These buttons display Buy it now text. When a customer clicks an unbranded button, they skip the cart and go to the Shopify checkout.

Branded - These buttons show the logo for a third-party accelerated checkout method (Shop Pay, Amazon Pay, etc.). When a customer clicks a branded button, they complete their payment with that accelerated checkout method. Only the payment methods that you’ve enabled in your payment settings appear as options to your customers. If you don’t have a third-party accelerated checkout method enabled, then only the unbranded button is displayed.

If you want to only have ‘Buy Now’ you will have to disable the accelerated payment options in your payment settings. That will prevent the feature from being able to recommend a tailored payment solution to your customer. In this case, only the unbranded button will display.

If there is anything else I can help you with, please let me know.

[thomasmrgn99]

Hi @Dirk

Thanks for the reply!

Thanks for explaining the difference. The problem with disabling the express checkouts is I am guessing that it will also disable them at checkout. Is this correct? As currently those payment methods are available at checkout and it is important for me that they stay available. I was hoping there would be an option to add those button through the css or similar without having to disable them.

Thanks

[Dirk]

Exactly. It’s an either-or situation when it comes to dynamic checkout. Me personally, I would opt to keep dynamic checkout on and enable all the accelerated payments. Because it removes the need for you as a business owner to guess how a customer will prefer to pay. The dynamic feature does all the hard work for you by analyzing the visitor browser and offering them tailored payment options based on what they have already signed up for and use.

For example, I may be an avid user of Shop Pay and you could use Google pay. With dynamic checkout, it’s going to offer us both our unique preferred payment methods.

[thomasmrgn99]

@Dirk I agree keeping the dynamic checkout/accelerating payments for the checkout page (as shown in my picture). But I want to display a ‘Buy it now’ button on my product page that does not use the dynamic checkout feature (doesn’t change to Paypal etc).

If anyone can help with a solution through code it would be much appreciated.

[Ninthony]

Can you post your store url? It could be we can just give you some CSS to hide them and leave your buy it now button alone. Please provide your password if it’s password protected, you can locate this in Online Store > Preferences > Password Protection.

[thomasmrgn99]

Hi @Ninthony

It’s https://pawcopets.co.uk/products/calming-comfort-bed

The dynamic checkout button is currently disabled but I can enable it if that will make it easier for you.

Appreciate the help!

[Ninthony]

Yeah if you enable it I’ll be able to inspect and see what I need to hide.

[thomasmrgn99]

Hi @Ninthony

It’s on now

Thx

[Ninthony]

Add this to the bottom of your theme.scss.liquid file in your assets folder:

.shopify-payment-button {
    display: none;
}

[thomasmrgn99]

Hi @Ninthony

Unfortunately did not work

I searched for ‘.shopify-payment-button’ in my theme.css and it already exists a few times. Could this be the issue?

.btn, .shopify-payment-button .shopify-payment-button__button--unbranded {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 10px 20px;
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  font-family: var(--font-stack-header);
  font-style: var(--font-style-header);
  font-weight: var(--font-weight-header);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: normal;
  font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1.1em); }
  @media only screen and (min-width: 750px) {
    .btn, .shopify-payment-button .shopify-payment-button__button--unbranded {
      padding: 11px 22px; } }
  .btn:not([disabled]):hover, .shopify-payment-button .shopify-payment-button__button--unbranded:not([disabled]):hover, .btn:focus, .shopify-payment-button .shopify-payment-button__button--unbranded:focus {
    color: var(--color-btn-primary-text);
    background-color: var(--color-btn-primary-focus); }
  .btn .icon-arrow-right, .shopify-payment-button .shopify-payment-button__button--unbranded .icon-arrow-right,
  .btn .icon-arrow-left,
  .shopify-payment-button .shopify-payment-button__button--unbranded .icon-arrow-left {
    height: 9px; }
  .btn[disabled], .shopify-payment-button .shopify-payment-button__button--unbranded[disabled], .btn[aria-disabled], .shopify-payment-button .shopify-payment-button__button--unbranded[aria-disabled] {
    cursor: default;
    opacity: 0.5; }

It also came up here:

.shopify-payment-button .shopify-payment-button__button--unbranded:hover {
  background-color: var(--color-btn-primary-focus) !important; }

.shopify-payment-button .shopify-payment-button__button--branded {
  border-radius: 2px;
  overflow: hidden; }

.shopify-payment-button .shopify-payment-button__more-options {
  margin: 16px 0 10px;
  font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
  text-decoration: underline; }
  .shopify-payment-button .shopify-payment-button__more-options:hover, .shopify-payment-button .shopify-payment-button__more-options:focus {
    opacity: 0.6; }

Appreciate the help.

[Ninthony]

I don’t really know why that’s not working but I tested on my side with local overrides and you’re right, it isn’t. I added this to the bottom of your theme.js file though, and it is working:

document.addEventListener("DOMContentLoaded", function(){

document.querySelector('.shopify-payment-button').style.display = 'none';

});

[thomasmrgn99]

@Ninthony I added that at the bottom of theme.js, but the buy it now has disappeared now.

Could I give you access to my store’s theme so that you can have a look? If you do not have time, then I appreciate your efforts so far.

Thanks

[Ninthony]

Maybe I’m crazy, but I thought you wanted that button gone. I only saw a paypal button before and an option to see “more payment options” , was there another button that I’m not seeing? Take my code out of theme.js so I can see again, and if you can give me a screenshot of what it is you’re trying to hide that would help.

[thomasmrgn99]

hi @Ninthony

Sorry for the confusion. I thought I explained in my first post haha

I want 2 buttons: my current add to cart + a buy it now button (but that does not work with dynamic checkout).

Exactly like this:

Currently, my option is either to have Only my add to cart, or have add to cart + Dynamic checkout buy it now button. But I want a buy it now that is not influenced by the dynamic checkout (that doesn’t change to Paypal etc). And I can’t just disable completely the Accelerated checkouts because I need to keep them for the checkout page.

So I just want to add a button that redirects to checkout.

Thanks

[Magee]

@thomasmrgn99 did you ever get this resolved? I’m using the craft theme and would like to have a buy it now button, but unbranded and not the dynamic button that adapts to the users habits

[zakhar15]

did you find a solution?