Trying to add quick add to my debut theme

Shopify Discussion
1

I want an easy way for customers to be able to add a product to cart without having to go through to the product page. I have been trying to get it to work but am having difficulties. I am using the debut theme

1 Like
2

@brodyjf523 thanks for post can you please check your theme customization setting if allow by default usage its if not please try below code

From your Shopify Admin, go to Online Store > Themes.
Click Actions > Edit Code.
can you please provide product card file code so i will check and update if are able to code try below
also please share store url
add below html your product card code

Add below JavaScript your theme.js bottom of the file

// Quick Add functionality
document.querySelectorAll('.quick-add-btn').forEach(function(button) {
    button.addEventListener('click', function() {
        var productId = this.getAttribute('data-product-id');
        
        // Create the request payload
        var data = {
            id: productId,
            quantity: 1
        };

        // Add the product to the cart using AJAX
        fetch('/cart/add.js', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            alert('Product added to cart!');
            // Optionally, update the cart UI or show the cart overlay
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });
});

theme.scss.liquid css code

.quick-add-btn {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.quick-add-btn:hover {
    background-color: #333;
}