Add custom CSS for advanced wishlist styling

Overview

The standard styling settings in Wishlist Club cover the most common design changes. If you want more control over how your wishlist and Back in Stock features look, you can add your own CSS.

Use the Custom CSS editor to fine-tune colors, spacing, typography, hover states, button styles, popup styling, and mobile layout details so these features match your storefront more closely.

What you can customize

Wishlist buttons

• Background color

• Text color

• Border radius

• Font size and font weight

• Border, shadow, and spacing

• Hover and transition effects

Back in Stock popup

• Popup background and border

• Input field styling

• Button appearance

• Success and error message styling

• Overlay color and opacity

Wishlist page

• Product card spacing and layout

• Grid columns and gaps

• Product title and price typography

• Button size and placement

• Mobile-specific layout adjustments

How to use the Custom CSS editor

Best practices

• Start with one element at a time. For example, update the wishlist button first before styling the popup or wishlist page.

• Test on product pages, collection pages, and the wishlist page. The same element may appear differently depending on where it loads.

• Always check mobile. Spacing, font sizes, and button widths often need separate adjustments for smaller screens.

• Use the app’s selectors only. Target wishlist and Back in Stock classes so you do not accidentally affect unrelated theme elements.

• Keep a backup of working CSS. Before making major edits, copy your current CSS into a note so you can restore it quickly if needed.

• Avoid overly broad rules. Generic selectors like button, input, or div can change parts of your theme outside the app.

Example CSS snippets

Use these examples as a starting point. You can adjust colors, spacing, and sizes to match your brand.

Change the wishlist button background color

.wc-wishlist-btn {
  background-color: #1a1a1a;
  color: #ffffff;
}

Add rounded corners to the wishlist button

.wc-wishlist-btn {
  border-radius: 8px;
}

Style the Back in Stock popup container

.wc-notify-popup {
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

Add a hover effect to the wishlist button

.wc-wishlist-btn {
  transition: opacity 0.2s ease;
}

.wc-wishlist-btn:hover {
  opacity: 0.85;
}

Style the email input field in the popup

.wc-notify-popup input[type="email"] {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
}

Update the submit button in the popup

.wc-notify-popup button {
  background-color: #111827;
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 600;
}

Adjust wishlist page card spacing

.wc-wishlist-page .wc-product-card {
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

Improve mobile spacing

@media (max-width: 767px) {
  .wc-wishlist-btn {
    width: 100%;
    font-size: 14px;
  }

  .wc-wishlist-page .wc-product-card {
    padding: 12px;
  }
}

Common use cases

Troubleshooting

My CSS changes are not showing

• Make sure you clicked Save in the Custom CSS editor.

• Refresh the storefront page after saving.

• Clear your browser cache or test in an incognito window.

• Confirm that your selector matches the app element you want to style.

My layout looks good on desktop but breaks on mobile

• Review spacing, widths, and font sizes on smaller screens.

• Add mobile-specific rules with a media query.

• Avoid fixed widths unless you have tested them across devices.

A theme element changed unexpectedly

• Check whether you used a broad selector such as button or input.

• Replace it with a more specific selector that targets only app elements.

Before you save large changes

Need more help?

If you need help getting the wishlist button to appear correctly, contact our team:

• Email: [email protected]

• Live chat: available from the app admin

• Onboarding: book a free 1:1 onboarding call