# Products with image

### Configure the section

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

From the left side menu, select **Products with image**.

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>Make section full width</td><td>Check this checkbox to make the section into full-width.</td></tr><tr><td>Mobile</td><td><strong>Reverse block placement</strong><br>Check this checkbox to reverse the placement of the block on the mobile view only. <br><em>(Note: The blocks can be placed on the left or right side by dragging and dropping them in the editor.)</em></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  </p><p><em>Note: These can be managed from <strong>Theme settings> color schemes.</strong></em> <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.</p></td></tr><tr><td>Section padding</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>  </p><p>Adjust the slider to add spacing at the bottom of the section for mobile view. </p></td></tr></tbody></table>

**Block settings: Image**

<table><thead><tr><th width="289"></th><th></th></tr></thead><tbody><tr><td>Image 1-6</td><td>Choose any six images to slide them one by one.</td></tr><tr><td>Change slides every</td><td>Adjust the range bar to change the slides by selecting the seconds delay.</td></tr><tr><td>Content</td><td><strong>Heading</strong><br>Add heading text.<br><br><strong>Heading size</strong><br>Select the heading size from the H1-H6 options.<br><br><strong>Heading tag</strong><br>Specify heading code types for SEO and search engines for crawling purposes.<br><br><strong>Content</strong><br>Add the description text. </td></tr><tr><td>Button</td><td><strong>Text</strong><br>Add the button text.<br><br><strong>Link</strong><br>Add a link to redirect the button.<br><br><strong>Size</strong><br>Choose the button size from the available list of sizes.</td></tr><tr><td>Pagination</td><td><strong>Style</strong><br>Choose from Bars or dots to determine the pagination style of slides.<br><br><strong>Position</strong><br>Choose the top or bottom position for the pagination styles.</td></tr><tr><td>Colors</td><td><strong>Text</strong><br>Choose the text color.<br><br><strong>Overlay color</strong><br>Choose the overlay color.<br><br><strong>Overlay opacity</strong><br>Adjust the range bar to determine the overlay opacity.</td></tr></tbody></table>

**Block settings: Products**

<table><thead><tr><th width="295"></th><th></th></tr></thead><tbody><tr><td>Choose products</td><td>Choose upto four products to display the stacked view. </td></tr><tr><td>Grid image ratio</td><td>Choose from the various options to determine the image's ratio in the grid.</td></tr><tr><td>Grid image fit</td><td>Choose from cover or contain to determine the grid image fit.</td></tr><tr><td>Desktop</td><td><strong>Layout</strong><br>Choose the product layout from one item per row or two items per row on the desktop view.</td></tr><tr><td>Mobile</td><td><strong>Layout</strong><br>Choose the product layout from one item per row, two items per row or a slider on the mobile view.</td></tr></tbody></table>