Skip to main content

Themes

Themes let you create reusable visual styles that can be applied across all Produktly features. Instead of setting colors on each individual feature, create a theme once and apply it everywhere for consistent branding.

Creating a Theme​

Navigate to produktly.com/app/themes and click "Create Theme".

Theme Colors​

  • Theme background color - The primary accent color used for buttons, backgrounds, and highlights
  • Theme text color - The text color used for content on the theme background

Widget Styling​

Fine-tune the appearance of Produktly widgets with these options:

Border​

  • Corner Radius (0-50px) - Round the corners of the widget
  • Border Width (0-10px) - Add a border around the widget
  • Border Color - Set the border color

Background​

  • Background Color - Set the widget's background color

Spacing​

  • Internal Padding (0-64px) - Control the padding inside the widget

Box Shadow​

  • X Offset (-50 to 50) - Horizontal shadow offset
  • Y Offset (-50 to 50) - Vertical shadow offset
  • Blur Radius (0-100) - Shadow blur amount
  • Spread Distance (-50 to 50) - Shadow spread
  • Shadow Color - Shadow color

Typography​

  • Title Font Size (10-48px)
  • Content Font Size (8-32px)

Custom Fonts​

You can load custom fonts by adding up to 3 font source URLs (e.g. from Google Fonts). After loading the font, use the font-family name in Custom CSS to apply it.

Custom CSS​

For advanced customization, you can write CSS that overrides the default styles of any Produktly component. The theme builder provides CSS override sections for all widget types:

  • Product Tour components (title, buttons, content, progress bar, beacon)
  • Checklist components (container, items, progress, beacon)
  • Smart Tip components (title, content, action button, beacon)
  • Feedback Widget components (header, inputs, options, beacon)
  • Changelog components (container, items, tags, beacon)
  • Announcement components (container, title, content, buttons)
  • NPS Widget components (container, rating, feedback inputs)
  • Micro Survey components (container, question, options, progress)

Each section shows the CSS selector to use (e.g. #produktly-tour-title) and accepts any valid CSS.

caution

Since Custom CSS accepts any CSS input, we can't guarantee that all custom styles will work correctly in all cases. Please test your styles thoroughly.

Applying Themes​

When editing any Produktly feature (product tours, smart tips, announcements, etc.), you'll find a "Theme" dropdown in the Styling section. Select your theme to apply it. Features using a theme will automatically reflect any changes you make to that theme.