# Promotion card

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

Koto theme provides a section, namely "Promotion card" in this section, you can show the offer and sale. You can display a maximum of Eight Offers in this section.

{% hint style="info" %}
**Recommendation Size**\
Promotion card image size: 767x387
{% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><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><tr><td>Layout</td><td><p>Customization of the "Layout" in the section is as follows:</p><ul><li>Wide</li><li>Container</li></ul></td></tr><tr><td>Heading</td><td><p><strong>Text</strong> </p><p>Enter text to defines the main heading of the section.<br></p><p><strong>Text color</strong> </p><p>You can customize the foreground color of the heading by using the color option. </p><p></p><p><strong>Size</strong></p><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><p><strong>Alignment</strong> </p><p>Customization of the "Alignment" in this is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td><h4>View all button</h4></td><td><p><strong>Label</strong> </p><p>Use "Label" to add a label to the Button in the slide. </p><p></p><p><strong>Link</strong> </p><p>Use "Button link" to add a link to the Button in the slide.  </p><p></p><p><strong>Style</strong> </p><p>Customization of the "Button style" in the slide is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Stretch image to fill</td><td>Enable this checkbox to zoom image of this section. </td></tr><tr><td>Background color</td><td>You can customize the background color when image is not strech. </td></tr><tr><td>Display type</td><td><p>Customization of the "Display type" in the promotion card is as follows:</p><ul><li>Grid</li><li>Carousel</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “3” and a maximum of “6” columns.</td></tr><tr><td>Image ratio</td><td><p>In the section, Image size customization is as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul></td></tr><tr><td>Show zoom image on hover</td><td>Enable this checkbox to apply zoom effect on image hover.</td></tr><tr><td>Show border around card </td><td>Enable this settings to show border around the promotion card. </td></tr><tr><td><h4>Banner number</h4></td><td><p><strong>Show number over the image</strong> </p><p>Enable this checkbox to show number on image of this section.  </p><p></p><p><strong>Background color</strong> </p><p>You can customize the background color of the number by using the color option. </p><p></p><p><strong>Foreground color</strong> </p><p>You can customize the foreground color of the number by using the color option. </p><p></p><p><strong>Border color</strong> </p><p>You can customize the border color of the number by using the color option. </p><p></p><p><strong>Corner radius</strong> </p><p>"Corner radius" is to customize the radius of number in the section. You can set radius minimum “0” and a maximum “40” px. </p></td></tr><tr><td>Text</td><td><p><strong>Size</strong> </p><p>Customization of "Text size" is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p><strong>Alignment</strong> </p><p>Customization of "Text alignment" as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Carousel</td><td><p><strong>Style</strong> </p><p>This feature specifies the design and appearance of carousel controls like below:</p><ul><li>None</li><li>Dots</li><li>Arrows </li></ul><p><strong>Disable arrows in mobile</strong> </p><p>Enable this checkbox to hide arrow in mobile view. </p><p></p><p><strong>Enable autoplay</strong></p><p>Enable this checkbox to automatically rotate the images in the logo list. </p><p></p><p><strong>Autoplay interval</strong> </p><p>Use the bar to set the auto-rotate time of the logo list slide. You can set a minimum of “3” seconds and a maximum of “9” seconds.</p></td></tr></tbody></table>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FpdQ36zJKE5dPaGeIqeDg%2Fpromotion-card.png?alt=media&#x26;token=d1b27981-b479-4b29-9fbf-7b0ea805a44a" alt=""><figcaption></figcaption></figure>

## Add Image

To add image to the promotion-card section, click on the 'Add Image. There are many options available similar to the image, as you can see in the below points and screenshot:

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Used image to add to the image in the block.</td></tr><tr><td>Link</td><td>Use "Link" to add a link to the block image.</td></tr><tr><td>Heading</td><td>Enter text to defines the image heading of the block.</td></tr></tbody></table>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FsoeqJguIfX7c2PFaxJYK%2Fpromotion-card-block.png?alt=media&#x26;token=7174cda4-e45c-4a79-afee-66872d9877e1" alt=""><figcaption></figcaption></figure>