Multipurpose theme documentation
Multipurpose Fashion Theme
Text Columns With Icons
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Text & Content Sections > Text Columns with Icons
Overview
The Text columns with icons section displays a multi-column layout with an icon (or custom image) per column. Use it for features, benefits, or process steps—e.g. "Free shipping", "Easy returns", "24/7 support". Each column has an icon, heading, text, and optional link. Block-based: add one Column block per column. Fully accessible (WCAG-aligned), mobile-optimized with 44px touch targets, and RTL compatible.
Where to Add This Section
- Go to Online Store > Themes > Customize.
- Select Homepage or desired template.
- Click Add section.
- Choose Text columns with icons.
- Save.
📷 Image placeholder: Add a screenshot of Text columns with icons on storefront.
Quick Setup (3 Steps)
- Add Column blocks — Add one block per column (2–4 typical).
- Add content — Icon, heading, text, optional link per block.
- Configure columns — Set desktop/tablet/mobile columns and spacing.
Section Settings
| Setting | Description |
|---|---|
| Layout | |
| Container width | Page, Large, Full |
| Desktop columns | 1–6 per row |
| Tablet columns | 1–4 per row |
| Mobile columns | 1–3 per row |
| Column gap / Row gap | 0–64px spacing |
| Equal height | Same height per row |
| Vertical alignment | Top, Center, Bottom |
| Padding top / bottom | Section spacing |
| Icon | |
| Icon size | 24–96px |
| Icon color | Icon fill color |
| Icon background shape | None, Circle, Square, Rounded |
| Icon background color | Background when shape is set |
| Icon border | Optional border around icon |
| Content | |
| Section heading | Optional section title |
| Heading alignment | Left, Center, Right |
| Heading size | Small, Medium, Large, Custom |
| Button label / link | Section-level button (when whole column not clickable) |
| Whole column clickable | Uses block link or section button link |
| Style | |
| Hover elevation / shadow | Visual feedback on hover |
| Hover background color | Column hover tint |
| Border radius / Shadow intensity | Card styling |
| Animation | |
| Enable animation | Scroll-based fade/slide |
| Animation style / duration / delay | Fade, Slide up, Slide down |
| Stagger columns | Sequential animation per column |
Blocks: Column
Each column is a Column block. Add multiple blocks for multiple columns.
| Setting | Description |
|---|---|
| Icon | Theme icon (chat, star, heart, truck, gift, shield, checkmark, tag, package, award) or Custom (upload) |
| Custom icon | SVG or PNG when Icon is Custom |
| Icon accessible name | Optional. Leave blank if icon is decorative (meaning in heading). Add text for screen readers when icon conveys unique meaning. |
| Heading | Column heading |
| Text | Column body text (rich text) |
| Link | Optional URL. Used when whole column is clickable, or as fallback. |
Accessibility
This section is built for full accessibility compliance:
-
Icons — Decorative icons use
aria-hidden="true". When Icon accessible name is set, icons userole="img"andaria-label(oraltfor custom images). - Focus — Visible focus styles with theme primary color on links, buttons, and clickable columns.
- Touch targets — 44px minimum on mobile (WCAG 2.5.5) for clickable columns and buttons.
-
Semantic structure — Headings, paragraphs, lists;
role="region",aria-labelon section. -
Reduced motion — Respects
prefers-reduced-motionfor animations and hover effects. - RTL — Uses logical properties for alignment.
Mobile Optimization
- 44px minimum touch targets for buttons and clickable columns
- 16px minimum font size to prevent iOS zoom on focus
- Tap highlight for touch feedback
- Responsive column layout (1–3 columns on mobile)
- Reduced padding and gaps on small screens
Step-by-Step Setup
Step 1: Add the section
Add Text columns with icons to your homepage or template.
Step 2: Add Column blocks
- Click Add block > Column.
-
For each block:
- Select Icon (from theme icons or upload image)
- Enter Heading (e.g. "Free Shipping")
- Enter Text (e.g. "On orders over $50")
- Add Link if the column should be clickable
- Use Icon accessible name only when the icon conveys meaning not in the heading
- Add 2–4 columns; drag to reorder.
Step 3: Configure section
- Section heading — Optional title (e.g. "Why shop with us").
- Desktop columns — 3 or 4 for feature grid.
- Tablet columns — 2 or 3.
- Mobile columns — 1 or 2.
- Icon size and Icon color — Match your design.
- Icon background shape — Circle, Square, Rounded, or None.
- Whole column clickable — Enable to make entire column a link.
- Equal height — Enable for aligned row heights.
- Save.
Use cases
- Feature grid — Free shipping, returns, support
- Process steps — How it works (1, 2, 3)
- Benefits — Product or brand benefits
- Trust signals — Secure checkout, eco-friendly, etc.
For merchants
- 3–4 columns work well for features; 2 for longer text per column.
- Keep heading and text concise; icons reinforce the message.
- Use consistent icon style (all theme icons or all custom).
- Test on mobile—single column or 2 columns often better on small screens.
- Leave Icon accessible name blank when the heading already describes the icon.
Common mistakes
| Mistake | Fix |
|---|---|
| No Column blocks | Add Column blocks with content |
| Too many columns | 2–4 columns; more can feel cramped on mobile |
| Long text per column | Keep text short (1–2 sentences) |
| Inconsistent icons | Use same icon style across columns |
| Missing link | Add Link if columns should be clickable; enable "Whole column clickable" |
| Redundant icon label | Leave Icon accessible name blank when heading already describes the icon |
FAQs - Text Columns with Icons
The Text Columns with Icons section displays a multi-column layout with an icon (or image) per column. It is ideal for showcasing features, benefits, or steps in a process, such as "Free shipping", "Easy returns", and "24/7 support".
- Go to Online Store > Themes > Customize.
- Select the Homepage or the desired template.
- Click Add section.
- Choose Text Columns with Icons.
- Save your changes.
Yes, you can add multiple columns by adding Column blocks. Typically, 2–4 columns work best, but you can adjust this based on your design needs.
Yes, the icon size can be customized using the Icon size setting in the section settings. The default size is 48px, but you can adjust it as needed.
Yes, you can upload your own custom icons (SVG or PNG) if you select the Custom option for the icon in the block settings.
The "whole column clickable" option allows you to make the entire column, including the icon, heading, and text, a clickable link. You can link it to a URL or set it to the section button link.
You can adjust the heading alignment using the Heading alignment setting. Choose from left, center, or right alignment to suit your design.
Yes, the Text Columns with Icons section is fully responsive. It adjusts to desktop, tablet, and mobile devices, with customizable columns for each.
Yes, you can control the spacing between columns and rows using the Column gap and Row gap settings in the section settings.
You can add a link to each column in the Link setting in the column block settings. If you enable the "whole column clickable" setting, the entire column will link to the provided URL.
The Equal height setting ensures that all columns in the same row have the same height, making the layout more visually consistent, especially when the text content varies in length.