Skip to content

Product Buy Button

Overview

Section titled “Overview”

Displays the “Add to Cart” button for a single product on product detail pages. This block is part of the product detail page template and allows customers to add products to their cart.

Requirements

Section titled “Requirements”
  • Parent block: Must be inside commerce-connect/product-details-page
  • BigCommerce data: Product variant information, pricing, and inventory status

Configuration

Section titled “Configuration”

Attributes

Section titled “Attributes”
  • settingsId (string) - Settings configuration identifier
    • Default: ""
  • dropzone (string) - Dropzone identifier for block placement
    • Default: ""

Block Support

Section titled “Block Support”
  • HTML editing: Not supported
  • Multiple instances: Not allowed (only one per product page)
  • Spacing: Margin control available

Usage

Section titled “Usage”

Placement

Section titled “Placement”

This block must be placed inside the Single Product template (Product Details Page block). It cannot be used outside of this context.

Common Patterns

Section titled “Common Patterns”

From the demo video script, the buy button is typically placed below the product price and variant selectors:

Product Image Gallery
Product Title
Product Pricing
[Variant Selector if applicable]
→ Product Buy Button ← (Click to add to cart)
Product Description

When a customer clicks the button, the product is added to their BigCommerce cart, and the cart icon in the header updates immediately to reflect the new item count.

Technical Details

Section titled “Technical Details”

CSS Classes

Section titled “CSS Classes”
  • Uses standard block wrapper attributes
  • Dropzone ID applied when specified

Data Source

Section titled “Data Source”

The block uses context provided by the parent Product Details Page block:

  • commerce-connect/singleProductRefinedPayload - Simplified product data
  • commerce-connect/singleProductFullPayload - Complete product information
  • commerce-connect/singleProductSelectedProduct - Currently selected product variant
  • commerce-connect/singleProductDropzones - Available dropzone positions
  • commerce-connect/singleProductIsFetching - Loading state indicator

The add-to-cart action communicates with the BigCommerce backend to update the customer’s cart.

Troubleshooting

Section titled “Troubleshooting”

Button not appearing

Section titled “Button not appearing”
  • Verify the block is inside a Product Details Page parent block
  • Check that the product has available inventory in BigCommerce
  • Ensure the BigCommerce connection is active

Button disabled or inactive

Section titled “Button disabled or inactive”
  • Product may be out of stock in BigCommerce
  • Product may require variant selection before adding to cart
  • Check browser console for JavaScript errors