All case studies

DEV3 Technologies · own product

DEV3 Thread: an editorial fashion Shopify theme with shop-the-look, a fit finder and a 3D hanger

Our own Online Store 2.0 theme for fashion labels: a magazine-style hero with a turning 3D hanger, shop-the-look hotspots, cards with colour swatches and one-click size quick add, a size guide drawer with a fit finder and a drop countdown.

Industry
Fashion and apparel (Shopify theme)

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
Editorial hero — An oversized condensed headline with an italic accent beside the campaign image and calls to action.

Editorial hero — An oversized condensed headline with an italic accent beside the campaign image and calls to action.

The challenge

Clothing is the category where shoppers hesitate most about size and fit, and where returns cost the most. It is also the category where brand matters: a label wants its store to feel like its lookbook, not like a generic grid. Many fashion themes either look editorial and make shopping slow, or shop quickly and look like everyone else. We wanted a theme that reads like a magazine but still lets a shopper pick a colour and a size straight from a card, explains how each piece fits before they buy, turns campaign images into shoppable looks, and gives the store a launch tool for limited drops, all with motion that feels confident rather than busy.

Our solution

Thread is an Online Store 2.0 theme built from scratch on DEV3's own Shopify theme base, not a fork of Dawn. The base supplies the standard templates, the cart drawer, predictive search, filters, swatches, the motion system and a lazy 3D accent engine; Thread adds its own sections, product blocks and 3D preset on top.

Key design decisions

  • Shopping from the card. Colour swatches swap the card image, and on desktop a hover size bar adds the chosen size in the chosen colour in one click. Touch screens fall back to quick view.
  • Fit as data. One thread.fit metafield drives the fit scale, its advice and the fit finder's offset, so a relaxed piece can suggest a size down without any app.
  • A fit finder that asks what shoppers know. Their usual size and how they like things to fit, not body measurements; the suggestion can select the variant directly.
  • Accessible shoppable images. Lookbook pins are buttons with aria-expanded, close with Escape and are mirrored by a numbered list.
  • A countdown that never shows zeros. Without a future drop date it counts to the next Friday, so the demo stays alive; it is display only and never hides products.
  • A quiet 3D accent. The draped hanger turns, sways and recolours from fabric dots; it loads lazily, rests under reduced motion and falls back to a poster.

Results

Thread ships with the fictional Thread & Loom label: 16 products with 157 variants, 5 collections, 6 pages, 3 journal articles, 3 lookbooks and 9 community posts, as a product CSV with rendered images.

  • Theme Check: 0 errors and 0 warnings in Shopify Theme Check.
  • Store test: tested on a Shopify development store, from add to cart to the cart drawer and cart page.
  • Browser QA: an automated harness at desktop and phone sizes confirmed the 3D accent renders, reduced motion turns animation off, and the console shows 0 errors.
  • Weight: about 25 KB gzip of initial JavaScript; three.js loads only near the hero.

Thread is on the DEV3 marketplace. Watch its video tour there.

Setup guide

Requirements

  • A Shopify store with the Online Store sales channel
  • No app is required. Optional: the free Shopify Search & Discovery app for collection filters, and a reviews app that writes the standard rating metafields.

What's in the download

Unzip the download from your DEV3 account first. Do not upload the download itself to Shopify.

  • dev3-thread-1.0.0.zip: the theme. Upload this zip as it is; do not unzip it.
  • Documentation/index.html: the full guide. Open it in a browser.
  • Demo-Content/: products.csv, seed.json, images/ and a README for the manual import.
  • LICENSE.txt and START-HERE.txt.

Install the theme

  1. In Shopify admin go to Online Store → Themes.
  2. Click Add theme → Upload zip file and choose dev3-thread-1.0.0.zip.
  3. When the upload finishes, click Customize to preview it in the theme editor.
  4. Click Publish when you are ready. Your current theme stays in the theme library.

Import the demo content (optional)

The demo label Thread & Loom is fictional; every product, review, community post and image is sample content rendered for this theme.

  1. Go to Products → Import and upload Demo-Content/products.csv. The CSV has no image URLs.
  2. Add each product's images from Demo-Content/images/ and assign the colour image to each variant, following the file names in the demo README.
  3. Content → Files: upload the thread-* section images listed in the README (the templates refer to them by name).
  4. Settings → Custom data → Products: add thread.fit and thread.material (single-line text).
  5. Create the 5 collections, the pages with their templates (About, Lookbook, Size guide, FAQ, Contact, Delivery & returns), the Journal articles and the menus with Women and Men children listed in the README.

