Theme Setup

Overview

The Theme Setup page lets you customise the visual appearance of the ExpertRec search widget to match your store branding. You can change colors, fonts, and overall widget styling without writing any CSS. If you need deeper customisation beyond what Theme Setup offers, use the Custom CSS editor instead.

Navigate to: UI Customization > Theme Setup

Note: Theme Setup is not available for Thinkific or React integration types. For those integrations, apply styling through the Custom CSS editor or your own component styles.

Color Settings

• Primary color: The main accent color used for buttons, highlighted text, and interactive elements. Set this to match your brand color.
• Background color: The background of the search results panel. Defaults to white.
• Text color: The default color for all text in the widget.
• Link color: The color of clickable product titles and links.
• Border color: The color of dividers and panel borders.

Font Settings

• Font family: Choose a font from the available list or enter a Google Fonts family name. The widget will load the font automatically.
• Font size: Set the base font size for the widget. All other sizes scale proportionally.

Button and Input Styling

• Button border radius: Controls the roundness of buttons and badges. A value of 0 gives square corners; a higher value gives pill-shaped buttons.
• Search box border: Toggle the border on the search input field.
• Shadow: Add a drop shadow to the results panel for a floating card effect.

Applying Your Theme

1. Navigate to UI Customization > Theme Setup.
2. Adjust the color, font, and style settings as needed.
3. Use the live preview on the right side of the page to see changes in real time.
4. Click Save to apply the theme to your live search widget.

Best Practices

• Use your brand primary color for the primary color setting to create a cohesive experience.
• Test your theme on both desktop and mobile after saving.
• If your store uses a dark background, adjust the background color and text color accordingly to maintain contrast and readability.