Replace cart button in shopify theme

Shopify Apps
1

image
image738×817 52.3 KB

here i want to replace these cart button with my own functionality using shopify app

like when user click to this button i want to show my own other functionality but i don’t want to change this icon and item count bubble

2

Add a script to your theme’s theme.liquid (or via your app) that selects the existing cart button element and attaches a click handler that calls event.preventDefault() and triggers your custom functionality instead of the default cart behavior. Shopify’s docs state: “Use preventDefault() to stop the browser’s default action”

3

Hi @excelFR

@Moid.space is right. You cannot replace the button server-side, but you can intercept the click using JavaScript.

Add this script to your app embed. It finds the cart link, stops the browser from going to the cart page, and runs your custom code instead

document.addEventListener('DOMContentLoaded', function() {
  // Target the cart button by its link
  const cartButtons = document.querySelectorAll('a[href="/cart"]');

  cartButtons.forEach(button => {
    button.addEventListener('click', function(event) {
      event.preventDefault(); // Stops navigation to the cart page
      event.stopPropagation();

      // Your custom logic goes here (e.g., open your modal)
      console.log("Custom cart action triggered");
    });
  });
});

Just add your own logic there and that should do the trick

4

thank you @PieLab i tried code and it worked but not in all theme and it also block the item count bubble

im developing the app for cart i want to add my cart instead of default cart so when user click on cart icon or add to cart button i don’t want to prevent the functionality i just want to intercept the cart and show my own cart and it should work with all theme

but i don’t know which functionality i should use because in shopify documentation i didn’t find any help

5

How to do it

1. Give the cart button an ID

Find the cart button in your header file and add:

id=“custom-cart-btn”

Example:

(Do NOT remove the bubble code.)

2. Block the default cart and run your own code

Add this near </body> in theme.liquid:

3. In your app

Listen for this:

window.addEventListener(“open-my-app”, () => {
// open your popup or panel
});

Hope this helps! Happy to assist further if needed.