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 headings:
With these options, you can easily customize the heading sizes to best match your website's style, creating a visually appealing and cohesive design throughout your site. |
| 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 | Description font size Small Medium Large Sizes for all body text on site you can set in theme settings - typography tab |
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:
|
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. |