✓ In this article, we'll look at what the "Icon with text" item is, how to use it when starting a creation from scratch, and how to change the color of an icon if you're importing it from one of our pre-configured creations.
Understanding the "icon with text" item
The "icon with text" item is, as its name suggests, a combination of an icon image and text. This item is frequently used in e-commerce to quickly and visually highlight relevant information about your company or products. It enables your visitors to access key information at first glance. Used properly, the icon with text can become a real asset in boosting your conversion rates.
With Kehio Editor, this item gives you unlimited flexibility in the composition of icons and text. We've designed this item to be flexible and optimized, allowing you to create any type of section or block to suit your needs. Whether you want to highlight product features, guarantees or special offers, the icon with text can be customized to fit perfectly with your message and store design.
Add a text icon to your creation from scratch.
Step 1 : Select the type
To begin with, if you wish to use this item, you need to select the "Icon with text" type in the Content panel. This will open the available options, allowing you to start integrating an icon with text into your creation.
Step 2: Choose your alignment
Once you've selected the type "icon with text ", set the desired alignment for desktop display. By default, this alignment will also be applied on mobile and tablet, but you can choose a different alignment for mobile an tablet devices if your design requires it.
ℹ️ Note: The chosen alignment will affect all icons in this Content. If you want different alignments for each icon, you'll need to create several Contents, each containing a single "Icon with text" item, so that you can manage each icon's alignment separately.
Step 3 : Add your Icon URL from the shopify library.
To integrate your icon image, start by uploading the desired image to the files section of your Shopify store. Once the image has been imported, copy its URL and return to the Kehio Editor application to paste it into the field provided.
ℹ️ Note: We recommend using SVG format icons for best optimization. Ideally, icon dimensions should be 500 x 500 pixels. This ensures high visual quality while maintaining optimal loading times, which is crucial for both user experience and SEO.
Step 4 : Adding text to your icon
Once you've integrated your icon, move on to adding the text that will be attached to it. Use the text editor below the image to enter and edit your text. This field works like the classic Kehio Editor, allowing you to modify size, color and other styling parameters to tailor the text to your specific needs.
📖 If you'd like to find out more about how to set text content parameters and options with Kehio Editor, read the article here
Step 5 : Modify the size
To adjust the size of your icon, head to the "Icon Width and Margin" section. Here, you can modify the size for all screen resolutions. By default, adjusting the size on a desktop will apply the same value across all resolutions. However, you can also tailor the icon size specifically for each resolution independently.
This feature is better to ensure that the icon remains visually consistent and properly proportioned across all devices, thereby enhancing the user experience and supporting a responsive design
Step 6 : Icon position
In this step, you can position your icon 360 degrees around your text, giving you the flexibility to choose the layout that best suits your needs and the aesthetics of your creation.
You can also configure the icon's position differently for desktop, mobile and tablet displays. As with the other options, desktop positioning will be applied by default on mobile and tablet. If you wish to display the icon differently on mobile and tablet devices, you can do so by specifically selecting the option in the editor.
This ability to independently adjust the position of the icon for different types of device allows you to fully customize the appearance of your blocks for an optimal user experience.
Step 7 : Modify the margin of your icon
In this section, you have the ability to control the spacing between your icon and your text. This functionality allows you to bring the icon closer to or further away from the text based on your preferences and design requirements. You can adjust this spacing independently for displays across all resolutions.
Properly adjusting the space between elements can significantly enhance the readability and visual appeal of your content. It helps to create a more consistent and engaging user experience while highlighting the key elements of your message.
Change the color of the icon with text of an imported creation
When you import a creation and want to keep the icon but change its color, you can use the free SVG Color tool.
Steps to change icon color :
Copy icon URL: Access the Kehio Editor interface and copy the URL of the SVG icon you wish to modify.
Access the SVG Color tool: Go to SVG Color.
Paste the SVG URL: In the tool, paste the SVG URL and click on "Load SVG".
Change color: Once your SVG is displayed, you can change the colors to match your graphic style.
Download icon: After modification, download the modified SVG and import it into your Shopify store files.
Integrate modified icon: copy the link to the downloaded icon and paste it into Kehio Editor to update the icon in your creation.
If you need help understanding or modifying the "Icon with text" item, please feel free to contact our support team at any time by e-mail or live chat .