Icon with text

Overview #

The Icon with Text block is designed to enhance your theme by allowing you to highlight key features or unique selling points using customizable icons paired with text. This block is versatile and can be used in various sections such as Featured Product, Product Information, and Hero.

Key components and functionality #

Icon

This setting allows you to select an icon that will be displayed alongside the text. Icons can be used to visually represent the feature or selling point you wish to highlight.

Text

This setting is used to input the text that accompanies the icon. It is typically used to describe a feature or unique selling point. The default text is "Feature or unique selling point".

Link

You can add a URL to make the icon and text clickable, directing users to a relevant page or resource.

Open link in a new tab

This checkbox allows you to choose whether the link should open in a new tab. The default setting is false.

Alignment settings

The alignment settings allow you to control how the icon and text are positioned on different devices, ensuring a consistent and visually appealing layout.

• Alignment - Desktop: Adjusts the horizontal alignment of the icon and text on desktop devices.
• Alignment - Mobile: Adjusts the horizontal alignment of the icon and text on mobile devices.

Visibility settings

Visibility settings determine how the block is displayed across different devices, allowing you to tailor the user experience.

• Do not hide: The block is visible on all devices. Default
• Hide on desktop: The block is hidden on desktop devices.
• Hide on mobile: The block is hidden on mobile devices.

Available in sections #

• Featured Product
• Product Information
• Hero

Usage notes #

• Responsive Design: Ensure that the alignment settings are optimized for both desktop and mobile views to maintain a consistent user experience.
• Performance: Use optimized icons to ensure fast loading times, especially on mobile devices.
• Accessibility: Provide descriptive text for icons to ensure that all users, including those using screen readers, can understand the content.

Usage examples #

1. Highlighting Features: Use the block to showcase the main features of a product by pairing an icon with a brief description. This can be particularly effective in the Hero section to grab attention immediately.

2. Promoting Unique Selling Points: In the Product Information section, use the block to emphasize what sets your product apart from competitors, such as free shipping or a money-back guarantee.

3. Navigation Aid: In the Featured Product section, use the block to guide users to more detailed information or related products by linking the icon and text to other pages.