Project portfolio Browse selected work

Shopify Plus: up to US$4,800 development credit

Beauty and cosmetics

Flower Knows 花知晓

Flower Knows combines themed worlds, makeup shades and gift sets in one international storefront. The experience can be immersive only if category, shade and set discovery remains efficient.

Visit the live project
Flower Knows Knight Unicorn makeup collection visual
Official public brand visual

Core implementation review

Three storefront journeys from model choice to purchase

Flower Knows sells makeup that arrives as a story. Some shoppers come for Knight Unicorn; others want a lip product or a gift and do not need the lore. Theme collections handle discovery, variants handle shade, and standalone products handle sets and gift cards, so a new world can replace the narrative without rebuilding how colour is bought.

Project context

Define how customers choose before defining the storefront

Buying decision

Customers enter through Knight Unicorn, Bunny Garden and Swan Ballet themes or through eyes, lips, blush and gifts. Shade imagery, real swatches, skin guidance, reviews, Build Your Sets and gift price tiers complete selection.

Delivery boundary

International Shopify frontend, themed collection navigation, gifting and bundle purchasing, responsive visual UX.

01Theme discovery

Let story worlds and makeup categories reach the same products

Brand-led shoppers can enter through a fairytale collection; task-led shoppers can enter through category or search. Both roads should land on the same live makeup, not two competing catalogues.

  1. 01Arrive through a theme hero or a category
  2. 02Read the collection as story and catalogue
  3. 03Confirm a product by search or quick view
  4. 04Continue to the product page or preview

Implementation

  • Primary navigation keeps themed-world entry beside eyes, lips, blush and gifts, so lore never replaces basic category finding.
  • Collection templates separate the wide hero from the product grid: artwork carries the world, while the grid and quick view send people to a SKU.
  • Predictive Search returns both collection and product suggestions while typing, so shoppers who do not know a theme name can still enter by finish or product.

Deployment and acceptance

  • Themed makeup pages are JSON templates, so hero, product and gift sections can be edited independently when a collection launches.
  • Desktop keeps wide artwork; mobile crops dense ornament instead of shrinking the whole illustration, and keeps search and category entry high-contrast.
  • After a theme-editor or Section Rendering reload, search and quick-view bindings remount so collection browsing does not go stale.
ResultWhat changes after implementation
  • Shoppers who come for a world and shoppers who come for a category reach the same sellable makeup.
  • A new series can ship by swapping heroes and collection content rather than rebuilding navigation and purchase.
View script and Shopify API evidence
menu-dropdown.jspredictive-search.jssearch-modal.jsquick-view.jsPredictive Search APISection Rendering APIShopify theme editor mode
02Shade selection

Make the shade chip drive gallery, swatch and cart together

Sellable shades live on variants. Gallery, thumbnails and zoom follow one selection, so the finish on screen is the SKU that enters the cart.

  1. 01Open a shade-led SKU or a gift-set page
  2. 02Choose a shade or inspect the contents
  3. 03Sync swatch media, thumbnails and zoom
  4. 04Submit the active variant

Implementation

  • Live shades belong on the product and its variants rather than as separate story pages that cannot switch colour.
  • color-swatches.js holds shade state; media-gallery.js, product-thumbnails.js and product-modal.js refresh media from that selection.
  • The product form submits the same variant, so the colour in the gallery is the colour added to cart.

Deployment and acceptance

  • Swatch and gallery widgets rebind after a section reload, so gift-set contents and the selected shade cannot drift apart.
  • Lightbox, quick view and the cart drawer must not cover the shade rail; on mobile the rail stays within reach.
  • Gift-set media is used to inspect included items instead of folding those contents into makeup option values.
ResultWhat changes after implementation
  • A shade change updates wear imagery, selected state and cart identity together.
  • A gift-set page can show what is inside the box without breaking the reusable shade matrix on singles.
View script and Shopify API evidence
color-swatches.jsmedia-gallery.jsproduct-thumbnails.jsproduct-thumbnails-btn.jsproduct-modal.jsVariant behaviorProduct form behaviorMedia/model behaviorSection Rendering API
03Gifting

Keep gift sets and gift cards outside the shade matrix

Ready-made sets, custom combinations and gift cards run as their own products. The drawer confirms what was added and offers related singles, without rewriting the eyeshadow option table.

  1. 01Choose a set, a custom combination or a gift card
  2. 02Confirm contents or denomination
  3. 03Add through Ajax Cart
  4. 04Show the drawer and related items

Implementation

  • Knight Unicorn gift sets and the gift card stay independent products; shades exist only on makeup variants.
  • Singles join sets through product relationships rather than extra option values.
  • Shopify Ajax Cart handles add, change and update; cart-recommendations.js refreshes drawer suggestions from the current product context.

Deployment and acceptance

  • Gift-card denominations are not makeup options, so values can be merchandised without touching the shade table.
  • geo-blocked.js enforces regional access at the storefront edge, not inside the product form or swatch logic.
  • Gifting copy, announcement bars and policy modules can update on their own when a new set launches.
ResultWhat changes after implementation
  • Sets, combinations and gift cards can sell without distorting how singles choose colour.
  • After add-to-cart, the drawer identifies the set or denomination and offers related items, so gifting does not require a return to the collection.
View script and Shopify API evidence
cart-drawer.jscart.jscart-recommendations.jsannouncement-bar.jsgeo-blocked.jsCart Ajax: addCart Ajax: changeCart Ajax: updateProduct Recommendations API

Operational handoff

The operating team can continue after launch

Catalog and content
  • The catalogue runs on two axes: themed worlds and eyes, lips, blush and gifts, with Knight Unicorn, Bunny Garden and Swan Ballet as their own collections.
  • Sellable shades live on variants; gift sets and gift cards stay independent products, and singles join sets through relationships.
  • Narrative content stays outside the SKU matrix, so a new series can swap heroes and collections without rewriting shade options.
Market operations
  • Checkout defaults to English and USD, while in-stock shades, set contents, tax and delivery copy are still maintained by destination.
  • Regional access is enforced at the storefront edge rather than inside shade selection or the product form.
  • Merchandising edits belong in heroes, announcement bars, gifting copy and policy modules, so a new series can change the story without changing the cart request.
Research notesPublic sources and verification boundary

Public research sources

Content verification

Industry, product and observable feature notes are verified against the brand site. Apps, admin configuration and commercial data that cannot be confirmed from the storefront are not inferred. WESWOO scope is stated only from project records and client authorization.

Public information last reviewed: 2026-08-12

Your next move

Turn your storefront into infrastructure for sustainable growth

Discuss your project