logo
Shopify Builds>Storefronts>Nudestix

Nudestix

Context

Nudestix sells color cosmetics direct to consumer at nudestix.com, and it sells them by shade. A blush carries a dozen shades, a shade name is reused across formats with different pigment behind it, and a shopper searching for "Nudies Matte Lux Dolce Darlin" is searching for a variant. Two more brands run off the same shop — NUDESKIN and a Nudebody line.

The theme is Shopify, based on Dawn 6.0.2. That version number governs almost everything below it. Dawn 6 predates Shopify's swatch metaobjects, ships no theme blocks, and gives a product page no metadata hook. Most of this engineering exists because the platform in front of us had no way to express "shade" as a first-class thing.

If you want the shorter, plain-language version of this engagement rather than the engineering record, Deploi's Nudestix project page tells the same story without the theme internals.

Storefront Facts

  • Public name: Nudestix · Storefront: nudestix.com
  • Industry: color cosmetics, direct to consumer
  • Platform: Shopify — theme based on Dawn 6.0.2
  • Documented builds: 135 · Coverage: 59 capability areas in 11 categories
  • Templates touched: 110 — 82 campaign page.*, 15 collection, 5 product
  • Surfaces: landing, collection, product detail, global, home, cart, search, blog, account
  • Attribution mix: 101 Deploi-authored, 34 Deploi-modified-vendor
  • Status: Live, verified 2026-09-06
  • Evidence: Read from the theme, with client working-session records

Capability Coverage

A build can sit in up to three areas, so these count coverage, not builds, and do not sum to 135.

Capability category Documented builds
Content, Campaigns & Editorial 72
Performance & Platform Health 60
Search, Filtering & Discovery 44
Product Detail Experience 41
Bundles, Kits & Subscriptions 23
Social Proof, Reviews & Trust 23
Cart, Checkout & Conversion 19
Customer Accounts, Loyalty & Service 15
Navigation & Information Architecture 14
Multi-Market & Multi-Brand Storefronts 10
SEO, Structured Data & AI Answer Surfaces 8

Hubs, by builds documented here: art-directed hero and banner system 15 · metafield-driven PDP content 13 · faceted navigation 12 · fixed bundles and kits 12 · campaign landing pages 11 · collection merchandising and product rails 12 · video and shoppable media 11 · variant-aware content 9 · AJAX cart drawer 9 · design system 8 · mega menu merchandising 8 · variant swatches and shade pickers 8 · custom site search 6 · editorial blog and content hub 5 · structured data 4 · vendor widget remediation 3 · guided selling quizzes and finders 2.

Engineering Themes

Shade is an architecture, not a widget. It starts at the swatch: roughly 250 Shade Name:#hex pairs in one theme setting, settings.swatch_colors, with two escape hatches parsed in Liquid — #hex|Product Title scopes a hex to one product where a shade name means different pigment across products, and #hexA&#hexB paints a duo-tone shade as a hard-edged gradient. Shades group by finish off variant.metafields.my_fields.stick-type, and product-get-options-strip-symbols.liquid strips 32 punctuation characters so "Naughty N' Spice" survives a CSS attribute selector. It continues into metadata: the layout builds <title> from selected_or_first_available_variant.metafields.custom.title and appends ?variant= to the canonical only when a variant was explicitly requested, while the section emits one hidden input per variant carrying data-meta-title, data-meta-description and data-meta-ingredient from that shade's custom.* metafields. A crawler that runs no JavaScript still gets shade-specific title, description and canonical — the per-variant SEO the existing Nudestix project page refers to, supported here independently. It ends at the grid: a collection.variants template listing shades, not products.

Bundles, built three ways because there are three shapes of set. Fixed kits are ordinary Shopify products merchandised on the component page, with a swatch picker per component before one add-to-cart. Shopper-composed palettes turn a collection template into a tray: one priced bundle SKU goes to cart, every pick rides along as a line-item property, and a _bundleId mirrored to localStorage is the only thing that makes the set editable afterwards. A second product template switches its add-to-bag wrapper between <product-form> and <bundle-product-form> on one Liquid conditional, driven by which metafield a merchandiser filled in.

