> For the complete documentation index, see [llms.txt](https://sitar-doc.winterinfotech.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitar-doc.winterinfotech.com/sections/text-with-icons.md).

# Text with icons

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

You can add text with icons to clearly define content or policies in your store.

{% hint style="info" %}
**Recommendation Size**\
Background image size: 1920x135
{% endhint %}

<table><thead><tr><th width="279">Section</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading 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 Text with icons 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 Text with icons 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 Text with icons section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Show heading/subheading beside the content on desktop</td><td>Enable this checkbox to show heading or subheading beside the content on desktop in text with icons section.</td></tr><tr><td>Top padding of heading/subheading</td><td>"Top padding of heading/subheading" is used to apply top-padding of heading/subheading. You can give the minimum padding "0px" and maximum padding"60px".</td></tr><tr><td>Icon width</td><td>"Icon width" is used to change the size of the section icon. You can give the minimum width "0px" and maximum width "65px" of the icon.</td></tr><tr><td>Column alignment</td><td><p>Section "Column alignment" is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Direction</td><td><p>Image with icons "Direction" is as follows:</p><ul><li>Row</li><li>Column</li></ul></td></tr><tr><td>Background image</td><td>You can add an image behind the content by using a background image.</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><tr><td>Show seprator</td><td>Check this box to display the seprater between text with icon.</td></tr><tr><td>Enable Icon Background</td><td>Enable this setting to show background of the icons.</td></tr><tr><td>Mobile layout</td><td><p><strong>Enable swipe on mobile</strong> </p><p>The block slides when the checkbox is activated and the block does not slide when the checkbox is inactive.</p></td></tr><tr><td>Section margin</td><td><strong>Top margin</strong><br>You can adjust the Top margin and set it to the minimum margin of “0px” and a maximum margin of “100px.”<br><br><strong>Bottom margin</strong><br>You can adjust the Bottom margin and set it to the minimum margin of “0px” and a maximum margin of “100px.”</td></tr><tr><td>Section inner padding</td><td><p><strong>Top padding</strong><br>You can adjust the Top padding and set it to the minimum padding of “0px” and a maximum padding of “100px.”</p><p><br><strong>Bottom padding</strong><br>You can adjust the Bottom padding and set it to the minimum padding of “0px” and a maximum padding of “100px.”</p></td></tr></tbody></table>

<figure><img src="/files/k0p6fSlBG76T4v84yrJY" alt=""><figcaption></figcaption></figure>

## **Add text with icon**

Click on "**Add text with icon**" and its customization is as follows.

<table><thead><tr><th width="193">Block</th><th>Description</th></tr></thead><tbody><tr><td>Icon</td><td><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Best Price</li><li>Return</li><li>Quality</li><li>Box</li><li>Shipping</li><li>24/7 Service</li><li>Offer</li><li>Support</li><li>Truck</li><li>Dollar sign</li><li>Gift</li><li>Color User</li><li>Color Payment</li><li>Color gift</li><li>Color shipping</li><li>Deal</li><li>Return policy</li><li>Payment</li><li>24/7</li><li>Online sale</li><li>Discount</li></ul></td></tr><tr><td>Custom svg code</td><td>Using this you can add custom svg icon code.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Description</td><td>Enter text to display in the “Description” section.</td></tr></tbody></table>

<figure><img src="/files/Zx4HRm6gZKV1tJqm50Y9" alt=""><figcaption></figcaption></figure>