# Product with offer banner

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

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

<table><thead><tr><th width="272">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>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://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F4mWv5ODADA35jbh10fPG%2Fproduct-offer-benner.png?alt=media&#x26;token=1bb08c24-214c-41f8-ab72-53aa230716fc" alt=""><figcaption></figcaption></figure>

## Add counter item

Click on "**Add counter item**" and its customization is as follows.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Product card</td><td><p><strong>Heading</strong><br><strong>Text</strong><br>Enter text to display as a title on the section<br><br><strong>Size</strong></p><p>Following is the font size customization of the heading in the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p><strong>Alignment</strong></p><p>Following is the Heading alignment customization of the heading of the section:</p><ul><li>Left</li><li>Center</li></ul><p><strong>Color scheme</strong></p><p>In this section, you can change the background and foreground color of a heading 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><p><strong>Display spacing around heading</strong><br>By enabling this checkbox, you can see spacing around heading.<br><br><strong>Description</strong><br><strong>Text</strong><br>Enter text to display as a description in the section.<br><br><strong>Style</strong><br>Customization of the "Description style" in this section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul><h4>Button</h4><p><strong>Label</strong><br>Use "Label" to add a label to the Button in the section.<br><br><strong>Link</strong><br>Use "Link" to add a link to the Button in the section.<br><br><strong>Style</strong></p><p>Customization of the button style in the is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul><h4>Product card</h4><p><strong>Collection</strong><br>Select a collection to display products in the section.<br><br><strong>Style</strong></p><p>Customization of the "Style" in this section is as follows:</p><ul><li>Standard</li><li>Card</li></ul><p><strong>Image ratio</strong></p><p>Product image customizations in a section are as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul><p><strong>Maximum products to show</strong><br>"Maximum products to show" is to specify how many products to show in a section. You can show a minimum of “2” and a maximum of “8” products.<br><br><strong>Show second image on hover</strong> </p><p>By enabling this checkbox you can “Show the second image on hover”.<br><br><strong>Show vendor</strong> </p><p>By enabling this checkbox you can display the “Product vendor”.<br><br><strong>Enable add to cart button</strong> </p><p>enabling this checkbox, you can see add to cart button.<br></p><p><strong>Color scheme</strong></p><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><tr><td>Banner with text</td><td><p><strong>Image</strong> </p><p>Use "Image" to add the image to the section.</p><p></p><p><strong>Content position</strong></p><p>Customization of "Content position" is as follows:</p><ul><li>Top</li><li>Middle</li><li>Bottom</li></ul><p><strong>Content alignment</strong></p><p>Customization of "Content alignment" is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul><p><strong>Show container</strong> </p><p>When 'Show container' is enabled, the banner's content container box will be visible. </p><p></p><p><strong>Color scheme</strong></p><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><h4>Heading</h4><p><strong>Text</strong><br>Enter text to display as a title on the section<br><br><strong>Size</strong></p><p>Following is the font size customization of the heading in the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p><strong>Subheading</strong> </p><p>Enter the text you would like to display as a subtitle above the title.</p><h4>Button</h4><p><strong>Label</strong><br>Use "Label" to add a label to the Button in the section.<br><br><strong>Link</strong><br>Use "Link" to add a link to the Button in the section.<br><br><strong>Style</strong></p><p>Customization of the button style in the is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr></tbody></table>

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FHGaZ9QJVFzn0HprUecFf%2Fproduct-offer-benner-block.png?alt=media&#x26;token=f07fdaea-cdeb-4b00-9f1c-418a13e5165f" alt=""><figcaption></figcaption></figure>