Open the Widget Editor
Start by accessing the widget editor to customize your widget's design and layout.
Position the Widget
You can change the widget's position on the screen, by choosing from:
Center
Top Center
Top Left
Top Right
Left Center
Right Center
Adjust Widget Size
Set the width and height of the widget using:
Pixels (px): Fixed dimensions (e.g., 300px width means the widget stays 300px wide regardless of screen size).
Percentage (%): Responsive sizing (e.g., 50% width on a 1024px screen = 512px wide).
Apply Window Padding:
Define padding to control spacing around the widget.
Customize the Background
Show Background Toggle: Enable or disable the widget background.
Insert Images:
In the Images, find the Library field or Upload Image.
You can also insert Shopify product images.
Fit: Adjust this setting to control how the image scales within its container.
Position: Align the image to a specific position within the widget for better visual balance.
Transparency: Adjust the transparency level of the GIF overlay to blend it seamlessly with the widget background.
Background Color: Pick a background color using RGB, HEX, or HSL values, or select one from the color picker.
Border:
Color: Choose a border color to match your widget design.
Style: Pick border style of your choice from solid, dashed, dotted or none.
Width: Define the thickness of the border.
Radius: Set the border radius to make corners rounded.
Shadow: set the shadow of the widget in the X-axis, Y-axis, Blur and shadow color.
Add Animations
Add Entry Animations: Choose how the widget appears on the screen:
Fade In – Gradually makes the widget appear with a smooth transition.
Zoom In – Enlarges the widget from a smaller size to its full size.
Flip In X – Flips the widget horizontally while appearing.
Flip In Y – Flips the widget vertically while appearing.
Add Attention Animations: Enhance engagement by applying animations like:
Bounce – Makes the widget jump up and down for a lively effect
Pulse – Smoothly enlarges and shrinks the widget to grab attention.
Shake X / Shake Y – Moves the widget rapidly side to side (X) or up and down (Y).
Swing Float – Gives a gentle swinging motion for a floating effect.
Add Confetti Animation (triggers when the card appears on screen)
Style the Window Background
Background overlay appears when the popup opens. Choose from:
Darken + Blur
Blur
Darken
None (no overlay effect)
Final Step
Once you're satisfied with the styling, don't forget to "Save and Publish" your changes to apply them to your live widget.
General Settings of your Widgets
Adjust width, height, position, color, etc of the widget.
D
Written by Dharmik Valani
Updated over 6 months ago