Branding, templates and themes
Branding is your website's default look for widgets: colors, fonts, corner radius, button and form field style, and the page overlay behind popups. Personizely applies it to every template, new widget and new element, so widgets match your store without restyling each one. You set it once in Settings → Branding, either by hand, by applying one of 9 themes, or by letting Personizely read your website's style.
Available on: all platforms.
How it works
- You define branding in Settings → Branding. A live preview shows a sample widget as you change settings.
- Templates are drawn in your branding. When you create a widget from a template, it uses your colors, fonts and style settings, plus your theme images.
- New elements use it. Buttons, headlines, forms and other elements you add later take their style from your branding at the time you add them.
- Existing widgets keep their look. Each widget stores its own styles when it's created, so changing your branding doesn't restyle widgets you've already built. Update those in the builder, or recreate them from a template.
Configuration
Basic mode
Option | What it does | Default |
|---|---|---|
Primary color | Accent color used by templates and elements for highlights | #2196F3 |
Background color | Widget background | #FFFFFF |
Border radius | Corner rounding of widgets and buttons | 7 px (0–50 px) |
Text: Font, Color | Body text | Questrial, #4D4D4D |
Form fields: Style, Corners | Look of form inputs | Depends on the theme |
Advanced mode
Turn on Advanced mode for every setting:
Group | Options |
|---|---|
General | Primary color, Background color |
Widget | Corners (widget radius), Shadow (None, Hairline, Soft, Floating), Page overlay behind popups (Dim, Blur, Light), Image edge (Straight, Curve, Diagonal, Arch, Wave), Countdown style (Boxed digits, Solid tiles) |
Text | Font, Color, Size (13–18 px), Line height |
Heading | Font, Color, Size, Weight (Regular to Extra bold), Style (Upright, Italic), Case (As typed, Uppercase), Spacing (Tight to Wider), Line height |
Button | Font, Text color, Background, Corners, Weight, Case, Outline, Hover (Shade, Lift, Pop up) |
Form fields | Style (Outlined, Filled, Underline), Corners |
Defaults: headings and buttons use Questrial; heading color #4D4D4D; button background #2196F3 with #FFFFFF text.
Fonts
Fonts can be Google Fonts or custom fonts you add in the font picker. Fonts used by your widgets are loaded on your site with the snippet.
Themes
Themes in Settings → Branding applies a complete look in one click: colors, fonts, all style settings and a set of matching theme images used by templates.
Theme | | |
|---|---|---|
Athletic | Earthy | Editorial |
Luxury | Minimal | Modern |
Playful | Tech | Wellness |
The same menu has Parse your website theme, which reads your website's colors, fonts and images and updates your branding from them. It may add fonts and images to your account.
Applying a theme or parsing your site replaces your current branding settings and theme images. Existing widgets don't change.
Use Theme images to review or replace the images templates use.
Templates
Widgets → Create a widget → Pre-built template opens the template library: more than 100 templates in your branding, grouped by goal.
Goal | What the templates do |
|---|---|
List building | Email and SMS capture, including spin-to-win wheels |
Promotional | Sales, discounts and launches |
Cross and upsell | Product recommendations (Shopify and Wix) |
Cart abandonment | Exit-intent and cart reminders |
Sales motivator | Free-shipping and cart progress (Shopify and Wix) |
Survey | Questions and feedback |
Announcement | News, shipping notices, store updates |
Filter by type (Popups, Callouts, Bars, Embeds), pick a template and edit it like any other widget. Templates come with Track widget conversion already on their buttons and forms, like any widget you build. You can also export a widget and import it into another website from this page.
Powered by Personizely badge
Widgets can show a small "Powered by Personizely" badge that links to personizely.net. It's off for new websites.
- It appears on popups and callouts as "Powered by" with the Personizely logo, and on bars as the logo only. Embedded widgets never show it.
- It's hidden on screens up to 480 px wide.
- If the badge shows on your widgets, turn it off with Show the Powered by Personizely logo in Settings → Website. If you don't see that option, contact support.
Behavior details and limitations
- Branding isn't retroactive. This is the most common surprise: after changing branding, old widgets look the same. It protects widgets you've tuned by hand, including running A/B tests.
- Per-widget overrides. In the builder, Global style sets the heading and text fonts and colors for one widget without touching your branding.
- Page overlay applies to new popups. It sets the default backdrop; each popup's backdrop can still be edited. See Popups.
- Your site's CSS can still reach widgets. Branding sets the widget's styles, but some theme styles may apply on top. Override them in the widget's custom CSS.
Examples
- Quick start for a new store: apply Minimal, then set Primary color and Button background to your brand color and pick your store's font.
- Match your site automatically: use Parse your website theme, check the preview, then adjust the heading font if needed.
- Rebrand: update branding, then recreate high-traffic widgets from templates, or edit their styles in the builder.