Hotspot banner settings

Setting Description
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.
Full width Enable this option to stretch the image across the entire width of the page.

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.
Video Select a video to use as the background. Video replaces image.
Media height Adjust the height of the media using the slider to fit your design needs.
Image mobile Specify a different image for mobile devices to ensure an optimized user experience.
Media height mobile Customize the height of media specifically for mobile displays.
Media overlay opacity Control the opacity of the overlay applied to the media (image or video), allowing you to adjust the visibility of the content on top.

Text content


Setting Description
Heading

This field is for adding a heading to the section.

In the top menu of the field, you can find options to customize the heading.

Furthermore, you can click the dynamic source button to insert a dynamic source as the heading of the section.
Heading mobile

You can add a smaller text specifically for the heading on mobile devices.

*Leave the field blank to use the desktop heading for mobile.
Heading font family:
  • Heading
  • Body

In Theme Settings, you can assign a different font family to headings and body text.

This option allows you to customize the visual style of your heading by selecting heading or body styles.

For some headings, it might be more effective to apply the body text style instead of the designated heading font. This choice depends on how well the font families harmonize and the overall appearance you want to achieve.
Heading size

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

  • Small
  • Medium
  • Large
Heading color Heading color can be customized by using: Text, Text secondary, and Heading colors, which are defined in the theme settings according to each color scheme. Pick the right color from the dropdown list.
Heading weight

Font weight defines the thickness or boldness of text on your store. Available options for heading:

  • Normal (400): The default font weight for body text, which can also be applied to headings.
  • Medium (500): Slightly thicker, suitable for emphasized body text or light headings.
  • Semi-Bold (600): Heavier, ideal for subheadings or highlighted text.
  • Bold (700): Strongest weight for maximum emphasis.
Text

This field is for adding a description to the section.

In the top menu of the field, you can find options to customize the description.

Furthermore, you can click the dynamic source button to insert a dynamic source as the description.
Text color Text color can be customized by using: Text, Text secondary, and Heading colors, which are defined in the theme settings according to each color scheme. Pick the right color from the dropdown list.
Content align

Choose how the content is aligned within the section:

  • Left
  • Center
  • Right
Stack content
  • Enable: Display the content directly on top of the image.
  • Disable: Position the content above the image.

Bullet settings


Setting Description
Color Select a color for the bullet (hotspot product or featured item) by using the color picker or by entering a HEX code.
Background color Select a color for the bullet background (hotspot product or featured item) by using the color picker or by entering a HEX code.

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. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for 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