Storefront widgets
Widgets overview
The suite, the placement model, and the shared vehicle state.
Nine widgets ship on every plan, whatever categories you sell. They are theme app extension blocks — Liquid plus vanilla JavaScript, no framework — that you place in Shopify's theme editor and remove the same way.
The suite#
| Widget | Lives on | What it does |
|---|---|---|
| YMMS hero | Homepage | Picks the vehicle and routes into a filtered catalog |
| Persistent bar | Every page | Shows and changes the active vehicle |
| Garage | Header or sticky | Multiple saved vehicles per shopper |
| Collection page | Collections | Replaces the native grid with a fitment-aware one |
| Collection list | Post-search | The mapped collections for the chosen vehicle |
| Search takeover | Search | Keyword search, autocomplete, SKU redirect, vehicle detection |
| Product fits check | Product page | The verdict, in your words |
| Fitment table | Product page | Everything this SKU fits |
| Cart re-verification | Cart | Re-checks every line, optionally gates checkout |
Vehicle landing pages are the tenth surface — generated pages rather than a block you place.
One vehicle, shared#
Every widget reads the same state, held in the browser and synced to the customer account when they're logged in. Change the vehicle in the bar and the product page verdict, the next collection grid and the cart all answer for the new vehicle — without a reload for anything already on screen.
That state is loaded by the app embed, which is why the embed has to be enabled before any block behaves properly.
Where routing happens, and where it doesn't#
Deliberately, only two things navigate:
- The YMMS hero
- submitting routes to its configured redirect (blank sends the shopper to
/collections). - The garage's Use / switch action
- routes to the garage block's redirect so the new vehicle's fitment applies immediately.
Everything else — the persistent bar's Change, the product page selector, the cart's selector — updates in place. A shopper correcting their vehicle on a product page stays on that product page.
The bar's Clear deselects the active vehicle. It never wipes the saved garage; that is a separate, explicit action.
Structure variants#
Several widgets offer two or three layout variants, chosen in the theme editor. All variants are available on all plans. Colours, labels, copy and layout are theme settings; cross-widget logic — such as what to show when there is no fitment data — lives in the app admin so it stays consistent.
Themes#
Any Online Store 2.0 theme. Widgets inherit your theme's fonts and respect its container widths, with a contrast helper that picks readable foregrounds when a merchant sets an unusual accent colour. Dawn, Horizon, Impulse, Prestige, Warehouse and Turbo are the ones we test against most.
Support is answered by the people who wrote this code — not a ticket queue.