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 the section heading: 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 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 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: The shape is displayed only at the top of the section. Bottom: The shape is displayed only at the bottom of the section. Both: The shape is shown at both the top and 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.