> For the complete documentation index, see [llms.txt](https://meowcart.gitbook.io/lilyth-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://meowcart.gitbook.io/lilyth-theme/pages/product-pages.md).

# Product Pages

By default, product page have a **Product information** section.

The **Product information** section contains the following default blocks:

* [Title](#title-block)
* [Product rating](#product-rating-block)
* [Price](#price-block)
* [Variant picker](#variant-picker-block)
* [Buy buttons](#buy-buttons-block)
* [Icon with text](#icon-with-text-block)
* [Description](#description-block)

You can also add the following blocks:

* [Text](#text-block)
* [Vendor](#vendor-block)
* [SKU](#vendor-block)
* [Inventory status](#inventory-status-block)
* [Custom liquid](#custom-liquid-block)
* [Collapsible row](#collapsible-row-block)
* [Complementary products](#complementary-products-block)
* [Pop-up](#pop-up-block)
* [Trust badge](#trust-badge-block)
* [Tags](#tags-block)

The **Product information** section can contain up to 16 blocks.

## Section settings

<table><thead><tr><th width="252">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show breadcrumb</td><td>Show a breadcrumb navigation on top of section.</td></tr><tr><td>Color schema</td><td>A set of colors that you can apply to this section. <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme">Learn more.</a></td></tr><tr><td>Enable sticky add to cart</td><td>Show a sticky add to cart button that will stay with customers as they scroll down through a product's description, ready for any purchasing hesitation. Because of its functionality, the order in which it is placed doesn't matter. Because of its functionality, Sticky cart block is limited to one only.</td></tr><tr><td>Show badges</td><td>Display the badge on product media.</td></tr><tr><td>Badge position on media</td><td><p>Determine how the badge are displayed on product media:</p><ul><li><strong>Top left</strong>: display on the top left of the product media.</li><li><strong>Top right</strong>: display on the top right of the product media.</li></ul></td></tr><tr><td>Sale badge type</td><td><p>Determine how the type are displayed for the sale badge</p><ul><li><strong>Percent</strong></li><li><strong>Text</strong></li></ul></td></tr></tbody></table>

### Media settings

<table><thead><tr><th width="239">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Desktop media position</td><td><p>Determine how the media are displayed on desktop:</p><ul><li><strong>Left</strong>: display on the left of the screen.</li><li><strong>Right</strong>: display on the left of the screen.</li></ul></td></tr><tr><td>Media ratio</td><td><p>The image ratio for the product images:</p><ul><li><strong>Adapt to featured image</strong>: use the aspect ratio of the featured image for all the rest. This prevents the images from being cropped.</li><li><strong>Square</strong>: Crop the images to use a 1:1 ratio.</li><li><strong>Portrait</strong>: Crop the images to use a 2:3 ratio.</li></ul></td></tr><tr><td>Media fit</td><td><p>Select to fit the media to its container, otherwise maintain the media's original aspect ratio:</p><ul><li><strong>Original</strong></li><li><strong>Fill</strong></li></ul></td></tr><tr><td>Enable video looping</td><td>Set the video to play on a loop, so that the video will replay automatically when it finishes.</td></tr><tr><td>Enable lightbox</td><td>Set the lightbox to show product images that customers click to display the pop-up window.</td></tr></tbody></table>

### Section padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

## Block settings

The following blocks can be added to the **Product information** section.

### Title block

This block displays the product's title.

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text font</td><td><p>Changes the font of the text:</p><ul><li><strong>Body font</strong></li><li><strong>Heading font</strong></li></ul></td></tr><tr><td>Text size</td><td><p>Changes the size of the text:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td>Text thickness</td><td><p>Changes the thickness of the text:</p><ul><li><strong>Thin</strong></li><li><strong>Extra light</strong></li><li><strong>Light</strong></li><li><strong>Regular</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul><p>(<em>The thickness available depend on the font that is currently set</em>)</p></td></tr><tr><td>Text style</td><td><p>Changes the style of the text:</p><ul><li><strong>Normal</strong></li><li><strong>Uppercase</strong>: put all characters in uppercase.</li><li><strong>Lowercase</strong>: put all characters in lowercase.</li><li><strong>Capitalize</strong>: put first letter of a word in capitalize.</li></ul></td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Product rating block

This block displays the average product rating in stars, with the number of reviews in parenthesis, for example: ★★★★★ (5).

Displaying product ratings requires a product review app such as [Shopify Product Reviews](https://help.shopify.comhttps//help.shopify.com/manual/apps/apps-by-shopify/product-reviews/), and [metafield definitions](https://shopify.dev/apps/metafields/definitions/standard-definitions) for `reviews.rating_count` and `reviews.rating`.

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Text block

The text block can be used to display static text or variable data using [dynamic sources](https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/sections/#metafields-and-dynamic-sources).

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td>Add information to the product page. Support text or dynamic sources.</td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Price block

This block displays the product's pricing information, such as price and compare at price.

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Variant picker block

This block displays any variant options for the product.

<table><thead><tr><th width="141">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Type</td><td><p>Change how the variants are displayed to customers:</p><ul><li><strong>Pills</strong>: Displays the variants as clickable pills.</li><li><strong>Dropdown</strong>: Displays the variants in an expandable drop-down menu.</li></ul></td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Buy buttons block

This block displays the "Add to cart" button, "Share" button and any in-store pickup information. It can also show any dynamic checkout buttons.

<table><thead><tr><th width="243">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show quantity selector</td><td>Display a quantity selector that customers can use to change how many units of the product that they want to purchase. The default quantity is 1.</td></tr><tr><td>Show dynamic checkout buttons</td><td>Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. <a href="https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout">Learn more</a>.</td></tr><tr><td>Show recipient information form for gift card products</td><td>Display a recipient form for gift card products. When enabled, gift card products can optionally be sent to a recipient with a personal message.</td></tr><tr><td>Show pickup availability</td><td>Display a pickup availability information. <a href="https://help.shopify.com/en/manual/sell-in-person/shopify-pos/order-management/local-pickup-for-online-orders">Learn more</a>.</td></tr><tr><td>Enable share</td><td><p>Allow customers share the product on their social media. It has no adjustable settings.<br>If you include a link in social media posts, the page’s featured image will be shown as the preview image. <a href="https://help.shopify.com/manual/online-store/images/showing-social-media-thumbnail-images">Learn more</a>.</p><p>A store title and description are included with the preview image. <a href="https://help.shopify.com/manual/promoting-marketing/seo/adding-keywords#set-a-title-and-description-for-your-online-store">Learn more</a>.</p></td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Icon with text block

This block adds icons with short content, which is particularly useful when you want to add text displaying a marketing message.

<table><thead><tr><th width="243">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First icon</td><td>Choose a pre-made SVG icon that accommodates your text. The None option will disable the icon.</td></tr><tr><td>First heading</td><td>Add text to display as a heading. Support text or dynamic sources.</td></tr><tr><td>First text</td><td>Add information to the product page. Support text or dynamic sources.</td></tr><tr><td>Second icon</td><td>Choose a pre-made SVG icon that accommodates your text. The None option will disable the icon.</td></tr><tr><td>Second heading</td><td>Add text to display as a heading. Support text or dynamic sources.</td></tr><tr><td>Second text</td><td>Add information to the product page. Support text or dynamic sources.</td></tr><tr><td>Third icon</td><td>Choose a pre-made SVG icon that accommodates your text. The None option will disable the icon.</td></tr><tr><td>Third heading</td><td>Add text to display as a heading. Support text or dynamic sources.</td></tr><tr><td>Third text</td><td>Add information to the product page. Support text or dynamic sources.</td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Description block

This block displays the product's description.

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Add text to display as a heading. Support text or dynamic sources.</td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Vendor block

This block displays the product's vendor.

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### SKU block

This block displays the product's SKU.

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Inventory status block

This block displays a message that timely informs customers about product stock status.

<table><thead><tr><th width="231">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td>Select a color schema for section.</td></tr><tr><td>Low inventory threshold</td><td>Allow you set a value that the product stock must be at least for the message to be visible. Must be an even number. Can be from 0 to 100, increasing arithmetically of 1.</td></tr><tr><td>Show inventory count</td><td>Display the the number of inventory.</td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Custom liquid block

This block displays [custom Liquid or HTML code](https://help.shopify.com/en/manual/online-store/themes/extend/#add-custom-html-or-liquid) that you can add to the block.

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Custom liquid</td><td>Display content that you can enter as <a href="https://help.shopify.com/en/manual/online-store/themes/extend/#add-custom-html-or-liquid">Liquid or HTML code</a>.</td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Collapsible row block

This block displays a collapsible content with a title. When a customer clicks the title, the content expands to display additional formations.

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Add text to display as a heading. Support text or dynamic sources.</td></tr><tr><td>Icon</td><td>Choose a pre-made SVG icon that accommodates your text. The None option will disable the icon.</td></tr><tr><td>Row content</td><td>Display content only when the collapsible row is expanded.</td></tr><tr><td>Row content from page</td><td>Display content from a page. Displays only the page content from the page editor, no Liquid styling from the page's template displays in this block. Any content entered in Tab content displays above the page content.</td></tr></tbody></table>

### Complementary products block

This block displays complementary products to customers makes it easier for them to discover new products, and can help to increase online store sales. To select complementary products, add the Search & Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations).

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Add text to display as a heading. Support text or dynamic sources.</td></tr><tr><td>Maximum products to show</td><td>Determine the maximum of products can be shown. Can be from 1 to 10, increasing arithmetically of 1.</td></tr><tr><td>Number of products per page</td><td>Determine the maximum of products per page can be shown. Can be from 1 to 4, increasing arithmetically of 1.</td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Pop-up block

This block displays clickable text that opens a pop-up window when clicked. This pop-up displays content from one of your pages.

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Link label</td><td>Add text to display as a link label. The clickable text that customers click to display the pop-up window. Support text or dynamic sources.</td></tr><tr><td>Content from page</td><td>The page you want to display content from in the pop-up window. Displays only the page content from the page editor. The pop-up doesn't display any Liquid styling from the page template.</td></tr></tbody></table>

### Trust badge block

This block displays a custom image, ideal for trust badge image.

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Add text to display as a heading. Support text or dynamic sources.</td></tr><tr><td>Upload a image</td><td>Upload an image.</td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

### Tags block

This block displays the product's tags.

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Add text to display as a heading. Support text or dynamic sources.</td></tr></tbody></table>

#### Block padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the block. Can be from 0px to 50px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>