Out of the box, Tweakwise JS comes pre-styled with default CSS styling. If you wish to change these styles you can override the default classes with your own. Every semantic block has an identifying class name following the same naming convention. The easiest way to look up a specific class for you to override, is to right-click on an element and inspect it in your browser's Development Tools:

There you can also see which default styles are applied on an element. To change, for example, the background color on the left sidebar, insert this snippet into your site's HTML:

<style>
.twn-starter .twn-starter__left {
  background-color: red;
}
</style>

Troubleshooting

Here are some troubleshooting tips:

• If your styles are not getting applied it is important to be specific with your CSS selectors, especially if you define your overriding styles in another stylesheet file, as opposed to creating a new <style> tag in your HTML. Competing declarations have different specificity and might not be picked up by the browser.
• Consider prepending your selectors with the root class to contain your changes inside, if there ever was another element with the same class outside the implementation. For JS Implementation .twn-starter, for Recommendations JS .twn-slider__wrapper, for Guided Selling JS .twn-guided-selling and for Suggestions JS .twn-suggestions.