> 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/sections/featured-product.md).

# Featured Product

You can add a section that features a specific product.

The **Featured product** 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)
* [Text](#text-block)
* [SKU](#sku-block)
* [Vendor](#vendor-block)
* [Tags](#tags-block)
* [Custom liquid](#custom-liquid-block)

## Section settings

<table><thead><tr><th width="217">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Choose a product</td><td>The product that you want to feature in the 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>Separator line</td><td><p>Display a line to visually separate this section from the other sections:</p><ul><li><strong>None</strong></li><li><strong>Top</strong></li><li><strong>Bottom</strong></li><li><strong>Top and bottom</strong></li></ul></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><p>(<em>Position is automatically optimized for mobile</em>)</p></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

### 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>

### 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>

### 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>

### 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>