logo
Shopify Builds>Storefronts>LUS Brands

LUS Brands

Context

LUS Brands — Love Ur Curls — sells curly, wavy and coily hair care direct to consumers at loveurcurls.com. The catalog is formula-led rather than shade-led: cleansers, conditioners and stylers chosen by curl pattern and hair thickness, in more than one size and fragrance. A kids line, LUCK, sells to a different shopper from inside the same store — one cart, one checkout, one customer record.

The storefront runs Shopify with Dawn 15.4.1 as its theme base. Naming that first is the point. Dawn is Shopify's own free reference theme, it's the code this store started from, and a substantial amount of what ships today is still Dawn's. Our work sits inside it, not in place of it.

Storefront Facts

  • Platform: Shopify — Dawn 15.4.1 theme base
  • Storefront: loveurcurls.com
  • Industry: Haircare, direct to consumer, plus a kids sub-brand
  • Documented builds: 77
  • Capability areas: 41, across 10 categories
  • Surfaces: Home, product detail, collection, cart, search, blog, landing, global
  • Attribution: 63 Deploi-authored, 14 Deploi-modified vendor
  • Status: Live — verified 2026-09-06

Capability Coverage

Documented builds per area, areas with four or more shown. Areas with a published hub link out.

Product Detail Experience — Metafield-driven PDP content 16 · Variant-aware content and media 8 · Ingredient transparency 4

Performance, Accessibility & Platform Health — Accessibility remediation 14 · Design system 13 · Media and asset loading strategy 12 · Vendor widget remediation 6

Content, Campaigns & Editorial — Art-directed hero and banner system 11 · Brand story and editorial sections 10 · Video and shoppable media 7 · FAQ and self-service content 6 · Editorial blog 4

Search, Filtering & Discovery — Filters and faceted navigation 7 · Collection merchandising rails 5 · Recommendations and cross-sell 4

Navigation & Information Architecture — Mega menu and mobile navigation 7

Multi-Market & Multi-Brand Storefronts — Sub-brand theming 6

Cart, Checkout & Conversion — AJAX cart drawer without an app 4

Twenty-three further areas carry one to three builds each, including guided selling quizzes and finders 3, fixed bundles and kits 2, variant swatches and shade pickers 2, campaign landing pages without a page builder 1 and structured data for AI answers 1, alongside subscription purchase options and geo routing.

Engineering Themes

Merchandising That Changes Without a Deploy

The recurring ask here was never a feature; it was that a product launch stop being a developer ticket. The 2026 product page was rebuilt as one custom section declaring 26 block types beyond Dawn's set — key_ingredients and pairs_well_with among them — all dispatched from one {% case block.type %}, so a merchandiser composes the page in the theme editor. Per-product brand color comes from product.metafields.custom.atc_background, emitted as --atc-button-color rather than inlined, so the sticky mobile bar reuses the same token. The product information tabs read How To, Ingredients, FAQs and Tips from metafields and metaobjects, then decide server-side whether a tab exists at all. Same trade each time: more logic in Liquid for us, no ticket for them. If your merchandising calendar moves faster than your release calendar, that is the trade worth understanding before anything else on this page.

Variant-Awareness Running Through the Whole Page

A size-and-fragrance catalog breaks the assumption that a product page is one page. The PDP hero resolves art and copy from a heroic metaobject and refetches itself through the Section Rendering API on the theme's variant-change channel, swapping only the inner content node so the parallax host survives. Media was harder. Shopify associates media with a variant through a single variant-image field, which cannot say "these four shots belong to the 8.5oz fragrance-free version." An alt-text convention and a four-tier matcher turn the alt text merchandisers already type into a match key, and the gallery that consumes it filters media per variant in Liquid — so the correct gallery is in the first paint, not repainted after it.

Two Audiences, One Theme

Shopify has no first-class notion of a sub-brand inside a storefront. Markets handle country and currency, not audience, and a second store would split your cart and your customer record. So the kids line rests on kids-page-flag.liquid, a six-line snippet returning the string true or false after testing whether the page, product or collection handle or the template suffix contains "kids". theme.liquid captures it once, adds a kids_page class to <body> and publishes --kids-page-color. Everything downstream is a selector, not a branch. The header swaps the entire navigation to a second link list off that flag; the announcement bar reuses it as a content filter, so a kids-only promo is a theme-editor action. Resolving it in Liquid keeps the wrong brand color off the first paint.

Constraints We Worked Inside

