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.

Product settings

Settings	Description
Product	The “Select Product” option allows you to add a link to a specific product in your store. When you click on the “Select Product” button, you have two options: If the product has not been created yet, you can click on the “Create product link” button, which will take you to the “Add product” page where you can enter all the necessary information for your product. Once you have saved your changes, you can go back to the original section and your newly created product will be available to select. If the product has already been created, you can select it from the list of products by clicking on the “Select” button next to the product. The chosen product will then appear on the page.
Image ratio	The "Image ratio" setting allows you to control how images are displayed on your website based on their width-to-height ratio. You have several options to choose from: Adapt to image: This option uses the aspect ratio of the images, ensuring that they are not cropped and displayed in their original dimensions. Portrait: This option crops the images to use a 2:3 ratio, creating a taller appearance with a width that is 2/3 of its height. Square: This option crops the images to use a 1:1 ratio, creating a square-shaped display with equal width and height. Landscape: This option crops the images to a 3:2 ratio, where the width of the image is 1.5 times the height. Tall view: Sets the image ratio to a taller aspect, making images appear taller than they are wide. Images are taller than portrait images.
Show second image on hover	You can see the second image on hover if on the detail page of this product are 2 or more images in the list.
Show vendor	Show the vendor of the products under the image.
Show product rating	Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and Metafield definitions for reviews.rating_count and reviews.rating.

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.
Enable shift layout on mobile	When this is turned on, image is on full width.
Enable round shape	Mark the checkbox to make round shape.
Enable custom border radius	When this option is turned on, you can adjust the border radius of images.
Border radius	Adjust the border radius of images to make them straight, less rounded, or more rounded.
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.
Content alignment	You can use this option to align the heading, or both the heading and description, to the left, center, or right.
Text bottom space desktop	Your sections can have small or big space after heading or heading and description to the block with columns, collections, products, and images. Small Large
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.

Button settings

Button label	To make the button visible on the page, you need to add a label to it. The label is the text that appears on the button and gives it a purpose or indicates the action it performs. Without a label, the button will be hidden and not visible to users on the page.
Button link	To set a button link, you can enter the link URL directly into the “Button link” field or select a page from the dropdown list options that appears when you click on the field.

Bullet settings

Setting	Description
Background color	Click on the circle and change the bullet background color.
Cross color	Add a color of cross placed inside the hotspot item.

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 image	You can add a background image instead of a solid background, and make the first and second images overlay on top of the background image.
Background image height	You can control background image height using a slider.
Background image height mobile	You can control background image height using a slider on mobile.
Background color	There are six options for section background: 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.
Make section full width	First image and second image will be on full width. If remove checkbox, they will be in limited container.

Hotspot product 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.