# 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/cornerstone/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 %}

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FmpC9xyz33j6pU7fkCgDE%2Fproduct-page-glow.png?alt=media&#x26;token=ac8c9ae8-0e73-4c5e-8a2e-6df17833707e" alt="" width="375"><figcaption></figcaption></figure>

## **Page layout and style**

***

Click the **Product overview** section to find layout and style settings for the product page. You can enable additional features like **Sticky product details**, **Breadcrumbs**, and **Navigation buttons**.

​ ​​ ​

<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><a href="layout-and-style/sticky-product-details"><strong>Sticky product details</strong></a></td><td>Keep product details in view when scrolling through 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><tr><td><a href="layout-and-style/gift-recipient-form"><strong>Gift card recipient form</strong></a></td><td>Allows buyers to send gift cards to a recipient's email on a scheduled date, along with a personal message.</td><td><a href="layout-and-style/gift-recipient-form">gift-recipient-form</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

***

**Default blocks** include essential product details and purchase options. Click the blocks to find additional settings.

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><a href="product-page-blocks/product-header"><strong>Product header</strong></a></td><td>Display title, price, vendor, star rating, and badges.</td></tr><tr><td><a href="product-page-blocks/description"><strong>Description</strong></a></td><td>Display product description as a paragraph or accordion.</td></tr><tr><td><a href="product-page-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></tr><tr><td><strong>Quantity selector</strong></td><td>Let customers add more quantities of a product.</td></tr><tr><td><a href="product-page-blocks/buy-buttons"><strong>Buy buttons</strong></a></td><td>Add-to-cart button with optional Sticky Add-to-Cart bar and Dynamic checkout button. Includes Local pickup banner.</td></tr><tr><td><a href="product-page-blocks/share-icons"><strong>Share icons</strong></a></td><td>Social links for sharing your product page.</td></tr></tbody></table>

### **Feature blocks**

***

Add **Feature product blocks** to organize additional product information and design the page layout.

<table data-header-hidden><thead><tr><th width="309">Features blocks (guides)</th><th>Description</th></tr></thead><tbody><tr><td><a href="product-page-blocks/collapsible-rows-block"><strong>Collapsible row block</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FmiQma7Vn5UjOTsmcYCh0%2Fcollapsible-block.png?alt=media&#x26;token=bd259403-1359-424f-aaec-46387a1cd1da" alt=""></td></tr><tr><td><a href="product-page-blocks/complementary-products"><strong>Complementary products</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FQw2IUl1shgroaD8x6Url%2Fcomplementary-products.png?alt=media&#x26;token=b5453485-1662-44f3-ad72-af7c10adc15a" alt=""><br></td></tr><tr><td><a href="product-page-blocks/custom-option"><strong>Custom option</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FZvn50xDhBT0bY0BrF0yX%2Fcustom-option.png?alt=media&#x26;token=dc77a9dd-b5c2-4f7e-bcec-793b6699f170" alt=""></td></tr><tr><td><a href="product-page-blocks/customer-support-block"><strong>Customer support</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FdlhFMe66Gzj2KjBhW7um%2Fcustomer-support.png?alt=media&#x26;token=9c60f61c-0de6-4399-97da-915f6b30e62f" alt=""></td></tr><tr><td><a href="product-page-blocks/image-block"><strong>Image block</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fh6OPLIrichKRfzShkpOv%2Fblock-image.png?alt=media&#x26;token=9f9cd4d1-7930-46ad-a0e8-9446398cd415" alt=""></td></tr><tr><td><a href="product-page-blocks/image-with-text-block"><strong>Image with text</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FdSkymXyBqU6bkNMwVGgk%2Fimage-with-text.png?alt=media&#x26;token=154c33e6-b4de-4b27-919d-0c510a395231" alt=""></td></tr><tr><td><a href="product-page-blocks/information-popup"><strong>Information popup</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FGdh8udLXnOVX0raP6zPP%2Finfo-pop-guide.png?alt=media&#x26;token=cec340de-51cb-416d-a063-bd6eb5ba2bf1" alt="" data-size="original"></td></tr><tr><td><a href="product-page-blocks/product-labels"><strong>Product labels</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F5KL9zx2Q4o7GpXjAabMR%2Fproduct-labels.png?alt=media&#x26;token=d70d5567-2a3a-4395-98cc-d947a47d4fb1" alt=""></td></tr><tr><td><a href="product-page-blocks/payments-and-trust"><strong>Payments and trust</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F7o0lxxUU6dDebY9jvXvo%2Fpayment-secure.png?alt=media&#x26;token=2d4e6316-5173-4c92-8c85-479094c37c88" alt=""></td></tr><tr><td><a href="product-page-blocks/stock-level-indicator"><strong>Stock level indicator</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FYdKPYo2nCkmZDMaNP4hR%2Fstock-level.png?alt=media&#x26;token=7367719c-290c-4d2a-a2a8-2fb2a89d71b6" alt=""></td></tr><tr><td><a href="product-page-blocks/text-block"><strong>Text block</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FSihEz0HkX1ysDZcm1cJV%2Fblock-text.png?alt=media&#x26;token=83e3f59b-a317-4fea-9672-5bf75e963133" alt=""></td></tr><tr><td><a href="product-page-blocks/text-columns-with-icons"><strong>Text columns with icons</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FO2SgZneGwAFWC8BCC2vJ%2Ftext-columns-icons.png?alt=media&#x26;token=ead76386-8b5f-4e54-8e22-d9f5fe2f609a" alt=""></td></tr><tr><td><a href="product-page-blocks/text-list-with-icons"><strong>Text list with icons</strong></a></td><td><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FnUvbLVelQQVFLOBqZjYR%2Ftext-list.png?alt=media&#x26;token=c9cb6b69-1788-4939-8ea1-5c4ad9a948f4" alt=""></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></tr><tr><td><strong>Spacer</strong></td><td>Add space between product blocks.</td></tr></tbody></table>

## Product recommendations

***

The Product page includes a specialized product recommendations section, as well as a recommended products sidebar.

<table data-card-size="large" 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-recommendations"><strong>Product recommendations</strong></a></td><td>Show recommend products in a section below the product overview.</td><td><a href="product-recommendations">product-recommendations</a></td></tr><tr><td><a href="layout-and-style/recommended-products-sidebar"><strong>Recommended products sidebar</strong></a></td><td>Show recommended products beside the product overview.</td><td><a href="layout-and-style/recommended-products-sidebar">recommended-products-sidebar</a></td></tr></tbody></table>