# Featured Product

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

To add this section, please follow 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

### General

<table><thead><tr><th width="296">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section ID</td><td>Enter the Section ID to match the Menu link to enable the scroll to Section feature.<br><br><em><mark style="color:orange;">Note: Enter the section ID to match the menu link and enable the scroll-to-section feature.</mark></em></td></tr><tr><td>Section width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width).</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the full width layout.</td></tr><tr><td>Show sticky product information on large screen</td><td>Show Sticky Product Information On Large Screens</td></tr><tr><td>Background color</td><td>Set color for the section background.</td></tr><tr><td><strong>Section header</strong></td><td></td></tr><tr><td>Title</td><td>Enter in the title for the section.</td></tr><tr><td>Title color</td><td>The color of the section title.</td></tr><tr><td>Title font size</td><td>Specify the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Specify the font size of the title on mobile.</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from bottom on Desktop.</td></tr><tr><td>Title bottom margin on mobile</td><td>Determine the spacing of the title from bottom on Mobile.</td></tr><tr><td>Alignment</td><td>Select the position of the title to be either to the left, right or center of its container on desktop.</td></tr><tr><td>Alignment on mobile</td><td>Select the position of the title to be either to the left, right or center of its container on mobile.</td></tr><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description color</td><td>Apply a color to the description.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description on desktop.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing of the description from bottom.</td></tr><tr><td>Description bottom margin on mobile</td><td>Determine the spacing of the description from bottom on Mobile.</td></tr><tr><td>Alignment</td><td>Select the alignment of the header text to be either to the Left, Center or to the Right of the section.</td></tr></tbody></table>

### Product

<table><thead><tr><th width="298">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Product</td><td>Choose a product to show</td></tr></tbody></table>

### Main image

<table><thead><tr><th width="299">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show navigation arrows on desktop</td><td>Toggle the navigation arrows on Desktop.</td></tr><tr><td>Show counter on mobile</td><td>Show above next arrow of slider. (Position current of item on slider / total items.)</td></tr><tr><td>Layout</td><td>Select the layout for the main images. There are 2 options:<br><br><mark style="color:orange;"><strong>Style 1</strong></mark><br><mark style="color:orange;"><strong>Style 2</strong></mark></td></tr><tr><td>Main image position</td><td>Select the position of the main image: left/right.</td></tr><tr><td>Background image</td><td>Upload/Select an image as the main image background</td></tr></tbody></table>

### Thumbnails

<table><thead><tr><th width="299">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop layout</td><td><p>Select layout thumbnail. There are 3 layouts:</p><p><br><mark style="color:orange;"><strong>Show thumbnails on the left</strong></mark><br><mark style="color:orange;"><strong>Show thumbnails on the right</strong></mark><br><mark style="color:orange;"><strong>Hide thumbnails</strong></mark></p></td></tr><tr><td>Show thumbnails on mobile</td><td>Toggle the Thumbnail on Mobile.</td></tr><tr><td>Maximum thumbnails to show</td><td>Limit the maximum number of thumbnails to display.</td></tr><tr><td>Active thumbnail color</td><td>Apply a color to the thumbnail active.</td></tr><tr><td>Navigation arrows color on mobile</td><td>Apply a color to the navigation arrows on Mobile.</td></tr><tr><td>Background color</td><td>Apply a color to the background.</td></tr></tbody></table>

### Media

