# Overlapping product list

### Configure the overlapping product list

Go to **Customize theme**. Click the dropdown menu at the top and select the **Home page** template.

From the left side menu, select **Overlapping product list**.

Customize this section by using the setting on the right side of the theme editor, as described in the following table:

<table data-header-hidden><thead><tr><th width="281"></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>Image ratio</td><td>Choose the image ratio from the following options:<br>- Auto<br>- Landscape<br>- Portrait<br>- Square</td></tr><tr><td>Colors> Color scheme</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  </p><p><em>Note: These can be managed from <strong>Theme settings> color schemes.</strong></em> </p></td></tr></tbody></table>

**Block settings:**\
**Media product list**

<table><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>Product list</td><td>Select any list of products to show in the section.</td></tr><tr><td>Image</td><td>Choose any image.</td></tr><tr><td>Show video</td><td>Select this checkbox to show video instead of the image.</td></tr><tr><td>Video</td><td>Choose any video from the library.</td></tr><tr><td>Heading</td><td>Enter any text to appear as the title.</td></tr><tr><td>Heading size</td><td>Select the heading size from the H1-H6 options.</td></tr><tr><td>Heading tag</td><td>Specify heading code types for SEO and search engines for crawling purposes.</td></tr><tr><td>Description</td><td>Enter any text to appear as the discription.</td></tr><tr><td>Button> Text</td><td>Enter any text for the button.</td></tr><tr><td>Button> Link</td><td>Enter any link for the button.</td></tr><tr><td>Button> Size</td><td>Choose the button size from the available list of options.</td></tr><tr><td>Button> Show button as link</td><td>Select this checkbox to show button as a link.</td></tr><tr><td>Text position</td><td>Choose the position from top, middle or bottom.</td></tr><tr><td>Colors</td><td><strong>Text</strong><br>Select any color for text.  <br><br><strong>Button background</strong><br>Select any color for the button background.  <br><br><strong>Button text</strong><br>Select any color for the button text.  <br><br><strong>Button border</strong><br>Select any color for the button border.  <br><br><strong>Button hover background</strong><br>Select any color for the button hover background.  <br><br><strong>Button hover text</strong><br>Select any color for the button hover text.  <br><br><strong>Button hover border</strong><br>Select any color for the button hover border.  <br><br><strong>Overlay background</strong><br>Select any color for the overlay background.  <br><br><strong>Overlay opacity</strong><br>Adjust the range bar to determine the overlay opacity.</td></tr></tbody></table>