01Get started
Muslin is a Shopify Online Store 2.0 theme for apparel brands that sell clothes in size runs. Fit and fabric come first: every garment page shows body and garment measurements, composition, care and a fit note, and every product card shows its sizes.
- In the Shopify admin, open Online Store > Themes, add Muslin, then choose Customize.
- Open Theme settings and add your logo, favicon, fonts and colors.
- Create the menus, pages and product metafields described below.
- Install the free Search and Discovery app and add the size filter (see Size-first shopping).
03Fit and fabric data
The product page Fit sheet reads product metafields. Create them in Settings > Custom data > Products with namespace custom, or change the keys in the Fit sheet block.
| Key | Type | Example |
|---|---|---|
custom.fit_note | Multi-line text | Relaxed through the body. Size down for a neater line. |
custom.model_info | Single-line text | Model is 6'1" (185 cm) and wears M |
custom.body_measurements | Multi-line text | One row per line, columns separated with a pipe. The first row is the header: Size|Chest|Waist |
custom.garment_measurements | Multi-line text | Same format, for finished garment dimensions. |
custom.composition | Single-line text | 95% organic cotton, 5% elastane shows a proportional bar. |
custom.care | Multi-line text | One instruction per line. Known phrases show care symbols. |
custom.origin | Single-line text | Made in Portugal |
custom.usage | Multi-line text | Shown as "How to wear it" in the Fabric and care tab. |
Tabs with no data are hidden. Selecting a size highlights its row in the measurement table. Shoppers can switch between centimetres and inches.
04Measurement diagram and compare fit
When a product has garment measurements, the Measurements tab opens on a diagram: a flat garment (top or trousers, chosen from your column names) with callouts that update when the shopper chooses a size. An Inseam column means trousers.
- Use the column headings Chest, Length, Sleeve for tops, and Waist, Hip, Rise, Inseam for trousers. A leading Size column is expected.
- Compare with another piece lists other products of the same type and shows their measurements for the same size side by side.
05Size-first shopping
- Product cards show every size as a button. Sold-out sizes are struck through. If a product has no other option to choose, selecting a size adds that exact size to the cart.
- Set Theme settings > Product cards > Size option names to match your option names, for example
Size, Waist. - Filters: install the free Shopify Search and Discovery app, open Filters and add Size, Color, Product type and Price. The size filter appears first and open on collection pages.
- Complementary products are managed in Search and Discovery > Recommendations.
Find your fit
The Size finder section lets a shopper pick a garment, then a size, and opens the collection filtered to that size. Garment chips come from the Garments menu. Size chips are read from the collection's real Size or Waist option, so trousers show 28 to 36 while tops show XS to XL, and sizes that are sold out are disabled. The live count says how many pieces are available in that size.
06Theme settings
| Group | What it controls |
|---|---|
| Logo and favicon | Logo, width, favicon. |
| Colors | Four color schemes (background, text, secondary text, control border, accent, button), page background and status colors. |
| Typography | Heading, body and label fonts from the Shopify font library (default Space Grotesk, Work Sans, Space Mono), heading size, uppercase labels. |
| Layout | Page width, section spacing, section rules, corner radius and image treatment (none, grayscale or duotone; applied only to editorial images, never to product photos). |
| Product cards | Image ratio, second image on hover, size display, quick add from size buttons, vendor, color swatches and color map. |
| Cart | Cart type (drawer or page), order note, free shipping threshold (shown only when above 0). |
| Behavior | Scroll animations: Full, Subtle or Off. Always off for visitors who prefer reduced motion. |
| Social media | Icon links used in the footer. |
07Sections and blocks
Available sections: Annotated hero, Scroll statement, Horizontal showcase, Video hero, Marquee, Featured collection (grid or scrolling row), Collection list, Collection showcase, Size finder, Spec table, Shop the look (numbered product pins), Fit feedback, Fit promise, Story cards, Fabric stories, Process steps, Image with text, Image gallery, Image comparison, Accordion with image, Promo tiles, Press coverage, Blog posts, Newsletter, Featured product, Rich text, FAQ, Size chart, Category index, Recently viewed, Header, Top bar, Footer and Custom Liquid.
Product page blocks: Product name, Price, Variant picker, Inventory status, Buy buttons, Fit sheet, Pickup availability, Description, Collapsible text, Custom Liquid, Share, and app blocks.
Section numbers
Sections that show a number (01, 02, 03) count themselves in page order, so adding, removing or reordering sections never breaks the sequence. Turn the number on or off with Show section number in each section.
08Scroll sections
- Scroll statement: one large sentence pinned on screen while its words light up as the visitor scrolls. Set the text and the scroll length (120% to 300%).
- Horizontal showcase: up to 8 panels. On desktop the section pins and scrolls sideways while the page scrolls down; on mobile it is a swipeable row. Good for Shop by garment.
- Video hero: Shopify-hosted video (keep it under 10 MB), poster image, heading, text and button. It plays muted on a loop only while visible, has an optional Pause button and shows the poster for reduced-motion visitors.
- Annotated hero: headline words rise on load and the callouts update with the chosen size.
Parallax, pinned sections and word reveals pause inside the theme editor so layout is easy to edit.
09Marketing sections
- Age verifier (Footer group): turn on Enable age verifier, set the minimum age text, the exit link and how long the answer is remembered. It cannot be closed with Escape, and search crawlers are not blocked.
- Press coverage: up to 8 publications, each with a logo or text name, an optional quote and link.
- Promo banner: full-width image banner with label, heading, text and button. Added under the product grid on collection pages.
- Combined listings (Shopify Plus): option values that belong to another product in the same combined listing link to that product's page.
10Gift cards, comments, markets
- Gift cards: activate gift cards in Products > Gift cards (not available on every Shopify plan), then add a gift card product. Muslin supports recipient details and the gift card page with a QR code and Apple Wallet.
- Blog comments: turn on in Blog posts > Blog > Comments. Moderated comments are supported.
- Markets: the top bar shows country and language selectors when you sell in more than one market or language.
11Accessibility and browsers
Keyboard operation throughout, visible focus states, labelled controls, text contrast of at least 4.5:1, pointer targets of at least 24 px, reduced-motion support, and no content that depends on hover.
Tested on current Safari, Chrome and Firefox (desktop and mobile), plus the Instagram, Facebook and Pinterest in-app browsers.
12Languages and translations
Muslin includes storefront text in English, French, Italian, German and Spanish. Open Online Store > Themes > Actions > Edit default theme content to change any word shoppers see (button labels, messages, size finder text). Switch language in the editor's language selector to translate the same text for another language.
- The top bar shows country and language selectors when your store sells in more than one market or language (Settings > Markets and Settings > Languages).
- Section headings, button labels and other content you type in the theme editor are translated with Shopify's Translate and Adapt app or any translation app you use.
13Updating the theme
- Duplicate your live theme first (Online Store > Themes > Actions > Duplicate).
- Add the new Muslin version from the Theme Store, or the update shown on the theme card, and publish it only after checking it.
- Theme settings and section content are kept when you update. Custom code edits are not, so copy them back from your duplicate.
- Check the release notes for changes that need action, such as a new metafield or setting.
14Customizing safely
Use the Custom Liquid section or block for small additions. Muslin supports app blocks in the main product and featured product sections.
15Troubleshooting
| Problem | What to check |
|---|---|
| Size buttons are missing on cards | Set Size option names in Theme settings to your option name (for example Size or Waist). |
| The size filter is not on collection pages | Install Search and Discovery and add the Size filter. The filter name must match the Size finder setting. |
| Fit sheet tabs are empty or hidden | Create the product metafields and fill them. Tabs with no data are hidden on purpose. |
| Measurement diagram does not show | Check the column headings in custom.garment_measurements (Chest, Length, Sleeve or Waist, Hip, Rise, Inseam). |
| Size finder shows no sizes | Add the collection to the Garments menu and make sure its products have a Size or Waist option. |
| Animations do not play | Theme settings > Behavior must not be Off. They also stay off in the editor and for visitors who prefer reduced motion. |
Still stuck? Contact support with your store address and a screenshot.
No section matches that search. Try another word, or contact support.