Shopify Dawn theme: Icons With Text & How to enrich it (Part 3)

Nov 30, 2023 Update: Easy Content Builder now supports Icons With Text using metaobjects. Learn more.

This post is part of a series called Shopify Dawn theme enhancements:

• Shopify Dawn theme: multicolumn & How to enrich it (Part 1)
• Shopify Dawn theme: Images With Text & How to enrich it (Part 2)

In the previous post in this series, we explored how to add the multicolumn sections with rich content blocks (not just a Text block) and Images With Text (with different styles) to the Dawn theme.

In this post, our team at Posstack will:

• Explain a few missing features in the Dawn theme
• Share how to enhance the Icons With Text in the Dawn theme without coding

1 - Missing features in Dawn:

The Dawn theme lets you add Icons With Text inside the Product information section only. You can only add a maximum of 3 icons with 2 fixed layouts, 'Vertical' and 'Horizontal'.

What if you want to:

• Add Icons With Text to any section (besides the core Product Information section)
• Add more icons per row (e.g., 6 icons with text)
• Add your custom SVG icons
• Set the icon position left/right/top/bottom.
• Specify the number of icons per row (if you plan to create multiple rows of icons)
• Specify the color of the text (both Heading and body text)

2 - How to enrich the Icons With Text in the Dawn theme?

Using the Icons With Text section provided by Easy Content Builder (which is free) is quite handy. It allows you to:

• Add up to 6 icons per row.
• Support SVG Icons, Font icons, or Image
• Add Icons With Text to any section on your page (Not just the core Product information section)
• Set the font weight (bold) to the Headings and color to the body text elements (muted, emphasis, etc.)
• Specify the number of icons per row on mobile/desktop (a handy way to create 2 or more rows of icons with text)
• Set the icon position (left/right/top/bottom)

Here are a few examples of Icons With Text sections:

Icons with Text - Add extra information to a hero section

See the frontend demo: here

Tip: Watch this video to see how you can combine Icons With Text and other sections in Easy Content Builder to create a hero section.

Icons With Text - Show more than 6 items using Dynamic sources

You have the option to display more than six items in the Icons With Text section by using the dynamic source approach. By default, the section allows for a maximum of six items, but you can exceed this limit by utilizing dynamic sources. Watch the video tutorial below for a demonstration with eight items and further details.

Icons with Text - Flexible number of icons per row

See the frontend demo: here

 
Icons With Text - Flexible number of items per row.

Tip: The following video walks you through how to create a text column with icons, auto-scrolling text bar, auto-scrolling logo list using Icons With Text section.

Icons with Text - used to highlight featured testimonials

See the frontend demo: here

 
Icons With Text - Featured testimonials.

Icons with Text - add to any sections & flexibly set the icons’ position

See the frontend demo: here

 
Icons With Text - Featured testimonials.

Icons with Text - set the text color (Both Heading & body text)

See the frontend demo: here

 
Icons With Text - Change the text weight and color.

Icons with Text - enable animation on scrolling

See the frontend demo: here

 
Icons With Text - Animation on scrolling

3 - More Shopify ‘Icons With Text’ template samples

Here are some sample multicolumn layouts for you to get inspired:

• Shopify pre-built product templates: see demo.
• Some pre-built section variations you can use with the Easy Content Builder app.

FAQs

If you have any questions about the Easy Content Builder app, what it can do, or to find out possible options to enhance the Dawn theme, please just ask. We are happy to answer your questions.

PS. Useful resources:

To create your first multicolumn layout with the help of the Easy Content Builder (free app!), just follow these 4 easy steps.