Getting started

Install

  1. In your Shopify admin, go to Online Store → Themes.
  2. Add Colophon from the Theme Store. It arrives in your theme library, unpublished.
  3. Click Customize to open the theme editor.

Colophon installs with a preset that matches the demo store’s layout — hero, featured collection, collection list, timeline, FAQ, newsletter. Your own products and menus appear in it immediately; the placeholder copy is yours to replace.

Publish only when you have replaced the demo copy. Everything below can be done while the theme is still unpublished, and customers see nothing until you press Publish.

The four things to do first

1. Logo and favicon

Theme settings → Logo and favicon. Upload a logo, set its width, upload a favicon. Without a logo the theme prints your store name as text, which is a reasonable look but almost certainly not the one you want.

2. Colours

Theme settings → Colors. Colophon’s palette is deliberately paper-like: an off-white page, near-black ink, one vermilion accent. Each colour is separate rather than derived, so you can change the accent without disturbing anything else.

Two colours carry meaning rather than decoration, and it is worth keeping them distinct:

  • Accent is used for sale prices, low-stock notices, quantity-rule messages and the live dot in the cart drawer — everywhere the theme is telling the customer about a constraint.
  • Sale badge and Sold out badge are separate from it, so a sale can read as good news while a constraint reads as a warning.

Check contrast after changing Background and Foreground. The theme meets accessibility contrast requirements at its defaults; a pale grey on off-white will not.

3. Typography

Theme settings → Typography. Two pickers, Body font and Heading font, drawn from Shopify’s font library. The theme installs with Assistant for body text and Playfair Display for headings.

Changing them is the fastest way to move the theme away from the demo’s look, so change them deliberately. The pairing the design assumes is a display face with real contrast over a plain, quiet sans. Keep that relationship and the editorial character survives almost any substitution; give both roles the same kind of face and the page flattens out.

A third voice — the tracked uppercase micro-type used for eyebrows, spec tables and reference numbers — is monospace, and not configurable. It is set from your system’s monospace stack, so it costs no font request and looks native on every platform. There is no setting for it because it is structural rather than decorative.

Font sizes below the pickers set body, heading and small text independently. The small size drives that mono voice, and it is set low on purpose; raising it much past the default makes the eyebrows compete with the headings.

4. Layout

Theme settings → Layout. Set the maximum page width and the minimum page margin.

Blueprint dots is the faint dot lattice behind the page. It is the most distinctive thing about the theme and also the easiest to dislike — one checkbox turns it off everywhere, including the cart drawer and the gift card.

Then build the pages

Before you publish

  • Replace every piece of demo copy. The hero, collection list and timeline ship with sample text about twill and brass fittings; it is there so the theme does not install empty, not because it describes your products.
  • Set up a shipping zone and your policy pages, or customers cannot check out.
  • Add alt text to your images. It is the accessibility item merchants skip most often, and the theme cannot invent it.
This site uses Just the Docs, a documentation theme for Jekyll.