Product hotspots#

Place numbered product details on an image.

Add this section#

Select Add section > Product hotspots on the template you want to edit.

Settings#

The settings below follow the same order as the theme editor.

General settings#

• Subheading: Enter the text to show.

• Heading: Enter the text to show.

• Product: Choose a product. Used for the image when none is chosen, the price and the button link.

• Image: Choose an image from your library. Leave empty to use the product image. A photo on a plain or transparent background works best. 1600 x 1600px recommended.

• Button label: Enter the text to show.

• Show price: Turn this on or off.

Layout#

• Auto-rotate hotspots: Turn this on or off. Stops when the shopper hovers or taps the image.

• Image position: Choose Start or End.

• Color scheme: Choose a color scheme from Theme settings > Colors.

Section padding#

• Top padding: Use the slider from 0 to 160 px.

• Bottom padding: Use the slider from 0 to 160 px.

Mobile layout#

• Hotspot details: Choose Carousel or List.

• Top padding: Use the slider from 0 to 120 px.

• Bottom padding: Use the slider from 0 to 120 px.

Blocks#

Hotspot#

General settings#

• Heading: Enter the text to show.

• Text: Enter the longer text to show.

• Horizontal position: Use the slider from 0 to 100 %.

• Vertical position: Use the slider from 0 to 100 %.

Tips#

• Add your real content before fine-tuning spacing and colors.
• Check the section at both computer and phone widths. Use Mobile layout for the phone-specific choices.