Learn more about [media types](https://help.shopify.com/manual/products/product-media).

<table><thead><tr><th width="302">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Media fit</td><td>Select the product card image crop type. There are 3 types:<br><br><mark style="color:orange;"><strong>Original:</strong> The image will keep its current scale ratio to adapt.</mark><br><mark style="color:orange;"><strong>Fit content:</strong> The image will scale to cover up the full area of set product card image with retained ratio.</mark><br><mark style="color:orange;"><strong>Fill:</strong> The image will scale to scale up until the width or height reached the width or height of the set product card image with retained ratio.</mark></td></tr><tr><td>Product image ratio</td><td>Select the desired ratio of the image: <br><br><mark style="color:orange;"><strong>Adapt to image</strong> (the original image width and height are adopted)</mark> <br><mark style="color:orange;"><strong>Portrait</strong> (the image is cropped to be portrait)</mark> <br><mark style="color:orange;"><strong>Square</strong> (the image is cropped to be square)</mark></td></tr><tr><td>Portrait aspect ratio</td><td>Determine the ratio between width and height of the image.<br><br><em><mark style="color:orange;">Note: Only applicable to the portrait option of the product image ratio setting.</mark></em></td></tr><tr><td>Image popup</td><td><p>Select the gallery popup when clicking the main image. There are 2 options: <br><br><mark style="color:orange;"><strong>No popup</strong></mark></p><p><mark style="color:orange;"><strong>Open fancybox</strong></mark></p></td></tr><tr><td>Video layout</td><td><p>Select the video layout There are 2 options: <br><br><mark style="color:orange;"><strong>Thumbnails</strong></mark></p><p><mark style="color:orange;"><strong>Popup</strong></mark></p></td></tr></tbody></table>

### Product badges

<table><thead><tr><th width="301">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show product badges</td><td>Toggle to show or hide the Badges on the main image.</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="300">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="300">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

## Block settings

### \[BLOCK] Title

<table><thead><tr><th width="305">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Font size</td><td>The font size of the section title on tablet and desktop devices.</td></tr><tr><td>Font size on mobile</td><td>The font size of the section title on mobile devices.</td></tr><tr><td>Text color</td><td>The color of the section title.</td></tr><tr><td>Top padding / Bottom padding</td><td>Determine the spacing of the block from its top and bottom block separately.</td></tr></tbody></table>

### \[BLOCK] Meta

<table><thead><tr><th width="305">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show sold in last period</td><td>Toggle the Show Sold In Last Function.</td></tr><tr><td>Product quantity list</td><td>Enter the number of products sold.<br><br><em><mark style="color:orange;">Example: 3,5,6,7,8,10,12,15. Separate quantities with a comma (,).</mark></em></td></tr><tr><td>Hours</td><td>Enter the number of hours since the product was last sold.<br><br><em><mark style="color:orange;">Example: 10,15,16,17,18,20,25,35. Separate hours with a comma (,).</mark></em></td></tr><tr><td>Text color</td><td>Apply a color to the text.</td></tr><tr><td>Top padding / Bottom padding</td><td>Determine the spacing of the block from its top and bottom block separately.</td></tr></tbody></table>

### \[BLOCK] Description

<table><thead><tr><th width="305">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show short description</td><td>Toggle to show the short description.</td></tr><tr><td>Short description word count</td><td>Limit the description word count to truncate. <br><br><em><mark style="color:orange;">Example: 17</mark></em></td></tr><tr><td>Font size</td><td>Specify the font size of the description.</td></tr><tr><td>Text color</td><td>Apply a color to the description.</td></tr><tr><td>Top padding / Bottom padding</td><td>Determine the spacing of the block from its top and bottom block separately.</td></tr></tbody></table>

### \[BLOCK] Price

<table><thead><tr><th width="306">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Font size</td><td>Specify the font size of the price.</td></tr><tr><td>Style</td><td>Select the style for the price.<br><br><em><mark style="color:orange;">Note: For products to have a compare price.</mark></em></td></tr><tr><td>Sale price color</td><td>Apply a color to the sale price.<br><br><em><mark style="color:orange;">Note: For style 2.</mark></em></td></tr><tr><td>Top padding / Bottom padding</td><td>Determine the spacing of the block from its top and bottom block separately.</td></tr></tbody></table>

### \[BLOCK] Custom block

<table><thead><tr><th width="309">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Title</td><td>Enter in the title for the block.</td></tr><tr><td>Icon</td><td>Enter the SVG icon that stands next to the title.<br><br><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5/search"><em><mark style="color:blue;">find your icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></td></tr><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Font size</td><td>Specify the font size of the description.</td></tr><tr><td>Content padding</td><td>Determines the padding of the block from its top, right, bottom, left block separately.</td></tr><tr><td>Content alignment</td><td>Select the alignment of block content to be either to the Left, Right or Center.</td></tr><tr><td>Text color</td><td>Apply a color to the text.</td></tr><tr><td>Background color</td><td>The background color of the block.</td></tr><tr><td>Background gradient</td><td>The background gradient of the block.</td></tr><tr><td>Top padding / Bottom padding</td><td>Determines the spacing of the block from its top and bottom block separately.</td></tr></tbody></table>

### \[BLOCK] Variant picker

<table><thead><tr><th width="312">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Type</td><td><p>Select the option type for the variant picker. There are 2 types:<br><br><mark style="color:orange;"><strong>Dropdown</strong></mark></p><p><mark style="color:orange;"><strong>Square / Rectangle / Swatch</strong></mark></p></td></tr><tr><td>Show variant image grouped</td><td>Toggle variant image grouped</td></tr><tr><td>Style</td><td>Select the style for the variant picker layout.</td></tr><tr><td>Font size</td><td>Specify the font size of the label variant picker.</td></tr><tr><td>Text color</td><td>Apply a color to the label variant grouped.</td></tr><tr><td>Show top border</td><td>Toggle border top</td></tr><tr><td>Show bottom border</td><td>Toggle border bottom</td></tr><tr><td>Border color</td><td>Apply a color to the border.</td></tr><tr><td>Top padding / Bottom padding</td><td>Determines the spacing of the block from its top and bottom block separately.</td></tr></tbody></table>

### \[BLOCK] Buy Buttons

<table><thead><tr><th width="313">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td><strong>Dynamic checkout buttons</strong></td><td></td></tr><tr><td>Show dynamic checkout buttons</td><td>Toggle to show or hide the dynamic checkout buttons.</td></tr><tr><td>Font size</td><td>Specify the font size of the Terms &#x26; Conditions checkbox.</td></tr><tr><td>Text color</td><td>Apply a color to the label.</td></tr><tr><td>Border color</td><td>Apply a border color to the label.</td></tr><tr><td><strong>Quantity</strong></td><td></td></tr><tr><td>Text color</td><td>Apply a color to the label.</td></tr><tr><td>Icon color</td><td>Apply a color to the icon.</td></tr><tr><td>Input color</td><td>Apply a color to the input.</td></tr><tr><td>Input background color</td><td>Apply a color to the input background.</td></tr><tr><td><strong>Wishlist</strong></td><td></td></tr><tr><td>Icon color</td><td>Apply the color to the wishlist icon.</td></tr><tr><td>Border color</td><td>Apply the border color to the wishlist button.</td></tr><tr><td>Background color</td><td>Apply the background color to the wishlist button.</td></tr><tr><td>Icon hover color</td><td>Apply the color to the wishlist icon for hover state.</td></tr><tr><td>Border hover color</td><td>Apply the border color to the wishlist button for hover state.</td></tr><tr><td>Background hover color</td><td>Apply the background color to the wishlist button for hover state.</td></tr><tr><td><strong>Add to cart action</strong></td><td></td></tr><tr><td>Animation</td><td>Select the animation of the button. There are 4 options:<br><br><strong>None</strong><br><strong>Tilt shaking</strong><br><strong>Vertical shaking</strong><br><strong>Horizontal shaking</strong></td></tr><tr><td>Text color - Border color - Background color - Background gradient - Text hover color - Border hover color - Background hover color - Background hover gradient</td><td>Set the text color, background, and border color for both the normal and hover states of the 'Add to cart action' button.</td></tr><tr><td><strong>Buy it now action</strong></td><td></td></tr><tr><td>Text color - Border color - Background color - Background gradient - Text hover color - Border hover color - Background hover color - Background hover gradient</td><td>Set the text color, background, and border color for both the normal and hover states of the 'Buy it now action' button.</td></tr><tr><td>Top padding / Bottom padding</td><td>Determines the spacing of the block from its top and bottom block separately.</td></tr></tbody></table>

### \[BLOCK] Quantity

<table><thead><tr><th width="315">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Style</td><td>Select the style for the quantity. There are 2 styles:<br><br><mark style="color:orange;"><strong>Button</strong></mark><br><mark style="color:orange;"><strong>Box</strong></mark></td></tr><tr><td>Layout</td><td>Select the layout for the quantity. There are 2 layouts:<br><br><mark style="color:orange;"><strong>Movable</strong></mark><br><mark style="color:orange;"><strong>Fixed</strong></mark><br><br><em><mark style="color:orange;">Note: The quantity block cannot be moved up or down if the layout setting is set to fixed</mark></em><mark style="color:orange;">.</mark></td></tr><tr><td>Font size</td><td>Specify the font size of the quantity label.</td></tr><tr><td><strong>Movable layout</strong></td><td></td></tr><tr><td>Text color</td><td>Apply a color to the label.</td></tr><tr><td>Icon color</td><td>Apply a color to the icon.</td></tr><tr><td>Input color</td><td>Apply a color to the input.</td></tr><tr><td>Input Background Color</td><td>Apply a color to the input background.</td></tr><tr><td>Top padding / Bottom padding</td><td>Determine the spacing of the block from its top and bottom block separately.</td></tr></tbody></table>

### \[BLOCK] Quantity

<table><thead><tr><th width="315">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>View Detail</td><td>Enter the text.</td></tr><tr><td>Font size</td><td>Specify the font size of the text.</td></tr><tr><td>Text color</td><td>Apply a color to the text.</td></tr><tr><td>Top padding / Bottom padding</td><td>Determine the spacing of the block from its top and bottom block separately.</td></tr></tbody></table>

### \[BLOCK] Countdown

<table><thead><tr><th width="315">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Top padding / Bottom padding</td><td>Determine the spacing of the block from its top and bottom block separately.</td></tr></tbody></table>

### \[BLOCK] Vendor

<table><thead><tr><th width="322">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Font size</td><td>Specify the font size of the vendor.</td></tr><tr><td>Text color</td><td>Apply a color to the vendor.</td></tr><tr><td>Text style</td><td>Transform the description to be None, Capitalize, Uppercase or Lowercase.</td></tr><tr><td>Top padding / Bottom padding</td><td>Determine the spacing of the block from its top and bottom block separately.</td></tr></tbody></table>

### \[BLOCK] Hot stock function

<table><thead><tr><th width="323">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Style</td><td><p>Select Style for Hot Stock Function. There are 2 options:</p><p></p><p><mark style="color:orange;"><strong>Text</strong></mark> </p><p><mark style="color:orange;"><strong>Text with progress bar</strong></mark></p></td></tr><tr><td>Color</td><td>Apply a color to the text.</td></tr><tr><td>Top padding / Bottom padding</td><td>Determine the spacing of the block from its top and bottom block separately.</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/ella-documentation/sections/all-sections-in-theme/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.