Styling the V2 widgets

The V2 widgets (the full-page Projects experience, the product page save panel, the collection icon panel, and the shared-list page) are styled from one place in the app, with a live preview, and no code. This guide covers every setting, plus a Custom CSS hook for stores that have a developer.

Where the settings live

In your Shopify admin, open Apps → B2B Wishlist Project Planner → Appearance.

The page shows the settings on the left and a live preview of the Projects page on the right, using your own best-selling products. Switch the preview between the Projects list and a Project detail view. Click Save to publish; changes are live on your storefront on the next page load. View on your store opens the real Projects page.

These settings apply to every V2 widget on your store, including the Projects page at /apps/wishlist-api/v2/projects, which has no theme block of its own.

The product page button and the collection icon blocks keep their own color settings (button colors, overlay colors) in the theme editor, because they sit inside your theme's own sections. Typography and shape settings from the Appearance page still apply to the panels they open.

Colors

Muted text (dates, vendor names, helper copy) is derived from the text color at reduced opacity, so one text color keeps everything legible on light or dark backgrounds.

Typography

Out of the box the widgets match your theme: body text inherits your theme's text font, and headings copy the font, weight and letter spacing your theme uses for its own headings. Most stores never need to touch this section.

Shape and shadows

Custom CSS (for developers)

If a setting doesn't exist for what you need, the Custom CSS field at the bottom of the Appearance page accepts plain CSS. It's loaded after the app's own styles on every page, and it's copied into each widget, so it works even though the widgets render in isolated shadow DOM.

The field also reaches the classic widgets (the account page block and /apps/wishlist-api/wishlist-account). Their class names carry a short suffix (for example ssfy-button__button--286d1) and aren't listed below; inspect the page to find them. The same support caveat applies.

Stable class names

Every V2 element has a class of the form ssfy-v2-<component>__<element>. The names below are stable across app updates; anything not listed may change without notice.

Examples

Give page titles a bottom border:

.ssfy-v2-projects-page__title,
.ssfy-v2-project-detail__title {
  padding-bottom: 12px;
  border-bottom: 1px solid currentColor;
}

Hide vendor names on product cards:

.ssfy-v2-product-card__vendor {
  display: none;
}

Make product images square instead of slightly tall:

.ssfy-v2-product-card__image {
  aspect-ratio: 1;
}

Tips

• Don't use !important unless a rule is genuinely being overridden: your CSS is already loaded last.
• Use the class names, not element selectors like h1 or button, so your rules don't leak into the rest of your theme.
• Styles for the side panel and dialogs apply to elements rendered at the end of the page body, outside your theme's sections. The classes above still match.
• The preview on the Appearance page applies your custom CSS too, so you can check a rule before saving.

Legacy theme-editor colors

Stores that set V2 colors in the theme editor (App embeds → B2B Wishlist Project Planner → "V2 colors (legacy)") keep them until the Appearance page is saved for the first time. After that, the Appearance page is the only source and those theme settings are ignored.

If you have questions about the built-in settings, reach out through our contact form.