Native features where app surface area would otherwise be. The PDP content system parses the existing HTML description into accordions at render time, overrides three of them per variant from metafields, and renders icon strips, badges and campaign widgets from metafields and metaobjects — ground normally covered by a tabs app, a trust-badge app and a page builder. Comparison is a drawer on localStorage, custom elements and the Section Rendering API used as a read-only endpoint. Promo tiles and load-more are theme blocks on Dawn's facet transport. The trade is constant, and it's the one to weigh if you're looking at the same choice: copy stays editable in the admin and present in the first byte of HTML, and the theme owns every edge case an app vendor would otherwise have owned for you.

Constraints We Worked Inside

Dawn 6.0.2 set the floor. Its variant picker renders text buttons and nothing else, it has no swatch primitive and no theme blocks, and its FacetFiltersForm assumes a Liquid-rendered grid re-fetched by section rendering — so every addition layered onto that machinery rather than replaced it. Shopify's storefront filtering operates on products only; there's no first-party way to facet, sort or paginate a variant-level result set in Liquid. Shopify Functions and the bundles API were not in play, so a promotional price had to be carried by a real SKU and set identity held client-side.

Three brands share one storefront with no brand dimension in Liquid, so brand is derived at render time from product.type and collection.template_suffix. The US, Canadian and international stores are separate storefronts on separate domains rather than Shopify Markets, so region switching is navigation, not localization.

The installed stack was already dense: 36 distinct third-party apps, scripts and libraries appear across the documented builds — reviews, wishlist, loyalty, buy-now-pay-later, consent, tag management, video, forms — several mounting into the same buy box or grid, one inside a closed shadow root. And product copy already lived in one HTML description with <h5> subheadings, so the new product page had to ship with no content migration.

Selected Builds

Product detail experience

Search, filtering and discovery

Bundles and kits

Navigation, cart and campaign

What We Would Not Claim

The base theme is Dawn 6.0.2 and we did not write it. A meaningful share of this storefront is Shopify's code with our additions layered over it: 34 of the 135 documented builds are Deploi-modified-vendor, and some of what looks bespoke — pagination, media modals, the facet form, the cart's underlying behavior — is old Dawn with local changes on top. Where that is true, the build page says so.

The external faceting and search service the shade-level grid and the search modal call is infrastructure outside the theme repository. We built the storefront side — section shell, query contract, card rendering, facet UI, state handling — and claim no authorship of the service.

Nor is the third-party stack ours. Reviews, wishlist, loyalty, consent and payment-messaging widgets are vendor products we integrated with and kept out of each other's way. The integration is ours; the widgets are theirs.

One build record on this storefront is documented and not counted. Checked against the live storefront, the code it describes doesn't run there — so it isn't evidence of what this store does, and any total that included it would overstate the record. It's out of the count above, out of every capability area, and described nowhere in this section. It stays in our own record, as a finding for the client.

All Builds

Thirty are published so far; the other documented builds follow.

Let's Build Something Great

Nudestix needed a storefront that could sell a shade the way its shoppers choose one, on a theme with no idea what a shade was. If your catalog is shaped in a way your platform can't describe, that's our kind of conversation. Contact us today to start your Ecommerce Transformation.

Builds

"Save With Sets": shade-selectable kit contents on the component product's page

A metafield-linked list of kits renders as an accordion on the product pages of the products inside them, and each kit opens a modal where every component gets its own shade picker before a single add-to-bag.

Nudestix

A collection template turned into a palette builder that carts one priced SKU

A pick-your-own palette promotion runs on a normal collection page wrapped in a `<bundle-element>` custom element, which holds a fixed tray of empty slots and posts one priced bundle product with the shopper's picks attached as line-item properties.

