Hotspot banner settings

Setting Description
Heading To add a heading, 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. Click the dynamic source button to insert a dynamic source as the title of the section.
Heading alignment You can align heading to the left, center, and right.
Heading size

The heading size setting offers three options to control the size of the section heading:

  • Small
  • Medium
  • Large
Description This field is for adding a description to the section. 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 create bullet or numbered lists for your description. Furthermore, you can click the dynamic source button to insert a dynamic source for the featured collection description.
Description font size

This setting offers three options to control the size of the description:

  • Small
  • Medium
  • Large

Media settings


Setting 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.
Color scheme Color Scheme allows you to customize every aspect of your theme's colors in the settings. When you apply a color scheme to a specific section like the hotspot banner, it automatically updates all associated colors for a cohesive and professional look across your website.
Make image full width

When this option is turned off, the image is contained within a box with left and right paddings of 100px. This is ideal for transparent images, as it allows them to appear smaller than the container.

*Check the first screenshot below table for reference.
Make image container width

When the Full Width option is turned off and this option is enabled, the image is adjusted to fit within the container width. This provides a structured layout with consistent padding and alignment.

*Check the second screenshot below table for reference.
Hide scroll on mobile

This option depends on the image type:

  • For SVG images with long widths that do not fit within the screen, you can disable this option to allow scrolling and view the entire image.
  • For regular images that fit within the screen, you can enable this option to hide scrolling for a cleaner display.

Make image full width

When is turned off for transparent image (without background)


Make image container width


Section padding


Setting Description
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. 
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