Bo+Tee design system

Usage cheatsheet

• text-display … text-h6 — headings (mobile-first, desktop at 990px). Native h1–h6 match text-h1–text-h6. Do not use Horizon .h1–.h6.
• text-p1 … text-p5 — body (Book 350); add -bold for Medium 500
• btn-primary / btn-solid-inverse — default Solid Button (36px, 4px radius); use for add to bag. btn-secondary is an alias of btn-outline-dark. btn-underline — Figma Primary Button link. btn-glass-inverse — frosted media CTA (Shop the Look). btn-glass-inverse--icon — 36px play/pause (Media Banner, PDP desktop gallery). PDP mobile videos use the labeled “video” chip via snippets/bt-video-toggle.liquid with label.
• color-text-* / bg-text-* — text colour tokens; bg-fill-* for surfaces. Page background defaults to --color-alpha-white-90 (rgba(255, 255, 255, 0.9)), not --fill-primary.
• — header icons (wishlist, bag, account, search, menu)
• Announcement bar: text-p5 + color-text-primary + bg-fill-primary, height var(--size-component-announcement-height). Desktop shows 3 messages; mobile rotates.
• Header: sections/header.liquid · 64px desktop / 42px mobile (90px when search exposed on mobile) · settings: show_search, search_exposed, search_placeholder, show_wishlist, background_color / text_color · runtime: transparent / scroll · search field snippets/searchbar.liquid · placement snippets/header-search.liquid.
• Product card: snippets/product-card.liquid · loading snippets/bt-product-card-skeleton.liquid · block _product-card · fluid 2:3 media · product-card__media-controls overlay 12/14 · text-p3 title/price · bt-wishlist / bt-bag · settings: quick_add, mobile_quick_add, show_product_card_variant_tag, product_card_swatch_display / product_card_swatch_limit_desktop / product_card_swatch_limit_mobile.
• Hero banner: sections/bt-hero-banner.liquid · full-bleed image/video · text-p2-bold eyebrow · collection logo image (text fallback) · btn-underline--inverse label (banner is the link) · desktop_text_alignment / mobile_text_alignment (left or center for heading + tagline) · desktop default bottom-centre, gap spacing/14, py spacing/64 · mobile default bottom-left, px spacing/24, py spacing/40 · mobile height section_height_mobile (default 90vh).
• Hero banner carousel: sections/bt-hero-carousel.liquid · slide blocks blocks/_bt-hero-carousel-slide.liquid · same slide content as Hero banner · text-p1-bold (desktop) / text-p2-bold (mobile) eyebrow · logo or text-display · desktop CTA bottom-left, title above it or top (desktop_content_position, default bottom), px spacing/48, py spacing/80 · 2+ slides: frost pill with arrows + dots (arrows wrap), mobile interval progress · auto_rotate default 6s · one slide hides controls.
• Tabbed banner: sections/bt-tabbed-banner.liquid · tab blocks blocks/_bt-tabbed-banner-tab.liquid (collection name + image, with optional overrides) · text-p2-bold eyebrow (mobile metrics on desktop) · tabs text-h3 mobile / text-h1 desktop · inactive --color-alpha-soft-ivory-50 / --color-alpha-soft-ivory-70 · btn-underline--inverse CTA · full width, auto height ( 2880×1200 aspect) · content position 6 desktop + 3 mobile.
• Media banner: sections/bt-media-banner.liquid · full-bleed image/video · text-p3-bold pre-heading · collection logo image (text fallback) · text-h1 heading · text-h4 description · btn-underline--inverse CTAs (max 2) · btn-glass-inverse--icon play/pause · height mid (600px) / tall (900px) · mobile 752px · heading centre / copy bottom · desktop split or stacked · content position 5 · reduced-motion image fallback.
• Overflow-x carousel engine: assets/bt-scroll-carousel.js · import @theme/bt-scroll-carousel for progress + card-step + hover prev/next + mouse drag · toggle per section with features or data-bt-carousel-progress / data-bt-carousel-nav / data-bt-carousel-drag . Do not copy into a new section file. Nav tiles stay in bt-nav.js . Horizon slideshow-component is only for PDP / product cards / resource-list.
• Featured collection carousel: sections/bt-featured-collection-carousel.liquid · shared engine bt-scroll-carousel.js · text-h4 heading (Figma H5 on mobile) · btn-underline view all · tabs text-p4 / text-p4-bold · bt-chevron-left / bt-chevron-right hover prev/next · product cards via product-card.
• Discover more (Nosto): sections/bt-nosto-recommendations.liquid · same bt-fcc chrome as featured collection · JSON placements productpage-nosto-1 / productpage-nosto-2 · one Shopify batch for product-card · storefront script and page context from the Nosto Script and Nosto Tagging app embeds.
• Category carousel: sections/bt-category-carousel.liquid · shared engine bt-scroll-carousel.js · optional text-h5 heading (Figma H4 on desktop) · layout large tiles text-p4 or thumbnail text-p2 via bt-category-carousel-thumbnail-card · thumbnail mobile grid (default) or carousel · collection image with optional override · scroll progress --stroke-brand / --color-alpha-jet-black-20 · bt-chevron-left / bt-chevron-right hover prev/next.
• Breadcrumbs: snippets/bt-breadcrumbs.liquid · section bt-breadcrumbs on collection and search · PDP purchase stack · text-p5 · Home color-text-primary underline · current color-text-subdued · 6px rule, gap spacing/4.
• Collection header: sections/bt-collection-header.liquid · text-h4 title · colour pills from custom.filter_colour_names matched via color-from-catalog · sticky toolbar (Filter & Sort) pins under the header.
• Tokens: snippets/design-tokens.liquid · CSS: assets/design-system-*.css

