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

# Featured product

Highlights a single product with detailed information.

*Shared Settings*:

* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](#colors)
* [<mark style="color:$primary;">Inputs</mark>](#inputs)

*Shared Blocks:*

* [<mark style="color:$primary;">Product media</mark>](/triumph/template/sections/featured-product/product-media.md)
* [<mark style="color:$primary;">Details</mark>](/triumph/template/sections/featured-product/details.md)

***

**Product**\
Assign a product.

**Sticky content**\
Stick the product gallery in a viewport on scroll.

***

#### Colors

**Background**\
Sets the section's background color.

**Secondary color**\
Changes the color of unavailable product variants displayed as pills.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FiQaYK8AQNHKPmxhb7JIA%2Ffeatured%20product_background%20colors.png?alt=media&amp;token=03071383-b599-4b0a-b31a-b0effef7fa3d" alt=""><figcaption></figcaption></figure>

**Text**\
Controls the color of titles, product name, description, tape background color, active product variant displayed as pills, and others.

**Accent**\
Adjusts the color of the links and initial product price.

**Line**\
Sets the border color of product variants.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F4YH0Y8uEUA8dDPrKeyKg%2Ffeatured%20product_colors.png?alt=media&amp;token=9bd04abe-8a52-4edc-9794-b44f135a7f84" alt=""><figcaption></figcaption></figure>

***

### Inputs

**Background**\
Sets the background color of input elements (like quantity selectors).

**Text**\
Controls the text color inside input fields.

**Hover background**\
Changes the background color when hovering over inputs.

**Hover text**\
Changes the text color on hover.

**Hover border**\
Sets the border color when hovering over inputs.

**Checkbox**\
Background color of the unchecked checkbox.

**Checkbox checked**\
Background color of the checkbox when selected.

**Checkmark**\
Color of the checkmark inside the checkbox.

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FnxurKbh8beJn0TB0uR3R%2Ffeatured%20product_desktop.png?alt=media&amp;token=cd36dcb3-3bd5-4310-8a84-a9795672676f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FwGEGKrmwoyrstrJlg7z9%2Ffeatured%20product_mobile.png?alt=media&amp;token=09185ac2-7004-4b97-bfea-9a163af373a1" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}