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

## Default blocks

***

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="product-content-blocks/description">Show as collapsible row</a></td><td></td><td><a href="product-content-blocks/description">description</a></td></tr><tr><td><strong>Price</strong></td><td><p><a href="price#show-discounts">Show discounts</a></p><p><a href="price#show-sale-and-sold-out-badges">Sale and sold out badges</a><br><a href="price#shop-pay-instalments-banner">Shop Pay Instalments</a></p></td><td></td><td><a href="product-content-blocks/price">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="../variant-options#variant-selector-style">Choose selector style</a></p><p><a href="../products/swatches">Show swatches</a></p><p><a href="variant-options/info-popup">Add info popup</a> (product guide)</p></td><td><a href="variant-options">variant-options</a></td></tr><tr><td><strong>Buy buttons</strong></td><td><p><a href="buy-buttons#change-button-style">Choose button style</a></p><p><a href="buy-buttons#dynamic-checkout-button">Show dynamic checkout buttons</a></p><p><a href="buy-buttons#local-pickup-banner">Show pickup availability</a></p></td><td><a href="product-content-blocks/buy-buttons">buy-buttons</a></td></tr></tbody></table>

## Content blocks

***

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>Collapsible row</strong></mark></td><td>Description.</td><td><a href="product-content-blocks/collapsible-row">collapsible-row</a></td></tr><tr><td><mark style="color:blue;"><strong>Complementary products</strong></mark></td><td></td><td><a href="product-content-blocks/complementary-products">complementary-products</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom options</strong></mark></td><td></td><td><a href="product-content-blocks/custom-option">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="product-content-blocks/featured-icon-with-text">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="product-content-blocks/icon-with-text">icon-with-text</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Description.</td><td><a href="product-content-blocks/image-block">image-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Inventory status</strong></mark></td><td></td><td><a href="product-content-blocks/inventory-status">inventory-status</a></td></tr><tr><td><mark style="color:blue;"><strong>Popup</strong></mark></td><td></td><td><a href="product-content-blocks/popup-block">popup-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Product rating</strong></mark></td><td></td><td><a href="product-content-blocks/product-rating">product-rating</a></td></tr><tr><td><mark style="color:blue;"><strong>Share icons</strong></mark></td><td></td><td><a href="product-content-blocks/share-icons">share-icons</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Description.</td><td><a href="product-content-blocks/text-block">text-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom Liquid</strong></mark></td><td></td><td><a href="product-content-blocks/custom-liquid-block">custom-liquid-block</a></td></tr></tbody></table>

### Add layout blocks

***

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

### Divider block

`Click Divider block to find settings`

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

### Spacer block

`Click Spacer block to find settings`

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