Text with icon #1 - #2 - #3 - #4 - #5 - #6 - #7

The Text with icon section is designed to highlight key points or features using a combination of icons and short text snippets. This feature allows store owners to present information in a visually engaging manner, capturing the attention of the target audience and making it easier for them to digest important details at a glance.

1. Section Components

Section	Text with icon	Displays a row of columns with icons and text to highlight key store features.
Available block	Column	Allows you to add an icon with content in each column.

2. Location & Setup

To add & set up the Text with icon section:

Open the Shopify Theme Editor (Online Store > Themes > Customize)
Decide where you want to place the new section in Template.
Click "Add Section".
Select "OT: Text with icon (#number of variant)".

3. Highlight Features

Carousel text with icon: Display text with icon in a swipeable format, ideal for saving space.
Flexible layout: Choose the number of columns, with control over alignment and spacing.
Custom icons: Use built-in or custom SVGs and adjust size, image, and thickness to match your brand.

4. Common Use Cases

🤔 How to set up the Text with icon?

To set up the Text with icon section, please follow these steps:

STEP 1: Add Column blocks

Under the Text with icon section, add Column blocks. You can add multiple column blocks, each representing a single column in the section.

STEP 2: Set up Column blocks

Click on Column block to open its settings panel. You can configure each column block by adding an image, heading, text, and optional button.

Set up the icon: You have 4 options:

Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icon.
Find your preferred one in the Icon list, copy and paste its exact name to the "Use another icon" field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.)
Upload a Custom icon image.
Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.)

Set up the content:

Enter the Heading for each column & adjust the Heading size.
Enter the content for each column.
Enter the Heading link users will be redirected to when they click the heading.

STEP 3: Repeat the above steps for other blocks.

STEP 4: Click "Save" when done.

🤔 How to customize the Text with icon section's look?

To change the section's look, customize these:

STEP 1: Click on Text with icon to open its setting panel

STEP 2: Customize the section's look

Enter the Heading for the entire section.
Adjust the size of the section heading. Select the Heading tag for this section to enhance the SEO of the page.
Choose 1 in 3 Line and border options (None, Column, Vertical line) for the border and line of each column. Also, choose Border style.
Choose Column content alignment among Left, Center, Right.
For icons, choose Icon positions, Icon size, and Icon thickness.
Adjust Colors for section elements such as background, column, heading, text…

STEP 3: Customize the section desktop 🖥️/mobile 📱 layout

Scroll down to Desktop/Mobile layout, you can choose:

Column layout: Choose the number of columns to display (up to 5 columns for desktop and 2 columns for mobile).
Section height: Choose among Small, Medium, Large.
Change the block spacing, section width, top/bottom padding.

STEP 4: Click "Save" when done.

🤔 How to enable carousel for the section?

To make the section swipe in a carousel layout, follow this:

STEP 1: Click on Text with icon to open its setting panel

STEP 2:

Scroll down to the Carousel setting group, then:

Toggle "Enable carousel on desktop" to display the text column with icons in a carousel format on desktop devices.
Select "Enable swipe on mobile" to allow users to swipe through the carousel on mobile devices for improved navigation.
Turn on "Show navigation on desktop/mobile" to show the arrows so customers can click to see the next blocks instead of scrolling through them on mobile.
Tick "Auto-play" to automatically rotate through the items in the carousel without requiring user interaction. Set the "Change bar every" interval to determine how frequently the carousel items will automatically change. These two settings apply to both desktop and mobile views.