Introduction
This guide explains how to enhance your Studio templates using Widgets. Widgets are specialized layers and groups designed to highlight discounts, promotions, and time-sensitive offers. In Studio, you can use several widget types to dynamically display information:
Percentage Off Widget – Calculates the discount percentage.
Savings Widget – Displays the monetary savings between original and sale prices.
Countdown Widget – Shows a dynamic countdown based on a selected start and end date.
Schedule Widget – Makes the widget visible only during specific dates, using a date picker.
Each widget type is customisable and requires entering edit mode to preview the changes.
1. Percentage Off Widget
Overview
The Percentage Off Widget automatically calculates the discount percentage by comparing the sale price against the original price.
How It Works
Discount Threshold: Modify the condition under “Discount is higher than XX” to control when the widget appears.
Display Options: Optionally display the sale price alongside the calculated percentage.
2. Savings Widget
Overview
The Savings Widget computes the monetary difference between the original price and the sale price, clearly conveying the savings to your customers.
How It Works
Visibility Condition: Add the Savings Widget and set its condition using the “Discount is higher than XX” parameter.
Calculation: It dynamically calculates and displays the exact savings amount.
3. Countdown Widget
Overview
The Countdown Widget provides a dynamic countdown that updates based on the dates you set, helping create urgency around time-limited offers.
How It Works
Date Selection:
Use the date picker to set both a start and an end date for the countdown.Dynamic Layer Creation:
Once configured, the widget automatically adds a layer that displays the remaining days until the offer expires.Real-Time Updates:
The countdown dynamically updates as the start and end dates approach.
Note: To preview the countdown, you must enter edit mode.
4. Schedule Widget
Overview
The Schedule Widget controls the visibility of a widget by using a date picker, ensuring that the widget is only displayed during a specific timeframe.
How It Works
Period of time
Date Picker: Select the dates during which the widget should be visible.
Conditional Visibility: The widget will only appear on the canvas when the current date falls within the chosen range.
Application: This is ideal for promotions or offers that are active for a limited period.
Repeat
Date Picker: Select the dates for the period during which widget will be repeatably visible
Repeat frequency: You can chose between days or weeks as a frequency along with how often will it be visible.
Day selection: Select during which days in a week you want the widget to be visible. (This option will only be visible if the frequency is set to weeks)
Note: As with other dynamic widgets, previewing the Schedule Widget requires entering edit mode.
5. General Widget Information
Key Points
Unique Instances:
Each template can include only one widget of each type.
Editing Widgets:
Click the Edit Widget button to modify the layers within a widget.
In widget editing mode, a purple border appears around the canvas, indicating that only widget layers are active.
Any new layers added while in edit mode are automatically included in the widget.
Moving Layers:
To incorporate an existing layer into a widget, select the layer, right-click, and choose the option to add it to your desired widget.
Adjusting Conditions:
To edit conditions (e.g., minimum discount values), go to the Widget Panel, select the desired widget, and click the Edit button.
Conclusion
Widgets in Studio provide dynamic, customizable ways to highlight discounts, savings, and time-sensitive promotions. Whether you're calculating percentage discounts, showcasing savings, counting down to an event, or scheduling widget visibility for a specific timeframe, these tools help ensure that your promotional messages are both engaging and effective. Remember, to preview any widget configuration, you must enter edit mode.