# Featured product

### Configure 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>Section visibility</td><td>Select from the options to select the visibility of this section:<br>-Always<br>-Small devices only(On selecting this, the section will be visible on mobile devices only.)<br>-Large devices only</td></tr><tr><td>Enable hover effect on image</td><td>Select the checkbox to enable the hover- light effect on the image.</td></tr><tr><td>Product</td><td>Select any product to display as a featured product. For more details, refer to <a href="https://help.shopify.com/en/manual/products/details">product details</a>.</td></tr><tr><td>Enable fullwidth</td><td>Select/deselect the checkbox to enable/disable product images in full width.</td></tr><tr><td>TEXT</td><td><p><strong>Heading</strong></p><p>Add heading text. </p><p> <br><strong>Enable highlight text</strong> </p><p>-Select the checkbox to show the text in highlighted form. <br><em>(Note: Highlight text works on bold and italic text of the heading.)</em></p><p><br><strong>Outline stroke</strong> </p><p>Select outline stroke from the options- thin or thick.</p><p><br><strong>Heading size</strong><br>Select the heading size from the H1-H6 options.<br><em>(Note: This works in the full-width style only.</em>)<br><br><strong>Heading tag</strong><br>Specify heading code types for SEO and search engines for crawling purposes.<br><br><strong>Heading bottom spacing desktop</strong><br>Adjust the range bar to add spacing below the heading on the desktop.<br><em>(Note: Only applicable with the full-width featured product.)</em><br><br><strong>Heading bottom spacing mobile</strong><br>Adjust the range bar to add spacing below the heading on the mobile.<br><em>(Note: Only applicable with the full-width featured product.)</em><br></p><p><strong>Scrolling text speed</strong><br>Adjust the slider to set the scrolling text speed.</p></td></tr><tr><td>MEDIA HEIGHT</td><td><p><strong>Enable media fixed height</strong><br>Select/deselect this checkbox to show product images' fixed height.<br><br><strong>Desktop</strong><br>Select the media fixed height for the desktop view from the options:<br>-Small</p><p>-Medium</p><p>-Large<br><br><strong>Mobile</strong></p><p>Select the media fixed height for the mobile view from the options:<br>-Small</p><p>-Medium</p><p>-Large<br><br><strong>Media fit</strong><br>Select the image fit from the following options:<br>- Cover<br>- Contain</p></td></tr><tr><td>COLORS</td><td><p><strong>Color scheme</strong><br>Select the color scheme from the given options:  </p><p>-Primary  </p><p>-Secondary  </p><p>-Tertiary  </p><p>-Quaternary  <br> </p><p><em>Note: These can be managed from <strong>Theme settings> color schemes.</strong></em><strong> </strong> <br><br><strong>Enable gradient</strong><br>Select this checkbox to show the gradient in the background color. This can be selected from theme settings>color schemes.<br><br><strong>Inner color scheme</strong><br>Select the color scheme from the given options:  </p><p>-Primary  </p><p>-Secondary  </p><p>-Tertiary  </p><p>-Quaternary  <br> <em>Note: These can be managed from <strong>Theme settings> color schemes.</strong></em><strong> </strong> <br><br><strong>Overlay</strong><br>Choose any color for the overlay.<br><br><strong>Overlay opacity</strong><br>Adjust the slider to determine the overlay opacity.</p></td></tr><tr><td>SECTION SPACING</td><td><p><strong>Top spacing (desktop)</strong> </p><p>Adjust the slider to add spacing at the top of the section for desktop view.  <br> </p><p><strong>Bottom spacing (desktop)</strong> </p><p>Adjust the slider to add spacing at the bottom of the section for desktop view. </p><p> </p><p><strong>Top spacing (mobile)</strong> </p><p>Adjust the slider to add spacing at the top of the section for mobile view. </p><p> </p><p><strong>Bottom spacing (mobile)</strong> <br>Adjust the slider 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 shows the product title.</td><td></td></tr><tr><td>Review rating</td><td>This shows the product ratings.</td><td></td></tr><tr><td>Price</td><td>This block shows the product price.<br><br><strong>Hide shipping content</strong><br>Select/deselect the checkbox to show or hide shipping content.</td><td></td></tr><tr><td>Variant picker</td><td>This is to show the product variants, e.g., Size, colors, etc.</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/deselect the checkbox to show/hide the dynamic checkout button. <br><br><strong>Enable quantity</strong><br>Select/deselect the checkbox to show/hide the quantity selector.</td><td></td></tr><tr><td>Social sharing</td><td>This block is to show the social media icons. These icons are to share the product on social media platforms.</td><td></td></tr><tr><td>SKU</td><td>It highlights the product’s SKU. For more details, refer to <a href="https://help.shopify.com/en/manual/products/details">product details</a>.</td><td></td></tr><tr><td>Text</td><td>Add text related to product descriptions or any other text.</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></tbody></table>