Nudestix

A second product template whose add-to-bag switches between one cart line and several

`main-product-bundle.liquid` is a fork of the theme's product section in which one Liquid conditional wraps the buy form in either a standard `<product-form>` or a `<bundle-product-form>`, depending on which bundle metafield the product carries.

Nudestix

Accessible link-label helpers for repeated CTAs

Two Liquid snippets that resolve a real conflict between two link-naming rules — identical link text on different destinations versus an accessible name that must contain the visible label — by deriving a name from the link's href and emitting it only when it differs from what the shopper can see.

Nudestix

Accessible play/pause web component for autoplaying hero video

A `<play-pause>` custom element that gives a muted, autoplaying hero video a real keyboard-reachable control — self-wiring from a selector in its own markup, so Swiper can clone and reorder slides without any script knowing how many there are.

Nudestix

Before/after customer results carousel with an attached product card

One slide per customer result: two labeled photos, a quote with its attribution, and the product that was used — rendered as the storefront's own product card, with the live price and a working add-to-bag, on a page template where Shopify hands the theme no product at all.

Nudestix

Cart 'Add Ons' cross-sell driven by the Product Recommendations API

The cart drawer's "Add Ons" row asks Shopify's recommendations endpoint for products that complement the first paid line in the cart, falls back to related products, filters out what the shopper already has, and survives the drawer being thrown away and re-rendered on every cart change.

Nudestix

Cart page rebuilt around loyalty points, protected gifts and a dark order summary

Dawn's single-table cart section rewritten as a two-column page: per-line loyalty points computed in Liquid, gift lines a shopper can't edit away, bundle lines that link back to the builder that made them, and a summary panel that survives every re-render.

Nudestix

Color-accurate shade swatches driven by a merchandiser-editable hex registry

Roughly 250 `Shade Name:#hex` pairs live in one theme setting. The product section resolves every option value against them in Liquid, groups the results by finish, and paints each swatch server-side.

Nudestix

Creator collab video listing driven by article metafields

A blog turned into a creator video index: each article is a creator record whose video address, platform and handle live in article metafields, rendered as a paginated grid of inline-playing cards that request no third-party iframe until someone presses play.

Nudestix

Editorial split banner with typographic control and merchandiser-authored offer details

A homepage banner where layout mode, desktop and mobile artwork, subtext type scale, five colours and an offer-details panel are all settings, so a campaign and its terms publish together without a developer in the loop.

Nudestix

Featured tutorial with an adjacent shoppable product rail

One section, two halves: a poster-first video that fetches its YouTube or Vimeo player only on click, and beside it the first three products of whichever collection a merchandiser picks — each one a real card with a quick view and an add to bag that never leaves the page.

Nudestix

Grouped shade swatch picker with shade-finder dialog and GA4 shade-finder events

Finish became a variant metafield instead of a second product option, which is what lets forty shades group into Matte, Matte Lux and Bloom without touching the SKU matrix — and the shade quiz beside them is bought, wrapped in a native dialog and measured on our side of the boundary.

Nudestix

Hero slide content renderer with per-breakpoint typography controls

One Liquid snippet renders a hero slide's pretitle, title, description and CTA from block settings, carrying the desktop and the mobile type spec on the same element as paired CSS custom properties, so two different slideshow sections share a single copy renderer.

Nudestix

Homepage exclusive-offers rail with caption heights equalized in idle time

A merchandiser-built row of promotional tiles for the Nudestix homepage — grid or swipe rail, chosen separately for desktop and mobile — whose uneven caption blocks are measured in idle time and equalized through a single `--content-height` custom property.

Nudestix

Homepage hero carousel v2 - video and split-image slides with per-slide typography control

The live homepage hero: two independent carousels over one authored slide list, video slides and split-image slides, typography controlled per slide, and promotion events fired from the slide's own copy.

Nudestix

Layout shell rewritten as a load-order contract: origin hints, two stylesheet tiers and an interaction-gated session recorder

