Add a Product Image Hotspot

The Product Image Hotspot component turns a lifestyle or campaign image into a shoppable experience.

You can upload an image, connect products, and place product hotspots directly over the items shown in the image. Customers can tap a hotspot to view the related product information and continue shopping.

Use this component for:

• Shop-the-look images

• Outfit inspiration

• Room or home décor setups

• Product collections

• Seasonal campaigns

• Lifestyle photography

1. From Shopify Admin, open Ego Mobile Builder.

2. Go to App Design and open the design you want to edit.

3. Select the screen where you want the component to appear.

4. Open Sections Library.

5. Search for Product Image Hotspot.

6. Drag the component to the preferred position.

Select the component to open its configuration panel.

Upload the image you want to make shoppable. You can also select Add More to create additional hotspot images when supported.

For the best result:

• Use a clear, high-quality image.

• Make sure featured products are easy to identify.

• Avoid placing important products too close to the image edges.

• Use images with enough space for product tags.

• Limit text inside the image.

Under Hotspots, click Add Product and select the products shown in the image.

Before adding a product, confirm that it is:

• Active in Shopify.

• Available to the mobile app.

• Using the correct product image and price.

• Clearly visible in the uploaded image.

Only add products that customers can clearly recognize in the image.

After adding products, place each hotspot over the corresponding product in the image.

1. Select the product you want to position.

2. Move its hotspot dot or product tag to the matching location.

3. Repeat the process for each selected product.

4. Review the result in the mobile preview.

Place hotspots close to the related products without covering important visual details.

Recommended placement

• Keep enough space between nearby hotspots.

• Avoid placing tags over faces or important product details.

• Check that hotspots remain easy to tap on mobile.

• Use the product dots when several products are positioned close together.

• Review the image at mobile size rather than only on a large screen.

Under Tag Style, configure how product hotspots appear.

Available settings may include:

• Font

• Text size and weight

• Text case

• Product dot visibility

• Text color

• Dot color

• Background color

• Border corners

• Border color and thickness

Use the eye icon to show or hide supported elements.

Keep the hotspot style consistent with your app branding and ensure the text remains readable over the image.

Changes appear immediately in the mobile preview while you configure the component.

Before publishing, check:

• Image quality and cropping

• Product selection

• Hotspot positions

• Tag readability

• Spacing between hotspots

• Product navigation

• Overall mobile appearance

When ready:

1. Click Save.

2. Test the component using Ego Live Preview.

3. Tap every hotspot and confirm that it opens the correct product.

4. Click Publish to make the changes available in your app.

• Use one image with a clear visual focus.

• Limit the number of hotspots to avoid clutter.

• Match each hotspot with the exact product shown.

• Keep tags away from important image details.

• Use contrasting colors for better readability.

• Test all product links before publishing.

The image does not appear

Confirm that the upload completed successfully, then save and refresh the editor.

A product cannot be added

Check that the product is active and available to the mobile app.

A hotspot appears in the wrong position

Select the related product and reposition its hotspot in the image.

Hotspot tags are difficult to read

Adjust the text, background, dot, or border colors to improve contrast.

Changes do not appear in the app

Confirm that the design has been saved and published, then reopen the app.