Styling & theme settings

Widgets are meant to look like your store, not like an app. Two layers of control: theme settings for anything visual, and CSS hooks when a setting isn't enough.

What lives where#

Theme editor

colours, labels, copy, layout variant, spacing, position. Per block, per theme, changeable by anyone who edits the theme.

App admin

logic that must be consistent everywhere: fitment copy templates, no-fitment-data behaviour, checkout gating.

The split exists so that the "does not fit" sentence reads identically on the product page, in the cart and in the fitment table, no matter who edited the theme.

Inheritance#

Widgets inherit your theme's font stack and heading styles by default, and respect its container widths. What they do not inherit is button styling — themes vary too much — so each block exposes its own button colour, radius and text colour, defaulting to your theme's accent.

A contrast helper corrects foreground colours automatically when a chosen background would leave text unreadable. It is not a substitute for taste, but it stops the most common accessibility failure.

CSS hooks#

Every block exposes stable class names prefixed wf-, plus custom properties you can override from your theme's stylesheet:

/* In your theme's CSS, not in the app */
.wf-hero {
  --wf-radius: 4px;
  --wf-accent: #123456;
  --wf-font: "Your Font", sans-serif;
}
.wf-verdict--fits { font-weight: 700; }

Class names are treated as public API and don't change without a version note in the changelog.

Dark themes#

Widgets read your theme's background and pick foregrounds from it, so a dark storefront gets dark widgets without configuration. The three verdict colours — fits, does not fit, unconfirmed — hold their meaning in both, which is why they are not themeable beyond hue adjustment.

Copy#

Every string is editable. The ones worth spending time on, in order:

1. The unconfirmed message — it is a lead-capture opportunity, not an error.
2. The hero button label — promise the outcome ("Shop my F-150"), not the mechanism.
3. The empty state on a filtered collection.
4. The garage empty state.

RTL and translations#

Blocks respect your theme's text direction. Copy is entered per block, so a multi-language store with Shopify Markets can localise through Shopify's own translation tooling.