1. Start a widget from scratch
Go to Widgets and click New widget → Start from scratch. Choose the Inform users use case and layout type, then proceed to Configure appearance. In Configure appearance, select Image as the main element of the widget and click Continue in builder.
This creates a clean canvas where your uploaded design will serve as the visual foundation of the widget.
2. Add a custom design as the widget background
Click anywhere on the canvas to select the background image. In the top-left corner, switch to the root layer by selecting the Default page.
Once the root layer is selected, advanced settings appear in the right panel. In the Background section click the image thumbnail.
In the popup, click Change to upload your custom design image.
Upload an image from your computer. PNG, JPEG, SVG, GIF, WebP, and AVIF formats are supported. The file size limit is 3 MB.
Optionally: Set an action on click
If your widget is meant to inform users about a sale or promotion, a click should usually take them to the next step — for example, a product or landing page. You can set this up as follows:
1. Select the widget on the canvas.
2. Open the General tab.
3. Click Add action and choose Open URL.
4. Enter the destination link.
Optional settings:
Open in a new tab — helps avoid pulling users away from the page they’re currently on.
Count as a target action — lets you treat the click as a goal completion for tracking purposes.
Tips for making custom design widgets work well
Widgets built from a single uploaded image can look different on desktop and mobile. Wide images may be cropped or resized on mobile, sometimes affecting readability.
To fix this:
Use a square or vertical design. These formats usually adapt better to both desktop and mobile screens.
Upload a separate image for mobile.
How to set different images for desktop and mobile
1. Switch to the Mobile view in the editor.
2. In the Background section, click the lock icon.
3. Choose Do not sync.
4. Upload a new image.
After that, desktop and mobile versions will use different images — without affecting each other.
What to do next
Once your design is ready, save the widget and move on to Display rules. This is where you define when and where the widget appears — for example, on specific pages, after a delay, or based on scroll depth etc. See Display rules to set up targeting and triggers.