Getting started

What's in your download

The three zips are the same theme. A preset only decides the starting palette, heading font, a few settings, the words, the home page, the product and page templates, and the header and footer, and you can change all of them afterwards. Products, photos and demo text are not included: a fresh install shows your own products, and the tiles, hero and testimonials draw simple sample garments until you choose your own images.

Presets

The fourth palette, Graphite (a graphite page with white text and aqua buttons, good for night-run and lifting labels), has no preset of its own: choose it in Theme settings › Colors on any preset.

The presets also differ in these settings:

Everything else starts the same in all three: Inter body text at 16px, portrait product cards with quick add, swatches, the back on hover, activity icons and the support pill, lanes that draw in, the fit finder on in centimetres and kilograms, and Set discount at 0%.

Each preset's header and footer carry their own sample words:

• The announcement bar reads "Free returns within 30 days" and "Free shipping over $100" (Rep), "Free shipping over $120" and "Free returns within 30 days" (Flow), or "Free shipping over $100" and "30-day run test" (Pace). The text at the left is your opening hours or a club run ("Collingwood studio store open 6 am to 8 pm", "Studio classes daily from 6 am", "Saturday social run, 6:30 am from the store"), and the two links at the right are Find your size (to all products) and Help (to /pages/contact). Those words are plain text. Rewrite them to match your shop.
• The menu promo sits under a top-level link called Train (Rep), Yoga (Flow) or Road (Pace). If your menu has no link with that title, change the promo's Menu item (chapter 3).
• The footer has your shop name with a sample about line and address, three menu columns, Shop (your Main menu), Help (your Footer menu) and About (a menu with the handle about, which a new store doesn't have: create it or the column stays hidden), an Early drops newsletter column, and "Prices in AUD." after the copyright.

Every preset ships these templates, filled with its own words:

Assign a page template in admin under Online Store › Pages, in the page's Theme template field, and a product template in the product's Theme template field.

The presets link to one page you need to create: every preset's announcement bar Help link goes to /pages/contact. Create a page called "Contact" (its handle becomes contact) with the page.contact template, or change the link. The presets' other buttons, tiles, captions and promos point at all products until you choose your own links, so go through the home page and point each one at the right collection, product or page. Find your size in the hero and the announcement bar is a good one to point at a product, where the fit finder lives.

A fresh install doesn't show these until you've set them up:

• Featured product (the "Complete the set" section on every preset's home page) shows shoppers nothing until you choose a Product; the theme editor shows a sample. Choose a product whose custom.set_with metafield lists its matching pieces, or delete the section (chapters 4 and 10).
• Activity tiles, support cards, the hero and the testimonials draw simple sample garments in place of your photos until you choose images. That's on purpose, not broken, and it shows on your live store too until you replace them.
• Activity tiles and support chips open the whole collection until you add the Activity and Support level filters in Search & Discovery, or give each tile its own link (chapters 8 and 13).
• Activity icons, support pills, the Fabric and fit card and Complete the set stay hidden on a product until it has the metafields they read (chapter 7).
• The fit finder works straight away from the default size chart in Theme settings › Fit finder, but only on products with a size option named Size (or a name you list in Size option names). Check the chart against your own sizes (chapter 11).

Install

1. In Shopify admin, go to Online Store › Themes.
2. In the Theme library section, click Add theme › Upload zip file, choose the zip of the preset you want and click Upload. Don't unzip it first.
3. When the upload finishes, click Customize to open the theme editor and make it yours.
4. When you're ready, click Publish next to the theme in the theme library, or in the top bar of the theme editor. You can upload a second preset next to it to compare; only the published theme is live.

First steps

1. Brand: Theme settings › Brand: your logo, or the shop name as a text logo in the heading font, and a favicon. A long shop name looks better with a smaller Text logo size on phones.
2. Colours and fonts: Theme settings › Colors › Colour palette, then Typography (chapter 2).
3. Menus: in admin, Content › Menus: build the main menu, the footer menu and, if you keep the footer's About column, a menu with the handle about (chapter 3). Rename or move the header's menu promo to one of your own top-level links.
4. Pages: create "Contact" with the page.contact template.
5. Options: name your options Colour (or Color), Size and, for leggings sold in two lengths, Inseam. Use the same colour names on pieces that match (a bra and leggings both in "Fern") and the same size names everywhere (XS, S, M, L, XL). Rep reads options by name, and you can list your own names in theme settings (chapters 9, 10 and 11).
6. Size chart: check Size chart in Theme settings › Fit finder against your own sizes. Products cut differently get their own chart in a metafield (chapters 7 and 11).
7. Metafields: create Rep's metafield definitions and fill in the ones your products need (chapter 7). Activities, support levels, the fabric card, the inseam, sets and per-product size charts read them.
8. Templates: give mats, bottles, bags and other accessories without sizes product.no-set.
9. Filters: install Shopify's free Search & Discovery app and add the Activity, Support level, Size and Colour filters (chapter 13).
10. Real promises: the presets ship with demo words, and many of them are claims about your shop. They reach shoppers as soon as you publish, so rewrite or remove all of these until they only say what's true:
    • Free shipping over is set to 100 in the Rep and Pace presets and 120 in Flow, so the product page's trust row says "Free shipping over $100" and the cart counts down to it. Set it to your real threshold, or 0 if you don't offer free shipping (chapter 2).
    • The product page's Trust row ("Free returns within 30 days", or "30-day run test" in Pace), its Shipping and returns accordion ("Orders before 2 pm ship the same day. Free returns and size swaps within 30 days, tags on.") and its Fabric and care accordion (washing instructions). They show on every product that uses the template.
    • The How it fits notes under every product with a size option: "Firm through the waist", "Two inseams" (with leggings lengths in centimetres) and "Free size swaps" ("Wrong size? Swap it free within 30 days, tags on."). They're settings of the Product section (chapter 6), and they show on bras and tops too, so write notes that are true of every product on the template.
    • The Rep preset's hero ticks ("Squat-proof", "Pockets on every pair", "Free returns") and caption ("Leggings $98 · Bra $72"), and every preset's icon row claims ("Tested in a deep squat under bright studio light", "UPF 50+").
    • Every testimonial. The quotes, names, heights and weights are invented. Replace them with real reviews or delete them. Publishing made-up reviews can break consumer law.
    • Prices, times and places written into the text, which don't update on their own: the announcement bar, the hero caption, the menu promo, "Collingwood", "Byron Bay", "Fremantle", the footer address, "Prices in AUD." and the contact page's "Visit the studio store" text.
    • The newsletter: "Members hear first and get free express shipping on drop day" and "One email a week". The theme doesn't send email or create discounts, so promise only what you'll send and set up (chapter 4).
    • Complete the set's "Save 10% on sets" shows only once you set Set discount above 0, and the saving only happens if you create the matching automatic discount in Shopify (chapter 10).
11. Publish: when you've checked a product with colours and sizes (open the fit finder and save a size), an accessory on product.no-set, the cart, and the home page on your phone.