The Spotlight widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
Introduction
With Spotlight, you can provide new and engaging navigation options by highlighting selected products or product categories, as determined by you.
Spotlight is seamlessly integrated into your website as a banner, similar to our other widgets. The banner consists of customizable badges known as "Highlights," which allow you to feature an image, a title, and a redirect address.
Configuration
Layout tab
The layout configuration for spotlight is similar to the banner one.
Layout
We offer three different layouts:
- top banner
- bottom banner (by default)
- free placement (which allows you to place the widget wherever you want in the page flow)
Layouts are natively responsive.
Layer
Layer Position (z-index)
Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget position: above everything, below everything, or precisely fine-tuned.
Content tab
The "Content" tab in the Spotlight widget settings allows you to define and manage the various Highlights that compose the widget. Each highlight represents a badge that contains an image, a title, a redirect link, and a tracking name. This tab provides an intuitive interface for configuring and organizing your Highlights according to your preferences.
Each highlight consists of specific elements that contribute to its appearance and functionality.
-
Thumbnail: The image you upload will be displayed within the Highlight. It's important to note that depending on the style configuration, the image may be cropped to fit the designated area. To ensure optimal display, we recommend using images with appropriate dimensions and aspect ratios.
-
Title: The title is positioned below the highlight and provides additional context for the Highlight. Keep in mind that the size of the text is limited by the size of the Highlight itself. Therefore, it is advisable to use concise and clear titles that effectively convey the intended message within the available space.
-
Link: The redirect link determines the page or destination where visitors will be directed when they click on the Highlight. By defining the appropriate redirect link, you can guide visitors to relevant product pages, category sections, promotional offers, or any other desired destination on your website.
-
Tracker Name: The tracker name field allows you to assign a specific name to track clicks on the individual Highlights. Tracking the clicks enables you to set them as campaign objectives or goals. By assigning custom tracker names, you can easily reference and identify these clicks within the page of goals or campaign tracking.
With these configuration options, you can fine-tune the content of each Highlight within the Spotlight widget.
Adding Highlights
To add a new Highlight, simply click the "Add a setting" button. This action creates a new panel where you can input the necessary details for the Highlight as described above.
Reorganizing Highlights
To reorder the Highlights, the interface provides dedicated buttons for easy rearrangement.
For added convenience, highlights control panels can also be moved directly into their graphics container. Simply click on a panel and drag it above or below another panel to directly reorganize the widget's highlights.
Deleting Highlights
If you find that an extra Highlight has been added, or you want to remove a previously configured Highlight from the widget, simply click on the cross icon located within the configuration panel of the respective Highlight. This action will instantly remove the Highlight from the widget, ensuring that it is no longer displayed to your website visitors.
Style tab
The "Style" tab in the Spotlight widget settings allows you to customize the visual appearance of both the widget banner and the individual Highlights.
Common Style Configurations
For elements shared with the widget banner, the style configurations remain the same. You can define the following:
- Container: Adjust the margin, background color, and other properties related to the overall container of the widget.
- Border: Specify the border width, color, and other attributes for the widget container.
Highlight Styling
Within the "Style" tab, a dedicated section is provided to style the individual Highlights.
Here, you can configure the following aspects:
- Highlight Size: Define the size of the Highlights using viewport width (vw) as the unit, representing a percentage of the screen width
- Highlight Spacing: Set the spacing between the Highlights, also using viewport width (vw) as the unit
- Border Thickness : Customize the width of the outer border surrounding each Highlight
- Border Color : Customize the color of the outer border surrounding each Highlight
- Border Radius: Adjust the border radius to alter the shape of the Highlight, ranging from rounded to square
- Inner Border width: Specify the width of the inner border, which forms the graphical area between the outer border and the Highlight image
- Inner Border color: Specify the color of the inner border
- Text Styling: Configure the text color, font, style, and size within each Highlight
-
Alignment: Choose from six alignment strategies:
- Left Aligned: Aligns the Highlights to the left, maintaining their order
- Center Aligned: Aligns the Highlights at the center, preserving their order
- Right Aligned: Aligns the Highlights to the right, retaining their order
- Space Evenly: Equally distributes the available space within the banner among the Highlights
- Space Around: Allocates equal space on the left and right of each Highlight, maintaining a balanced distribution
- Space Between: Distributes the available space evenly between the Highlights, with the outermost Highlights touching the edges of the widget
Note: Please note that for the last three alignment strategies (Space Evenly, Space Around, and Space Between), which are based on adjusting the spacing between the Highlights, selecting any of these strategies will override the specific spacing value defined for the Highlights. In these cases, the widget will automatically calculate and distribute the available space based on the selected alignment strategy. This ensures consistent and optimal spacing between the Highlights, as per the chosen alignment option.
Condition tab
Select the Triggering and Recurrence options you want to apply to the Spotlight widget.