Hotspot banner settings and short info

The "Hotspot banner" section in Shopify enables you to create interactive hotspots on your image banner. Within the section settings, you have the flexibility to customize the banner view. In the "Hotspot item" block, you can select products to be displayed through small pop-ups when users click on a hotspot.


You have the flexibility to add up to 5 hotspot items and customize their view and positions on the banner. Each hotspot can contain essential details like the product's name with a link to its product detail page, the product's price, and an 'Add To Cart' button. For products that offer various options, like size, color, or extras, the pop-up will display comprehensive information, enabling users to select their preferred options easily.


By using the "Hotspot banner" section, you can engage your customers and enhance their shopping experience by showcasing specific products directly within the banner image.



Media settings


Settings  Description
Image You can add the main image as background, by clicking on the “Select image” button to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is chosen, you can use the “Change” button to remove, replace, or delete it.
Video Select a video to use as the background.
Media height You can change the height of the image using the slider.  
Image mobile You can add another image as background for mobile, by clicking on the “Select image” button.
Media height mobile You can change the height of the image on mobile devices using the slider.  
Media overlay opacity The "Image overlay opacity" setting allows you to adjust the transparency of the overlay that is applied to images on your website. Use the slider to make changes.

Text content


Setting Description
Heading To add a heading to the section, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it italic or adding a hyperlink. 
Heading mobile To add a heading to the section on mobile, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading. 
Heading size

The heading size setting offers four options to control the size of your site's headings:

  • Small
  • Medium
  • Large
  • Extra large

With these options, you can easily customize the heading sizes to best match your website's style and create a visually appealing and cohesive design throughout your site.

Heading color

The "Heading color" setting offers four options to customize the color scheme of your website's text:

  • Text main color
  • Text secondary color
  • Headings color
  • Headings secondary color

It's important to note that the color scheme you choose for these four options will be consistent throughout your website.

Heading weight The font-weight setting enables you to adjust the thickness or boldness of the heading text. To customize the font weight, simply select the desired option from the provided dropdown list.
Text To add text to the section after the heading, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the text such as making it bold, italic, or adding a hyperlink. Additionally, you can use the style of headings from H1 to H6 to the body text and also create bullet or numbered lists for your description.
Text size

"Text size" setting offers three options to choose the best option for design preferences:

  • Small
  • Medium
  • Large
Text color

The text color setting offers four options to customize the color scheme of your website's text:

  • Text main color
  • Text secondary color
  • Headings color
  • Headings secondary color

When you update the theme settings for these text colors, the same color scheme will be applied to other sections or blocks that use text elements.

Heading align

You have three alignment options for heading to choose from:

  • Left: This aligns the heading to the left side of the section.
  • Right: This aligns the heading to the right side of the section, 
  • Center: This aligns the heading to the center of the section.
Stack content When the checkbox is unchecked (empty), the heading and description fields are above the banner. When the checkbox is checked, the heading and description are within the banner.

Bullet settings


Setting Description
Background color Click on the circle and change the bullet background color. 

Section overlay


You can add from one to three image overlays to this section.


Setting Description
Image overlay This setting allows you to apply an overlay effect on the banner image, such as a color shape, pattern, line, or transparent image to enhance its appearance or create visual contrast with other elements on the page.
Image width  This setting allows you to adjust image width to ensure it aligns well with other components within the section.
Image vertical position  The setting enables you to control the vertical position of the image within the section. You can adjust it to place the image wherever it fits best within the layout, ensuring optimal visual balance and alignment with other elements.
Image horizontal position  This setting enables you to control the horizontal position of the image within the section. You can adjust it to place the image wherever it fits best within the layout.
Image width mobile  This setting lets you adjust image width on mobile devices separately. It's important for optimizing the visual appearance and layout, as mobile screens have different requirements than desktop screens. Adjustments like decreasing shape width can improve mobile usability.
Image vertical position mobile The setting enables you to control the vertical position of the image within the section. Adjustments like changing placement can improve mobile usability.
Image horizontal position mobile  This setting enables you to control the horizontal position of the image within the section. Adjustments like changing placement can improve mobile usability.
Animation 

Two options:

  • None 
  • Ambient

You can liven up the site using animation.


Shape divider


Setting Description
Shape position

Choose the position of shape:

Top: shape is displayed only on the top of the section.

Bottom: shape is displayed only on the bottom of the section.

Both: shape is shown on the top and the bottom of the section.

Type Select the shape type that enhances the visual appeal of your banner the most.
Color You can select the color of the shape to complement the color of the banner.
Width Adjust the shape width using the slider. But notice that it has an impact on section width. 

Section settings 


Setting Description
Background color There are six options: Background main, Background section 1,2,3,4,5. Colors for these backgrounds can be set in the Theme Settings/Colors block.
Background gradient Use the gradient picker to create a custom gradient for your section background.
Top padding The "Top padding" setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The "Bottom padding" setting functions similarly to the "Section top padding" setting but controls the space at the bottom of the section. 

Hotspot item block


Settings  Description 
Product Select Product for Hotspot. 
Custom bullet icon Enhance visual appeal by substituting the standard colored bullet with an icon of your choice.
Bullet size Customize the size of each bullet within the hotspot item block to your preferred dimensions.
Horizontal position and vertical position

Set up the position of hotspot on the image. 

By adjusting the horizontal position, you can move the hotspot left or right on the image, aligning it to the desired location horizontally.

Similarly, by modifying the vertical position, you can move the hotspot up or down on the image, positioning it at the desired location vertically.

Horizontal position and vertical position (mobile) You can customize the position of the hotspot on the image for mobile devices.
Bubble position Change the bubble position on hover:  top, bottom, left, right.
Open bubble on desktop Enabling this option will display a persistent bubble containing product information on the desktop interface, without requiring any hover or click interactions.
Hide item mobile When this option is marked, the hotspot items will only be visible on desktop and tablet devices, and they will be hidden on mobile devices.

Hotspot featured item block


Settings  Description 
Image  Add an image to the bubble.
Heading To add a heading, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink. 
Text To add a text, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink. 
Custom bullet icon Enhance visual appeal by substituting the standard colored bullet with an icon of your choice.
Bullet size Customize the size of each bullet within the hotspot item block to your preferred dimensions.
Horizontal position and vertical position

Set up the position of hotspot on the image. 

By adjusting the horizontal position, you can move the hotspot left or right on the image, aligning it to the desired location horizontally.

Similarly, by modifying the vertical position, you can move the hotspot up or down on the image, positioning it at the desired location vertically.

Horizontal position and vertical position (mobile) You can customize the position of the hotspot on the image for mobile devices.
Bubble position Change the bubble position on hover:  top, bottom, left, right.
Open bubble on desktop Enabling this option will display a persistent bubble containing an image and some information on the desktop interface, without requiring any hover or click interactions.
Hide item mobile When this option is marked, the hotspot items will only be visible on desktop and tablet devices, and they will be hidden on mobile devices.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us