# Product overview blocks

The **Product overview** section contains all the blocks that make up your product form, including product information, variant selectors, buy buttons, and additional feature blocks.

<h2 align="center">Default blocks</h2>

***

The **Product overview** consists of essential product information and purchasing options. Click a block to find its settings.

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Title</strong></td><td></td><td></td></tr><tr><td><strong>Vendor</strong></td><td></td><td></td></tr><tr><td><strong>SKU</strong></td><td></td><td></td></tr></tbody></table>

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Description</strong></td><td><a href="/pages/uxw9wBof0eQyNvDNNiEh">Show as collapsible row</a></td><td></td><td><a href="/pages/uxw9wBof0eQyNvDNNiEh">/pages/uxw9wBof0eQyNvDNNiEh</a></td></tr><tr><td><strong>Price</strong></td><td><p><a href="/pages/owNdA6drNyY8S3NShhdG#show-discounts">Show discounts</a></p><p><a href="/pages/owNdA6drNyY8S3NShhdG#show-sale-and-sold-out-badges">Sale and sold out badges</a><br><a href="/pages/owNdA6drNyY8S3NShhdG#shop-pay-instalments-banner">Shop Pay Instalments</a></p></td><td></td><td><a href="/pages/owNdA6drNyY8S3NShhdG">/pages/owNdA6drNyY8S3NShhdG</a></td></tr><tr><td><strong>Quantity selector</strong></td><td>Show or hide quantity label</td><td></td><td></td></tr></tbody></table>

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Variant selector</strong></td><td><p><a href="/pages/5TuK6lgxJb5c1H2WD2FA#variant-selector-style">Choose selector style</a></p><p><a href="/pages/XeP1NCniPgMwEdnnBXop">Show swatches</a></p><p><a href="/pages/4uBlRVxwxgMywTAHMM51">Add info popup</a> (product guide)</p></td><td><a href="/pages/5TuK6lgxJb5c1H2WD2FA">/pages/5TuK6lgxJb5c1H2WD2FA</a></td></tr><tr><td><strong>Buy buttons</strong></td><td><p><a href="/pages/1CS5FY9RBOnUjMR3qRzL#change-button-style">Choose button style</a></p><p><a href="/pages/1CS5FY9RBOnUjMR3qRzL#dynamic-checkout-button">Show dynamic checkout buttons</a></p><p><a href="/pages/1CS5FY9RBOnUjMR3qRzL#local-pickup-banner">Show pickup availability</a></p></td><td><a href="/pages/1CS5FY9RBOnUjMR3qRzL">/pages/1CS5FY9RBOnUjMR3qRzL</a></td></tr></tbody></table>

<h2 align="center">Content blocks</h2>

***

Add more blocks with custom content and features for your product page.

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Badges</strong></mark></td><td></td><td><a href="/pages/ZFD0vQisguZdOKn9q63U">/pages/ZFD0vQisguZdOKn9q63U</a></td></tr><tr><td><mark style="color:blue;"><strong>Collapsible row</strong></mark></td><td>Description.</td><td><a href="/pages/JXwSFrWS5WBrWKjkJiXK">/pages/JXwSFrWS5WBrWKjkJiXK</a></td></tr><tr><td><mark style="color:blue;"><strong>Complementary products</strong></mark></td><td></td><td><a href="/pages/wKfSEZOr3mnW5sKVCczG">/pages/wKfSEZOr3mnW5sKVCczG</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom options</strong></mark></td><td></td><td><a href="/pages/6I0nlgPMeAiZGNJXUWxg">/pages/6I0nlgPMeAiZGNJXUWxg</a></td></tr><tr><td><mark style="color:blue;"><strong>Featured icon with text</strong></mark></td><td>Description.</td><td><a href="/pages/Ug0RI0DCr5i244UFarCz">/pages/Ug0RI0DCr5i244UFarCz</a></td></tr><tr><td><mark style="color:blue;"><strong>Icon with text</strong></mark></td><td>Description.</td><td><a href="/pages/ykErZ4eoIOQjwRT4yOhb">/pages/ykErZ4eoIOQjwRT4yOhb</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Description.</td><td><a href="/pages/g0rogOOuSRCdVEa7prHv">/pages/g0rogOOuSRCdVEa7prHv</a></td></tr><tr><td><mark style="color:blue;"><strong>Inventory status</strong></mark></td><td></td><td><a href="/pages/7TyZyf4lqbCZOs5nL5kg">/pages/7TyZyf4lqbCZOs5nL5kg</a></td></tr><tr><td><mark style="color:blue;"><strong>Popup</strong></mark></td><td></td><td><a href="/pages/O9dOcoiSiVJSYwEonE0f">/pages/O9dOcoiSiVJSYwEonE0f</a></td></tr><tr><td><mark style="color:blue;"><strong>Product rating</strong></mark></td><td></td><td><a href="/pages/BsPF0lvW6wZkEzLm7NW3">/pages/BsPF0lvW6wZkEzLm7NW3</a></td></tr><tr><td><mark style="color:blue;"><strong>Share icons</strong></mark></td><td></td><td><a href="/pages/ymEUveqYE6JoZvpbGYx6">/pages/ymEUveqYE6JoZvpbGYx6</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Description.</td><td><a href="/pages/ifHgmaXAmEhxBJVGq9If">/pages/ifHgmaXAmEhxBJVGq9If</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom Liquid</strong></mark></td><td></td><td><a href="/pages/zbbxSdlA7oVIq8PjG1Gq">/pages/zbbxSdlA7oVIq8PjG1Gq</a></td></tr></tbody></table>

<h2 align="center">Add layout blocks</h2>

***

Use the **Divider** and **Spacer** blocks to add a border line and extra spacing between blocks.&#x20;

### <mark style="color:$primary;">Divider block</mark>

<sub><mark style="color:$info;">Click Divider block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Bottom padding</mark></td><td>Add spacing below the border line.</td><td><strong>1-50</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 36</mark></td></tr></tbody></table>

### <mark style="color:$primary;">Spacer block</mark>

<sub><mark style="color:$info;">Click Spacer block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Space</mark></td><td>Add spacing between two blocks.</td><td><strong>1-100</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 30</mark></td></tr></tbody></table>


---

# 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.fluorescent.co/eclipse/product-pages/product-content-blocks.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.