Add to Cart Button Collection page in Dawn 15.2.0

[CollaredFoxy]

Hi All,

I have a small startup store in a niche market selling handmade lifestyle goods. There's a whole lot that needs tweaking, however I would like to start with adding "Add to cart" buttons to my product collections page.

Eventually, I would also like to add some bundling options, a quote request form and custom search functions based on tags, but that requires time to investigate!

[rajweb]

Hey @CollaredFoxy ,

To add "Add to Cart" buttons to your product collections page, you can follow these steps:

1. Locate the Collection Template:

-In your theme's code editor, look for the collection template file, which may be named collection.liquid, collection-template.liquid, or a similar variant under the "Sections" or "Templates" folder. If you're using a theme that has a custom structure, it might be in a different folder.

2. Modify Product Grid Code:

-Inside the collection template, look for the code that displays each product. This usually involves a loop iterating through the products in the collection.

-Add an "Add to Cart" button within the loop. You can use code like this:

<form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}">
    <button type="submit" class="btn">Add to Cart</button>
</form>

Customize the button's design by adding appropriate classes or styles.

3. Update CSS for Button Styling:

Adjust the styling of the button to match your theme. You can add CSS in the theme’s stylesheet to ensure it looks consistent with your store’s brandin

4. Enable JavaScript for Cart Updates:

-To make the button work seamlessly without a page refresh, you can implement JavaScript to update the cart asynchronously. Shopify provides AJAX APIs that make this easy.

-Add a JavaScript snippet to handle the "Add to Cart" functionality without reloading the page. Here's a simple example:

document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', function(event) {
        event.preventDefault();
        fetch('/cart/add.js', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: this.dataset.variantId, quantity: 1 })
        }).then(response => response.json()).then(data => {
            alert('Added to cart!');
        });
    });
});

Let me know if you need more detailed steps for any part of this setup!

If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma

[CollaredFoxy]

Thank you Rajweb. I don't have that particular template file and I'm having difficulty locating the produce code loop. Any ideas?

[CollaredFoxy]

[rajweb]

@CollaredFoxy ,

Since you don’t have a collection.liquid template or can’t locate the product loop code directly, it's likely that your theme uses a JSON-based structure to configure sections and layouts, which means the actual code for rendering products may reside in a section file, like  main-collection-product-grid.liquid .

Here’s how you can proceed:

1. Identify the Section File for the Product Grid:

-Based on your screenshot, it seems like the  main-collection-product-grid.liquid file is handling the product grid display on the collection page.

-Open section/main-collection-product-grid.liquid and look for code that iterates over collection.products. It may look something like this:

{% for product in collection.products %}
  <!-- Product display code here -->
{% endfor %}

2. Add "Add to Cart" Button in the Product Loop:

Within this loop, insert an "Add to Cart" form similar to the one below. This will allow customers to add items to their cart directly from the collection page:

<form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}">
    <button type="submit" class="btn">Add to Cart</button>
</form>

This form posts the product’s first variant ID to the cart, so if you have products with multiple variants, further customization might be needed.

3. Customize and Style the Button:

Add CSS styling as needed to ensure the button fits with your theme’s look. You can do this in your main stylesheet or by adding inline styles within the product grid section.

4. Test the Functionality:

Save your changes and test on your store to ensure the "Add to Cart" button works correctly on the collection page.

This setup should allow you to add the "Add to Cart" functionality without needing access to collection.liquid. Let me know if you encounter any issues or if the structure differs.

thanks