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
- In Shopify admin, go to Online Store › Themes.
- In the Theme library, click Add theme › Upload zip file and choose the zip of the preset you want. Don't unzip it first.
- When the upload finishes, click Customize to open the theme editor and make it yours.
- 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
- Brand: Theme settings › Brand: your logo, or the shop name as a text wordmark in the heading font, and a favicon.
- Colors and fonts: Theme settings › Colors › Color palette, then Typography (chapter 2).
- Menus: in admin, Content › Menus: build the main menu and the footer menu (chapter 3).
- 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.
- 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).
- 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.
- 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".
- Size guide page: create the page with the
page.size-guidetemplate and choose it in Theme settings › Sizing and fit › Size guide page (chapter 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).