This guide will help Shopify merchants resolve the issue of having two checkout buttons on their store. By following these steps, you can remove the extra checkout button and provide an alternative option, such as a link, as shown in the reference image.

Steps to Fix the Two Checkout Button Issue


1. Access Theme Customization Settings

  • Navigate to your Shopify Admin Panel.

  • Click on the Online Store section.

  • Select Themes and click on Customize.


2. Reproduce the Issue in Cart

  • Add any product to the cart by clicking on the Add to Cart button.

  • Open the Cart section.

  • If you see two checkout buttons as shown in the reference image, proceed with the next steps.


3. Ensure ButtonApp is in the Subtotal Section

  • The checkout button should be part of the Subtotal section and not a separate app.

  • If it is a separate section, simply delete that section and add it below the checkout button by hovering over the checkout button.


4. Customize the Checkout Button


  • Click on App Embed settings.

  • Locate and click on SSP - Widget.

  • Enable the first switch to add a link-type button below the checkout button labeled as “Checkout without shipping protection”.

  • Customize further options like button text, color, and styling as needed.


5. Hide the Extra Shopify Checkout Button


  • Go back to the Subtotal section.

  • Click on the Hide button for the Shopify default checkout button.

  • Ensure that any tracking applied to the default Shopify checkout button is updated to the new button.


6. Remove Two Checkout Buttons from the Pop-Up Widget

To remove the extra checkout button from the pop-up widget (which appears when a customer clicks Add to Cart), follow these steps:

  • Click on Edit Theme Code in the Online Store > Theme > Edit Code section.

  • Locate and open the theme.liquid file.

  • Scroll down to the bottom and before the closing </body> tag, insert the following custom CSS code:

<style>
    .cart-notification__links button[name="checkout"]{
    display: none !important;
    }
    button[type="button"].link.button-label{
    display: none !important;
    }
</style>

  • Click Save to apply the changes.


By following these steps, you can successfully resolve the two checkout button issue and ensure a seamless checkout experience for your customers.

For any issues with setup or customization, feel free to reach out to our support team at fd-ticket@lucentinnovation.com.