Trade Theme: How to have both a quantity box and a add to cart button on products in a featred collection

Shopify Discussion
1

Right now, the trade theme featured collection products only have quantity boxes. Is there a way to modify the product quantity box so that it includes both a quantity box (similar to the current one with a plus/minus option) and an ‘add to cart’ button?

2

Hi @mgregg,

Please send me the store password, I will check it soon

3

Hi there!

Hope you’re doing fantastic :slight_smile:

Based on my findings, here’s the solution:

Step 1: Find the Right File

In your Trade theme, you’ll need to locate the file that displays your featured collection products. This is usually one of these files:

  • card-product.liquid (most likely)
  • product-grid.liquid
  • featured-collection.liquid

Step 2: Add the Add to Cart Button

Look for where the quantity selector is displayed and add this code right after it:

<form method="post" action="/cart/add" class="product-form">
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
  <div class="quantity-cart-wrapper">
    <!-- Your existing quantity selector should be here -->
    <button type="submit" class="btn product-form__cart-submit" name="add">
      <span>Add to Cart</span>
    </button>
  </div>
</form>

Step 3: Style It Properly

Add this CSS to make the quantity selector and add to cart button appear side by side:

.quantity-cart-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.quantity-cart-wrapper .quantity-selector {
  flex: 0 0 auto;
}

.quantity-cart-wrapper .btn {
  flex: 1;
  min-width: 120px;
}

Step 4: Make It Work Better

To prevent customers from being redirected to the cart page when they add items, you can add this JavaScript:

document.querySelectorAll('.product-form').forEach(form => {
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: this.querySelector('input[name="id"]').value,
        quantity: this.querySelector('input[name="quantity"]').value || 1
      })
    })
    .then(response => response.json())
    .then(data => {
      // Show success message or update cart drawer
      alert('Item added to cart!');
    });
  });
});

This should give you exactly what you’re looking for - quantity selectors with plus/minus buttons alongside add to cart buttons, making it super easy for customers to purchase directly from your collection pages!

Let me know if you need help finding the specific files in your Trade theme or if you run into any issues!

Cheers!
Shubham | hello@untechnickle.com

4

If you would like to customize the featured collection block, edit the featured-collection. liquid file. Find your quantity box code and give it a form around it with a Add to Cart button. Manage that snippet with Product page reference, to keep same design and features across the website.

5

Hi @mgregg ,
Add the Add to Cart button code Just after the quantity box code,

<button type="button"
  class="quick-add-button"
  data-product-id="{{ product.id }}">
  Add to Cart
</button>

Add below JS in theme.liquid file before closing body tag

<script>
document.querySelectorAll('.quick-add-button').forEach(form => {
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    await fetch('/cart/add.js', {
      method: 'POST',
      body: formData
    });
  });
});
</script>
6

Hi Shubham,

Thanks so much for sending this. I tried to install this on snipitts > card-product.liquid, and while I now see the button on the shop page (https://fjters-qz.myshopify.com/), the quantity box still adds to cart, not the button. Any other suggestions? I’m new to this, so I could have easily added something incorrectly.

I added the style and script to the top of the page here:

{% style %}
.quantity-cart-wrapper {
display: flex;
gap: 10px;
align-items: center;
margin-top: 10px;
}

.quantity-cart-wrapper .quantity-selector {
flex: 0 0 auto;
}

.quantity-cart-wrapper .btn {
flex: 1;
min-width: 120px;
}
{% endstyle %}

And the form code just below card_badge here:

{%- if card_product.available == false -%} {{- 'products.product.sold_out' | t -}} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{- 'products.product.on_sale' | t -}} {%- endif -%}
Add to Cart
7

Hey @mgregg,
In order to make sure that you have Quantity box along with the Add to cart button on the home page featured collection then it requires to do the custom code in theme file. If you could try to paste the code that provided above then you will lost your theme structure. And always be careful while doing these stuff.
If you could share the 4 digits collab with me in the p/m then I can definitely fulfill your requirements.
Waiting to hear back from you.
Thanks

8

Hi @The_ScriptFlow, Sure, but I don’t see a PM here. Can you tell me where that is, or should I email you the 4# collab? I was sure to add comments to all of the code I added in the snippet; luckily, nothing broke, but it didn’t work either. This is a test cart, so if it breaks, I can start over, although I’d prefer not to.

9

Hey @mgregg,

Don’t worry, let us handle this for you - for free. Please email or DM your collaborator code and we’ll send the store access request. Once approved, we’ll start right away.

Thanks,
Shubham | hello@untechnickle.com

10

Click on my profile and then click on message.
And cheers you or on p/m.

11

HI, just sent you an email. Thanks!