> 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/stiletto/product-pages/product-page-blocks.md).

# Overview blocks

The **Product overview** section contains all the blocks that make up your product form, including product information, variant selectors, and buy buttons. You can rearrange or edit these blocks to change the style and layout of your product pages.

### <mark style="color:$primary;">**Default blocks**</mark>

The default product blocks in the Product overview are the essential components of your product form. They include the **product header, description, variant and quantity selectors, and buy buttons.**

In the default product block settings, you'll find additional theme features like **swatches, chips, and information popups**.

<table data-column-title-hidden data-view="cards"><thead><tr><th>Default blocks (guides)</th><th>Description</th></tr></thead><tbody><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#product-header">Product header</a></td><td>Display title, price, vendor, star rating, and badges.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#description">Description</a></td><td>Display product description as a paragraph or accordion.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#variant-selector">Variant selectors</a></td><td>Display variants of product options. Includes options for <a href="/pages/aQ9sXsgyW6pLVvodyafU">Information popup</a>, <a href="/pages/icEbZO563kl4UGPTX0fD">Variant swatches</a>, and <a href="/pages/q9k1M30HenITCM5k7E0u">Variant chips</a>.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#quantity-selector">Quantity selector</a></td><td>Let customers add more quantities of a product.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#buy-buttons">Buy buttons</a></td><td>Add-to-cart button with optional <a href="/pages/hVucMts5nBJ1FhET209o#sticky-add-to-cart-bar">Sticky Add-to-Cart bar</a> and <a href="/pages/hVucMts5nBJ1FhET209o#dynamic-checkout-button">Dynamic checkout button</a>. Includes <a href="/pages/hVucMts5nBJ1FhET209o#local-pickup-banner">Local pickup banner</a>.</td></tr><tr><td><a href="/pages/hVucMts5nBJ1FhET209o#share-icons">Share icons</a></td><td>Social links for sharing your product page.</td></tr></tbody></table>

### <mark style="color:$primary;">**Feature blocks**</mark>

In the Product overview, the feature product blocks offer added functionality for displaying product information and designing the layout.

Click the links below to find help guides for the feature product blocks.

<table data-column-title-hidden data-view="cards"><thead><tr><th>Features blocks (guides)</th><th>Description</th></tr></thead><tbody><tr><td><a href="/pages/3Xrr1Ra2WJZicN8E90eI">Collapsible row block</a></td><td>Add expandable tabs that reveal more text when clicked.</td></tr><tr><td><a href="/pages/ywqWZXJJjvLxkx9y1jXU">Complementary products</a></td><td>Show customers related products that they can add to the cart.</td></tr><tr><td><a href="/pages/q2ny0jzrI1rmbmyEBcoQ">Custom Liquid</a></td><td>Add block with custom HTML or Liquid</td></tr><tr><td><a href="/pages/dShkAElvCnVj5LfNUVya">Custom options</a></td><td>Let customers add personalized text, notes, or options.</td></tr><tr><td><a href="/pages/CXIE7GQPgAt9bzt53b0P">Image block</a></td><td>Add a featured image block.</td></tr><tr><td><a href="/pages/aQ9sXsgyW6pLVvodyafU">Information popup</a></td><td>Add popup product information (ex. Size guide).</td></tr><tr><td><a href="/pages/Rb8qdoUZf8rfMPY0Thyy">Product labels</a></td><td>Show badges with text label and icon.</td></tr><tr><td><a href="/pages/Gv4517Rg6OOcDjzJI4ML">Product reviews</a></td><td>Show star rating from Shopify product reviews.</td></tr><tr><td><a href="/pages/xMZQW5VHRTXodFIzPpSS">Secure payment</a></td><td>Show security message and payment icons.</td></tr><tr><td>Spacer</td><td>Add space between product blocks.</td></tr><tr><td><a href="/pages/nJua09ODwYBLi2aeNpZL">Stock level indicator</a></td><td>Display stock level bar with 'low inventory' alert.</td></tr><tr><td><a href="/pages/Vn8pZpnzIXn9aCiXvp7l">Text block</a></td><td>Add a short block of text.</td></tr><tr><td><a href="/pages/0LUCnCfs7NLVlwtN5wVh">Text list with icons</a></td><td>Add a list with icons.</td></tr><tr><td><br></td><td></td></tr></tbody></table>

***

> **Related links**
>
> [Product template](/stiletto/product-pages/product-template.md)\
> [Product page layout](/stiletto/product-pages/layout-and-style.md)


---

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

```
GET https://help.fluorescent.co/stiletto/product-pages/product-page-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.
