Marketing Sections

Image Hotspot Banner

Create interactive, shoppable lookbooks directly on your store pages. The Hotspot Banner displays lifestyle imagery overlaid with interactive pins that show product previews and support direct add-to-cart clicks.

Image Hotspot Banner (Shop the Look) Preview

Overview

The Hotspot Banner bridges the gap between lifestyle marketing and direct commerce. By showing items in context (e.g. smart home gear on a desk, or apparel on a model), customers can click individual pulse markers (pins) to reveal detail cards. This editorial layout reduces friction and increases product discoverability.

Section Layouts

The section provides three layout options to match different merchandising aesthetics:

Full Width Image

Standard edge-to-edge full width image overlay. Ideal for landing page headers or full screen visual storytelling.

Image Left, Text Right

Side-by-side grid panel showing the hotspots on the left, and a dedicated text summary block on the right.

Text Left, Image Right

A balanced split panel containing copywriting elements on the left, paired with the hotspot image on the right.

Hotspot Pins Configuration

Merchants can place pins over the banner image as customizable Blocks. Each pin requires coordinate mappings:

Coordinate Positioning (X, Y)

Adjust the horizontal position (X) and vertical position (Y) using slider controls (from 5% to 95%). These coordinates calculate relative viewport positions, ensuring pins scale correctly on tablet and mobile viewports.

Pin Styling & Animations

Customize the marker color theme (White, Black, or Sellzar Yellow) to stand out against your image background. Toggle the Pulse Animationto catch the visitor's attention dynamically.

Merchant Walkthrough

To set up a hotspot banner section:

In the Theme Editor, click Add Section in your template group.
Select Hotspot Banner.
Upload your Lifestyle Image and choose your desired Section Layout.
Under the section settings, click Add Product Hotspot to create a new pin block.
Select a Featured Product from your store.
Adjust the Horizontal (X) and Vertical (Y) sliders to place the pin precisely on the image subject.

Contrast Matters

If your banner has dark elements, choose a White or Sellzar Yellow marker theme. If your image features light scenery, choose a Black theme to ensure pins remain accessible.

← Fluid VW-Scaling

Next: Sticky ATC Bar

Sticky ATC Bar →