Peregrinedocs

Quick Start Checklist

From a fresh install to a store ready to publish, in the order that works. Each step says whether it is required, recommended or optional, and links to the chapter that covers it. Tick steps off as you go — the list remembers where you got to in this browser.

0 of 0 done
Every step that has one links to the demo store — the same theme, fully set up, so you can see the finished version of what you are configuring. The demo is password protected while Peregrine is in review; the password is Peregrine.

Required the store does not look or work right without it. Recommended most stores want it; skip knowingly. Optional only if it applies to you. Nothing to do it happens by itself once the steps before it are done.

1. Make it yours

Do these as an unpublished theme, so shoppers never see the work in progress.

  1. Online Store → Themes → Add theme → Upload zip. Click Customize rather than Publish; everything below is done as a draft. Installing the theme →

  2. Theme settings → Color schemes. A scheme is a whole palette; pick the default scheme for the page and adjust the four shipped schemes to your brand. Sections pick a scheme rather than individual colours, so this one decision restyles the whole store. Colour schemes → See it on the demo ↗

  3. Theme settings → Typography: a heading face, a body face, the base size and the display scale. Two choices carry through every section. Typography →

  4. In the Header section: logo (and width), logo position, navigation position, sticky mode, and whether the header is transparent over the homepage hero — with an alternate light logo if it is. No logo? The store name is set as a tracked wordmark. Header & navigation → See it on the demo ↗

  5. Content → Menus in Shopify admin, then assign the main menu in the Header section. Nested items become dropdowns; a Mega menu block upgrades one item to a full-width panel. Header & navigation →

  6. Footer blocks: menus, a newsletter form, social icons (from Theme settings → Social accounts), payment icons and the copyright line. Header & navigation →

  7. Both sit in the Header group. The announcement bar rotates messages; the utility bar carries a small menu and social icons, and can carry the currency and language pickers too (the header's icon row already shows those on desktop). Leave them out if the masthead is better bare. Header & navigation →

2. Your catalogue

  1. Theme settings → Product cards: title size and alignment, the colour swatch row and the size run, and whether cards carry an Add to cart row — on collection pages, search, featured collections and recommendation grids. One group governs every grid in the store. Product cards → See it on the demo ↗

  2. Columns per device, the header blocks (image, title, description), and pagination or infinite scroll. Collection page → See it on the demo ↗

  3. Install Shopify's free Search & Discovery app and choose the filters; the theme renders them in one of three layouts. Sort is built in. Collection filters → See it on the demo ↗

  4. The gallery layout is the biggest visual decision in the theme. Then the blocks: title, price, variant picker, buy buttons, description, information blocks — reorder freely. Product page → See it on the demo ↗

  5. Sale, Sold out and New are built in; custom badges come from a product tag. Set the colours once in Theme settings. Product badges →

  6. One setting. Then the rewards bar (free shipping and up to two more milestones — you create the Shopify discount that fulfils each one) and the recommendations row. Cart → See it on the demo ↗

  7. If you sell selling plans, the subscription options block renders them natively. Subscriptions →

3. Fit finder and My size

Peregrine's signature feature for sized products: a shopper types their measurements once and the store works out their size everywhere. Recommended for anything with a size run; skip the whole stage if nothing you sell has one.

  1. One JSON metafield definition, custom.fit_guide, holding the measurement ranges per size. This is the data everything below reads; nothing shows until a product has one. Fit guide metafield →

  2. Under the variant picker is the natural place. A product without a guide shows nothing, so it is safe on every product. Fit finder → See it on the demo ↗

  3. Theme settings → Fit finder → Measurements the store collects. Chest, waist and hips are on; hand and inside leg are filled in but off. Switch on only what your products fit by, and word the hint and the "used for" tooltip for each. Measurements →

  4. Header → My size. It ships off because a fresh store has no guides yet. Once it is on, a button beside search opens the measurements panel on every page. My size → Try it on the demo ↗

  5. The same form beside a paragraph of your own, with a link to your measuring guide — the place to say why you ask, in words search engines can read. Find your fit → See it on the demo ↗

  6. With the steps above done, a shopper who has saved their measurements sees their size named under each card's size run and selected on it — or told that it has sold out, or that the product is not in their size range — before they click. Your size → Save measurements on the demo, then look ↗

4. Homepage and content

  1. Hero, featured collections, promo tiles, image with text, testimonials, blog posts, newsletter — keep what earns its place and remove the rest; the page gets faster as it gets simpler. Homepage sections → See it on the demo ↗

  2. A dated log of what you tested, what failed and what you changed. Text only, so it looks designed before you have a single photograph. Field notes → See it on the demo ↗

  3. The editorial article layout is one of the theme's best surfaces. If you use the Fit finder, a "how to measure yourself" post is the article that sells it — and the one to link from the Find your fit section. Blog & articles → The demo's measuring guide ↗

  4. The form, your details and a map if you have a shop floor. Contact page → See it on the demo ↗

  5. Both work out of the box; the 404 can show a collection so a dead link still sells something. 404 page → Password page → The demo's 404 ↗

  6. Every section's heading tag is yours to set — keep exactly one H1 per page. Structured data ships on every template; check the store details it reads. SEO features →

5. Selling wider

  1. Enable them in Shopify admin and the pickers appear by themselves — in the header's icon row on desktop, in the menu drawer on a phone, and in the utility bar if you use one. A market must be active, not draft, and a second currency needs Shopify Payments. Currency and language pickers →

  2. Turn them on in Shopify admin; the account icon in the header follows. Customer accounts →

  3. Create the gift card product in admin; the recipient form and the redemption page are built in. Gift card page →

  4. App blocks and embeds work as standard; the chapter lists the hooks the theme exposes for reviews, wishlists and the like. App integration →

6. Before you publish

  1. The editor's mobile preview: homepage, a collection, a product, the cart, the blog. Most of your shoppers will only ever see this width. Getting started →

  2. Add to cart, through the drawer or cart page, to checkout, using Shopify's test payment mode. It is the only way to be sure the whole path works with your settings. Cart →

  3. Online Store → Themes → Publish. Anything you change afterwards is live as you save it, so keep a duplicate for experiments. Stuck on something? Support →