Custom Themes and CSS

The Product Advisor gives you the ability to personalise the look and feel of your finder tool to match your brand and advanced UX/UI requirements. This is achievable through Custom Themes and Advanced CSS which can be used to modify both the appearance and functionality of the tool.

Custom Themes

Custom themes are designed to allow extensive styling and functionality changes to the Product Advisor interface, which can help meet your advanced UX/UI needs. These are ideal for businesses requiring a fully customised look or unique arrangements that go beyond the out-of-the-box components.

How to Get Started

• Contact Account Manager: If your project requires a fully customised theme, please get in touch with your Account Manager. They will help you assess the requirements and determine if a custom theme is included in your package plan.

• Consultation: Reach out to your Account Manager for a consultation to discuss your specific project needs and determine the feasibility of your request.

What Can Be Customised?

Custom themes can be applied to:

• Question Types: Modify the appearance and behaviour of various question types to align with your design preferences and user experience needs.

• Components: Customise or style Product Advisor components such as product cards, and buttons to fit your brand's look and feel. This allows for deeper customization of the user interface.

• Custom Landing or Results Page Requirements: For customers who need a customised landing or results page, we can tailor the layout, components, and interaction logic to meet specific business or UX goals. This may include special configurations for how results and attributes are displayed, or additional sections to enhance the user’s result set.

If your customisation request falls outside the predefined theme options, our team can help develop tailored solutions.

Advanced CSS

The Product Advisor’s flexibility through advanced CSS, allows you to further tweak the appearance of the finder interface to match your desired look and feel.

Capabilities in the Finder Settings

You have a variety of options for modifying the design using CSS. These settings allow you to make subtle adjustments or implement complex styles, all without needing deep coding knowledge.

You can adjust the following:

• General Theme CSS: Apply global styles that affect the entire Product Advisor interface across all pages. This is useful for consistent branding across the entire experience.

• Page-Level Customisations: Override the global styles on a per-page basis to make more specific design tweaks. This is ideal if you want to tailor the appearance of different pages or sections within the Product Advisor tool.

How to Apply CSS Changes

1. General Theme CSS

• Navigate to the Set Up tab and enter the Design section.

• Locate the Theme CSS dropdown and open the toggle.

• Apply your custom CSS styles to adjust the visual aspects of the entire finder, such as fonts, colours, and layout spacing.

1. Page Level CSS

• If you need to customise the look for specific pages, navigate to the Flow Tab and select the page (or question) you wish to customise.

• Open the Page Settings, at the bottom left of the screen.

• Open the Styling & CSS dropdown menu CSS Editor for that page and add the necessary CSS rules to modify the appearance at the page level.

Common Use Cases

• Complex Layouts: Build responsive, multi-column, and asymmetrical layouts using CSS Grid or Flexbox for greater design flexibility.

• Hover & Focus States: Enhance interactivity with custom hover effects and focus states to improve user experience and accessibility.

• Typography Control: Leverage variable fonts, responsive sizing, and advanced text styling (e.g., shadows, weights) to achieve precise control over font appearance.

• Shadows & 3D Effects: Apply text shadows, box shadows, and 3D transformations to add depth and emphasis to UI elements for a more dynamic visual experience.

For more advanced customisations, we recommend working with a developer to ensure that the CSS changes are applied effectively across your interface.

Best Practices for Custom Themes and Advanced CSS

• Consistency: Ensure that your custom themes and CSS align with your brand’s design guidelines for a seamless user experience.

• Testing: Always test your changes across different browsers and devices to make sure that your customisations look and perform as expected.

• Performance: Be mindful of performance when making extensive changes. Avoid using overly complex styles or unnecessary animations that could affect loading times.