Skip to main content

Advanced Buy Button

Overview​

This Expansion Block provides a powerful way to one or more products to the cart from anywhere on your website, bypassing the theme's cart drawer for a direct checkout or cart experience. This block is particularly useful for creating bundle offers, gift sets, or any scenario where you want customers to purchase multiple items together.

Using this Block​

To use this block, add it to any section in your theme and configure the variant IDs you want to include. The block supports both single quantities and custom quantities for each variant.

Variant ID Format​

The block accepts variant IDs in two formats:

Simple format (quantity of 1): If you are only adding 1 unit of each variant, just enter a comma separated list of variants:

999,888,777

This would add:

  • 1 of variant 999
  • 1 of variant 888
  • 1 of variant 777

Quantity format (custom quantities): If you would like to add more than 1 unit of each variant, you can use the following format:

999:2,888:4,777:3

This would add:

  • 2 of variant 999
  • 4 of variant 888
  • 3 of variant 777

Blended format: You can have a mix of single and multiple variants too:

999:2,888,777:2

This would add:

  • 2 of variant 999
  • 1 of variant 888
  • 2 of variant 777

How it works​

Instead of adding items to cart via Shopify's cart Ajax API, this block uses a direct form submission. When customers click the button, the form submits directly to Shopify's /cart/add endpoint and redirects to either the cart page or checkout, depending on your settings.

While you won't see your theme's cart drawer or notification, this method ensures a rock-solid, predictable experience that works reliably regardless of the way your theme is configured. If you need a solution that triggers your theme's cart drawer or other JavaScript interactions, we recommend working with a developer directly for a custom build that can be tailored to your specific theme and requirements.

If you are concerned about not loading your cart drawer but not interested in a custom build on, perhaps you should consider switching to a cart page instead.

Cart pages are still great​

In recent years, the cart drawer has become a staple of the Shopify ecosystem. Store builders have progressively crammed more and more features into the drawer in the hopes of increasing conversions, and most cart drawers are now extremely busy and cluttered. The full-screen cart page often provides a better user experience with more space for product details, clearer pricing breakdowns, and prominent call-to-action buttons—elements that are often cramped in cart drawer interfaces. While cart drawers can feel modern, the cart page's spacious layout often delivers better results.

Informing users about what they are adding​

It's really important when using this block that you clearly indicate to users what they are adding to cart. Either customize the button text to make it clear or provide information next to the button. We strongly recommend making the button's actions clear to your users.

Clear Cart Considerations​

We've provided an option to clear the cart before buying the new item(s). Since the buy now button skips the cart page, this is a helpful tool to ensure that people only checkout with the relevant items. This setting is optional.

Testing​

Shopify's theme editor does not support non-javascript cart actions for a number of reasons. You can build, configure and place this block in your theme but to test the functionality, you'll need to preview your theme outside of the theme editor.