Theme documentation

Mannequin

Mannequin is a Shopify theme for streetwear and essentials brands with a small, focused catalog. Its signature is the Outfit studio: shoppers dress a photographed model with your pieces, switch fit and size, and add the whole outfit to the cart in one click.

Getting started

1. Add the theme from the Theme Store and open Customize.
2. In Theme settings > Logo and favicon, upload your logo, or keep the store name with the frame mark and set your season label (for example SS26).
3. In Theme settings > Colors, keep the sand-and-asphalt palette or set your own. Body text and secondary text meet WCAG AA on the default page color; check contrast if you change them.
4. On the home page, choose a collection for Featured collection and the Outfit studio.
5. Create your menus in Online Store > Navigation and pick them in the Header and Footer. In-page links such as /#shop, /#studio, /#fit and /#bundles jump to home page sections.

Theme settings

Swatch colors. Color swatches use the swatch you set on the option value in Shopify admin (Products > product > Color option). For values without one, the theme reads Product cards > Swatch colors, one per line as Name: #hex, for example Clay Red: #C4553B.

Sections

Every home page section uses the same heading rhythm: a section number and label on a hairline, the title on the left, a short intro on the right.

Size tables. Type one row per line, columns separated by |. The first line is the header:

Size | Chest | Length | Shoulder | Sleeve
S | 52 | 70 | 45.5 | 20
M | 54 | 72 | 47 | 21

Fabric specs. One per line as Label: value.

Outfit studio

The studio is optional. Pieces appear on its shelf only when they have a layer image, so it never shows a broken state.

How it works

A garment layer is a transparent PNG cut from the model's own photo and recolored. Because it comes from the same photo, it sits pixel-aligned on the same canvas: folds, shadows and fabric texture are real, and there is nothing to position. Fit and size are applied as a scale that grows from the shoulder line (or waist line), and never shrinks below the photo's own size.

What you need

1. A model block for each model (up to four). Each block has:
   • Model key: short and lowercase, for example men or women.
   • Base photo: the full-length model on a transparent or light background.
   • Canvas width and height in pixels: the size of the base photo.
   • Contact shadows (optional but recommended): soft shadows under the top, bottom and headwear. Without them a garment looks like it floats.
   • Slot anchors: where each slot's layer starts on the canvas. For the top, the shoulder line; for the bottom, the waist line.
2. Metafield definitions in Settings > Custom data:
   • Variants: mannequin.layer_<model key>, type File (image), one per model, for example mannequin.layer_men.
   • Products (optional): mannequin.slot, type Single line text, value top, bottom or headwear. Without it the slot comes from the product type lists in the section settings.
3. A layer image per color on the variants of that color. Setting it on one variant of a color is enough; the studio finds it.

Making layers

The layers in the demo store were produced with a small script that cuts the garment out of the model photo with a mask, recolors it in linear light (so fold contrast survives), cleans the edge color and adds the contact shadow. It is available on request from support. Any image editor works too: duplicate the model photo, keep only the garment, recolor it, export a transparent PNG at the full canvas size.

What to look for in the model photo: a plain background, full length, light-colored garments (white fabric can be dyed any color, black cannot) and light that shows the folds.

Fit and size

• Fit blocks set the width and length of the top for each fit (100–130%). The first fit is selected when the page opens.
• Extra scale per size step adds a little scale for each size above the smallest. The smallest size shows the photo's own size.
• Visitors choose the size of the top and the bottom; the outfit is added to the cart in those sizes.

Try on from anywhere

When the studio is on the same page, product cards and the product page show a Try on model button for variants that have a layer for the selected model.

Bundles and discounts

The Bundles section adds every piece of a bundle in one request; customers can pick a size for each piece. The bundle price shown on the card is a display only. To charge it, create the matching discount in Discounts, for example an automatic 15% discount on a minimum of three items. Explain the rule in Theme settings > Cart > Cart message and in the Outfit studio Offer text.

The cart shows line discounts, order discounts, selling plans and unit prices.

Header

The brand sits in the middle. On screens 1200 px and wider the main menu is split around it: the first half of the top-level links on the left, the rest on the right next to search, account and cart. On narrower screens the menu opens from a button. Keep the main menu to six top-level links or fewer so both halves fit.

Product pages

Blocks: vendor and SKU, title, price (with Shop Pay Installments), variant picker (swatches for color, buttons for size, stock note, size guide link), buy buttons (quantity, add to cart, accelerated checkout, Try on model), pickup availability, description, collapsible tabs, complementary products and app blocks.

The gallery shows one large image with thumbnails; picking a color shows that color's image.

Sticky add to cart bar. Once the main add to cart button scrolls out of view, a bar slides up from the bottom with the product name, the selected options, the price and an add to cart button. Turn it off in Product information > Show sticky add to cart bar.

Complementary products come from the Search & Discovery app.

Cart

• Drawer (default): titled "Your outfit", with a strip of every piece's photo at the top, the lines, and Complete the outfit: up to three related products. One-variant products add straight from the drawer; others link to the product so the shopper picks a size.
• Cart page: the pieces as large tiles (an outfit board), the total and checkout in a panel that stays at the bottom of the screen while the shopper scrolls, then Complete the outfit.
• Free shipping progress appears when Theme settings > Cart > Free shipping threshold is set (store currency, display only).

Filters, search and navigation

• Collection and search pages show filters in a column on the left that stays in view while the products scroll; on phones and tablets the column opens as a drawer from a Filter button. Every filter group is open, selected values show as chips at the top with Clear all. Set filters up in the Search & Discovery app. Filters and sorting update the page without a reload.
• The search page opens with one large search field.
• The blog page shows the newest post across the full width and the rest as a numbered list; posts have a meta column (tags, share, back) beside the text on wide screens.
• The header search shows product, collection, page and article suggestions while typing. Turn it off in Theme settings > Search.
• Menus support two levels of nested links on desktop and in the mobile menu.
• Country/region and language selectors appear in the header and footer when you sell in more than one market or language.

Accessibility and motion

• Every control works with the keyboard and shows a visible focus ring.
• Touch targets are at least 44 × 44 px.
• Text colors were measured for AA contrast on the default palette.
• Scroll-linked card motion moves cards only (never fades them) and is always off for visitors who ask for reduced motion. Turn it off for everyone in Theme settings > Layout.

FAQ

The Outfit studio says "Choose a collection and add at least one model block". Pick a collection in the section settings and add a Model block.

A product does not appear on the studio shelf. Check that its variants have a mannequin.layer_<model key> image for the selected model, that the product has a color option, and that its slot is set (metafield or product type list).

Swatches show an empty circle. Set a swatch on the option value in admin, or add the color to Product cards > Swatch colors.

The bundle price is not applied at checkout. Create the discount in Discounts; the theme only displays it.

Can I use the theme without the studio? Yes. Remove the section; every other part of the theme works on its own.

Support

Write to us through the support form. We reply within two business days, Monday to Friday. Include your store address and the theme version (Theme settings > Theme information).

Support covers theme setup, settings and bugs in the theme code. It does not cover custom code changes, third-party apps or design work.