A vendor theme that has to keep working. The custom product section renders inside Dawn's own <product-info> element and keeps Dawn's element ids, so Dawn's stock scripts keep running, and Dawn's volume pricing, quantity rules and media modal are carried over unchanged.

A real build step on a platform that has none. Shopify ships whatever is in the assets folder, so build-theme-assets.mjs runs esbuild locally and its artifacts are committed into the theme. That constrains it hard: Liquid references assets by literal filename, so nothing may be renamed, hashed or relocated, and assets containing Liquid delimiters must never pass through a minifier. Dawn's core scripts concatenate into theme-core.min.js with identifiers left unmangled, because other theme scripts subclass Dawn's global classes and mangling would break them.

A buy box shared with purchase-option apps. More than one subscription app has had a widget in this product form. The section mounts the plan picker for the one in use at an exact slot between the price node and the add-to-cart button, wires that widget's price back into the theme's price element, and hides the others with a stylesheet rule — blunt, and a hazard if anyone re-enables one of those apps.

Merchandising that had to stay editable. Hero art, ingredients, how-to steps, FAQs and quiz questions all resolve from a metafield, a metaobject or a block setting, because the business had to change them without a deploy. Canada is a separate storefront rather than a market on one shop, so country detection runs client-side.

Selected Builds

Deploi-authored except where noted.

Product detail page

Collection, search and home

Support content

Campaign, hero and video

What We Would Not Claim

A large share of this storefront is a theme we extended rather than authored. Dawn 15.4.1 is Shopify's code, it still renders a meaningful part of this store, and we did not write it. The cart is the clearest case: what ships is an extension of Dawn's cart — Dawn's drawer, its line-item rendering, its section-rendering fragments — with our behavior on top. It isn't a cart we wrote, and no page here says it is.

Inside the product page we rebuilt, the volume pricing, the quantity rules, the media modal and the model viewer are Dawn's, carried over unchanged. Our section renders around them. They aren't ours, and we wouldn't describe them as ours.

Fourteen of the 77 builds documented here are marked Deploi-modified vendor: we changed something that already existed rather than authored it. Where that's true, the build page says so in its fact strip, in words. Stock Dawn sections we merely inherited are cataloged internally and never published as ours. We claim no certification or partner status of any kind.

All Builds

Thirty-nine of the 77 have published pages so far, by surface:

Ready to Push a Shopify Theme Further?

This is what it looks like when a product launch stops needing a deploy. Contact us today to talk about your storefront.

Builds

"Start with the basics" — a merchandiser-authored 3-step routine section with measured read-more clamping

A homepage routine band whose three step cards are theme-editor blocks tied to real products, whose heading takes a `[[...]]` highlight token, and whose "Read more" button is unhidden only after the browser has measured that the copy overflows its four-line clamp.

LUS Brands

'Bundle and save' PDP block driven by a product-list metafield

One product-list metafield, one card per product, and on every card a working add-to-cart form of its own — a merchandiser-curated set sold on the product page where the shopper already is, with a carousel that only appears when there is more than one thing to scroll.

LUS Brands

Adults/Kids audience-switching header with automatic menu swap

One Liquid predicate decides which audience a page belongs to. The header reads it, replaces the entire navigation with the kids menu, and keeps a two-button switch back to the adult side in reach on desktop and mobile alike.

LUS Brands

Alt-text convention that maps product media to variants without metafields

Two Liquid snippets turn the alt text merchandisers already type in the Shopify media library into a variant match key and a four-tier match verdict, so a product gallery can filter media per variant at render time.

LUS Brands

Alt-text driven variant media gallery with tiered matching and full-screen lightbox

The product gallery that consumes the alt-text match tiers: it builds the main slider, the thumbnail rail and a full-screen lightbox out of server-side verdicts, then re-filters the same nodes in the browser when the shopper changes variant.

LUS Brands

Arched-label icon grid PDP block

A six-slot row of circular badge icons with captions that curve over them — an SVG `textPath` per label, an arc id composed from `block.id` so the block can repeat, and layout driven entirely by custom properties the merchandiser sets.

LUS Brands

Audience-targeted announcement bar with sticky-height measurement

Dawn's announcement bar, extended so each announcement block carries an audience setting, the section counts the matching blocks before it renders, and that count decides whether the page gets no bar, a static line or a carousel — with slide numbering that matches what's actually on screen, and a pinned height the rest of the layout can read.

LUS Brands

Brand story split panel: one section that renders image, hosted video or YouTube with separate desktop and mobile assets

