# 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](https://help.fluorescent.co/stiletto/products/product-listings) 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 %}

## **Page layout and style**

***

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

### **Product overview blocks**

***

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.

### Default blocks

***

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="../product-page-blocks/default-blocks#product-header"><strong>Product header</strong></a></td><td>Display title, price, vendor, star rating, and badges.</td><td><a href="../product-page-blocks/default-blocks#product-header">#product-header</a></td></tr><tr><td><a href="../product-page-blocks/default-blocks#description"><strong>Description</strong></a></td><td>Display product description as a paragraph or accordion.</td><td><a href="../product-page-blocks/default-blocks#description">#description</a></td></tr><tr><td><a href="../product-page-blocks/default-blocks#variant-selector"><strong>Variant selectors</strong></a></td><td>Display variants of product options. Includes options for <a href="product-page-blocks/information-popup">Information popup</a>, <a href="variant-options/variant-swatches">Variant swatches</a>, and <a href="variant-options/variant-chips">Variant chips</a>.</td><td><a href="../product-page-blocks/default-blocks#variant-selector">#variant-selector</a></td></tr><tr><td><a href="../product-page-blocks/default-blocks#quantity-selector"><strong>Quantity selector</strong></a></td><td>Let customers add more quantities of a product.</td><td><a href="../product-page-blocks/default-blocks#quantity-selector">#quantity-selector</a></td></tr><tr><td><a href="../product-page-blocks/default-blocks#buy-buttons"><strong>Buy buttons</strong></a></td><td>Add-to-cart button with optional <a href="../product-page-blocks/default-blocks#sticky-add-to-cart-bar">Sticky Add-to-Cart bar</a> and <a href="../product-page-blocks/default-blocks#dynamic-checkout-button">Dynamic checkout button</a>. Includes <a href="../product-page-blocks/default-blocks#local-pickup-banner">Local pickup banner</a>.</td><td><a href="../product-page-blocks/default-blocks#buy-buttons">#buy-buttons</a></td></tr><tr><td><a href="../product-page-blocks/default-blocks#share-icons"><strong>Share icons</strong></a></td><td>Social links for sharing your product page.</td><td></td></tr></tbody></table>

### **Feature blocks**

***

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="product-page-blocks/collapsible-rows-block"><strong>Collapsible row block</strong></a></td><td>Add expandable tabs that reveal more text when clicked.</td><td><a href="product-page-blocks/collapsible-rows-block">collapsible-rows-block</a></td></tr><tr><td><a href="product-page-blocks/complementary-products"><strong>Complementary products</strong></a></td><td>Show customers related products that they can add to the cart.</td><td><a href="product-page-blocks/complementary-products">complementary-products</a></td></tr><tr><td><a href="../for-developers/custom-liquid"><strong>Custom Liquid</strong></a></td><td>Add block with custom HTML or Liquid</td><td><a href="../for-developers/custom-liquid">custom-liquid</a></td></tr><tr><td><a href="product-page-blocks/custom-options"><strong>Custom options</strong></a></td><td>Let customers add personalized text, notes, or options.</td><td><a href="product-page-blocks/custom-options">custom-options</a></td></tr><tr><td><a href="product-page-blocks/image-block"><strong>Image block</strong></a></td><td>Add a featured image block.</td><td><a href="product-page-blocks/image-block">image-block</a></td></tr><tr><td><a href="product-page-blocks/information-popup"><strong>Information popup</strong></a></td><td>Add popup product information (ex. Size guide).</td><td><a href="product-page-blocks/information-popup">information-popup</a></td></tr><tr><td><a href="product-page-blocks/product-labels"><strong>Product labels</strong></a></td><td>Show badges with text label and icon.</td><td><a href="product-page-blocks/product-labels">product-labels</a></td></tr><tr><td><a href="product-page-sections/product-reviews"><strong>Product reviews</strong></a></td><td>Show star rating from Shopify product reviews.</td><td><a href="product-page-sections/product-reviews">product-reviews</a></td></tr><tr><td><a href="product-page-blocks/secure-payment"><strong>Secure payment</strong></a></td><td>Show security message and payment icons.</td><td><a href="product-page-blocks/secure-payment">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="product-page-blocks/stock-level-indicator"><strong>Stock level indicator</strong></a></td><td>Display stock level bar with 'low inventory' alert.</td><td><a href="product-page-blocks/stock-level-indicator">stock-level-indicator</a></td></tr><tr><td><a href="product-page-blocks/text-block"><strong>Text block</strong></a></td><td>Add a short block of text.</td><td><a href="product-page-blocks/text-block">text-block</a></td></tr><tr><td><a href="product-page-blocks/text-list-with-icons"><strong>Text list with icons</strong></a></td><td>Add a list with icons.</td><td><a href="product-page-blocks/text-list-with-icons">text-list-with-icons</a></td></tr></tbody></table>

## **Product page sections**

***

The product page has specialized sections, including **Product recommendations, Recently viewed products,** and **Product reviews**. You can also use any other [theme section](https://help.fluorescent.co/stiletto/sections/theme-sections) 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="product-page-sections/product-recommendations"><strong>Product recommendations</strong></a></td><td>Display recommend products.</td><td><a href="product-page-sections/product-recommendations">product-recommendations</a></td></tr><tr><td><a href="../sections/theme-sections/recently-viewed-products"><strong>Recently viewed products</strong></a></td><td>Display products that the customer has viewed on your site</td><td><a href="../sections/theme-sections/recently-viewed-products">recently-viewed-products</a></td></tr><tr><td><a href="../product-page-sections/product-reviews#add-product-reviews-section"><strong>Product reviews</strong></a></td><td>Display section for customer reviews.</td><td><a href="product-page-sections/product-reviews">product-reviews</a></td></tr></tbody></table>

### **Alternate templates**

***

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="product-template/alternate-templates">alternate-templates</a></td></tr><tr><td><a href="product-template/gift-card"><strong>Gift card</strong></a></td><td>Let customers purchase gift cards of different values.</td><td><a href="product-template/gift-card">gift-card</a></td></tr><tr><td><a href="product-template/pre-order-template"><strong>Pre-order template</strong></a></td><td>Replace "Add to cart" with a "Pre-order" button label.</td><td><a href="product-template/pre-order-template">pre-order-template</a></td></tr></tbody></table>