Dawn 6.0.2's `theme.liquid` reworked so that the order things load in is written down: connection hints before the title, stylesheets sorted into a blocking tier and a deferred tier, fonts preloaded, and a session-recording script that waits for the shopper to move.

Nudestix

Main collection grid: merchandisable promo tiles, load-more and a filter blocklist

Dawn's collection grid extended in four directions: promo tiles a merchandiser places by grid position, a textarea that suppresses unwanted filter values, load-more over the Section Rendering API, and an infinite-scroll fallback.

Nudestix

Mega-menu product rail (v2): a library-free slider in a theme asset, constructed per panel when the panel is seen

The second generation of Nudestix's menu rail — a merchandiser title, a shop-all link and a track of navigation cards — keeps its slider in `megamenu-slider.js`, a small class that measures slide width at move time and is constructed per panel on first intersection.

Nudestix

Metafield-driven PDP content system: auto-built accordions, need-to-know strip and campaign widgets

A layered content resolver on the Nudestix product page: legacy description HTML parsed into accordions at render time, three of them overridden per shade from metafields, with icon strips, badges and campaign widgets assembled from 29 metafield keys around them.

Nudestix

On-model shade carousel bound two ways to the Dawn variant picker

A Flickity carousel of one on-model shot per shade, rendered below the product gallery from a variant metafield; each cell carries the id of its Dawn variant radio, a tap on a face resolves to a click on that radio, a click on a radio moves the carousel — and the carousel itself never touches the product form.

Nudestix

Predictive search moved off Shopify onto an external search API with client-side templating

The type-ahead rebuilt from the inside: same custom element, same keyboard model, same ARIA contract — a different data source and a render step that did not exist before.

Nudestix

Price snippet with a bundle 'value' metafield line and opt-out labelled price links

Dawn's price snippet on Nudestix, extended in two small ways: a product metafield adds a "worth" line beside a kit's price, and the price text becomes a labelled link to the product unless the caller says otherwise.

Nudestix

Product card with award badges, per-variant content payload and per-card structured data

One snippet renders the whole Nudestix grid card: tag and award badges, quick view, wishlist, comparison, an in-grid add to bag, and a per-variant data payload the shade switcher reads without a fetch.

Nudestix

Rotating announcement carousel above the header, with pause control

An auto-rotating promo bar rendered by the layout above the header: a looped Swiper of up to ten text blocks that reserves its height before any script runs, waits for the carousel library on a bounded retry, and gives the shopper a real pause control whose label always says what it will do next.

Nudestix

Shade swatch rendering and per-variant content payload

The swatches are the visible half. The other half is a hidden input per variant carrying that shade's copy, ingredients, SEO fields and badges — a data contract three separate features read without asking the server anything.

Nudestix

Shade-level collection grid hydrated from an external faceting service

A Shopify collection template that lists shades instead of products: the section renders an empty grid shell, then builds every card, facet and count in the browser from a bespoke faceting service outside the theme.

Nudestix

Side-by-side product comparison drawer and modal table

A compare-products flow with no app behind it: card checkboxes write the selection to localStorage, a drawer pinned to the bottom of the viewport carries it from collection to product page and back, and the modal table fetches each product's long-form copy from that product's own page section at the moment the shopper asks to compare.

Nudestix

Threshold-driven free shipping, deluxe sampling and a first-order gift notice

Merchandiser-set spend thresholds evaluated in Liquid on every render of the cart section: free-shipping and deluxe-sampling messaging with a remaining-amount placeholder, a first-order gift notice that can tell a guest from a customer, and a free add-on whose control posts to the Cart AJAX API and asks the server for the section again.

Nudestix

Title-matched mega menu with a full-depth link-list fallback

Shopify gives a navigation item no settings of its own. This menu joins each top-level link to a theme-editor block by matching their titles, and renders a full link-list panel for every item that has no block behind it.

Nudestix