Sustainable fashion
NATTAUP
NATTAUP builds a conscious-fashion story around intimates, ready-to-wear, materials and use. The storefront must connect material claims to fit, feel, care and complete looks.
Visit the live project
Core implementation review
Three storefront journeys from model choice to purchase
NATTAUP sells verifiable fabric and wearing context to English-speaking customers in Germany and beyond. Mesh, modal and ice silk belong in the catalog as filters; size, care and complete looks need to stay on the same path to purchase, rather than sustainability remaining a homepage line.
Project context
Define how customers choose before defining the storefront
Customers enter through men or women, underwear, base layers, ready-to-wear or travel, motion and night scenarios, then compare mesh, modal or ice-silk materials, cut, size and colour. Full Look and Gift Studio support composition and gifting.
WESWOO translates brand purpose into material-fit-use-look structure so sustainability can be verified, filtered and purchased rather than remaining a homepage claim.
Shrink the catalog by fabric and wearing context first
After entering by gender, underwear, base layer, ready-to-wear, or a travel, motion or night scenario, shoppers should reduce the range through mesh, modal and ice silk instead of scanning one apparel dump.
- 01Enter by gender or garment family
- 02Narrow the family by mesh, modal or ice silk
- 03Match the piece to a wearing context
- 04Open a product with size still unresolved
Implementation
- Underwear, base layers, ready-to-wear and accessories are merchandised as overlapping families; gender and lifestyle scenarios are entry points, not a second catalog.
- Size and colour sit on Shopify variants so price and availability stay unit-accurate. Fabric, stretch, hand-feel and care live as reusable specification fields shared by collection filters and product pages, instead of unique paragraphs on every SKU.
- Predictive Search returns product and collection suggestions as the shopper types a material or scenario term, landing them in the right range before they compare cut.
Deployment and acceptance
- Sustainable Series and Build a Full Look remain merchant-operated collection entries. Homepage scenario sliders read the same families rather than inventing a campaign-only taxonomy.
- Lookup resolves in a suggestion layer, with in-progress and empty states, instead of a full-page round trip for every query.
- When homepage modules are rearranged in the theme editor, scenario sliders remount on the official section lifecycle so those entries stay usable.
- Material claims can be filtered and compared, rather than remaining brand copy.
- New garments enter scenario entries, collections and search by following the same field structure.
View script and Shopify API evidence
predictive-search.jssearch-form.jsPredictive Search APIswiper-min-js.jsShopify theme editor modeLet body photography, size states and care finish the intimate decision
The product page should put tactility ahead of campaign language: garment-true colour, a sellable size, and composition or wash rules, without burying the buy action.
- 01Separate lifestyle frames from colour reference
- 02Choose size and colour
- 03Open composition, stretch and care
- 04Add the active variant
Implementation
- Size and colour controls expose default, selected, sold-out and disabled states with a visible focus ring, so selection does not depend on a swatch alone.
- Composition and care sit in disclosure panels, keeping body photography, price and the purchase action on the first screen.
- Quantity uses a popover, and the add action submits the sellable size-colour variant rather than the product title.
Deployment and acceptance
- Disclosure holds composition and wash rules; a modal is reserved for size or care that needs to interrupt reading, so policy copy does not push the buy box out of view.
- Fabric and care bind to the product object and theme schema, so material copy can be edited without changing scripts.
- Shoppers can judge whether the piece fits them and whether the current size can enter the cart in the same view.
- Care context appears before purchase without turning the product page into a policy document.
View script and Shopify API evidence
details-disclosure.jsdetails-modal.jsquantity-popover.jsKeep outfits and gifts inside commerce, not in an editorial dead end
Once a piece is chosen, Build a Full Look and Gift Studio should still offer filterable related items. Adding them updates one cart state across the drawer, line items and confirmation.
- 01Confirm the chosen intimate piece
- 02Pick related items from Full Look or Gift Studio
- 03Review the combination and quantities in the drawer
Implementation
- Looks and gifts are organised as product relationships so the set stays filterable rather than collapsing into an unstructured article.
- Add, quantity change and update go through Shopify Ajax Cart. The drawer, line items and add-to-cart notice consume the returned cart payload as one state.
- Preorder, review and loyalty embeds sit beside the theme cart and do not open a second basket.
Deployment and acceptance
- Cart feedback stays on the page; success, quantity changes and errors do not require a full reload.
- Look merchandising can be edited independently of the cart state machine. Theme-editor module reloads remount the drawer interaction.
- Shoppers can move from one intimate piece into a purchasable combination without leaving the product system for a lookbook essay.
- The drawer identifies the actual items and quantities immediately, so an outfit does not lose its contents after add-to-cart.
View script and Shopify API evidence
cart-drawer.jscart.jscart-notification.jsCart Ajax: addCart Ajax: changeCart Ajax: updateOperational handoff
The operating team can continue after launch
- Families stay underwear, base layer, ready-to-wear and accessories, with gender and scenario entries on top rather than a hidden second taxonomy.
- Size and colour remain variants. Fabric, stretch, hand-feel and wash rules remain shared specification fields used by collections, search and product pages.
- Build a Full Look and Gift Studio are maintained as product relationships, so each look does not become a duplicated, unfilterable page.
- The English storefront serves Germany and international shoppers, with checkout preload in en-DE and commercial copy aligned to a euro market.
- Country or language switching is a storefront-level control, so the purchase path is not rebuilt per destination.
- Tax, delivery windows and intimate-category return rules stay merchant-editable and must stay consistent with sellable variants. Material and care copy can be shared; available sizes and shipping limits need destination-specific maintenance.
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
Related service: Shopify storefront design and frontend delivery