# Product quick buy

<figure><img src="/files/3wk91h8iucJ3y2rmzGOY" alt=""><figcaption></figcaption></figure>

## Overview

A quick buy button block for product pages that allows customers to add a product to their cart or open a quick buy modal without navigating to the product detail page. Automatically handles single-variant products by adding them directly to the cart, and multi-variant products by opening a quick buy modal for variant selection.

## Common use cases

* Use on collection pages or featured product sections for streamlined shopping
* Enable dynamic label for custom button text based on product state (e.g., "Pre-order")
* Configure button size and color to match your theme's design system
* Use full width option for prominent call-to-action buttons
* Consider alignment settings based on surrounding content layout

## Block settings

### General

| Setting                | Description                 | Options                   |
| ---------------------- | --------------------------- | ------------------------- |
| Show advanced settings | Reveals visibility settings | Checkbox (default: false) |

### Content

| Setting              | Description                                                | Options                                                                 |
| -------------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------- |
| Product              | Select the product to display quick buy button for         | Product picker                                                          |
| Dynamic label        | Custom button text when dynamic label is enabled           | <p>Rich text input<br><br>Visible when enable dynamic label is true</p> |
| Enable dynamic label | Allows custom button text instead of default "Add to Cart" | Checkbox (default: false)                                               |

### Spacing

| Setting                   | Description                               | Options                   |
| ------------------------- | ----------------------------------------- | ------------------------- |
| Enable internal padding   | Adds internal padding to the button       | Checkbox (default: true)  |
| Enable horizontal padding | Adds horizontal padding around the button | Checkbox (default: false) |
| Enable top padding        | Adds top padding around the button        | Checkbox (default: false) |
| Enable bottom padding     | Adds bottom padding around the button     | Checkbox (default: false) |

### Color

| Setting      | Description                      | Options                                                                                                                                                   |
| ------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Button color | Controls the button color scheme | <p>• Primary<br>• Secondary (default)<br>• Tertiary<br>• Neutral<br>• Plain<br>• Outline<br>• Inverted outline<br>• Blur<br>• Link<br>• Inverted link</p> |

### Style

| Setting     | Description              | Options                                                            |
| ----------- | ------------------------ | ------------------------------------------------------------------ |
| Button size | Controls the button size | <p>• Extra small<br>• Small (default)<br>• Standard<br>• Large</p> |

### Layout

| Setting              | Description                                           | Options                                                                                       |
| -------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| Horizontal alignment | Controls horizontal alignment of the button           | <p>• Left (default)<br>• Center<br>• Right<br><br>Visible when enable full width is false</p> |
| Enable full width    | Makes the button span the full width of its 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> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/slab/content/blocks/products/quick-buy-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.