# Text with icons

### Configure the section

Select the customize theme option. Click on the dropdown menu at the top to select the **Home page template.**

From the left side menu, select **Text with icon.**

Customize the **Text with icon** section by utilizing the settings on the right side of the theme editor, as described below:

<table data-header-hidden><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>General</td><td><strong>Section visibility</strong><br>Select from the options to select the visibility of this section:<br>-Always<br>-Small (On selecting this, the section will be visible on mobile devices only.)<br>-Large (On selecting this, the section will be visible on large devices only.)<br><br><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.<br><br><strong>Section background</strong><br>Choose the background color from solid or gradient. These colors can be managed in the assigned color scheme.<br><br><strong>Separator line</strong><br>Choose the separator line visibility from below options:<br>- Top<br>- Bottom<br>- Both<br>- None</td></tr><tr><td>Column</td><td><strong>Desktop column count</strong><br>Adjust the range bar to determine the number of columns on desktop.<br><br><strong>Desktop column gap</strong><br>Adjust the range bar to determine the gap between columns on desktop.<br><br><strong>Mobile column count</strong><br>Adjust the range bar to determine the number of columns on mobile.<br><br><strong>Mobile column gap</strong><br>Adjust the range bar to determine the gap between columns on mobile.<br><br><strong>Swipe on mobile</strong><br>Enable this checkbox to enable swipe on mobile.</td></tr><tr><td>Icon</td><td><strong>Icon width</strong><br>Adjust the range bar to determine the icon width on desktop.<br><br><strong>Mobile icon width</strong><br>Adjust the range bar to determine the icon width on mobile.<br><br><strong>Icon position</strong><br>Choose the position from top or left.</td></tr><tr><td>Section spacing</td><td><p><strong>Desktop top space</strong></p><p>Adjust the range bar to add spacing at the top of the section for desktop view.  <br> </p><p><strong>Desktop bottom space</strong></p><p>Adjust the range bar to add spacing at the bottom of the section for desktop view. </p><p> </p><p><strong>Mobile top space</strong></p><p>Adjust the range bar to add spacing at the top of the section for mobile view. </p><p> </p><p><strong>Mobile bottom space</strong><br>Adjust the range bar to add spacing at the bottom of the section for mobile view. </p></td></tr></tbody></table>

### Block settings: Product card and inner blocks

<table><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>Icon type</td><td>Choose from icon list or custom icon to disply the icon.</td></tr><tr><td>Icon list</td><td>Choose any icon from the given list of icons.</td></tr><tr><td>Custom icon</td><td>Select any image for the icon, from the store library.</td></tr><tr><td>Title</td><td>Add the title to display with the icon.</td></tr></tbody></table>