> 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="/eclipse/product-pages/product-content-blocks/description.md">Show as collapsible row</a></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/description.md">Description</a></td></tr><tr><td><strong>Price</strong></td><td><p><a href="/eclipse/product-pages/product-content-blocks/price.md#show-discounts">Show discounts</a></p><p><a href="/eclipse/product-pages/product-content-blocks/price.md#show-sale-and-sold-out-badges">Sale and sold out badges</a><br><a href="/eclipse/product-pages/product-content-blocks/price.md#shop-pay-instalments-banner">Shop Pay Instalments</a></p></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/price.md">Price</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="/eclipse/product-pages/variant-options.md#variant-selector-style">Choose selector style</a></p><p><a href="/eclipse/products/swatches.md">Show swatches</a></p><p><a href="/eclipse/product-pages/variant-options/info-popup.md">Add info popup</a> (product guide)</p></td><td><a href="/eclipse/product-pages/variant-options.md">Variant selector</a></td></tr><tr><td><strong>Buy buttons</strong></td><td><p><a href="/eclipse/product-pages/product-content-blocks/buy-buttons.md#change-button-style">Choose button style</a></p><p><a href="/eclipse/product-pages/product-content-blocks/buy-buttons.md#dynamic-checkout-button">Show dynamic checkout buttons</a></p><p><a href="/eclipse/product-pages/product-content-blocks/buy-buttons.md#local-pickup-banner">Show pickup availability</a></p></td><td><a href="/eclipse/product-pages/product-content-blocks/buy-buttons.md">Buy buttons</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="/eclipse/product-pages/product-content-blocks/badges.md">Badges</a></td></tr><tr><td><mark style="color:blue;"><strong>Collapsible row</strong></mark></td><td>Description.</td><td><a href="/eclipse/product-pages/product-content-blocks/collapsible-row.md">Collapsible row</a></td></tr><tr><td><mark style="color:blue;"><strong>Complementary products</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/complementary-products.md">Complementary products</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom options</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/custom-option.md">Custom option</a></td></tr><tr><td><mark style="color:blue;"><strong>Featured icon with text</strong></mark></td><td>Description.</td><td><a href="/eclipse/product-pages/product-content-blocks/featured-icon-with-text.md">Featured icon with text</a></td></tr><tr><td><mark style="color:blue;"><strong>Icon with text</strong></mark></td><td>Description.</td><td><a href="/eclipse/product-pages/product-content-blocks/icon-with-text.md">Icon with text</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Description.</td><td><a href="/eclipse/product-pages/product-content-blocks/image-block.md">Image block</a></td></tr><tr><td><mark style="color:blue;"><strong>Inventory status</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/inventory-status.md">Inventory status</a></td></tr><tr><td><mark style="color:blue;"><strong>Popup</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/popup-block.md">Popup block</a></td></tr><tr><td><mark style="color:blue;"><strong>Product rating</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/product-rating.md">Product rating</a></td></tr><tr><td><mark style="color:blue;"><strong>Share icons</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/share-icons.md">Share icons</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Description.</td><td><a href="/eclipse/product-pages/product-content-blocks/text-block.md">Text block</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom Liquid</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/custom-liquid-block.md">Custom Liquid</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.

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