A 50/50 story panel whose media half is a picture, a Shopify-hosted video or a YouTube embed depending on one select, whose mobile aspect ratio is computed in Liquid from the asset that will actually load, and whose type scale, spacing and side-flip are all settings — so an About page is one section, placed as many times as the story needs.

LUS Brands

Collapsible desktop filter sidebar that reflows the product grid instead of squeezing it

Toggling the vertical filter rail switches the collection grid between four columns and three, keeps that choice for the browsing session, and re-applies it every time the facet pipeline replaces the grid wholesale.

LUS Brands

Country/market selector hardened for three simultaneous instances

Dawn's country selector, rendered three times on every page, with every option id namespaced by the position that rendered it and three ARIA attributes removed — so the three instances stop colliding and the vendor's own localization script needed no change at all.

LUS Brands

Curl Quiz 3.0: a nine-step diagnostic quiz rendered entirely from Shopify metaobjects

A nine-step hair diagnostic on the LUS Brands storefront whose questions, options and selection rules live in Shopify metaobjects rather than in the section's code. The theme editor exposes exactly one setting.

LUS Brands

DE Hero: art-directed image/video hero with layout controls

A campaign hero that serves a genuinely different mobile crop through hand-built `<picture>` markup, publishes both breakpoints' aspect ratios as CSS custom properties, switches to a hosted video from one setting, can make the whole frame a link, and decides its own loading priority from where it sits on the page.

LUS Brands

Dawn media gallery hardened for hidden slides and deferred video

A surgical patch to Dawn's `media-gallery` custom element so that selecting, reordering and announcing media all skip slides the server has hidden for the current variant — and so a variant with no matching thumbnail degrades to a sensible slide instead of an exception.

LUS Brands

Deferred LyveCom shoppable-video mounting on the product page

An integration layer that loads LyveCom's widget script once per page and mounts each carousel only when its container is about to enter the viewport — so a paid shoppable-video app stays off the product page's first paint, and a theme-editor reload doesn't mount it twice.

LUS Brands

Detached mobile drawer with three-level native-details navigation

The mobile menu panel lives outside the element that opens it. The theme's own drawer class was taught that shape, and the panel it opens is a native `<details>` accordion three levels deep that expands without JavaScript.

LUS Brands

Featured-collection product card with metafield hero/hover media and a tag-driven badge stack

The card that renders inside the homepage's main merchandising rail: hero and hover art chosen in the Shopify admin, a responsive image ladder built by hand, and a badge stack resolved from tags, price and block settings at render time.

LUS Brands

Four selectable How-To step layouts from a single metaobject step list

One list of `how_to_use` step metaobjects renders as a card grid, a slider, a numbered timeline or an image-and-text split, chosen per product, with a desktop and a mobile asset per step and video that plays only while in view.

LUS Brands

House pagination component with result counter for blog and collection grids

A self-contained `de_pagination` snippet: pill page buttons, prev and next arrows that become non-focusable spans at the ends of the range, and a computed result-range line, rendered by the blog index and the collection grid from one file.

LUS Brands

Kids FAQ page: single-level variant of the FAQ engine

A second FAQ page for the kids sub-brand that shares the help center's content model — the same page metafield, the same accordion contract — but drops the category layer, so a shorter list of questions reads as one flat, keyboard-operable accordion with its own tone and its own way out.

LUS Brands

Kids featured collection: a custom element that builds its Swiper on approach and wraps the theme's own product cards

A `<kids-featured-collection>` element leaves its slides as static markup until an IntersectionObserver fires, initializes Swiper then, and tears everything down when the section is removed — around Dawn's `card-product`, not a card of its own.

LUS Brands

Marketing image banner with mobile art, typography controls and highlight headings

A campaign banner built as a fork of Dawn's image banner: the vendor's class contract and overlay behaviour left intact, with a real mobile source, per-block type controls and an inline highlight convention layered on top.

LUS Brands

Merchandisable homepage product carousel with a tag-driven badge engine and inline add-to-bag

A two-column row — optional linked lifestyle image, Swiper rail — where every label, color, badge and product is a theme-editor setting, and each card can add to bag without leaving the page.

LUS Brands

Metafield-driven breadcrumbs across product, collection, page, blog and article

One breadcrumb snippet whose ancestor trail is authored per product and per collection through a `custom.breadcrumbs` collection-list metafield, with a three-level fallback for products and natural trails for pages, blogs and articles — rendered as a real navigation landmark from a single argument-free `{% render %}`.

LUS Brands

Metafield-driven product information tabs with mobile accordion and variant refresh

