How to add Extra CSS to be displayed on your Shopify Store?

Sometimes we need to display some extra CSS styles on product, collection & My Wishlist pages. This is required in order to control the appearance of wishlist elements(icon, badge, counters, tooltip) and their location on screen. This can be done in either of the following two ways:

1. Add the required CSS rules to your theme’s .css.liquid or .scss.liquid files and make sure that they are loaded on concerned pages.

2. Visit Apps => Smart Wishlist =>Configure Appearance => Extra CSS .

Here there are 2 boxes for CSS styles. The CSS styles on the first box are displayed on all pages of your Store, while the CSS styles placed in the second box are displayed only on My Wishlist page.

We strongly recommend adding any Wishlist related CSS using Extra CSS Tool only as it allows us to monitor the CSS styles and make any changes appropriately.

Tip: Sometimes, even after adding the required CSS rules, the changes are not visible. In such cases, you may append !important suffix to the styles. You can read more about !important suffix here.

For e.g.
font-size: 15px !important;

Related