The Text columns with icons section highlights key store policies or services such as worldwide shipping, 14-day returns, secure payment, and 24/7 support. Each item includes an icon, a title, and a short description, helping customers quickly understand the main benefits of shopping with your store.
This guide helps you understand how to customize the Text columns with icons section to better match your brand.
You can access a Text columns with icons by following these simple steps:
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Text columns with icons.
You can configure some general options for the Text columns with icons section below:
Enable swipe on mobile: Toggle this on to allow horizontal swipe on mobile devices. Useful when you have multiple columns that don’t fit on a small screen.
Color scheme: Select a predefined color scheme for this section.
Show item with border: Toggle this to add or remove a border around items.
Desktop icon position: This allows you to choose where the icon will be positioned relative to the text on desktop screens. You have three options:
Top: The icon will appear above the text. (Note: Top is the default mobile layout)
Left: The icon will appear to the left of the text.
Left middle: The icon will appear vertically centered to the left of the text.
Icon background type: This option allows you to choose a background style for the icon. Clicking on the dropdown might reveal options like "Circle," "Square," or "Border".
Icon spacing: This allows you to control the amount of space between the icon and the text. You can choose between "Small", "Medium", or "Large".
Heading size: Choose the size for the heading text. Options included like Large, Medium, Smalll, Extra small, Extra extra small.
Heading style: Choose the style of the heading, options included:
+ Normal: Displays the heading with standard capitalization.
+ Uppercase: Displays the heading in all capital letters.
Heading tag: Sets the HTML tag of the heading, which does affect SEO. You can also change the Heading tag to:
+ H1-H6: Sets the HTML tag of the heading, which does affect SEO.
+ div: A generic container element with no semantic meaning.
+ span: An inline element, also with no semantic value.
+ p: Wraps the heading in a paragraph tag, meaning it's treated as regular text (not a heading).
Description size: This lets you choose the size of the description text. You can choose size between "Small", "Medium", or "Large".
Button size: This is a dropdown menu allows you to select the size of the button. Clicking on the dropdown will likely show other size options like "Extra small", "Small", or "Medium".
Button style: This is another dropdown menu lets you choose the visual style of the button. Clicking on the dropdown might reveal options like "Outline," "Solid," "Link,"or "Solid 3D."
Top padding: Sets the space between the top of the video section and the element above it (in pixels).
Bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels).
Mobile top padding: Sets the space between the top of the video section and the element above it (in pixels) on mobile devices.
Mobile bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels) on mobile devices.
To add a Column block, click the Add Column button (plus icon ➕) under the Text columns with icons section.
Column block contains settings that apply to individual columns within the text columns with icons layout.. You can configure some general options for the Column block below:
If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon
Icon: Select an icon from the available library to display, enhancing visual appeal and conveying messages quickly.
Custom SVG icon: Use SVG icons from libraries like Remixicon or Tabler Icons, ensuring sharp image quality and scalability.
Custom image icon: Upload your own custom image icon, enabling personalization and brand alignment.
Icon height: Adjust the icon height on desktop screens, controlling the display size.
Mobile icon height: Adjust the icon height on mobile phone screens, ensuring the icon displays appropriately on small screens.
Heading: This option allows you to enter and customize the main heading text for the column or item. You can format the text using bold, italic, or add a link.
Description: Add a short paragraph or sentence to describe the feature or service. Text formatting options include: bold, italic, add link, bullet list, number list,...
Button label: Text that will appear on the button. If you leave this blank, the entire item (icon + text) becomes clickable.
Button link: Paste the URL or search for a page/product/collection you want the button to link to.
