# Featured product

To add this section, please follow the below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Featured product**".

## Section settings <a href="#section-settings-1" id="section-settings-1"></a>

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Product</td><td>Select a product you want to display.</td></tr><tr><td>Color scheme</td><td>Set the color for the section.</td></tr><tr><td>Show secondary background</td><td>Shows the background for this section's container. If this setting is disabled, this section will have a full background.</td></tr></tbody></table>

#### Media

<table><thead><tr><th width="277">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Desktop media width</td><td><p>Width of product images container on desktop:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Constrain media to screen height</td><td>Select this checkbox to constrain media to screen height.</td></tr><tr><td>Desktop media position</td><td><p>Position of the product images on desktop:</p><ul><li><strong>Left</strong>: the product images are on the left.</li><li><strong>Right</strong>: the product images are on the right.</li></ul></td></tr><tr><td>Desktop layout</td><td><p>The layout for the section on desktop:</p><ul><li>Stacked</li><li>2 colums</li><li>Thumbnails</li><li>Thumbnail carousel</li></ul></td></tr><tr><td>Image zoom</td><td>Turns on the zoom feature for main product images.</td></tr><tr><td>Hide other variants’ media after selecting a variant</td><td>When a variant is selected, images of other variants are hidden from view. Images reappear when variant is deselected.</td></tr><tr><td>Enable video looping</td><td>Allows the video to be played again. </td></tr></tbody></table>

#### Section padding

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

## Text block

<table><thead><tr><th width="278">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td>The text for the this block.</td></tr><tr><td>Text style</td><td><p>Style of the text:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr></tbody></table>

## Title block

<table><thead><tr><th width="278">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading size</td><td><p>The size of the product's title:</p><ul><li>Small</li><li>Medium</li><li>Large</li><li>Extra large</li></ul></td></tr></tbody></table>

## SKU block

<table><thead><tr><th width="278">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text style</td><td><p>Style of the text:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr></tbody></table>

## Price block

Displays the product's pricing information, such as price and compare at price.&#x20;

It has no adjustable settings.

## Variant picker block

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Type</td><td><p>Displays any variant options for the product:</p><ul><li>Dropdown</li><li>Pills</li></ul></td></tr></tbody></table>

#### Color swatches

If you wish to use '**Color swatches**', then the Variant picker type must be set to '**Pills**'.

<table><thead><tr><th width="278">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color selector type</td><td><p>Displays the color variants in swatches:</p><ul><li>Text swatch</li><li>Color swatch</li><li>Variant image and color swatch</li></ul></td></tr></tbody></table>

## Quantity selector block

Displays a quantity selector that customers can use to change the number of the product that they want to purchase. The default quantity is 1.&#x20;

It has no adjustable settings.

## Buy buttons block

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td>Select the color for the button.</td></tr><tr><td>Show dynamic checkout buttons</td><td>Displays any dynamic checkout options that you've enabled in your <strong>Payments</strong> settings.</td></tr><tr><td>Show recipient information form for gift cards</td><td>Allows buyers to send gift cards on a scheduled date along with a personal message. <a href="https://help.shopify.com/en/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields">Learn more</a>.</td></tr></tbody></table>

#### Share

<table><thead><tr><th width="279">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show share</td><td>Allows customers to share the product to their social media.</td></tr></tbody></table>

## Custom Liquid block

<table><thead><tr><th width="280">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Liquid code</td><td>You can add your own Liquid code to create a custom block.</td></tr></tbody></table>

## Icon with text block

<table><thead><tr><th width="277">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>The layout for the block:</p><ul><li> Horizontal</li><li>Vertical</li></ul></td></tr></tbody></table>

#### Content

<table><thead><tr><th width="277">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First icon</td><td>Displays the icon for the first block. This icon will not be displayed if the <strong>First image</strong> is selected.</td></tr><tr><td>First image</td><td>Displays the image for the first block.</td></tr><tr><td>First heading</td><td>Displays the heading for the first block.</td></tr><tr><td>Second icon</td><td>Displays the icon for the second block. This icon will not be displayed if the <strong>Second image</strong> is selected.</td></tr><tr><td>Second image</td><td>Displays the image for the second block.</td></tr><tr><td>Second heading</td><td>Displays the heading for the second block.</td></tr><tr><td>Third icon</td><td>Displays the icon for the third block. This icon will not be displayed if the <strong>Third image</strong> is selected.</td></tr><tr><td>Third image</td><td>Displays the image for the third block.</td></tr><tr><td>Third heading</td><td>Displays the heading for the third block.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/soul-documentation/sections/template-sections/featured-product.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.