Setup | Theme Designer

Customize Your Advisor's Design

With Neocom, you can tailor your advisor's design to match your website's aesthetic seamlessly. The user-friendly interface allows for quick and easy adjustments, enabling you to implement seasonal changes, sales promotions, or other marketing activities effortlessly.

Accessing the Theme Designer

To access the Theme Designer, simply log into the Neocom Admin Portal. Select the desired advisor and navigate to the Setup section, found in the top horizontal toolbar. Once in the Setup section, you'll find the Theme Designer in the vertical toolbar on the left side of the page.

Previewing, Saving & Discarding Changes

Before we continue, it should be noted that all customisations are only applied when you click Apply. If you want to return to the last saved version, you can click on Discard. Please note that no changes will be saved until you click Apply. If you exit the Theme Designer without saving your changes, you will be asked to confirm whether you want to continue without saving.
The preview will update automatically so you can see what your changes look like before you apply or discard them. You can also switch between the mobile, tablet and desktop views by using the icons at the top right of the page.

Content of This Article

This article provides comprehensive information to help you navigate the diverse functionalities of the Neocom Theme Designer. The topics covered include:

• Basics
• Advisor
• Answers
• Results
• End of Conversation
• User Feedback
• Tipps & Tricks

Basics

1) Font

Updating the font

Enter the name of your desired font in the top field labeled Font Family Name. Along with your preferred font, you must also specify at least one backup font. We recommend using Sans Serif as a backup, as it is a font that works across all browsers.

You can also add multiple backup fonts, each separated by a comma. The need for a backup arises because you may have a specific font installed on your device, while visitors to your website may not have it available on theirs. In such cases, the backup font will be used.

https://fonts.bunny.net/css?family=abel:400|abhaya-libre:400,700|are-you-serious:400|signika:400,700

Fügen Sie diese URL einfach ins Feld Embed Custom Font ein, um sicherzustellen, dass alle Gäste den Berater genauso sehen, wie Sie es beabsichtigen.

2) Size & Placement

The Size & Placement section allows you to adjust the dimensions and positioning of your advisor so it fits seamlessly into your online presence. 

Max Width adjusts the maximum width of your advisor to fit your website. If you don’t know what the max width of your site is you can use Google’s Developer Tools, found by clicking on the three dots to the right of the URL in your browser under More Tools, to inspect any element to find its width. The width is measured in pixels. 

Top Margin allows you to shift the Inline Advisors up or down. This is particularly convenient if you have a toolbar at the top, or bottom, of the website that you don't want to obstruct. You can enter two values, one for Mobile and one for Desktop. 

Modal Top Margin allows you to shift the Full Page Advisors down. Even though the advisor will be full screen, you may still want certain elements at the top visible, like a Header or Navigation Bar. Again, you can enter two values, one for Mobile and one for Desktop. 

3) Theme Colors

At this stage, you can select both the Primary and Secondary Colors by using the eyedropper and entering an RGB, or HEX color code. You will see an example of the Primary color changing on the continue button or the price tag symbol for example, and the Secondary color changing the color of the text under the progress bar. These changes will affect various elements across all pages of your advisor from the initial questions to the results page. You can customize your color palette further, later in the process. 

4) Corner Radius

This element allows you to adjust the corner radius of various elements of your advisor including the buttons and question cards (the card where you select your answer)

Advisor 

Here you can customize the various elements during the advisor's question phase:

1) Advisor Frame

This adjusts the background color located behind the question box and the result cards.

2) Texts

Here you have the option of changing the weight and style of the question text. 

3) Progress Bar

This is the bar that depicts your progress through the advisor at the very top of the page.

4) Price Filter

If you want to accentuate the price filter you can choose a new color for the price icon. If this is not adjusted it will remain the primary color selected earlier.

5) Slider

Here you can change all colors within the price filter. To see the changes you need to click on the price tag icon.

6) Primary Button

Allows you to change the color of the continue button or add a border if you wish. If you do not change this, it will continue to use the Primary Color selected earlier. 

7) Secondary Button

You have all the same customizable options as with the Primary Button. For both the Primary and Secondary button options you can also adjust the font weight, font color, and font size. You also have the option to adjust the Hover Color. This means when users pass over the button with their mouse, the button changes color automatically.

Answers 

1) Card

The Card section lets you customize the answer cards. Each of the answers, to each question, are positioned on what is called a card which are completely individualizable. In this section, you can adjust the background color and the border. 

2) Text

Like all the other sections, this is your opportunity to customize the font on each card. You can adjust size, make text Bold, add Italics, whatever you wish.

3) Controls

Customers must click on the card to select that specific answer and move on with the advisor. With the Controls section you can adjust what color should be displayed if the card is selected or not. 

Results 

1) Card

This refers to the individual result cards (as seen above with the highlighted border) You can adjust the background color of each result card, add borders, and adjust the border width. 

2) Text

Refers to the title text of each result Card. You can adjust the size or color and add bold or italics effects. The font itself is always coupled with the font you added in step one. 

3) Price

Here you can adjust the standard price, the sale price, and the strike-through price, as well as the price prefix and suffix ($ / € for example).

4) CTA Button

This is the button that will drive visitors to the Product detail page on your website. Setting up a clear look for this button will make the journey clearer for customers and drive customers to checkout. As with other elements, you can adjust the background, border, font color, font size, and weight. 

5) Add to Cart

This button sends the selected product directly to the clients' Cart, meaning it is a button that you want to draw attention to while still keeping in line with your online style guide. This feature requires extra information within the feed you supply to Neocom. If you are curious, reach out and contact your Customer Success Manager.

6) Comparative Features

These are located underneath each result card. Here you can adjust the color of the ticks which are visible when a product meets the requirements selected in the advisor. You can also adjust the color of the icon chosen to represent those features that the product does not possess. Just like the other sections, you can also adjust the font size and weight at this point.  

End of Conversation

The End of Conversation section focuses on what users see when they finish the advisor, specifically what is displayed in place of the previous questions.

1) Conversation Summary

Here you can adjust the background color of the entire result section, as well as the checkmark displayed. Each checkmark indicates each question that the user answered, and doubles as a link to return to that specific question.

 2) Floating Arrow Button

This refers to the floating arrow button, centrally located below the text. This block allows you to change the color of the background, and the arrow itself. 

3) Restart Button

The Restart button is located at the bottom right. Again, you can adjust the color of the text, the icon, and the background, as well as the font weight and size. You also can hide the icon altogether.

User Feedback

1) Banner

Here you have the chance to define the background color of the User Feedback section, as well as the displayed Text color.

2) Banner Buttons

This enables you to adjust the font weight and size as well as add borders for the Thumbs Up | Thumbs Down buttons. 

Tips & Tricks

Keep it simple. 

While the customization options are nearly limitless, we recommend maintaining the advisor’s aesthetic in harmony with your website. Focus on a few key elements to ensure a clear and elegant user experience.

Prioritize getting the basics right. Take your time to carefully adjust size and positioning, and ensure that the font and primary and secondary colors are well-coordinated.

Baby Steps. 

Refine individual elements gradually, review them, and apply the changes using Apply. This way, you can immediately see the impact of your adjustments and minimize the risk of unintended changes.