Radian 3.0 is here — bundles, category showcase and cinematic motion.See what's new

Docs Try Theme free

Hero product hotspots

Updated 1 min read

Overview

The Hero Product Hotspots section in Radian is designed to be used at the top of the page instead of the traditional Slideshow section. Of course, Radian also provides a Slideshow section for you to use

In other words, the Hero Product Hotspots section gives you more customization options to display more introductory content and products than the Slideshow—shoppers can add products to the cart directly without needing to navigate to another page

Customize

To set up images for this section, in the Media group, you have the options for Desktop Image and Mobile Image. Radian recommends using the following ratios for Desktop and Mobile:

  • Desktop: 16:9 ratio
  • Mobile: 9:16 ratio

Of course, that also depends on how you want to present your images

For Desktop image placement options: Center and Full Width, this is an illustration of how it works

  • Full Width: the image will fit the entire width and height of the section
  • Center: the image will scale down and center within the section

Adding Hotspot Product

To add a hotspot product, click Add Product hotspot -> then in the Product hotspot block -> select the product you want to display
To move the hotspot point to the correct position, use the Horizontal Position and Vertical Position slider to drag them to the position you want. You can also drag and drop the hotspot point directly in the theme editor preview. Once you have placed the hotspot point exactly where you want, look at the bottom-right corner—you’ll see a hint as shown in the image below.

Enter the correct X coordinate into Horizontal Position and Y into Vertical Position

Customize Hotspot point on Mobile

To edit the correct position when displayed on mobile, in the Theme Editor interface, look at the top-right corner. You’ll see a mobile device icon—click it to switch the viewport from desktop to mobile.

Repeat the same movement pattern as above for mobile

To ensure images work correctly on mobile, Radian recommends providing a mobile-specific image version at the Mobile image option

Still stuck?

Include your store URL and theme version — we'll get back to you.

Contact support