# Product buy

<figure><img src="https://3723856256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGnixyIfIYFWroNtVmZo6%2Fuploads%2Fgit-blob-dabecf1cdf48b2c600a65e0173e9bef02bec3fc2%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## Overview

A comprehensive product purchase form block that handles variant selection, quantity input, and cart actions. The block dynamically displays different button states based on product availability and option selection, including "Choose Options", "Sold Out", "Unavailable", and "Add to Cart" states. Supports optional quantity input, dynamic checkout buttons, and real-time price display.

## Common use cases

* Ensure all product options are configured before adding this block
* Use inline layout only when horizontal space is sufficient for both quantity and button
* Enable quantity input for products that customers typically buy in bulk
* Configure appropriate button colors to match your theme's design system
* Test with products that have multiple variants to ensure proper option selection flow
* Consider enabling dynamic checkout for improved conversion rates

## Block settings

### General

| Setting                | Description                                                 | Options                   |
| ---------------------- | ----------------------------------------------------------- | ------------------------- |
| Show advanced settings | Reveals dynamic label, enable dynamic label, and visibility | Checkbox (default: false) |

### Content

| Setting                 | Description                                                   | Options                                                                                                                                                                                    |
| ----------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Product                 | Select the product to display buy buttons for                 | Product picker                                                                                                                                                                             |
| Dynamic label           | Custom label for the add to cart button (e.g., "Pre-order")   | <p>Rich text input<br><br>Visible when enable dynamic label is true</p><p><br><br>Visible when <strong>Enable dynamic label</strong> and <strong>Show advanced settings</strong> is on</p> |
| Enable dynamic label    | Replaces "Add to cart" with custom label text                 | <p>Checkbox (default: false)<br><br>Visible when <strong>Show advanced settings</strong> is on</p>                                                                                         |
| Enable quantity input   | Displays a quantity selector input field                      | Checkbox (default: false)                                                                                                                                                                  |
| Enable dynamic checkout | Displays dynamic checkout buttons (Shop Pay, Apple Pay, etc.) | Checkbox (default: true)                                                                                                                                                                   |
| Show price              | Displays the product price on the add to cart button          | Checkbox (default: true)                                                                                                                                                                   |
| Show gift card form     | Displays form fields for gift card recipient information      | Checkbox (default: false)                                                                                                                                                                  |

### Spacing

| Setting                   | Description                             | Options                                                                      |
| ------------------------- | --------------------------------------- | ---------------------------------------------------------------------------- |
| Enable horizontal padding | Adds horizontal padding around the form | Checkbox (default: false)                                                    |
| Enable top padding        | Adds top padding around the form        | Checkbox (default: false)                                                    |
| Enable bottom padding     | Adds bottom padding around the form     | Checkbox (default: false)                                                    |
| Gap size                  | Spacing between form elements           | <p>• None<br>• Default (default)<br>• XS<br>• SM<br>• MD<br>• LG<br>• XL</p> |

### Color

| Setting                       | Description                                   | Options                                                                                                                                                   |
| ----------------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Main button color             | Color scheme for the add to cart button       | <p>• Primary (default)<br>• Secondary<br>• Tertiary<br>• Neutral<br>• Plain<br>• Outline<br>• Inverted outline<br>• Blur<br>• Link<br>• Inverted link</p> |
| Disabled button color         | Color scheme for disabled/placeholder buttons | <p>• Primary<br>• Secondary<br>• Tertiary<br>• Neutral<br>• Plain (default)<br>• Outline<br>• Inverted outline<br>• Blur<br>• Link<br>• Inverted link</p> |
| Dynamic checkout button color | Color scheme for dynamic checkout buttons     | <p>• Primary<br>• Secondary<br>• Tertiary<br>• Neutral<br>• Plain (default)</p>                                                                           |

### Style

| Setting        | Description                       | Options                                                                                   |
| -------------- | --------------------------------- | ----------------------------------------------------------------------------------------- |
| Button size    | Controls the size of buttons      | <p>• Extra small<br>• Small<br>• Standard (default)<br>• Large</p>                        |
| Quantity input | Style of the quantity input field | <p>• Default (default)<br>• Minimal<br><br>Visible when enable quantity input is true</p> |

### Layout

| Setting           | Description                                        | Options                                |
| ----------------- | -------------------------------------------------- | -------------------------------------- |
| Layout            | Controls the layout of quantity and button         | <p>• Stacked (default)<br>• Inline</p> |
| Enable full width | Makes buttons span the full width of the container | Checkbox (default: false)              |

### Display

| Setting    | Description                        | Options                                                                                                                            |
| ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Controls when the block is visible | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p> |