Typography — headings

File: design-system-typography.css. Native h1–h6 use the same metrics as text-h1–text-h6. Figma headings are ABC Favorit Trial Regular — loaded as BoTee Favorit Regular 400. Desktop scale: Theme settings → Typography → Type scale sets --type-scale from a chosen viewport width (default 990px). That also multiplies Horizon --font-size--* / --font-paragraph--size so leftover content pages scale. Nav header scale sets --nav-type-scale for desktop top menu links only. Add the Typography scale section to a template to override both for A/B tests. New font sizes must use calc(Npx * var(--type-scale, 1)).

Typography — paragraphs

Figma paragraph previews are ABC Favorit Trial Book / Medium (spec cards still say Roc Grotesk Regular). Regular: text-p1…text-p5 Book 350. Medium 500: text-p1-bold…text-p5-bold.

Buttons

Default is Figma Solid Button: 36px, 4px radius, button/solid-inverse/*. Type: 14px / 16px / Medium 500 (Figma ui/button/small). Aliases: btn-primary = btn-solid-inverse; btn-secondary = btn-outline-dark. Add to bag uses that default class — no separate class. File: design-system-buttons.css. Horizon .button remains in base.css until header/footer are rebuilt.

Icons

· File: snippets/icons.liquid

Searchbar

Snippet searchbar · Figma desktop 2124:312 / mobile 2128:1330. Real <input type="search"> · style: light | dark · size: desktop | mobile. Typed value shows underlined clear. Header uses it when search_exposed is on. Overlay (Figma Search Open / Active) is snippets/bt-search-overlay.liquid · fill bg-fill-base · labels / trending / view all text-p3 · terms text-p4 color-text-subdued · sorry text-p3 color-text-subdued · typed results use createNostoProductCard · trending stays Liquid product-card. Search page no-results (Figma SRP — No Results) lives on sections/bt-search-results.liquid · heading content.search_overlay_sorry · featured collection + category carousel from that section’s settings.

Newsletter field

Snippet bt-newsletter-field · Figma 2083:1241. Type text-p4 · height --size-component-input-height-sm (40px) · fill --color-alpha-soft-ivory-10 · blur --effect-backdrop-blur-sm · radius --border-radius-input. Default / filled: --stroke-medium. Active (focus): --stroke-brand, no extra ring. Placeholder + idle subscribe: color-text-subdued. Typed value: color-text-highlight. Filled subscribe: color-text-primary, underlined. Footer customer form uses this snippet.

Announcement bar

Section header-announcements · block _announcement · type text-p5 · fill --fill-primary / text --text-primary (overridable via section colour settings) · height --size-component-announcement-height (28px). Merchants add up to 3 messages with optional inline links. Desktop shows all three, with the country/currency control on the right; mobile fades to the next message using the speed setting and keeps currency in the nav drawer.

GBP (£)

free shipping over £50

build your bundle3 for 2shop now

easy returns and exchanges

GBP (£)

Currency

• AED
• AUD
• CAD
• EUR
• GBP
• ILS
• JPY
• USD

Footer

Section footer · OHP001P-44 · Figma desktop 8434:3823 / mobile 8396:12604. Tagline mobile text-h2 / desktop text-h3 (two nodes, 990px), “join the club” text-h4, newsletter bt-newsletter-field (text-p4, default / active --stroke-brand / filled). Surface --color-alpha-soft-ivory-60. Optional layout-container (section setting, off by default). Desktop: tagline above a 428px club column and link columns from one nested Shopify menu (top-level items = headings) (--spacing-144 gap, heading text-p2 / links text-p4 color-text-subdued, --spacing-28 then --spacing-20); legal row after --spacing-112. Socials from Content → Metaobjects → Social Link (URL + icon file + order index), 24×24 (--size-icon-social), grouped with --spacing-16. Desktop: under the QR in the club column. Mobile: app card on bg-fill-base, independent accordions, clustered socials then copyright + the same Theme settings logo as the header (wordmark fallback, Figma 74×12 desktop / 61×10 mobile).

Shop the Look

Section shop-the-look · card shop-the-look-card · drawer shop-the-look-drawer · JS shop-the-look.js. Horizontal look tiles (image/video) with optional creator handles. Overflow row uses bindOverflowCarousel (progress + desktop hover prev/next). Superscript look count on the heading. Desktop hover / mobile top-left: btn-glass-inverse “view this look”. Click opens a right-anchored drawer (stacked look media on mobile, side-by-side on desktop). Bundle discount is set per look card. CTA states: select sizes / add N items / add all with bundle prices. Drawer hero is a swipeable gallery (look media, then every image of each product) on bindOverflowCarousel. Sizes preselect from the PDP size choice, else the newest cart line’s size; one-size products auto-select; never defaults to the first size.

Product card

Snippet product-card · loading bt-product-card-skeleton · block _product-card · JS product-card.js · mobile drawer quick-add-drawer. UX PLP default + DS hover/sale/overflow. Fluid width, media aspect-ratio: 2 / 3. Card images: sizes 1.5× tile (37.5vw desktop / 75vw mobile), srcset 720–2400w. Image overlays live in product-card__media-controls (--spacing-12 mobile / --spacing-14 desktop padding). Typography: text-p3 title/price, text-p4 sizes, text-p5 chip / +N more. Icons: icon-bt--card.

Anatomy

• Mobile quick-buy drawer (quick-add-drawer): text-p3 heading/title, text-p4 price/sizes/view details, text-p5 delivery, btn-primary add to bag. Sheet gap --spacing-14, padding 16px var(--spacing-24) 24px, gallery overflows inline-end padding, body gap --spacing-24, actions-to-delivery --spacing-20. Desktop (990px+): right-slide 664px panel (same shell as size guide), gallery 224×333 with hover prev/next via bindOverflowCarousel, title text-h6, price text-p2, colour/details/size guide text-p4, size label/values text-p3, overview gap 20px / stack gap 44px, 3-for-2 chip + more details + size guide. OOS sizes stay selectable with bt-bell (never preselected). CTA: add / select size / out of stock. Notify drawer when custom.pdp_enable_stock_notification is on.
• Media overlays: product-card__media-controls (top row = wishlist + future controls, bottom row = sale / bag / sizes).
• Default collection PLP is Shopify Liquid cards. SRP, nav-search overlay, and the optional nosto collection template render immediately from Search API JSON through assets/bt-nosto-product-card.js. The renderer reuses this card’s classes, settings, promo pills, and interactions. Size-bar OOS strikethrough and market prices are hydrated from Shopify after first paint (Nosto SKU stock/currency is often stale). Incomplete hits fall back to the canonical Liquid card.
• Desktop hover: second image (when 2+ images) + frosted size bar (product-card-size-overlay) → quick-add. Mobile swipe-through shows the second image; the size overlay stays desktop-only. The mobile bag always opens quick-add-drawer.
• Card info order: title, price, then swatches (hidden when a product has no colours). Each swatch links to that colourway via the same sibling URL as PDP (bt-colour-sibling-url / @theme/bt-colour-sibling: {style-handle}{colour-handle}). Theme settings → Product cards → Swatches: all shows every colourway at 8px mobile / 12px desktop; limited shows the first N (default 5 desktop / 3 mobile) plus product-card__swatch-overflow (“+X more”, text-p4 color-text-subdued) at 14px mobile / 16px desktop with a 10px gap. Source: product metafield colors.available matched via @theme/bt-color-catalog (JS) / color-from-catalog (Liquid) (#bt-color-catalog, sized by values_count up to Shopify's 1,000-entry metaobject page ceiling — all colours inline, no client paging). Metaobject list on that metafield renders in Liquid. If empty, Colour option swatches (Combined Listings product_url when present).
• Lengths chip from Fit option (2+ values; label is “N lengths”). Falls back to Length if Fit is missing. Chip: text-p5 · bg-fill-base · 18px / 6px pad / 2px radius, 10px from price.
• Wishlist: wishlist:toggle / wishlist:state via @theme/bt-wishlist (Swym)
• PDP gallery + purchase stack: sections/bt-product-information.liquid · snippets bt-pdp-* · JS bt-product-information.js.

Theme settings

PDP gallery and purchase stack

Section bt-product-information · snippets bt-pdp-gallery, bt-pdp-purchase-stack, bt-pdp-variant-picker, bt-pdp-buy-actions, bt-pdp-gift-card-recipient, bt-pdp-mobile-sticky, bt-pdp-stock-notify (bt-notify-drawer), bt-pdp-size-guide-drawer · JS bt-product-information.js (loaded from the section) · get this look bt-pdp-look / bt-pdp-look.js · mix & match bt-pdp-mix-match / bt-pdp-mix-match.js. Reuses Horizon variant-picker, product-form, and media-gallery. Do not use bindOverflowCarousel here.

Layout

• Desktop: 2-column media grid, 2px gap, 445/668 tiles, sticky buy box minmax(380px, 40%). The buy column grows with its content (open accordion, look, mix & match) so the section expands like live-theme; it only pins while the gallery is taller. No size is preselected unless the product has only one; ATC is brand “select size” until a size is chosen (one-size starts as solid-inverse “add to bag”).
• Mobile: full-bleed overflow-x snap row (bt-pdp-gallery__track) + flush 1px Slider-Mobile. Slides keep the 445/668 ratio (uncropped). With 2+ media, ~1.4 slides are in view so the first frame is shorter than the viewport and the next image peeks — same first-view as live-theme. A single image stays full width. Video slides use the bottom-left labeled “video” chip (bt-pdp-gallery__play--labeled). Desktop grid uses the top-right btn-glass-inverse--icon control (bt-pdp-gallery__play--icon). Tag modal-bundle-offer shows the ButterCloud Nosto image badge top-left on the first tile (desktop + mobile) via bt-nosto-content-badge — same CDN asset as PLP. No size is preselected unless the product has only one. Sticky “select size” (section setting) stays off on first view and only pins after the shopper has scrolled past the size picker; tap scrolls to sizes (one-size sticky is “add to bag”).
• Get this look sits between finance and mix & match (bt-pdp-look). The visible callout is Nosto HTML on #pdp-ctl-superco-dev (section setting get_this_look_nosto_id). No theme skeleton. Handles come from [data-look-product]; hidden when the campaign injects nothing. Opens the shared Shop the Look drawer; hero is the current product image. Drawer rows are section-rendered from bt-pdp-look-product. Bundle percent from get_this_look_discount.
• 3-for-2 mix & match sits between get this look and the accordion (bt-pdp-mix-match). Filled only from the Nosto placement in mix_match_nosto_id (image, title, price, URL) via loadPlacement. Last PDP caller of that helper — delete it from bt-nosto-placement.js if this list stops using the Nosto JSON API. Hidden when the placement is blank or the campaign is empty. Header is locked text-p2 14/20 (desktop 14/16 −0.2). Lowercase text-p4 “view all” shows only when the label and a URL or collection are set. Rows are ivory cards: 68×100 thumb, 9/12 thumbnail badge (section setting mix_match_badge, default “3 for 2”; blank hides it), title/price text-p4 (desktop 11px), 16px gap to btn-underline “add”. “add” opens quick-add-drawer (mobile bottom sheet / desktop right-slide).
• Type: text-h6 title, text-p2 price and accordion titles (locked 14/16), text-p3 accordion body (locked 13/18), text-p4 USPs/options/model, text-p5 finance rows, btn-primary CTA plus 40px wishlist. Accordion rows and title-to-content use --spacing-28.
• Mobile accordion: an open row’s heading pins under the header while that row’s content is in view, then releases once the row scrolls past. Closed rows do not pin.
• Rating row: stars left; product_pill_messaging chips + sale save on the right. Pills reuse product-card-pills (tag match, message or image). Entries with pdp_only show on PDP only, not on quick add, product cards or cart lines. Sale save: 4×4 --fill-sale square + text-p5-bold color-text-primary “save X%”. Compare/sale prices stay on the title row.
• Finance: section settings enable_klarna (3 payments, on by default) and enable_clearpay (4 payments, off by default). Each provider is its own line. Klarna uses bt-klarna (36×8, --rgb-231815); Clearpay still uses brand text until its mark lands. Learn more links are section URLs, falling back to pages.klarna / pages.clearpay.
• Gift card PDP uses the default product template (same as live: Theme template = Default product) for every market product (gift-card, usd-e-gift-card), detected via product.gift_card, type Gift Card / Gift Cards, or a handle containing gift-card. Shopify’s Gift card template setting is the redeemed-card page (templates/gift_card.liquid), not the buy page. Optional templates/product.gift-card.json is only if Lisa assigns a dedicated product template. Discover more (Nosto) stays on gift cards. Amount pills stay on bt-pdp-picker__choice, labeled “amount”. Recipient form bt-pdp-gift / bt-pdp-gift-card-recipient sits in the product form: “to me” / “as an e-gift” pills, then email, confirm email (not posted), name, message, send-on. Hidden Shopify flags are properties[__shopify_send_gift_card_to_recipient] and properties[__shopify_offset]. JS is Horizon gift-card-recipient-form.js. Cart drawer and cart page show visible properties; keys starting with _ stay hidden.
• Options after USPs: Fit/Length labeled “length”, then colour, then size. Swatches 28×16 / 10px radius. First in-stock size is underlined. In-stock uses text-p4 color-text-primary (selected: text-p4-bold); out-of-stock uses text-p4 color-text-subdued, a 10px bt-bell, and is never preselected unless it is the only size. Clicking an out-of-stock size keeps it selected, sets the CTA to “out of stock”, and opens the notify drawer. The CTA and “notify me” also open the drawer when custom.pdp_enable_stock_notification is on.

Shopify data to create

• Metaobject pdp_usp_item: label (single line text), icon (image file, 20×20).
• custom.pdp_usps — list of USP items. Wraps at 10px / 8px; empty hides the row.
• product_details.model_information — model height/size copy left of size guide. Wrap the size in [XS] to emphasise it.
• colors.current / colors.available — colour names. Sibling URLs are rebuilt as {style-handle}{colour-handle} (same as live). Optional Limited: prefix or custom.pdp_colour_group on the sibling.
• custom.pdp_enable_stock_notification — boolean. Wishlist sits next to add to bag by default.
• Nosto HTML on #pdp-ctl-superco-dev is the get this look callout (campaign template). JSON for that placement is drawer data only. Mix & match uses its own JSON placement ID (blank hides it). Tag modal-bundle-offer shows the ButterCloud gallery badge. Promo pills (e.g. 3 for 2) in the quick-add drawer come from the product_pill_messaging metaobject via product-card-pills, same as cards and PDP. Product metafield complete_the_look.disable hides get this look.
• Theme setting pdp_video_autoplay (default on; muted native autoplay + preload=auto).
• Accordion rows: product details, care, delivery, fabric & technology. Details uses details_uk.paragraph1 / paragraph2 / bullet_points (else product.description). Section setting open_product_description opens that row by default. The Size Guide link opens a mobile bottom sheet / desktop right-slide drawer from shop.metafields.accentuate.size_guide (title always “Size Guide”, no image). The size-guide-new-page template uses that same metafield on bt-size-guide (cm/inches tabs, shared @theme/bt-size-guide-tables). The delivery-new-page template matches the size guide branded shell (fixed hero, solid 30% scrim, white page background). Delivery page copy is in @theme/bt-delivery-page-content (synced from live production). PDP delivery still uses delivery_and_return__item metaobjects. bt-delivery-good-to-know is stacked on desktop, accordion on mobile. The policies-new-page template uses white page background, bt-policies-hero (live ancillary hero: 425/500px, centered page title), bt-policies-navigation, and bt-policies-faq accordion groups (live section settings). Cookie table rows use page.metafields.accentuate.cookie_table. Care is details_uk.care. Delivery uses metaobject delivery_and_return__item (country select defaults to localization.country). Fabric uses custom.pdp_fabric → pdp_fabric (intro, image/video, pdp_fabric_attribute image icons, pdp_fabric_benefit carousel). Empty fabric hides the row. Gift cards skip delivery. Reviews is not in this stack.

Events

• wishlist:toggle — { productId, variantId, url, button, active }. @theme/bt-wishlist persists through Swym and replies with wishlist:state { productId, variantId, active }.
• bt-pdp:stock-notify — email, product id/handle, variant id, colour, size. Call detail.setResult('success'|'error', message). No network send in this ticket. Drawer: bt-notify-drawer / bt-pdp-stock-notify (same open/close pattern as size guide).
• bt-pdp:trigger — size-guide (opens the size guide drawer from shop.metafields.accentuate.size_guide: bottom sheet on mobile, right-slide on desktop), bundle-offer, and accordion slot names. Gift cards and the hide-size-guide tag skip the drawer.

Header

Section header · height --size-component-nav-height-desktop (64px) / --size-component-nav-height-mobile (42px; ~90px with exposed search on mobile). Layout: nav left, wordmark centre, utilities right. Transparent over first-section hero/slideshow when overlay_header is on. Exposed search is snippets/searchbar.liquid (real input). Icon and field open bt-search-overlay (Nosto). Empty: popular searches + Liquid trending cards. Typed: suggestions + createNostoProductCard grid.

Theme Editor settings

Runtime states (not settings)

Header surface tokens

Breadcrumbs

Snippet bt-breadcrumbs · section sections/bt-breadcrumbs.liquid on PLP, inside search results, and at the top of the PDP purchase stack. Figma P5: Home underlined in color-text-primary, current page in color-text-subdued, 6px separator, 4px gap.

Collection header

Section sections/bt-collection-header.liquid · title text-h4 · colour pills 28×16 / --spacing-10 radius · text-p4-bold “all colours” · Filter & Sort text-p4 sits in the header (right-aligned on desktop, under the colours on mobile). After the toolbar scrolls under the sticky header a separate fixed bar (.bt-plp-header__float, left/right 0) shows a frosted chip that opens the same panel (--color-alpha-white-90 · blur(--effect-backdrop-blur) · --border-radius-input). Colour names: custom.filter_colour_names → color-from-catalog. Header copy is inset 24px in layout-container; the product grid uses a separate full-width wrap of the same container.

PLP promo card

Snippet snippets/bt-plp-promo-card.liquid · OHP001P-56. Pick a promo_cards entry on Collection → Promo card (Content → Metaobjects → [Dev] Promo Cards). Heading text-h1 · body text-p2 · CTA btn-underline btn-underline--inverse · colour color-text-inverse. Text position from the entry (top-left, center, bottom-right, …). Grid slot is the Collection section’s grid position setting.

PLP campaign card

Snippet snippets/bt-plp-campaign-card.liquid · live plp_promotion_card via collection metafield custom.collection_promo_cards. Index / Index Mobile place the tile; Size Double Card spans 2 columns. Product + Show Price renders title/price under the image (same as New In). Title/Text fields overlay using Align Content + Text Colour.

Layout

File: design-system-layout.css. Global max width is Theme settings → Page → Content width (default Narrow = 1440px). That sets --size-layout-container. Apply layout-container to section inners (header already uses it). Do not hardcode max-widths.

Colour classes

File: design-system-colors.css. Example: class="text-p2 color-text-subdued"

Text colour — color-text-*

Background — bg-text-*

Surface fill — bg-fill-*

Colour tokens

Prefer the classes above. Raw vars still work: color: var(--text-subdued) · snippets/design-tokens.liquid

Text

Fill

Stroke & radius tokens