Sometimes we need to display extra CSS styles on product, collection & My Wishlist pages in order to control the appearance of wishlist elements(icon, badge, counters, tooltip) and their location on screen. This can be done in two ways:
1. Add the CSS rules to your theme's .css or .scass files and make sure that they are loaded on concerned pages.
2. Visit Merchant Console => Configure Appearance => Extra CSS and insert the CSS rules in the two boxes. These CSS rules are loaded dynamically. The contents of the first box are displayed on all pages of your Store, while the CSS rules placed in the second box are displayed only on My Wishlist page.
The first method loads CSS statically and hence is faster compared to the second method. However, the second method is easy to configure and is preferred method as it allows us to monitor the CSS styles and make any changes appropriately.
TIp: Sometimes, even after adding the CSS rules, the changes donot take place. You can consider appending the "important" suffix to the style rules in such cases. You can read more about "important" suffix here.