Hide the Buy Now Checkout Button with Product Options

Shopify allows you to offer an express checkout experience via Buy Now buttons on your product pages. This will take your customers directly to the checkout, completely bypassing the add to cart process.

All forms of express checkouts and Buy Now buttons are incompatible with Product Options 2.0.

We highly recommend completely removing this button from your product pages.

Removing the dynamic checkout button will help ensure that Product Options, and other 3rd-party apps, function correctly on your store. 

Most 3rd-party applications that would depend on an add.js call will conflict with this button on product pages only.

  1. From the Shopify admin, select Online Store, then Customize.
  2. Select Customize.
  3. Select the dropdown menu at the top and select Product Pages.

    Select Product Pages Option

  4. Uncheck Show dynamic checkout button.

    Uncheck Show dynamic checkout button Option

  5. Select Save.
  1. From the Shopify admin, select Online Store, then select ActionsEdit code.
  2. Under Layout, select theme.liquid.

    Theme.Liquid within the side bar

  3. Find the closing </head> tag.

    Theme.Liquid closing tag

  4. Paste the following code before the </head> tag:
    {%- if template.name == “product” -%}
    <script>
    if (window.BOLD && BOLD.common && BOLD.common.eventEmitter){
    BOLD.common.eventEmitter.on('BOLD_OPTIONS_option_products_loaded', function(event){
    var optionsDiv = document.querySelector('.bold_options_loaded');
    if(optionsDiv.children.length != 0){
    var buyItNow = document.querySelector('.shopify-payment-button');
    if(buyItNow){ buyItNow.removeChild();
    }
    }
    });
    }
    </script>
    {% endif %}

    With this code, your store will only display the Buy Now buttons on product pages that do not have options loaded.

  5. Select Save.
Was this article helpful?
0 out of 0 found this helpful