Articles on: Troubleshooting

Unsupported checkout button

Experiencing issues with MinCart not detecting certain checkout buttons? Here's how to ensure seamless functionality by manually setting a Custom Checkout Selector.


Table of Contents


  1. Overview
  2. The Issue
  3. How to Fix
  4. Troubleshooting


Overview


MinCart is designed to automatically recognize common checkout buttons. However, it might fail to identify checkout buttons that come from third-party cart drawer apps or unique theme customizations.


The Issue


By default, MinCart is equipped to detect standard checkout buttons. The problem may arise when you have:


  • A cart drawer app installed
  • A checkout button injected by an app
  • A unique checkout button customization


In such scenarios, MinCart might not detect the checkout button.


How to Fix


If you're facing this issue, you can manually specify which checkout button MinCart should recognize. Here's how:


  1. Navigate to Theme Customization: Open the customization interface for your current theme.
  2. Locate App Embed: On the left sidebar, you'll see an "App Embed" icon. Click on it.
  3. Select MinCart Main Script: A list of embedded apps will appear. Select the "MinCart Main Script" embed.
  4. Set Custom Checkout Selector: You'll find a field named "Custom Checkout Selector". Enter the CSS selector that uniquely identifies your custom checkout button. If you are unsure what to put here, our support will gladly help you with this.



By following these steps, you'll be guiding MinCart to recognize your unique checkout button through the specific CSS selector.


To find the code that uniquely identifies your custom checkout button on a Shopify store, follow these steps:


Tip: When you see class, then the custom selector should be: ".satcb-cs-checkout-btn", class becomes a dot. If it was id="satcb-cs-checkout-btn", then the selector would have been "#satcb-cs-checkout-btn", id becomes an hashtag.

Method 1: Use Chrome Developer Tools (Inspect Element)


  1. Open your Shopify store in Google Chrome (or any browser with developer tools).
  2. Right-click on the custom checkout button and select Inspect.
  3. In the Elements tab, look for the button’s HTML and class/id attributes.
  4. Identify a unique selector, such as:
  • id="custom-checkout-button"
  • class="custom-checkout-btn"
  • A data-* attribute like data-custom="checkout"
  1. If the button is dynamically generated, look under JavaScript scripts for event listeners.


Method 2: Search in Shopify Theme Code


  1. In your Shopify Admin, go to Online Store > Themes.
  2. Click Edit Code for your active theme.
  3. In the Search bar, look for:
  • checkout.liquid (for Shopify Plus stores)
  • cart.liquid
  • button elements in theme.js or custom.js
  1. Use Ctrl + F to search for checkout, button, or specific CSS classes.


Method 3: Check for JavaScript Event Listeners


  1. Open DevTools ( F12 in Chrome).
  2. Go to Console and enter:
document.querySelectorAll('button')

  1. Look for any buttons related to checkout.
  2. You can also check event listeners with:
getEventListeners(document.querySelector('.custom-checkout-btn'))

(Replace .custom-checkout-btn with the actual class or ID.)


Method 4: Look for App-Injected Elements


If your custom checkout button is added via an app:


  1. Go to Apps in Shopify Admin.
  2. Look for any apps that modify the checkout/cart.
  3. Check Script Tags under Settings > Custom Scripts.


Troubleshooting


If the problem persists:

  • Double-check the CSS selector you've entered.
  • Reach out to our support for further assistance.

Updated on: 20/03/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!