# Featured product

<figure><img src="/files/U7hxQ1PpPQsEkMYXYOJS" alt=""><figcaption></figcaption></figure>

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**".

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Product</td><td>Select a product to show</td></tr><tr><td>Show product badges</td><td>Enable/disable checkbox</td></tr><tr><td>Enable share</td><td><p>Enable/disable checkbox<br><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><tr><td>Layout style</td><td><p>Select the layout style for the section:</p><ul><li><strong>Special</strong></li><li><strong>Classic</strong></li><li><strong>Modern</strong></li></ul></td></tr></tbody></table>

#### **Media**

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Desktop media size</td><td><p>Select desktop media size from the dropdown menu:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul><p><em><mark style="color:red;">(Media is automatically optimized for mobile)</mark></em></p></td></tr><tr><td>Desktop layout</td><td><p>Select desktop layout from the dropdown menu:</p><ul><li><strong>Stacked</strong></li><li><strong>Carousel</strong></li><li><strong>Carousel (Thumbnail)</strong></li></ul></td></tr><tr><td>Image zoom</td><td><p>Select image zoom from the dropdown menu:</p><ul><li><strong>Open lightbox</strong></li><li><strong>No zoom</strong></li></ul></td></tr><tr><td>Enable video looping</td><td>Enable/disable checkbox</td></tr><tr><td>Image ratio</td><td><p>Select image ratio from the dropdown menu:</p><ul><li><strong>Adapt to image</strong></li><li><strong>Square</strong></li></ul></td></tr></tbody></table>

#### Carousel thumbnail

*<mark style="color:red;">(Use for</mark> <mark style="color:red;"></mark><mark style="color:red;">**Carousel thumbnail layout**</mark><mark style="color:red;">)</mark>*

<table><thead><tr><th width="267">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Carousel thumbnail direction</td><td><p>Set the position of the thumbnails:</p><ul><li><strong>Vertical</strong>: displays on the left of the main product image.</li><li><strong>Horizontal</strong>: displays under the main product image.</li></ul></td></tr><tr><td>Grid spacing (desktop)</td><td>Determines the grid spacing between columns of thumbnails on desktop devices. Can be from <strong>0px</strong> to <strong>50px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Grid spacing (tablet)</td><td>Determines the grid spacing between columns of thumbnails on tablet devices. Can be from <strong>0px</strong> to <strong>50px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr></tbody></table>

#### **Colors**

<table><thead><tr><th width="269">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td>Select a color scheme to set the text and background colors for the section</td></tr></tbody></table>

#### **Section padding**

<table><thead><tr><th width="263">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 <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Top padding on mobile</td><td>Determines the height of the top inner space of the section on mobile. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom padding on mobile</td><td>Determines the height of the top inner space of the section on mobile. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</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/concept-documentation/section/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.