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

# 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>