# Getting started

Chapter 1 of the Ribbon user guide.

## What's in your download

| File | What it is |
| --- | --- |
| `Ribbon-1.0.0-ribbon.zip` | The theme with the **Ribbon** preset: coquette and feminine boutiques |
| `Ribbon-1.0.0-maison.zip` | The theme with the **Maison** preset: elevated basics and minimal luxe |
| `Ribbon-1.0.0-resort.zip` | The theme with the **Resort** preset: swim, resort and summer |
| `Ribbon-user-guide.pdf` | This guide |
| `LICENSE.txt` | Your licence: one store per purchase |

The three zips are the same theme. A preset only decides the starting palette, fonts, words, home page, product page, contact page, 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 sections that need a product or collection show placeholders until you choose one.

## Presets

| Preset | For | Palette | Fonts | Cards | Home page |
| --- | --- | --- | --- | --- | --- |
| Ribbon | Coquette and feminine boutiques | Blush | Bodoni Moda headings, Manrope body | Portrait 3:4 | **Editorial** hero (two overlapping photos and a caption card), **Shop the look** (photo first, three pieces), New in (staggered grid of 8), **Shop by occasion** cards (Date night, Brunch, Wedding guest), the **Next drop** ("The ballerina edit"), an "As worn by you" photo grid, and the newsletter ("Join the bow club for 10% off your first order") |
| Maison | Elevated basics and minimal luxe | Ivory | Newsreader (300) headings, Manrope body | Tall 2:3 | **Type first** hero ("Fewer pieces, worn for longer."), a full-width **Shop the look** lookbook ("One rail, four ways"), The essentials (3 columns of 6, no stagger), an image with text story on a band ("Linen, merino and silk"), the next release ("The merino chapter") and the newsletter ("Letters from the studio") |
| Resort | Swim, resort and summer | Riviera | Playfair headings, Manrope body | Portrait 3:4 | **Full width** hero ("Sun, salt and *linen*"), **Shop by print** round swatches, New for summer (staggered grid of 8), **Shop the look** (photo second, "A weekend in three pieces"), Where to (Beach, Pool, Terrace dinner), the next drop ("Capri"), a "Wish you were here" photo grid and the newsletter ("Postcards from the coast") |

Ribbon and Resort use the **split** header (the menu either side of a centred shop name); Maison uses the **classic** header (logo first, links after it). Resort also shows "2 left" on sizes at 2 rather than 3 (chapter 11). The fourth palette, **Noir** (a warm black page, pearl text and rose champagne buttons, for evening wear and lingerie), has no preset of its own; choose it in Theme settings › Colors on any preset.

Every preset's product page has the same buy box: the edit kicker, title, price with the star rating, the first paragraph of the description, the variant picker with **size pills** and a **Size guide** link, the **Fit and size** block, the buy buttons with the price in them, the **Wear it with** link, three perk lines, three rows (Details, Fabric and care, Shipping and returns), stock, a back-in-stock request and pickup. Under it come the **Wear it with** section and "You may also like" recommendations. Each preset's perk lines, rows and announcement bar (and Ribbon's hero small print) match its own demo terms (Ribbon "Free shipping over $100", Maison "Complimentary shipping over $250" and alterations, Resort "Free express shipping over $150" and holiday returns). Rewrite them to your own terms.

Every preset also ships these templates, which you assign to pages in admin (**Online Store › Pages**, then the page's **Theme template** field):

| Template | Use it for | What's on it |
| --- | --- | --- |
| `page.size-guide` | Your size guide page (chapter 9) | The **Size guide** section: your size chart with the cm \| in switch and **Find my size** |
| `page.contact` | Your contact page | The contact form ("Write to us") with an order number field, a "Visit us" text column and a Help menu column |
| `page.compare` | Side-by-side comparison (chapter 4) | The comparison table |

The presets link to a few pages you create yourself: the announcement bar's "Find my size" link and Resort's "Find your swim size" button go to `/pages/size-guide`, the hero's "View the lookbook" and Shop the look's "See all looks" go to `/pages/lookbook`, Maison's "Book a fitting" goes to `/pages/contact` and its "Read the edit" to `/blogs/journal`. Create a page called "Size guide" (handle `size-guide`) with the `page.size-guide` template, and either create the other pages or point those links somewhere else.

## Install

1. In Shopify admin, go to **Online Store › Themes**.
2. In the **Theme library**, click **Add theme › Upload zip file** and choose the zip of the preset you want. 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** (on the theme's **…** menu in the library, or from the 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 wordmark in the heading font, and a favicon.
2. **Colors and fonts**: Theme settings › Colors › Color palette, then Typography (chapter 2).
3. **Menus**: in admin, **Content › Menus**: build the main menu and the footer menu (chapter 3).
4. **Real numbers and promises**: the presets ship with demo words. Set **Theme settings › Commerce › Free shipping over** to your own free-shipping threshold (or 0), and rewrite the announcement bar, hero ticks, perk lines and product page rows so they only promise what you offer.
5. **Sizes**: check that **Theme settings › Sizing and fit › Size option names** lists the option names your products use for sizes ("Size" by default), and that the size chart in the **Fit and size** block matches your sizes (chapter 9).
6. **Product data**: create the metafield definitions and the size chart metaobject (chapter 7) and fill them on a few products to see the fit scale, the model line, your own size charts and the Wear it with pairings appear.
7. **The next drop**: the presets' **Next drop** section has no date yet, so it shows only in the theme editor, as a sample countdown, until you set one. Set your own date, time and collection to show it on your storefront, or remove the section (chapter 11). Once its date has passed it shows "The drop is live".
8. **Size guide page**: create the page with the `page.size-guide` template and choose it in **Theme settings › Sizing and fit › Size guide page** (chapter 9).
9. **Filters and pairings**: install Shopify's free **Search & Discovery** app to set up filters (chapter 13) and complementary products for Wear it with (chapter 10).