> 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-template.md).

# Product template

**Product templates** control the content, layout, and style of your product pages. In the theme editor, you can customize the product media, product overview, and overall page design.

> To modify how products appear in collections and sections, go to the [product listing options](/stiletto/products/product-listings.md) in your theme settings.

{% hint style="success" %}
Products are created and managed in your Shopify admin. To learn more, refer to [Shopify's Products manual](https://help.shopify.com/en/manual/products).
{% endhint %}

<h2 align="center"><strong>Page layout and style</strong></h2>

***

Click the **Product overview** section to find layout and style settings for the product page. You can change the layout style of your product media and enable additional features for navigation.

<details>

<summary>Why is the featured product image blank?</summary>

If you have [media grouping](/stiletto/product-pages/variant-options/media-grouping.md) and the [show featured media first](/stiletto/product-pages/layout-and-style/media-gallery.md#media-options) option enabled, the featured image may be blank if the featured image is not included in a media grouping. Either add the featured image as the first image in each media grouping, or turn off the option to show featured media first(click *Product overview* section to find settings).

</details>

<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="/stiletto/product-pages/layout-and-style/media-gallery.md"><strong>Media gallery</strong></a></td><td>Customize the layout of your product media.</td><td><a href="/stiletto/product-pages/layout-and-style/media-gallery.md">Media gallery</a></td></tr><tr><td><strong>Product details</strong></td><td>You can display product descriptions and details using <a href="/stiletto/product-pages/layout-and-style/product-with-tabs.md">product tabs</a> or position them in the product overview columns.</td><td></td></tr><tr><td><a href="/stiletto/product-pages/layout-and-style/sticky-product-details.md"><strong>Sticky product details</strong></a></td><td>Keep the product details in view when scrolling through the product media.</td><td><a href="/stiletto/product-pages/layout-and-style/sticky-product-details.md">Sticky product details</a></td></tr><tr><td><a href="/stiletto/product-pages/layout-and-style/breadcrumbs.md"><strong>Breadcrumbs</strong></a></td><td>Display links that show customers where they are on your site.</td><td><a href="/stiletto/product-pages/layout-and-style/breadcrumbs.md">Breadcrumbs</a></td></tr><tr><td><a href="/stiletto/product-pages/layout-and-style/navigation-buttons.md"><strong>Navigation buttons</strong></a></td><td>Display 'next' and 'previous' buttons to move through collections.</td><td><a href="/stiletto/product-pages/layout-and-style/navigation-buttons.md">Navigation buttons</a></td></tr></tbody></table>

<h2 align="center"><strong>Product overview blocks</strong></h2>

***

The **Product overview** section contains all the blocks that make up your product form, including product details, variant selectors, buy buttons, and additional feature blocks.

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

The **Product overview** includes blocks for essential product details and purchasing options. Click a block to find its settings.

<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="/stiletto/product-pages/product-page-blocks/default-blocks.md#product-header"><strong>Product header</strong></a></td><td>Display title, price, vendor, star rating, and badges.</td><td><a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#product-header">Default blocks</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#description"><strong>Description</strong></a></td><td>Display product description as a paragraph or accordion.</td><td><a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#description">Default blocks</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#variant-selector"><strong>Variant selectors</strong></a></td><td>Display variants of product options. Includes options for <a href="/stiletto/product-pages/product-page-blocks/information-popup.md">Information popup</a>, <a href="/stiletto/product-pages/variant-options/variant-swatches.md">Variant swatches</a>, and <a href="/stiletto/product-pages/variant-options/variant-chips.md">Variant chips</a>.</td><td><a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#variant-selector">Default blocks</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#quantity-selector"><strong>Quantity selector</strong></a></td><td>Let customers add more quantities of a product.</td><td><a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#quantity-selector">Default blocks</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#buy-buttons"><strong>Buy buttons</strong></a></td><td>Add-to-cart button with optional <a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#sticky-add-to-cart-bar">Sticky Add-to-Cart bar</a> and <a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#dynamic-checkout-button">Dynamic checkout button</a>. Includes <a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#local-pickup-banner">Local pickup banner</a>.</td><td><a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#buy-buttons">Default blocks</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/default-blocks.md#share-icons"><strong>Share icons</strong></a></td><td>Social links for sharing your product page.</td><td></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-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="/stiletto/product-pages/product-page-blocks/collapsible-rows-block.md"><strong>Collapsible row block</strong></a></td><td>Add expandable tabs that reveal more text when clicked.</td><td><a href="/stiletto/product-pages/product-page-blocks/collapsible-rows-block.md">Collapsible rows block</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/complementary-products.md"><strong>Complementary products</strong></a></td><td>Show customers related products that they can add to the cart.</td><td><a href="/stiletto/product-pages/product-page-blocks/complementary-products.md">Complementary products</a></td></tr><tr><td><a href="/stiletto/for-developers/custom-liquid.md"><strong>Custom Liquid</strong></a></td><td>Add block with custom HTML or Liquid</td><td><a href="/stiletto/for-developers/custom-liquid.md">Custom Liquid</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/custom-options.md"><strong>Custom options</strong></a></td><td>Let customers add personalized text, notes, or options.</td><td><a href="/stiletto/product-pages/product-page-blocks/custom-options.md">Custom options</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/image-block.md"><strong>Image block</strong></a></td><td>Add a featured image block.</td><td><a href="/stiletto/product-pages/product-page-blocks/image-block.md">Image block</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/information-popup.md"><strong>Information popup</strong></a></td><td>Add popup product information (ex. Size guide).</td><td><a href="/stiletto/product-pages/product-page-blocks/information-popup.md">Information popup</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/product-labels.md"><strong>Product labels</strong></a></td><td>Show badges with text label and icon.</td><td><a href="/stiletto/product-pages/product-page-blocks/product-labels.md">Product labels</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-sections/product-reviews.md"><strong>Product reviews</strong></a></td><td>Show star rating from Shopify product reviews.</td><td><a href="/stiletto/product-pages/product-page-sections/product-reviews.md">Product reviews</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/secure-payment.md"><strong>Secure payment</strong></a></td><td>Show security message and payment icons.</td><td><a href="/stiletto/product-pages/product-page-blocks/secure-payment.md">Secure payment</a></td></tr><tr><td><strong>Spacer</strong></td><td>Add space between product blocks.</td><td></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/stock-level-indicator.md"><strong>Stock level indicator</strong></a></td><td>Display stock level bar with 'low inventory' alert.</td><td><a href="/stiletto/product-pages/product-page-blocks/stock-level-indicator.md">Stock level indicator</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/text-block.md"><strong>Text block</strong></a></td><td>Add a short block of text.</td><td><a href="/stiletto/product-pages/product-page-blocks/text-block.md">Text block</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-blocks/text-list-with-icons.md"><strong>Text list with icons</strong></a></td><td>Add a list with icons.</td><td><a href="/stiletto/product-pages/product-page-blocks/text-list-with-icons.md">Text list with icons</a></td></tr></tbody></table>

<h2 align="center"><strong>Product page sections</strong></h2>

***

The product page has specialized sections, including **Product recommendations, Recently viewed products,** and **Product reviews**. You can also use any other [theme section](/stiletto/sections/theme-sections.md) to further customize.

<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="/stiletto/product-pages/product-page-sections/product-recommendations.md"><strong>Product recommendations</strong></a></td><td>Display recommend products.</td><td><a href="/stiletto/product-pages/product-page-sections/product-recommendations.md">Product recommendations</a></td></tr><tr><td><a href="/stiletto/sections/theme-sections/recently-viewed-products.md"><strong>Recently viewed products</strong></a></td><td>Display products that the customer has viewed on your site</td><td><a href="/stiletto/sections/theme-sections/recently-viewed-products.md">Recently viewed products</a></td></tr><tr><td><a href="/stiletto/product-pages/product-page-sections/product-reviews.md#add-product-reviews-section"><strong>Product reviews</strong></a></td><td>Display section for customer reviews.</td><td><a href="/stiletto/product-pages/product-page-sections/product-reviews.md">Product reviews</a></td></tr></tbody></table>

<h2 align="center"><strong>Alternate templates</strong></h2>

***

Stiletto includes 3 alternate product page templates with preset styles and sections. There are also templates for gift cards and "pre-order" products.

Edit these templates in the theme editor, then assign them to your products in the Shopify admin.

<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="#alternate-templates"><strong>Alternate templates</strong></a></td><td>Use product page layouts based on other Stiletto demos.</td><td><a href="/stiletto/product-pages/product-template/alternate-templates.md">Alternate templates</a></td></tr><tr><td><a href="/stiletto/product-pages/product-template/gift-card.md"><strong>Gift card</strong></a></td><td>Let customers purchase gift cards of different values.</td><td><a href="/stiletto/product-pages/product-template/gift-card.md">Gift card</a></td></tr><tr><td><a href="/stiletto/product-pages/product-template/pre-order-template.md"><strong>Pre-order template</strong></a></td><td>Replace "Add to cart" with a "Pre-order" button label.</td><td><a href="/stiletto/product-pages/product-template/pre-order-template.md">Pre-order template</a></td></tr></tbody></table>