Prevent product from opening, add to cart only

Store Design
, ,
1

Hi All,

is it at all possible to prevent a ‘product list carousel’ section from opening the product page? Rather id like to just add to cart.

Theme Pitch URL: – Ticket Tech

Screenshot 2025-08-07 at 05.58.29
Screenshot 2025-08-07 at 05.58.291920×793 107 KB

3

Hi @DASCPA ,

Yes, it’s possible! You can prevent the product page from opening and instead trigger “Add to Cart” directly from a product list carousel in Shopify - but it requires a bit of code customization.

  1. Find the product card or carousel snippet
<a href="{{ product.url }}">
  1. Replace or remove the product link
    Remove or disable the link by replacing it with a button:
<button class="quick-add" data-product-id="{{ product.variants.first.id }}">
  Add to Cart
</button>
  1. Add JavaScript to handle the “Add to Cart”
document.querySelectorAll('.quick-add').forEach(button => {
  button.addEventListener('click', function () {
    const productId = this.dataset.productId;
    const qtyInput = this.closest('.product-card').querySelector('.quantity-input');
    const quantity = parseInt(qtyInput.value) || 1;

    fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: productId, quantity })
    })
    .then(res => res.json())
    .then(data => {
      alert('Added to cart!');
    });
  });
});
5

Hi @DASCPA ,

Could you please share with me the password to access your website?