Text Hotspot

The 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.

Text Hotspot Section Configuration

To customize the Text Hotspot section, click on the section. The Electro theme allows you to customize the section with the following settings:

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.

Layout

In the layout tab, there are 2 types to display the hotspot content:

• List

• Slideshow

By default, the List type is selected.

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

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.

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.

Hotspot Configuration

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:

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%