# Default blocks

The **Product overview** section includes default blocks. These blocks include essential components like the product title, price, description, variant and quantity selectors, buy buttons, and share icons.

> See the [product page template guide](https://help.fluorescent.co/stiletto/product-pages/product-page-blocks) to find featured product blocks and product page layout settings.

## Product header

***

The **Product header** block displays basic details of your product entered in your Shopify admin settings, including the title and pricing.

{% hint style="success" %}
This block displays product details controlled by the Shopify admin. See [Shopify's product guide](https://help.shopify.com/en/manual/products/details) to learn more.
{% endhint %}

`Click Product header block to find settings`

<table><thead><tr><th width="247">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show divider</mark></td><td>Show border line beneath the product details.</td></tr><tr><td><mark style="color:blue;">Show vendor</mark></td><td>Show the vendor name beneath the product title.</td></tr><tr><td><mark style="color:blue;">Show SKU</mark></td><td>Show the "Stock-keeping unit" (SKU) number of the product.</td></tr><tr><td><mark style="color:blue;">Show discount</mark></td><td>Show discount amount as set up in the 'compare at price' setting in the Shopify admin.</td></tr><tr><td><mark style="color:blue;">Discount format</mark></td><td>Choose to display discounts by percentage or currency amount.</td></tr><tr><td><mark style="color:blue;">Show product rating</mark></td><td>Show star rating from your product rating app. See product review guide to learn more.</td></tr><tr><td><mark style="color:blue;">Show sale badge</mark></td><td>Show sale label for products that have a Compare at price set in your Shopify admin.</td></tr><tr><td><mark style="color:blue;">Show custom badges</mark></td><td>Show custom badges added to your theme settings.<br><br>Learn more about <a href="../../products/product-badges">Product badges</a>.</td></tr></tbody></table>

## **Description**

***

The **Description** block displays the product description as added in your Shopify admin.

You can change the **Style** to display the description as a **Paragraph**, **Open accordion**, or **Close accordion**. Click on the **Description** block to find the settings.

{% hint style="success" %}
Product descriptions are added to the Shopify admin. Themes cannot modify product descriptions. See [Shopify's product guide](https://help.shopify.com/en/manual/products/details#title-and-description) to learn more.
{% endhint %}

`Click Description block to find settings`

<table><thead><tr><th width="201">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Title</mark></td><td>Enter text to display as a heading. (Default: "Description")</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the text size to Small, Regular, or Large.</td></tr><tr><td><mark style="color:blue;">Column</mark></td><td>Display the description in the Left or Right column.</td></tr><tr><td><mark style="color:blue;">Display as collapsible row</mark></td><td>Show an expandable title that reveals the description when clicked.</td></tr><tr><td><mark style="color:blue;">Expand by default</mark></td><td>Display the collapsible row as open with the description revealed.</td></tr></tbody></table>

## **Variant selector**

***

The **Variant selector** block displays available product options (e.g. Size or Material) with selectable variants.

Click on the variant selector block to find options for:

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="../variant-options/variant-swatches"><strong>Swatches</strong></a></td><td>Display variant options as visual buttons.</td><td><a href="../variant-options/variant-swatches">variant-swatches</a></td></tr><tr><td><a href="../variant-options/variant-chips"><strong>Chips</strong></a></td><td>Display variant options as buttons.</td><td><a href="../variant-options/variant-chips">variant-chips</a></td></tr><tr><td><a href="information-popup"><strong>Information popup</strong></a></td><td>Add link that opens product details, like a size guide.</td><td><a href="information-popup">information-popup</a></td></tr><tr><td><a href="../variant-options/sibling-product-swatches"><strong>Sibling product swatches</strong></a></td><td>Display related products as variant swatches.</td><td><a href="../variant-options/sibling-product-swatches">sibling-product-swatches</a></td></tr></tbody></table>

{% hint style="success" %}
Product options and variants are a Shopify feature controlled in the admin. See [Shopify's Variants manual](https://help.shopify.com/en/manual/products/variants) to learn more.
{% endhint %}

## **Quantity selector**

***

The **Quantity selector** lets customers add more than one of the product to the cart at one time.

Click on the **Quantity selector** block to choose whether to show the "Quantity" label.

## **Buy buttons**

***

The **Buy button** block shows the "Add to cart" button with an optional dynamic checkout button. A Local pickup banner automatically appears below the buy buttons when local pickup is set up in your Shopify admin.

### **Change button label**

The add-to-cart button has the default text "Add to bag". You can customize this text using the Default theme content editor. In your theme editor or dashboard, click **Actions** (**`...`**) > **Edit default theme content**. Search this text to replace it with your own. Click **Save**.

> Learn more about [editing default theme content](https://help.fluorescent.co/stiletto/general/adapting-your-theme/edit-default-theme-content).

## Sticky add-to-cart bar

***

You can show a the **Sticky add-to-cart bar** to allow customers can add your product directly to their cart anywhere on the product page. When the product form's add-to-cart button is not visible, the sticky bar appears at the bottom of the page with an add-to-cart button.

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FfbK33iT0n2uKNneQNeu9%2Fproduct-sticky-atc.jpeg?alt=media&#x26;token=19682398-36ef-4ccf-83ef-fd169e51055f" alt="" width="563"><figcaption></figcaption></figure>

The sticky bar displays the product title, price, image, and variant. Next to the variant, visitors can click the 'Change' link to jump to the variant selectors in the product form.

* Click the **Buy button** block to enable the sticky add-to-cart bar.
* Choose to display a **border** at the top of the sticky bar. Select on of 4 **Separator styles**, or select **No border**.

## **Dynamic checkout button**

***

The **Dynamic checkout button** lets customers quickly buy the product they're viewing with a "Buy it now" button that skips directly to the cart or a branded button with the customer's preferred payment method.

To enable this option, click on the **Buy buttons** block to access its settings and check the **Show dynamic checkout buttons** checkbox.

{% hint style="success" %}
The Dynamic checkout button is a Shopify feature. The theme includes an option to enable the dynamic checkout button, but settings, icons, and functionality are controlled by Shopify. See Shopify's [Dynamic checkout button guide here](https://help.shopify.com/en/manual/online-store/dynamic-checkout).
{% endhint %}

## **Local pickup banner**

***

If you've set up local pickup in your Shopify admin, the theme automatically displays a banner below the buy buttons that tells customers whether the product is available at your location.

{% hint style="success" %}
Local pickup is a Shopify feature and is not controlled by the theme. See [Shopify's Local pickup guide](https://help.shopify.com/en/manual/sell-in-person/shopify-pos/order-management/local-pickup-for-online-orders) to learn more.
{% endhint %}

## **Share icons**

***

Display social media icons that let customers share the product on their Facebook, Pinterest, or X (Twitter).

There are no block options. To disable **Share** icons, click on the **Share** block and click **Remove block**.

***

> **Related links**
>
> [Product template](https://help.fluorescent.co/stiletto/product-pages/product-template)\
> [Product page layout](https://help.fluorescent.co/stiletto/product-pages/layout-and-style)\
> [Product overview blocks](https://help.fluorescent.co/stiletto/product-pages/product-page-blocks)