How to Add and Customize Texts with Icons
On This Page
TABLE OF CONTENTS
Getting Started
The Text with Icons feature is an excellent means of creating and adding short, direct messages, with easily understood icon images, to your store's homepage. These convenient displays allow for concise detailing of important information.
Examples of convenient display topics here include: shipping, refund policies, payment descriptions, specific guarantees, etc.
Finding Text with Icons Settings
In order to begin customizing this section, follow these steps:
- From your myShopify homepage, go to Online Store > Themes
- Find and click Customize
- You will see the customization menu on the left of your screen. Find and select Text with Icons
Customizing Text with Icons Settings
Once you have opened the customization tab for the Text with Icons, you will find two sections for customization: Show Section and Stack on Mobile.
Please note that this section only allows for four icon/text sets to be added per section. While it may be possible to add several sections, we feel that concisely presenting your stores messages in these four ought to suffice
Show Section
This section includes a single tick box that allows for the entire Text with Icons section to be enable or disabled. Selecting the tick box will enable this section, while deselecting the tick box will disable it.
Stack on Mobile
This section includes a tick box that affects only the view that customers using mobile devices see. When this box is deselected, the icons and corresponding text boxes will appear in a timed, rotating display. This means only one icon and text box can be displayed at a time. When this box is selected, customers on mobile will be able to see the icons and corresponding text boxes all together. They will appear two wide and two tall, if all four spaces are utilized.
Finding Text with Icons Items
Following the customization of the Text with Icons settings, you will want to create and fully customize the text/icon sets displayed on your page. In order to do begin doing so, please follow these steps:
- From your myShopify homepage, go to Online Store > Themes
- Find and click Customize
- You will see the customization menu on the left of your screen. Find Text with Icons
- From Text with Icons, select the drop down arrow and select Add Item
- Select the new item block
Adding and Customizing Text with Icons Items
Once you have opened your new item block, you will want to begin by customizing and clearly presenting your icons and text blocks. As you begin this process, you will notice the following categories for customization:
- Icon
- Custom Icon
- Heading
- Content
Icon
This section includes a drop down menu holding 27 different icons across 4 different categories, including : Shop, Communication, Delivery and Security. While we recommend playing around with the looks of the icons and how they complement your page, there is also the option to add your own custom icons. Instructions for this feature are found below, under Custom Icon.
Custom Icon
In order to add a new image as your custom icon, click Select Image. From here you can upload or select the image your store wishes to display. Please note that the recommended image size is beneath this section. It will look something like this:
If your image doesn't fit these specifications, it will not properly fit within the slide.
The recommended image size is calculated as the optimal size across many possible screen sizes (PC monitors of differing sizes, Mac, mobile, tablet, etc.)
After you have chosen your image, you will notice another customization option become available: Add alt text.
Adding alt text is a good way for your to include addition descriptions that will appear just beneath your icon. You can add up to 255 characters to this alt text feature
Heading
This section includes a text box allowing for the input of a descriptive title for your attached icon.
Icon
This section includes a text box allowing for further customization through descriptive text following under the above-mentioned Heading.