> For the complete documentation index, see [llms.txt](https://help.brickspacelab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.brickspacelab.com/slab/content/sections/product.md).

# Product

### Section overview

The main product section is the core container for product template content. It initializes product state, renders product-related blocks, and provides shared controls for spacing, colors, borders, and visibility.

#### Common use cases

* Building the default product detail page layout.
* Combining media, options, pricing, and purchase controls in one section.
* Applying page-level background and spacing styles for product templates.
* Controlling desktop and mobile visibility from section settings.

#### Usage tips

* Always select a product resource before finalizing layout and content.
* Keep spacing and gap settings balanced so buy actions remain above the fold.
* Use background media sparingly to avoid reducing product content readability.
* Test variant, quantity, and purchase flows after block reordering.

### Section settings

| Setting                          | Description                                                                |
| -------------------------------- | -------------------------------------------------------------------------- |
| Product                          | Selects the product resource used by this section.                         |
| Enable default variant           | Preselects a default variant on load.                                      |
| Enable background image or video | Turns on background media rendering for the section.                       |
| Image background desktop         | Background image used on desktop.                                          |
| Image background mobile          | Optional background image override for mobile.                             |
| Video background                 | Optional background video source.                                          |
| Show video on mobile             | Enables background video playback on mobile devices.                       |
| Show entire image                | Displays full image rather than cropping to fill.                          |
| Top spacing                      | Adds top padding to the section container.                                 |
| Bottom spacing                   | Adds bottom padding to the section container.                              |
| Minimum height                   | Sets a minimum section height.                                             |
| Gap size                         | Controls spacing between child layout elements.                            |
| Color scheme                     | Sets section background and text color treatment.                          |
| Color border                     | Sets section border color style.                                           |
| Border position                  | Controls where borders appear.                                             |
| Vertical alignment               | Aligns content vertically within the section.                              |
| Margin                           | Controls the product section's desktop horizontal margin.                  |
| Enable mobile margin             | Reveals a separate mobile margin control when advanced settings are shown. |
| Mobile margin                    | Controls the product section's mobile horizontal margin when enabled.      |
| Enable header overlap            | Allows section to overlap the header when enabled globally.                |
| Scroll snap align                | Applies scroll snap alignment when enabled globally.                       |
| Visibility                       | Controls device visibility (all, mobile, or desktop).                      |

### Block settings

The section supports product-specific blocks plus theme and app blocks. Common product blocks include:

* `product-media`
* `product-options`
* `product-price`
* `product-buy`
* `product-badges`
* `product-swatches`
* `shop-pay-installments`


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.brickspacelab.com/slab/content/sections/product.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.