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

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