A scripted seed that does all of this in one command is available from DEV3 support on request. It runs against your own store with your own Admin API token, and it tags everything it creates so it never touches your other products.

After the import

  • Tag products with their category (knitwear, dresses, shirts and so on) for the mega menu links, and men for the men's size table.
  • Set a real date in the Drop banner before a launch; without one it counts to the next Friday.
  • Replace the sample community posts with photos you have permission to repost.
  • Set up payments, shipping and taxes in Shopify's own settings; checkout is Shopify's.

Updates

Download the new version from your DEV3 account and upload the new theme zip under Online Store → Themes → Add theme. It arrives as a new theme in your library: copy your settings across in the theme editor or re-apply your changes, then publish it.

How to use

Tags and metafields the theme reads

Create the metafields under Settings → Custom data → Products. All are optional; empty fields are hidden.

  • thread.fit: single-line text, one of slim, true, relaxed or oversized. The fit scale, its advice and the fit finder's suggestion.
  • thread.material: single-line text, e.g. 100% merino wool. The fabric chip.
  • reviews.rating and reviews.rating_count: stars on the product page (written by review apps).
  • Tag men: the men's table in the size guide drawer.
  • Category tags such as knitwear or dresses: mega menu links like /collections/women/knitwear.

Product page and cards

  • The Thread product section is the standard product section (gallery, swatches and pills, sticky add-to-cart bar, recently viewed) plus two blocks: Fit + size guide and Fabric chips.
  • The size guide drawer shows the size table with a cm/in toggle and the fit finder: shoppers pick their usual size and fit preference, and the drawer suggests a size and can select it.
  • Cards show colour swatches for a Colour option and a hover size bar for a Size option on desktop. Turn off Quick add under Theme settings → Products to hide the size bar.

Home page sections

  • Thread hero: issue line, letter-by-letter heading, masked campaign image and the fabric card with the 3D hanger. Add up to 5 Fabric colour blocks; their dots recolour the cloth. Paste a GLB link to use your own model.
  • Shop by: one block per row (collection, optional title, link, hover image and note).
  • Shop the look: an image plus up to 8 Hotspot blocks (product, position across and down in %). Layouts: wide with the list below, or image left or right.
  • Drop banner: heading, countdown date (ISO, e.g. 2026-11-20T10:00:00Z), text, newsletter form and badge image. The countdown is display only.
  • Community grid: up to 9 Post blocks, each with an image, a handle and an optional product. Use only photos you have permission to repost.
  • Size chart (for page.size-guide): one table block per chart, rows like Size | Bust | Waist | Hip, numbers in centimetres.

Mega menu

Use the two-tier header (Logo centre). Any top-level link with children opens a full-width panel; turn on Use mega menu for all dropdowns to add a promo image.

Motion

Letter-by-letter headings, mask and parallax reveals, slide-fill buttons, cursor-follow images, popping hotspots and a flip-in countdown. Set the animation level (Off, Subtle or Full), reveal style, duration and stagger under Theme settings → Motion. With reduced motion or animation off, everything is static and the hanger rests.

Related case studies

DEV3 Technologies · own product · Supplements and wellness (Shopify theme)

DEV3 Vitality: a supplements Shopify theme with supplement facts, a goal quiz and honest subscriptions

Our own Online Store 2.0 theme for supplement and wellness brands: shop by goal, a tag-matched product finder quiz, accessible supplement facts tables, subscribe & save that appears only with real selling plans, stacks, a testing story with lot lookup, a disclaimer block and a 3D tub hero.

DEV3 Technologies · own product · Furniture and home décor (Shopify theme)

DEV3 Nestwell: a furniture Shopify theme with shop-the-room, a "will it fit" check and a 3D chair

Our own Online Store 2.0 theme for furniture and décor stores: a 3D lounge chair that recolours from fabric and leg swatches, shop-the-room hotspots, complete-the-room bundles, dimensions with a doorway and floor-space check, delivery estimates, showrooms and trade enquiries.