Choose a preset, fonts and colours

Reel comes in three presets: Reel, Reel Dusk and Reel Haze. They share every section, block and setting. A preset only sets a starting point: the type system, the corner radius, four colour schemes, the swatch colours and a home page. This guide explains the differences and the settings you can change afterwards.

1. The three presets

• Reel: white ground, near-black ink, the Storm type system and square corners. Made for fashion labels with bold drops.
• Reel Dusk: deep violet ground, light ink, the Block type system and 4 px corners. Made for evening wear, jewelry and accessories.
• Reel Haze: warm off-white ground, the Narrow type system and 8 px corners. Made for basics, knitwear and footwear.

Each preset also starts with its own home page. Reel Dusk’s includes a Drop countdown and a Blog posts section. Reel Haze’s includes two Featured collection sections and a Blog posts section. You can add, remove and reorder every section later.

2. Choose one

Pick the preset whose ground matches your photography. A light ground suits daylight product shots. The violet ground of Reel Dusk suits night and studio campaigns. If you are unsure, start with Reel. Every setting below can be changed, so a preset is never a final choice.

You choose the preset when you add Reel to your store. To get close to another preset later, change the type system, corner radius, colour schemes and swatch colours as described below.

3. Fonts

Open the theme editor (Online Store → Themes → Customize), then open Theme settings → Typography.

1. Pick a Type system: Storm, Block or Narrow. Each pairs a display face for big words with a text face for everything else.
2. To change the faces, find the heading with your system’s name and change Display or Text. Fonts come from Shopify’s font library, so they cost nothing extra.
3. Use Display size (80 to 120%) and Text size (90 to 115%) to scale the type.

The default faces are:

• Storm: Sofia Sans Extra Condensed with Archivo.
• Block: Big Shoulders with Work Sans.
• Narrow: Archivo Narrow with Archivo.

Only the faces of the selected system are used. Changing the fonts under another system’s heading has no effect until you switch to it.

4. Colour schemes

Theme settings → Colors holds the colour schemes. Each preset ships four. Every section has a Color scheme setting that picks one of them, so editing a scheme changes every section that uses it.

Each scheme has these colours:

• Background, and an optional Background gradient that replaces it.
• Text and Secondary text.
• Weather: the colour of drifting letters and quiet display words. It is meant to be faint, so never rely on it for text shoppers must read.
• Lines: hairline rules and borders.
• Button and Button label.
• Sale price.

5. Corners, width and motion

• Theme settings → Layout → Corner radius (0 to 16 px) rounds buttons, inputs, images and drawers. Page width sets the widest the content gets.
• Theme settings → Motion → Motion sets how much moves: Full: letters drift and gather, Subtle: fades and slides only, or Off. Shoppers who ask their device for reduced motion always get the still version.

6. Swatch colours

Reel shows colour options as round swatches. Theme settings → Swatches controls this.

1. Option names shown as swatches lists the option names that get swatches, separated by commas. The default is Color, Colour, Colorway. Add your own name if you use another one, for example Shade.
2. Swatch colors holds one colour per line, written as a name, a colon and a hex code. For example, Washed Black: #2B2A29 on one line and Bone: #E6E1D6 on the next. The name must match the option value. Capital letters don’t matter.

For each value, Reel looks for a colour in this order:

1. The swatch image or colour set in Shopify, when the option is linked to a category metafield such as Color.
2. A matching line in Swatch colors.
3. The value itself as a colour name. Plain names like Black or Navy work. Names like Washed Black don’t, so add a line for them.

Swatches appear on the product page, in quick add, on product cards and in collection filters. See Product page blocks and Set up collection filters.