1. What is Text columns with icons?
The Text columns with icons section allows you to display up to four columns of text, each paired with an icon. This section is ideal for highlighting key features, services, or benefits of your product or store in a visually engaging way.
2. Section Components
|
Section
|
|
Displays several text columns, each with an optional icon.
|
|
Available block
|
|
Used to add a single column that has text & an icon.
|
3. Location & Setup
- Go to "Online Store" > "Themes" > "Customize"
- Select where you want to place it
- Click "Add Section"
- Search for Text columns with icons
- Click on it to add.
4. Core Features
-
Customizable Icons: Choose from built-in icons or upload custom images.
-
Flexible Text Columns: Display multiple columns of text and icons.
-
Responsive Design: Adjusts seamlessly to different screen sizes for better user experience.
5. Common Use Cases
🤔 How to set up Text columns with icons section?
Don’t know where to start with your Text columns with icons section? Here's how:
STEP 1: Add the text & icons
Click on the Column block to open its settings panel, then you can:
-
Icon options (3 ways):
- Choose an Icon from the dropdown list.
- Find your favorite icon from the Theme icon list and paste it into the Use another icon field.
- Upload a Custom icon image.
- Enter the Heading and Text to add the content.
STEP 2: Repeat for additional columns
Add more Column blocks and repeat Step 1 if needed.
STEP 3: Adjust the number of columns shown
-
On desktop 🖥️: Go to Desktop layout → choose the Column layout (from 1–5 columns).
-
On mobile 📱: Go to Mobile layout → choose the Column layout (1 or 2 columns).
STEP 4: Click “Save” when done.
For more customization options, continue reading the next part What customization options can you give your Text columns with icons?
|
🤔 What other customization options can you give your Text columns with icons?
|
For the whole Text columns with icons section:
|
|
✨ Change the heading size:
|
Click on the Text columns with icons section, and choose the Heading size to be Small, Medium, or Large.
|
|
✨ Change the Heading tag (SEO):
|
Click on the Text columns with icons section, find and choose the Heading tag from the list.
|
|
✨ Add border between each column:
|
Click on the Text columns with icons section, find and choose Line and border to be None, Full border, or Vertical line.
|
|
✨ Change the icon position:
|
Click on the Text columns with icons section, choose Icon position to be Next to text or Above text.
|
|
✨ Adjust the icon size:
|
Click on the Text columns with icons section, adjust Icon size from 20px to 100px.
|
|
✨ Make the section a carousel:
|
In Carousel: turn on Enable carousel on desktop (🖥️) and Enable swipe on mobile (📱). Adjust Auto-play every to control slide timing.
|
|
✨ Change the height of the whole section:
|
Go to Desktop layout (🖥️) or Mobile layout (📱), then change Section height.
|
|
✨ Change the height of images:
|
Go to Section layout, then choose your preferred image height in Desktop height (🖥️) and Mobile height (📱).
|
|
✨ Change the section width / padding / divider:
|
Scroll to the Section layout group and adjust Section width, padding, or add a divider.
|
|
✨ Change color scheme:
|
Choose the overall scheme for both light and dark mode in Color scheme.
|
|
✨ Change the background color of the columns:
|
Go to Colors and change Column background (light) or Column background (dark).
|
|
✨ Change the color of the icons:
|
In Colors, adjust Icon (light) or Icon (dark) settings.
|
|
Need help? Contact our support team at Omni Themes Support.
