Add a “Buy it now” button to product collection page?

Store Design

Topic summary

Request to add a “Buy it now” button on the product collection page in the Dawn theme. The poster already has an “Add to cart” button and wants a second button (on the right) that sends shoppers directly to checkout.

Clarifications:

  • Product collection page: the product listing page where quick actions can appear.
  • “Buy it now”: a button that bypasses the cart and proceeds straight to checkout.

Current status:

  • No responses yet; no implementation details, code, or constraints shared.
  • No decisions or actions taken.

Open questions:

  • Whether the Dawn theme supports this on collection items without custom code or apps.
  • If feasible, what steps (theme settings, code modifications, or an app) are required to enable a checkout-direct button on collection cards.

Discussion remains open with no resolution.

Summarized with AI on January 8. AI used: gpt-5.
1

Hi, can I add a “Buy it now” button to the product collection page for Dawn theme? I have the “Add to cart” enabled but could I add a “Buy it now” button on the right that goes straight to checkout? Thanks

1 Like
2

@greenwichsocial The “Buy it now” (dynamic checkout) button is only supported on product pages, not collection pages, in Dawn and most Shopify themes.

That said, there are a couple of common workarounds:

A developer can add a button on collection items that sends the product straight to checkout, but it usually only works cleanly for products with no variants (or requires extra logic).

Some apps simulate a “Buy now” flow from collections, but they often add scripts and can affect performance.

For most stores, Shopify limits this intentionally because collection pages don’t handle variants, selling plans, or line-item logic very well.

If most of your products are single-variant, a custom solution can make sense. Are your products simple, or do they rely heavily on variants?

3

Thanks, that makes sense. They are mostly single variant.

5

Hi @greenwichsocial

Step 1: Edit the Product Card Snippet

Go to:Online Store → Themes → … → Edit code → Snippets → card-product.liquid

Find the Add to cart button block.

Step 2: Add “Buy it now” Button (Liquid)

Add this below the Add to cart button:

{% assign first_available_variant = product.selected_or_first_available_variant %}

<a
  href="/checkout?variant={{ first_available_variant.id }}&quantity=1"
  class="button button--secondary button--full-width buy-now-button"
>
  Buy it now
</a>

Step 3: Style the Button (Optional but Recommended)

Add to base.css:

.buy-now-button {
  margin-top: 8px;
  background: #000;
  color: #fff;
  border: 1px solid #000;
}

.buy-now-button:hover {
  background: #fff;
  color: #000;
}

Best regards,
Devcoder :laptop:

2 Likes
6

@greenwichsocial

In the Shopify Dawn theme, there is no built-in “Buy it now” button on collection pages, but you can safely add one with a small Liquid + JS change.

Go to
Online Store → Themes → … → Edit code

Open:

snippets/card-product.liquid

Add the Buy It Now button

Find this line (near the bottom):

</div>

Add the following just before the closing product card div:

{% if card_product.available %}
  <button
    class="button button--primary buy-it-now-btn"
    data-variant-id="{{ card_product.selected_or_first_available_variant.id }}">
    Buy it now
  </button>
{% endif %}

Add JavaScript (important)

Open:

layout/theme.liquid

Add this before </body>:

<script>
document.addEventListener('click', function(e) {
  const btn = e.target.closest('.buy-it-now-btn');
  if (!btn) return;

  e.preventDefault();

  const variantId = btn.dataset.variantId;

  fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      id: variantId,
      quantity: 1
    })
  })
  .then(() => {
    window.location.href = '/checkout';
  })
  .catch(err => console.error(err));
});
</script>

Optional CSS styling

Add to:

assets/base.css


.buy-it-now-btn {
  margin-top: 10px;
  width: 100%;
}
7

@greenwichsocial you’re welcome :blush: I’m glad that helped