Match your brand

VeryQuery's storefront surfaces read your active Shopify theme and pick up its colors, typography, card shape, and button styling. The first run fires automatically when you connect your store, so the embed already matches your theme by the time you finish onboarding. Anything the adaptation gets wrong (or any value you want to tweak by hand) you can override in the Customize tokens panel.

How adaptation runs

The first run kicks off automatically as soon as your Shopify store connects, in the background, while you're still finishing onboarding. By the time you land on the dashboard the embed has typically already adapted (the run takes about 15 seconds). You don't need to do anything for this first pass.

After that, adaptation is manual. To re-derive after a theme change or tweak:

  1. Sign in to your VeryQuery dashboard.
  2. Open the Shopify page.
  3. Click Re-adapt to my theme.

The button changes to Adapting… while the run is in flight. You can leave the page; the run continues in the background and the preview updates on completion.

What gets matched

The adaptation covers six categories of values. You don't need to set any of these by hand; the run derives them from your theme.

Colors
Body text, muted text, card background, row background, accent (sale and CTA), hairline borders, image-placeholder fill, hover overlay, and storefront page background.
Typography
Body font stack, heading font stack, body and heading weights, card title size, meta size, price size, and line-height.
Card shape and spacing
Card and image corner radii, badge pill radius, card inner padding, gap between cards, row padding and max width, card border, card and image hover effects, and image aspect ratio (sampled from your actual product photography).
Search inputs
Fill, text color, border (color, width), corner radius, vertical and horizontal padding, focus ring, and placeholder color.
Buttons
Background, text color, border, corner radius, padding (vertical and horizontal), font weight, plus distinct styling for hover, active (pressed), and focused states.
Misc
Image aspect ratio and transition timing.

Variant selectors render as inline underlined text links (e.g. Color: Charcoal | Size: 38) and don't have their own token group. The matched dimension picks up the accent color, and a matched-but-sold-out combination shows the muted text color with an inline (sold out) suffix. Tune the global color tokens and the variant UI follows.

Preview

Right above the Customize panel you'll see a live preview pane with real items from your catalog rendered in the row layout shoppers actually see. The preview repaints whenever you re-adapt or save an override, so you can iterate without leaving the dashboard. You can hover, focus, and inspect elements with browser devtools to verify hover and active states; clicks inside the preview are intercepted so they don't navigate or submit anything.

Customize tokens

Below the preview, the Customize tokens panel exposes every value the adaptation produces. Open the section, find the token you want to change, type the new CSS value, and click Save changes. The override is live on the next storefront request and on the dashboard preview.

Each row shows the token name and a text input. The adapted value (from your last theme adapt) appears as the input's placeholder; your override (if any) appears as the actual value. Empty inputs fall through to the adapted value; when the adapter also omitted a value, the embed's built-in default applies.

Tokens are grouped so related state values live next to each other:

  • Color, Typography, Shape & spacing, Decoration, Inputs, Misc.
  • Buttons, with separate fields for hover and active (pressed) states alongside the default chrome.

To remove an override, clear its field and click Save. Reset all overrides at the bottom of the panel clears every override in one go.

Overrides persist across re-adapts. Re-adapting refreshes the adapter's derived values without touching anything you've set by hand.

When a value isn't adapted

The adapter is conservative: when it can't find clear evidence in your theme for what a value should be, it deliberately skips it rather than guess. The embed's built-in defaults take over for any skipped value, so surfaces always render cleanly. If a specific token reads wrong on your storefront, set it explicitly in the Customize panel.

Re-adapt after theme changes

The first adapt fires automatically on connect, but subsequent re-adapts are manual. After any of these you'll want to re-adapt by clicking the button:

  • Switching to a different theme.
  • Publishing a new version with material design changes (color slot edits, font changes, button-style changes).
  • Updating your theme's customize settings (color schemes, font picker selections, layout knobs).

There's a short cooldown between adapt runs to prevent accidental rapid-fire. If you hit it, the dashboard tells you how long to wait. There's also a monthly cap on re-adapts (50 per property per 30 days) so a stuck loop or accidental hammering can't run up a bill. If you have a legitimate reason to iterate more, contact support and we'll raise the cap for your property.

If adaptation fails

The button reverts to Re-adapt to my theme and you'll see an error toast. Your prior adapted values stay intact (we don't blank known-good results on a failed re-run). Click the button again to retry. If failures are persistent, check that your theme stylesheets aren't using something unusual (private themes with heavy CSS preprocessing can occasionally trip the adapter). The Customize panel is always available as a manual fallback.

Next