How to Use Electro Text Hotspot
About Electro Text Hotspot Section
Electro Text Hotspot section in the Electro Shopify theme allows you to add text that can be clicked on to reveal more information. This is a great way to highlight important information or to provide additional details about your products or services.
Overview
| How many text hotspots could you add to one section? | 5 |
| Recommended icon size? | Square (1:1) |
| How many text display types are available in an Electro Text Hotspot? | 2, List and Slideshow. |
Access Electro Text Hotspot
From any page, please click on ‘Add Section’ on the left side bar, then choose ‘Text Hotspots’
Configure Text Hotspot Section
To customize the Text Hotspot section, click on the section. The Electro theme allows you to customize the section with the following settings:
Edit General
In the General tab, you can select Color scheme: Scheme 1 or 2 which have been updated from Theme settings. This scheme will be applied for the hotspot text color and background color.
To add content in the Section Subheading, Heading and Description, click on the text box and insert the content. If you want to remove these contents, simply delete the text in the text box.
Edit Layout
In the layout tab, there are 2 types to display the hotspot content:
- List
- Slideshow
By default, the List type is selected.
Please note that you must add more than 3 items for each type to display these layout.
If you choose Slideshow type, you can activate or deactivate the Show pagination and navigation for slideshow here.
To adjust Content alignment, you can click on the dropdown menu to select position:
- Left
- Center
Edit Hotspot Image
In the Hotspot image tab, click the Select image button to upload the image. The image will be shown at its original size, so it is recommended to upload an image that is 700x500px in size for the best layout.
Edit Button
In the Buttons tab, insert the button label name for the button to add a button on the section. Click on the button link to add a direct link for it. If you want to remove one button, just delete the text in the button label.
Note: If the Link field is empty, the button will show in its disabled state.
Configure Text Hotspot Item
There is a limit of 5 blocks of Text Hotspot that you can add in this section.
To adjust each Text hotspot in the section, click on the item.
You can select an icon from the Icon list for each item individually. You can also upload a custom icon by clicking the Select image button. For the best result, use a square image. Once you upload the image, it will replace the theme icon. To learn more about the icons that can be used on the Electro theme and how to add a custom icon, check on this article.
You can adjust the content by entering heading and description here:
If you want to remove the Text part, simply remove the content in the text box.
In the Position tab, you can adjust Top offset and Left offset for this section.
- The top offset is the distance from the top of the image to the top of the icon.
- The left offset is the distance from the left side of the image to the left side of the icon.
Next, you can select the position to display the hotspot content on a large screen: left or right of the image.
- Left:
- Right:
Quick Tips
You can set up for the top and left offset following these rules to create the best layout:
If the Position of the first block are:
- Top offset: 30%
- Left offset: 30%
The Position of the next block will be automatically updated as:
- Top offset = {top offset of the previous block} + 5%
- Left offset = {left offset of the previous block} + 10
Frequently Asked Questions
What is an Electro Text Hotspot?
Electro Text Hotspot section allows sellers to add highlighted text on photo, to reveal more information about products and services. This is a great way to display features, highlighted stories and important information brands would like to show to potential customers.
Can I edit the icon in the Electro Text Hotspot Section?
There are two icons available for: Block Text and image icon for every text item. You only could edit the image icon, by clicking to the Item Heading Text, choose an automatic icon from Theme Library, or upload your own custom image or SVG file.
Can I edit the text icon color?
No, you can’t, even with the default icon collection. Therefore, please customize the color from the raw file before uploading those to an online store.