# Featured product

### Configure the section

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 (On selecting this, the section will be visible on mobile devices only.)<br>-Large (On selecting this, the section will be visible on large devices only.)<br><br><strong>Product</strong><br>Choose any product to display.<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>Separator line</strong><br>Choose the separator line visibility from below options:<br>- Top<br>- Bottom<br>- Both<br>- None</td></tr><tr><td>Media</td><td><p><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>Enable zoom</strong><br>Select this checkbox to show the zoom on product.<br><br><strong>Enable thumbnails</strong><br>Select this checkbox to show the product thumbnails.<br><br><strong>Thumbnails size</strong><br>Choose the size from:<br>- Small<br>- Medium<br>- Large<br></p><p><strong>Media fit style</strong><br>Choose the images fit from the following options:<br><strong>- Contain-</strong> It contains the image<strong>.</strong><br><strong>- Cover-</strong> It covers the image.<br><br><strong>Icon width</strong><br>Adjust the range bar to determine the icon width.</p></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 font size from the following options:<br>- Extra small<br>- Small<br>- Regular<br>- Medium<br>- Large<br>- Extra large<br>- Double Extra large</td><td></td></tr><tr><td>Price</td><td>This block shows the product price.<br><br><strong>Show tax information</strong><br>Select this checkbox to show the taxes information.<br><br><strong>Show sale price first</strong><br>Select this checkbox to show the sale price first.<br><br>Typography<br><strong>Price font size/Sale price font size</strong><br>Select the font size from the following options:<br>- Extra small<br>- Small<br>- Regular<br>- Medium<br>- Large<br>- Extra large<br>- Double Extra large</td><td></td></tr><tr><td>SKU</td><td>This block shows the product's SKU value.</td><td></td></tr><tr><td>Description</td><td>(<em><strong>Note</strong>: In animated layout, description is positioned on the right side.)</em><br><br><strong>Heading size</strong><br>Choose the heading text size of text- Description, from the following options:<br>- XX- large<br>- X- large<br>- Large<br>- Medium<br>- Small<br>- X-small</td><td></td></tr><tr><td>Variant picker</td><td>This block showcases the variants list.<br><br><strong>Style</strong><br>Select from the following options to determine the variant picker type:<br>- Dropdown<br>- Button<br><br><strong>Swatch</strong><br>Color option name<br>Enter the label name of variant option, which hold the colors. For e.g. Color, Colour etc.<br><br><strong>Enable swatch selector</strong><br>Select this checkbox to enable the swatches selector.<br><br><strong>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><strong>Style</strong><br>Choose the appearance style of the swatches from below options:<br>- Box<br>- Circle<br><br><strong>Size</strong><br>Choose the size of the swatches from below options:<br>- Small<br>- Medium<br>- Large<br><br><strong>Variants: Other options</strong><br><em>(<strong>Note</strong>: The below settings apply to the product options except the color options.)</em><br><br><strong>Style</strong><br>Choose the appearance style of the swatches from below options:<br>- Box<br>- Circle<br><br><strong>Size</strong><br>Choose the size of the swatches from below options:<br>- Small<br>- Medium<br>- Large<br><br>Size guide<br><strong>Option</strong><br>Enter the option name that holds the size. E.g.: Size,Taille, etc.<br><br><strong>Information</strong><br>Choose any page to show as a size guide.<br><br><strong>Labels(Size)</strong><br>Choose the size from the following options:<br>- Small<br>- Medium<br>- Large<br><br><strong>Colors</strong><br><strong>Text</strong><br>Choose the text color of variant options.<br><br><strong>Background</strong><br>Choose the background color of variant options.<br><br><strong>Border</strong><br>Choose the border color of variant options.<br><br><strong>Active color</strong><br>Choose the active text color of variant options.<br><br><strong>Active background</strong><br>Choose the active background color of variant options.<br><br><strong>Active border</strong><br>Choose the active border color of variant options.</td><td></td></tr><tr><td>Quantity selector</td><td>This block shows the quantity selector.<br><br><strong>Show quantity selector with 'Add to cart'</strong><br>Select this checkbox to show the quantity selector with ATC button.<br><br><strong>Labels(size)</strong><br>Choose the size from the following options:<br>- Small<br>- Medium<br>- Large</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 inline buttons</strong><br>Select the checkbox to show the buttons inline.<br><br><strong>Show dynamic checkout button</strong><br>Select the checkbox to show the dynamic checkout button. <br><br><strong>Font style</strong><br>Choose font style from below options:<br>- UPPERCASE<br>- lowercase<br>- Capitalize<br>- Unset</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>Inventory status bar</td><td><strong>Low inventory threshold</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>Show inventory quantity</strong><br>Select this checkbox to show the stock count.</td><td></td></tr><tr><td>Custom text</td><td>Enter the custom text.</td><td></td></tr><tr><td>Collapsible content</td><td><strong>Position (desktop)</strong><br>Choose from left or right side to display the content.<br><br><strong>Display in collapsible</strong><br>Select this checkbox to show the content in collapsible.<br><br><strong>Open tab by default</strong><br>Select this checkbox to show collapsible opened by default.<br><br><strong>Heading</strong><br>Enter any heading.<br><br><strong>Description</strong><br>Enter the custom content/description. It supports dynamic content as well.<br><br><strong>Page</strong><br>Choose any page to show its content.</td><td></td></tr><tr><td>Social sharing</td><td>This block is to share the product on social media sites.<br> <em>Please go to the theme settings>Social media>Social sharing to choose the options.</em><br><br><strong>Text</strong><br>Enter the text of social sharing icons.<br><br><strong>Show 'Share' with inventory</strong><br>Select this checkbox to show the share button with inventory.</td><td></td></tr><tr><td>Payment icons</td><td>This block shows the payment icons. These can be setup from the Shopify payments under Store settings.</td><td></td></tr></tbody></table>
