How to add a quick buy button

[CreatorTim]

Hi, how can I add a feature where, when I hover over a product on the collection page, a quick buy button appears in the bottom-right corner of the image?

I want it exactly like it is on this store: https://tomnoske.store/collections/all-products

Here’s my store: https://1049xn-ya.myshopify.com/collections/all

Thanks a lot,
Tim

[CreatorTim]

No, it is not working. Here’s my store: https://1049xn-ya.myshopify.com/collections/all

And I want it exactly like it is on this store: https://tomnoske.store/collections/all-products

[cartmason]

Hey, is this something you were still looking for a solution on?

[oscprofessional]

@CreatorTim

Hi, how can I add a feature where, when I hover over a product on the collection page, a quick buy button appears in the bottom-right corner of the image?

Hi @CreatorTim ,
Add a Quick Buy button inside the product card

Go to:

Online Store → Themes → Edit code
Open your product-card snippet (example: card-product.liquid)

Paste this inside the card wrapper, after the product image:

<button 
  class="quick-buy-btn" 
  data-product-id="{{ product.id }}"
  data-variant-id="{{ product.selected_or_first_available_variant.id }}"
>
  Quick Buy
</button>

This button stores the variant ID so we can add it to cart.

---

Step 2: Add JS to automatically add to cart

At the bottom of theme.liquid (before </body>), add:

<script>
document.addEventListener('click', function (e) {
  if (e.target.closest('.quick-buy-btn')) {
    const btn = e.target.closest('.quick-buy-btn');
    const variantId = btn.dataset.variantId;

    fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id: variantId,
        quantity: 1
      })
    })
    .then(res => res.json())
    .then(data => {
      // Optional: Open cart drawer if your theme has one
      if (window.Shopify && Shopify.theme && Shopify.theme.cart) {
        document.querySelector('[data-cart-drawer-toggle]')?.click();
      } else {
        alert('Added to cart!');
      }
    })
    .catch(err => console.error(err));
  }
});
</script>

Step 3: Add hover style

In Theme Settings → Custom CSS, add:

.quick-buy-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  opacity: 0;
  transform: translateY(10px);
  transition: .25s ease;
  padding: 8px 14px;
  border-radius: 25px;
  background: #fff;
  border: 1px solid #ddd;
}

.product-card:hover .quick-buy-btn,
.card-product:hover .quick-buy-btn,
.card:hover .quick-buy-btn {
  opacity: 1;
  transform: translateY(0);
}

[Mustafa_Ali]

Step 1 — Add this HTML inside your product card (usually card-product.liquid or product-grid-item.liquid)

Place this right inside the product image wrapper:

<div class="quick-buy-btn">
  <a href="{{ product.url }}?view=quick-buy">Quick Buy</a>
</div>

---

Step 2 — Add this CSS to theme.css

.quick-buy-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #fff;
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 14px;
  display: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.card-wrapper:hover .quick-buy-btn,
.product-card:hover .quick-buy-btn {
  display: block;
}

---

Step 3 — Make sure the image wrapper is positioned correctly

Add this to the product card container:

.card-wrapper,
.product-card {
  position: relative;
}

[SealSubs-Roan]

@CreatorTim

Hi, how can I add a feature where, when I hover over a product on the collection page, a quick buy button appears in the bottom-right corner of the image?

I want it exactly like it is on this store: All Products – tomnoske

Here’s my store: https://1049xn-ya.myshopify.com/collections/all

Thanks a lot,
Tim

Hi @CreatorTim

This can be done by adding a quick-buy button in your product-card snipped and position it on hover with css. In product-card.liquid (or your similar file) place the button inside the container of the product image. Then add CSS like:

.product-card {
position: relative;
}

.quick-buy-btn {
position: absolute;
bottom: 10px;
right: 10px;
opacity: 0;
transition: opacity 0.3s;
}

.product-card:hover .quick-buy-btn {
opacity: 1;
}

This puts the button in the lower right when showing only on hover. The button can also trigger an AJAX add-to-cart action so it works without leaving the collection page.