Overview

Flits Wishlist includes powerful design controls, but some merchants prefer deeper customization to match their unique branding or theme layout.
 For full visual control, you can use Custom CSS to modify wishlist buttons, icons, states, spacing, or animations on both Product Pages and Collection Pages.

All custom CSS can be added inside Flits at:

Flits Wishlist → Wishlist Design → Product page / Collection page → Custom CSS

This CSS loads only for wishlist components and does not affect other parts of your theme.

1. Custom CSS for Product Pages

Use these selectors to style wishlist elements on Product Detail Pages (PDP).

A. Wishlist Button Styling

Modify the overall button container:

/* Wishlist button styling */

.flits_wishlist_button {

  /* add your styles */

}


Use cases:

  • Change background color

  • Add border radius

  • Adjust padding or width

  • Add custom hover animations

B. Wishlist Icon Styling

Control the appearance of the icon inside the button:

/* Wishlist button icon styling */

.flits_wishlist_icon {

  /* add your styles */

}


Use cases:

  • Resize icon

  • Change icon color

  • Adjust spacing between icon & text

C. Wishlist Button Text Styling

Style the text that appears next to the icon:

/* Wishlist button text styling */

.flits_wishlist_button_text {

  /* add your styles */

}


Use cases:

  • Change font-size

  • Customize font-weight

  • Add letter-spacing

D. Active / Wishlisted State Styling

Apply custom styles when the customer has already saved the product.

Button (Active State)

/* Wishlist button active/wishlisted state styling */

.flits_wishlist_button.flits_wishlist_button_active {

  /* add your styles */

}


Icon (Active State)

/* Wishlist button icon active/wishlisted state styling */

.flits_wishlist_button_active .flits_wishlist_icon {

  /* add your styles */

}


Text (Active State)

/* Wishlist button text active/wishlisted state styling */

.flits_wishlist_button_active .flits_wishlist_button_text {

  /* add your styles */

}


Use cases:

  • Change icon to filled heart style

  • Apply brand color when wishlisted

  • Dim button text to indicate "saved" status

  • Add subtle active-state animation

2. Custom CSS for Collection Pages

Use these selectors to customize wishlist icon overlays and buttons on Collection / Category grids.

A. Wishlist Collection Button Styling

This controls the container that sits on each product card.

/* Wishlist collection button styling */

.flits_wishlist_collection_button {

  /* add your styles */

}


Use cases:

  • Change button background

  • Adjust icon placement

  • Add border radius for rounded overlays

B. Wishlist Icon Styling

Controls the icon on collection cards:

/* Wishlist icon styling - use default color */

.flits_wishlist_icon {

  /* add your styles */

}


Use cases:

  • Change icon size

  • Adjust icon alignment on top-right/top-left

  • Modify overlay opacity for visibility on product images

C. Active / Wishlisted State Styling

Change appearance when product is saved.

Wishlist Button Active State

/* Wishlist collection button active/wishlisted state styling */

.flits_wishlist_collection_button.flits_wishlist_button_active {

  /* add your styles */

}


Wishlist Icon Active + Hover State

/* Wishlist icon active/wishlisted/hover state styling - use active/hover color */

.flits_wishlist_button_active .flits_wishlist_icon {

  /* add your styles */

}


Use cases:

  • Highlight icon when saved

  • Use brighter colors on hover

  • Provide instant visual feedback for customers

3. Best Practices for Custom CSS

✔ Keep mobile responsiveness in mind

Test styles on both mobile and desktop views.

✔ Avoid overriding foundational layout unless necessary

Start with small overrides, then scale.

✔ Use !important only when required

Helps avoid conflicts, but should not be overused.

✔ Test with multiple products

Especially with different image heights and variant types.

✔ Maintain color accessibility

Aim for sufficient contrast between icon and background.

4. Troubleshooting Custom CSS Issues

Changes not showing?

  • Hard refresh (Shift + Cmd/Ctrl + R)

  • Browser may be caching old CSS

Icon or button appears distorted?

Check padding, width, or forced scaling.

Mobile layout looks misaligned?

Add mobile-specific CSS using media queries:

@media (max-width: 768px) {

  /* mobile styles */

}

Another wishlist app causing conflicts?

Ensure only Flits Wishlist is active on your theme.

For assistance or additional information on the Wishlist App, our team is available at support@getflits.com.