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

# Featured product

### Configure the featured product

Select the customize theme option. Click on the dropdown menu at the top of the page to select the **Home page** template.

From the left side menu, select **Featured product.**

Customize the section by utilizing the settings on the right side of the theme editor, as described below:

<table data-header-hidden><thead><tr><th width="248"></th><th></th></tr></thead><tbody><tr><td> Featured product</td><td><strong>Section visibility</strong><br>Select from the options to select the visibility of this section:<br>-Always<br>-Small devices(On selecting this, the section will be visible on mobile devices only.)<br>-Large devices<br><br><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.<br><br><strong>Section background</strong><br>Choose the background color from solid or gradient. These colors can be managed in the assigned color scheme.<br><br><strong>Container width</strong><br>Choose the container width from below options:<br>- Global<br>- Extra small<br>- Small <br>- Regular <br>- Edges gap<br>- Fullwidth<br><br><strong>Corner style</strong><br>Choose the corner style from below options:<br>- Top<br>- Bottom<br>- Both<br>- None<br><br><strong>Corner radius</strong><br>Adjust the range bar to determine the corners radius.<br><br><strong>Enable sticky content</strong><br>Select this checkbox to enable sticky content of product.</td></tr><tr><td>Product media</td><td><strong>Product</strong><br>Choose any product to display.<br><br><strong>Thumbnails style</strong><br>Select the style from following:<br>- Vertical<br>- Horizontal<br>- None<br><br><strong>Vertical thumbnails positions</strong><br>Select the position from following<br>- Inside image<br>- Outside image<br><br><strong>Image ratio</strong><br>Choose from image's ratio in the grid from the following options:<br>- Auto<br>- Square<br>- Landscape<br>- Portrait<br><br><strong>Image fit</strong><br>Choose the images fit from the following options:<br>- Top<br>- Center<br>- Bottom<br><br><strong>Hide mobile thumbnail</strong>s<br>Select this checkbox to hide the thumbnails on mobile.<br><br><strong>Enable border</strong><br>Select this checkbox to enable the image border.<br><br><strong>Enable radius</strong><br>Select this checkbox to enable the image radius.</td></tr><tr><td>Section spacing</td><td><p><strong>Desktop top space</strong></p><p>Adjust the range bar to add spacing at the top of the section for desktop view.  <br> </p><p><strong>Desktop bottom space</strong></p><p>Adjust the range bar to add spacing at the bottom of the section for desktop view. </p><p> </p><p><strong>Mobile top space</strong></p><p>Adjust the range bar to add spacing at the top of the section for mobile view. </p><p> </p><p><strong>Mobile bottom space</strong><br>Adjust the range bar to add spacing at the bottom of the section for mobile view. </p></td></tr></tbody></table>

### Block settings

<table data-header-hidden><thead><tr><th width="247"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Title</td><td>This block shows the product title.<br><br><strong>Title size</strong><br>Select the title size from the following options:<br>- Large<br>- Medium<br>- Small<br>- X-small</td><td></td></tr><tr><td>Price</td><td>This block shows the product price.<br><br><strong>Hide shipping content</strong><br>Select the checkbox to hide the shipping content.<br><br><strong>Hide compare price</strong><br>Select the checkbox to hide the compare price.</td><td></td></tr><tr><td>Description</td><td>Content style<br>Choose the description style from:<br>- Accordion<br>- Full view</td><td></td></tr><tr><td>Variant picker</td><td>This is to show the product variants, e.g., Size, colors, etc.<br><br><strong>Style</strong><br>Choose the variant style from the following options:<br>- Dropdown<br>- Button<br><br>Color options<br><strong>Swatch type</strong><br>Choose the swatch type from the following options:<br>- Category meta-fields<br>- Variant image<br>(<em><strong>Note</strong>: For category meta-fields colors, please go through</em> <a href="https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields"><em>docs.</em></a><em>)</em><br><br>Size chart<br><strong>Size chart page</strong><br>Choose any page for the size chart.<br><br><strong>Title</strong><br>Add the size chart link text.</td><td></td></tr><tr><td>Quantity selector</td><td>This block shows the quantity selector.<br><br><strong>Show quantity picker with buy button</strong><br>Select the checkbox to show the quantity picker along with buy button.</td><td></td></tr><tr><td>Buy buttons</td><td>This block is to show the <strong>Add to cart</strong> button along with below settings:<br><br><strong>Show dynamic checkout button</strong><br>Select the checkbox to show the dynamic checkout button. <br><br><strong>Show recipient information form for gift cards</strong><br>Select the checkbox to show the gift recipient form on the gift product.</td><td></td></tr><tr><td>Custom liquid</td><td>You can add custom liquid codes for advanced customization, like app snippets.</td><td></td></tr><tr><td>Social sharing</td><td>This block will show the social media icons.<br><em>(Note: Make sure to select the social sharing options in social media accounts under theme settings.)</em><br><br><strong>Icon style</strong><br>Choose icon's style from:<br>- Solid<br>- Outline</td><td></td></tr><tr><td>Inventory status bar</td><td><strong>Minimum inventory</strong><br>Adjust the range bar to set the low stock limit. If a product has 11 units in stock and the threshold is set to 10, it will display <strong>"In Stock."</strong> If the threshold is set to 15, it will display <strong>"Low stock."</strong> Set the threshold to <strong>0</strong> to always show <strong>"In Stock."</strong><br><br><strong>Available message</strong><br>Add message to display in case of available stock.<br><br><strong>Low inventory messag</strong>e<br>Add message to display in case of low inventory stock.<br><br><strong>Sold out message</strong><br>Add message text to show for sold out variants of product.</td><td></td></tr><tr><td>Custom content</td><td><p><strong>Heading</strong> </p><p>Add heading text. <br><br><strong>Heading size</strong><br>Select the heading size from the following options:<br>- Large<br>- Medium<br>- Small<br>- X-small<br><br><strong>Content</strong></p><p>Add description text. <br><br><strong>Content size</strong><br>Select the heading size from the following options:<br>- X-large<br>- Large<br>- Medium<br>- Small<br>- X-small</p></td><td></td></tr><tr><td>Collapsible content</td><td><p><strong>Heading</strong> </p><p>Add heading text<br><br><strong>Description</strong><br>Add description text.</p></td><td></td></tr><tr><td>Complementary products</td><td><p><strong>Heading</strong> </p><p>Add text to the heading to highlight complementary products. <br> <br><strong>Maximum products to show</strong><br>Adjust the slider to highlight products between 2 to 10.  <br> <br><em>Note: To select complementary products, add the Search &#x26; Discovery app.</em> <a href="https://shopify.dev/docs/themes/product-merchandising/recommendations">Learn more</a></p></td><td></td></tr></tbody></table>
