Disable added to cart popup in Ignite Theme

Technical Q&A
, ,
1

Hi I am using your Ignite Theme and I need assistance with two specific customizations that I cannot achieve through the theme editor settings:

1. Remove “Added to Cart” Popup/Drawer When a customer adds a product to the cart, a popup/drawer currently appears. I want to completely disable this.

Goal: When a user clicks Add to Cart, I only want the cart count number (in the header) to update. I do not want any popup or drawer opening automatically.

Note: I have already checked the theme settings and disabled the Cart Drawer option, but the popup still appears. (I have attached a screenshot of the behavior I want to remove).

2. Add Delivery Date & Time Picker to Cart Page I need to allow customers to select a specific Delivery Date and Time before they proceed to checkout.

Reference: Shopify provides this guide for their themes: Add a delivery date picker to your cart.

Request: Since I am using your third-party theme, could you please help me implement this code (or similar logic) onto my Cart Page so the selected date/time is saved to the order notes?

1000238410
10002384101172×629 67.7 KB

2

If disabling the theme settings does not remove the drawer then definitely something is interfering, some custom code from before or may be app.

And as for the delivery time and date I believe this is possible with line item properties that will get added as extra info along with the order so users see it on the frontend and you see it on the backend as order info.

4

Hi @seo.vibesoft

For the customized code, you can try using this:

<div style="width: 100%; max-width: 300px; margin-bottom: 20px;">
  <p>
    <label for="date">Delivery Date:</label>
    <input id="date" type="date" name="attributes[Delivery Date]" value="{{ cart.attributes['Delivery Date'] }}" style="display:block; width: 100%; padding: 8px; border: 1px solid #ccc;" required />
  </p>
  <p>
    <label for="time">Delivery Time:</label>
    <input id="time" type="time" name="attributes[Delivery Time]" value="{{ cart.attributes['Delivery Time'] }}" style="display:block; width: 100%; padding: 8px; border: 1px solid #ccc;" required />
  </p>
</div>

Hope this helps!

5

Hi @seo.vibesoft

Disable “Added to Cart” popup / drawer (Shopify + Ignite)

Even if Cart Drawer is disabled in theme settings, many modern themes still open it via JavaScript.

Correct Shopify approach

You need to stop the JS event that opens the drawer, not just hide it with CSS.

Option A (recommended – safe JS override)

Add this to assets/global.js or theme.js:

document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('cart:open', (e) => {
    e.preventDefault();
    e.stopImmediatePropagation();
  });
});

If Ignite uses openCartDrawer() or similar, override it:

window.openCartDrawer = function () {
  return false;
};

Result:

  • Cart drawer never opens

  • Cart count still updates

  • No UX flash or popup

Avoid CSS-only hiding — the drawer will still load and cause layout shifts.

Add Delivery Date & Time Picker (Shopify-native, no app)

Shopify natively supports delivery date/time via cart attributes.

Step 1: Add fields to cart form

sections/main-cart-items.liquid

or

sections/cart.liquid

Inside the <form> tag, add:

<div class="cart-delivery">
  <label for="delivery_date">Delivery date</label>
  <input
    type="date"
    id="delivery_date"
    name="attributes[Delivery Date]"
    value="{{ cart.attributes['Delivery Date'] }}"
  >

  <label for="delivery_time">Delivery time</label>
  <input
    type="time"
    id="delivery_time"
    name="attributes[Delivery Time]"
    value="{{ cart.attributes['Delivery Time'] }}"
  >
</div>

Step 2: (Optional) Restrict date selection

Add JS to prevent past dates:

const dateInput = document.getElementById('delivery_date');
if (dateInput) {
  dateInput.min = new Date().toISOString().split('T')[0];
}

Best regards,
Devcoder :laptop:

6

@devcoders the code you shared for open card drawer is not working

document.addEventListener(‘DOMContentLoaded’, () => {

document.addEventListener(‘cart:open’, (e) => {

e.preventDefault();

e.stopImmediatePropagation();

});

});

window.openCartDrawer = function () {

return false;

};