Video Tutorial of Image Hotspot
Get customers to explore your online store by turning images into visual hotspots.
Let them visualize products through interactive images.
Increase conversions and brand loyalty the smart way.
On your Swipecart dashboard, go to ‘Designs’.
Hover over the design where you want to add the Image Hotspot widget and click on the pen icon to edit the design.
Now, you are in your design dashboard. Click on the “Home” tab on the top navigation bar.
Click on the widget list drop-down box on the right side of your screen.
Scroll down and select “Image Hotspot" from the drop-down list.
Different image-size UI variants for the Image Hotspot are displayed below the drop-down box.
Drag and drop your preferred variant into the home screen.
How to Add /Edit content of Image Hotspot?
Hover over it and click on “Add/Edit Content”.
In the opened popup, add a title to the widget and click on the upload icon to add images from your system file to the widget.
💡Note:
Images not greater than 2MB and with only the correct aspect ratio will be uploaded. Else, you’ll get an “Invalid file” message.
You can upload images following the image ratio. Here is the image ratio to pixel calculator.
Next, select a hotspot variant type and click on “+Add Point”.
The hotspot appears on the image with a tooltip content screen.
Drag and drop the hotspot into the desired position on the image.
Now click on the pen icon in the tooltip content screen to add/edit content for the hotspot.
In the opened popup, link the hotspot to its relevant product, collection category, or external URL from the respective tabs and the drop-down list.
If you link it to a product, the product price is also shown on the tooltip screen.
Enabling the “Product Image” toggle switch displays the selected product image next to the text content.
Disabling it will display only the text.
Enable the “Custom Text” toggle switch to add text to the hotspot.
Type in a title and description and click on “Save”.
How to Edit Style content of Image Hotspot?
To edit the Image Hotspot widget style, hover over it and click on “Edit Style”.
Here, you can customize the following parameters.
Radius- Round off all four edges of the widget container.
Padding- Adjust the top, bottom, right, and left padding of the product image.
Container Padding- Adjust the top, bottom, right, and left padding of the widget container.
Widget Title-
Title Name- Give a heading or title to the widget.
Title Alignment- Keep the title left-aligned, center-aligned, or right-aligned.
Font Size- Select an appropriate font size for the title text.
Letter Spacing- Edit the letter spacing of the text.
Font Color- Change the font color with the help of the color picker.
You can also type in the RGB, HSL, or Hex values.
Font Style- Select if you want the font in Normal or Italic
Font Weight- Select the thickness of the font from varying options of light to bold
Reset- Clicking on it will erase all the new settings and restore it to default settings.
Tooltip Setting-
Font Color- Change the tooltip title font color with the help of the color picker. You can also type in the RGB, HSL, or Hex values.
Background Color- Change the tooltip box background color with the help of the color picker. You can also type in the RGB, HSL, or Hex values.
Background- You can choose to color the background with the help of the color picker or upload an image from your system file.
Box Shadow- Enabling this toggle switch will add shadow effects around the widget container’s frame.
Select Variants- Select a variant to add depth to the frame.
Preview the changes in real-time in the right section of your popup screen.
Click on “Save” and exit when done.
To copy the same widget elsewhere on the app’s home screen, hover over it and click on “Copy Block”. The block is copied.
To paste the widget, hover over it and click on “Paste Block”.
To remove the block, hover over it and click on “Remove Block”.
Click on “Preview” on the dashboard’s top-right to preview the updates and changes you make to your app design in the Preview App.
Click here to learn how to preview app updates through the Swipecart mobile app on your mobile device.
That’s it. We are done adding the Image Hotspot widget on the app’s home screen on Swipecart.
What's Next?🤔
Explore the next article Button Widget