Customization

Dashboard settings

The easiest way to customize the widget is from the Settings page in the SimplerSuite Wishlist dashboard.

Icon style

Style	Description
outline	Outlined heart (default). Fills in when active.
filled	Always filled heart. Uses color change for active state.
minimal	Small, subtle heart for minimal themes.

Icon position

Position	Description
top-right	Top-right corner of the product card (default)
top-left	Top-left corner
bottom-right	Bottom-right corner

Changes take effect immediately — no code changes required.

CSS overrides

The widget uses scoped CSS classes that you can override in your theme’s stylesheet.

Core classes

/* The heart icon container */
.ssw-heart {
  width: 32px;
  height: 32px;
}

/* Active (wishlisted) state */
.ssw-heart.ssw-active {
  color: #e74c3c;
}

/* Hover state */
.ssw-heart:hover {
  transform: scale(1.15);
}

/* The animation on toggle */
.ssw-heart.ssw-pop {
  animation: ssw-pop 0.3s ease;
}

Example: change the heart color

.ssw-heart.ssw-active {
  color: #ff69b4; /* hot pink */
}

Example: increase icon size

.ssw-heart {
  width: 40px;
  height: 40px;
}

Example: hide on mobile

@media (max-width: 768px) {
  .ssw-heart {
    display: none;
  }
}

Cookie consent

The widget checks for Shopify’s Customer Privacy API before setting cookies. If a customer has declined functional cookies, the widget operates in memory-only mode — the wishlist works during the session but is not persisted.

No custom consent banner is needed. The widget respects whatever consent tool your theme uses.