# Image with product

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

In this section, when a point on the image is clicked, the image zooms in, and when double-clicked, the image zooms out while also activating the related product.

{% hint style="info" %}
**Recommendation Size**\
Banner image size: 1550x1488
{% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Text</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Size</td><td><p>Following is the font size customization of the heading of the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the Image with product section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p><strong>position</strong></p><p>Customization of the "Subheading position" in the Image with product section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p><strong>Heading/subheading alignment</strong></p><p>Customization of the "Heading/subheading alignment" in the Image with product section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Image height</td><td><p>Customization of the "Image height" in this section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FNVd7ZwSpgl8Bij00j5sf%2Fs1.png?alt=media&#x26;token=93f1146f-ec8c-420a-bf44-d9d75ad31acc" alt=""><figcaption></figcaption></figure>

## **Add Image**

To add blocks to this section, click on the 'Add image'. There are many options available similar to the Image with product.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "image" to add the image to the section.</td></tr><tr><td>Product</td><td><p><strong>Position top</strong><br>You can set the position of the product image from the top using position top. You can set a minimum of “0%” and a maximum of “100%” from the top.<br><br><strong>Position left</strong><br>You can set the position of the product image from the left using position left. You can set a minimum of “0%” and a maximum of “100%” from the left.<br><br><strong>Select product</strong><br>Select a product to display selected product in the section. <br><br><strong>Collection color scheme</strong></p><p>You can change the background and foreground color of a collection list using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FtPsxh3oUB4feJ2g646S1%2Fs2.png?alt=media&#x26;token=832f2c42-b41a-4c08-be6e-ad3a55622b17" alt=""><figcaption></figcaption></figure>