# Spotlight products

To add this section, please follow the 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 "**Spotlight products**".

<table><thead><tr><th width="264">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout style</td><td><p>Select the style of the card layout:</p><ul><li><strong>Special</strong></li><li><strong>Classic</strong></li><li><strong>Modern</strong></li></ul></td></tr><tr><td>Heading width</td><td><p>Select the heading width from the dropdown menu:</p><ul><li><strong>Full width</strong></li><li><strong>Page width</strong></li><li><strong>Custom width</strong></li></ul></td></tr><tr><td>Custom heading width</td><td>Determines the width of the section when you choose <strong>'Custom heading width'</strong> option at <strong>'Heading width'</strong> setting . Can be from <strong>1000px</strong> to <strong>1800px</strong>, increasing arithmetically of <strong>50px</strong> (pixel)</td></tr><tr><td>Image</td><td>Set up an image</td></tr><tr><td>Heading</td><td>Add text to display as a section heading <br><em><mark style="color:red;">(Leave the field blank to hide the</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>heading</strong></mark><mark style="color:red;">)</mark></em></td></tr><tr><td>Link text</td><td>Add text to display as a <strong>link labe</strong>l on the section <br><em><mark style="color:red;">(Leave the field blank to hide the</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>link</strong></mark><mark style="color:red;">)</mark></em></td></tr></tbody></table>

#### Carousel

<table><thead><tr><th width="261">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td>Select a collection to show</td></tr><tr><td>Maximum products to show</td><td>The number of products from the (<strong>collection</strong> or <strong>products</strong>) to display. Must be an even number. Minimum: <strong>1</strong>. Maximum: <strong>5</strong>.</td></tr><tr><td>Show second image on hover</td><td>When the customer hovers their cursor over the product image, displays the second product image if the product has one.</td></tr><tr><td>Show vendor</td><td>Displays the vendors of the products.</td></tr><tr><td>Show product rating</td><td>Displays the average product rating in stars with the number of reviews in parenthesis</td></tr><tr><td>Enable quick add button</td><td>When the customer hovers their cursor over the product image, displays a quick add to cart button. If product has variants, the button links to the product detail page.</td></tr><tr><td>Show color swatch</td><td>Select this checkbox to show/hide color swatch on cart item.</td></tr><tr><td>Choose button style</td><td><p>Select the style button from the dropdown menu:</p><ul><li><strong>Default</strong></li><li><strong>Transparent</strong></li></ul></td></tr><tr><td>Text transform</td><td><p>Select the font style transform of the text:</p><ul><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li></ul></td></tr><tr><td>Enable arrows</td><td><p>Display arrows on devices:</p><ul><li><strong>None</strong></li><li><strong>On every device</strong></li><li><strong>Only on desktop</strong></li><li><strong>Only on (desktop, tablet)</strong></li><li><strong>Only on (tablet, mobile)</strong></li><li><strong>Only on mobile</strong></li></ul></td></tr><tr><td>Enable pagination</td><td><p>Display pagination on devices:</p><ul><li><strong>None</strong></li><li><strong>On every device</strong></li><li><strong>Only on desktop</strong></li><li><strong>Only on (desktop, tablet)</strong></li><li><strong>Only on (tablet, mobile)</strong></li><li><strong>Only on mobile</strong></li></ul></td></tr><tr><td>Pagination type</td><td><p>Display pagination type on devices:</p><ul><li><strong>None</strong></li><li><strong>Dots</strong></li><li><strong>Fraction</strong></li><li><strong>Number</strong></li></ul></td></tr></tbody></table>

#### Point \[1..5]

<table><thead><tr><th width="262">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Horizontal position</td><td>Determines the horizontal position of point. Can be from <strong>0%</strong> to <strong>100%</strong>, increasing arithmetically of <strong>1%</strong></td></tr><tr><td>Vertical position</td><td>Determines the vertical position of point. Can be from <strong>0%</strong> to <strong>100%</strong>, increasing arithmetically of <strong>1%</strong></td></tr></tbody></table>

#### Colors

<table><thead><tr><th width="264">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td>Select a color scheme to set the text and background colors for the section</td></tr><tr><td>Use background gradient special</td><td><p>Select this checkbox to use custom color for this section.</p><p><em><mark style="color:red;">(The</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>2</strong></mark><mark style="color:red;"> </mark><mark style="color:red;">following settings only take effect if this checkbox is ticked)</mark></em></p></td></tr><tr><td>Background</td><td><p>Select a background color for this section </p><p><em><mark style="color:red;">(If a background gradient is set, the section's background will be set according to the background gradient setting)</mark></em></p></td></tr><tr><td>Background gradient</td><td>Select a background gradient color for the section</td></tr></tbody></table>

#### Product card

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td>Select a color scheme to set the text and background colors for the <strong>product card</strong>.</td></tr></tbody></table>

#### Section padding

<table><thead><tr><th width="261">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Top padding on mobile</td><td>Determines the height of the top inner space of the section on mobile. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom padding on mobile</td><td>Determines the height of the top inner space of the section on mobile. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr></tbody></table>