How To, Ingredients, FAQs and Tips render below the buy box from metafields — as tabs on desktop, as a native accordion on mobile, and re-resolved from the server every time a shopper picks a different variant.

LUS Brands

Metafield-driven two-level FAQ accordion grafted into a help-center app's shell

The help-center page kept the app's shell. The answers inside it moved into a Shopify page metafield, and a two-level accordion we wrote renders them — deep-linkable, keyboard-operable and reusable elsewhere in the theme.

LUS Brands

Mobile sticky add-to-cart bar mirrored from the real product form

A bottom bar portaled to `<body>` that mirrors quantity, button label, disabled and loading state from the product page's own form, forwards taps into it, and follows iOS Safari's visual viewport as the browser chrome collapses.

LUS Brands

Per-collection hero banner driven entirely by collection metafields

One section instance in the collection template serves every collection: its heading, copy and two separately cropped artworks are bound to collection metafields through dynamic sources, and it renders two independent breakpoint layouts from them, so launching a collection is a merchandising task rather than a theme edit.

LUS Brands

Pill variant picker with merchandiser-named size labels

Dawn prints an option value and nothing else. We extended its picker so a size pill carries two lines — a merchandiser's word for that size above the size itself — and falls back to positional defaults when nobody has written one.

LUS Brands

Press / trust logo strip with scroll-snap carousel and no JavaScript

A blocks-based logo row for the homepage that a merchandiser can reorder, relabel and link — and that becomes a swipeable, snapping carousel on mobile through CSS alone, with no slider library and no script of its own.

LUS Brands

Product-card hover video and a reusable deferred-media playback refactor

The shared product card's hover slot can hold a short clip instead of a second still: a per-product metafield decides which, the card emits a video that fetches nothing until asked, and a pointer-only, motion-aware binder plays it on hover of the whole card — plus a refactor of Dawn's deferred-media element that handles every player kind through one function.

LUS Brands

Quiz results: a 34-rule, priority-ordered recommendation engine running client-side from metaobject data

The half of the Curl Quiz that turns answers into products. Liquid renders every possible recommendation once into hidden templates; a matcher in the browser runs 34 priority-ordered rules and clones the survivors into three result groups.

LUS Brands

Rebuilt 2026 PDP section with merchandiser-composable blocks and per-product ATC color

A custom product section for LUS Brands that declares 26 block types beyond Dawn's set, resolves title and subtitle copy per variant, and paints the add-to-cart button from a product metafield.

LUS Brands

Responsive video hero with independent desktop/mobile sources and single-source-of-truth playback controls

A `<video-hero>` custom element that holds a 16:9 cut and a 9:16 cut, promotes only the active breakpoint's sources to `src`, and wires one play/pause and one mute button to whichever video is live — with server-rendered control state so the buttons read correctly before the script runs.

LUS Brands

Rich-text section rebuilt as a per-block typography and highlight system

Dawn's `rich-text.liquid`, kept under its own name and rebuilt inside: every heading, text and button block writes its own type, spacing and colour tokens as CSS custom properties, and the `[[word]]` highlight and the button become snippets other sections share.

LUS Brands

Shop-by-category carousel with collection-aware card fallbacks

A homepage category rail where adding a category is one action — pick the collection. The image, the link and the label all resolve from the collection record unless a merchandiser deliberately overrides them.

LUS Brands

Theme-wide section reveal that replaces Dawn's per-element scroll animations

One entrance animation for every top-level section on the storefront, applied from the layout rather than authored into each section — with the hide decided before first paint, the reveal driven by an intersection observer, and reduced-motion and no-JavaScript visitors never hidden from anything.

LUS Brands

Variant-aware PDP hero banner driven by a 'heroic' metaobject

An editorial hero below the buy box that resolves its art, headline and copy from a per-variant metaobject, and refetches its own content through the Section Rendering API when the shopper switches variant.

LUS Brands

Variant-aware price snippet with percentage + value savings badge

Dawn's price snippet extended so a caller can hand it any variant object ahead of the snippet's own lookup, and so a savings badge — a percentage computed in Liquid plus a merchandiser-written value sentence — renders whenever the compare-at price is higher than the price.

LUS Brands

Vertical filter rail and an in-place mobile filter accordion replacing Dawn's drill-down drawer

Dawn's facets snippet was rebuilt into a sidebar rail with color swatches and show-more truncation, an accordion mobile drawer where every group opens in place, and a single sort control that physically relocates between breakpoints.

LUS Brands