# Dawn Theme Re-Skin Instructions for Jamper This document is a step-by-step guide to re-skin Shopify's free Dawn theme into the **Warm & Trustworthy** Jamper aesthetic — the same palette, typography and component styling you see in the live preview. > **Why Dawn?** It's free, Shopify-maintained, and the lightest OS 2.0 theme available — best base for the brief's "<2-second page load" performance requirement. --- ## 1. Brand tokens (CSS variables) Open **Online Store → Themes → Dawn → Edit code → assets/base.css** and prepend: ```css :root, .shopify-section, .color-background-1 { --color-foreground: 26, 26, 26; /* #1A1A1A charcoal */ --color-background: 251, 248, 243; /* #FBF8F3 cream */ --color-button: 198, 107, 74; /* #C66B4A terracotta primary */ --color-button-text: 251, 248, 243; --color-secondary-button: 251, 248, 243; --color-secondary-button-text: 26, 26, 26; --color-link: 198, 107, 74; --color-badge-foreground: 251, 248, 243; --color-badge-background: 198, 107, 74; --color-badge-border: 198, 107, 74; --color-card: 255, 255, 255; --color-base-text: 26, 26, 26; --color-base-background-1: 251, 248, 243; --color-base-background-2: 246, 240, 232; --color-base-solid-button-labels: 251, 248, 243; --color-base-outline-button-labels: 198, 107, 74; --color-base-accent-1: 198, 107, 74; --color-base-accent-2: 85, 64, 50; --color-base-border: 229, 223, 213; --font-heading-family: "Inter", system-ui, sans-serif; --font-heading-weight: 700; --font-body-family: "Inter", system-ui, sans-serif; --font-body-weight: 400; } ``` ## 2. Load Inter from Google Fonts In **layout/theme.liquid**, inside ``, add (place above the existing stylesheet links): ```liquid ``` ## 3. Logo, favicon & meta - **Online Store → Themes → Customize → Theme settings → Logo:** upload `brand-assets/jamper-logo.png` from this package. - **Theme settings → Favicon:** same file. - **Theme settings → Search engine listing:** Title `Jamper — Premium Pet Wellness`, Description `Premium pet wellness essentials engineered for the pets we treat like family. Calming aids, orthopaedic supports, smart feeders & more.` ## 4. Header configuration Customize → **Header** section: - **Color scheme:** `background-1` - **Sticky header:** "On scroll up" - **Menu:** create a new menu called *Main menu* with items: Shop, About, Contact (links to pages you'll create from the legal HTML files in step 6). ## 5. Homepage sections Customize → **Home page**, replace existing sections with this stack (top → bottom): 1. **Image banner** — upload `brand-assets/jamper-hero.jpg`. Heading: *Better days for your best friend.* Subheading: *Calming aids, orthopaedic support, smart feeders and vet-formulated wellness — engineered for the pets we treat like family.* Primary button: "Shop the collection" → /collections/all. 2. **Multicolumn (Trust badges)** — 4 columns: *Secure checkout · Tracked worldwide · 30-day returns · Vet-loved formulas* (use the matching icons from Dawn's icon picker). 3. **Featured collection** — *Bestsellers* (you'll create this collection after step 7), 4 products, button label "View all". 4. **Multicolumn (Value props)** — 3 columns from About > Values: *Vet-formulated · Built for the pets we love · No-fuss happiness guarantee*. 5. **Featured collection** — *All products*, 8 products. 6. **Email signup** — Heading: *Stay close.* Subheading: *Get product drops, calming-aid tips, and 10% off your first order.* ## 6. Pages Online Store → **Pages → Add page** for each of: - **About Us** — paste the *About* page copy from the live preview (or use the body export at `legal-pages/about.html` if you choose to copy the live About content separately; the four legal files in this package import as legal pages, see below). - **Privacy Policy** — Title `Privacy Policy`, Content: paste the body of `legal-pages/privacy-policy.html`. - **Terms of Service** — body of `terms-of-service.html`. - **Refund & Return Policy** — body of `refund-and-return-policy.html`. - **Shipping & Logistics Policy** — body of `shipping-and-logistics-policy.html`. > Tip: Online Store → **Settings → Policies** also accepts pasted HTML — Shopify will auto-link these from your checkout footer. ## 7. Collections - **All products** (auto, type = is *Pet wellness*). - **Bestsellers** (manual, add the 4 SKUs flagged `featured` in the products CSV). - **By category** (Sleep & Comfort / Calm & Behaviour / Smart Tech / Feeding & Hydration / Grooming / Skin & Wellness) — auto, condition: *product type is X*. ## 8. Product page customization Customize → **Default product** template: - Reorder the blocks: Title → Price → Variant picker → Buy buttons → Quantity selector → Description → Custom liquid (Trust badges). - Add a **Custom liquid** block under Buy buttons with the trust-badge HTML from `snippets/jamper-trust-badges.liquid` (provided in the **theme-snippets/** folder of this package). ## 9. Performance hardening - **Theme settings → Layout → Page width:** 1280px (matches the live preview). - Disable all unused Dawn sections in *Theme settings → Animations* if you prefer a calmer, premium feel. - Strip the default `{{ 'predictive-search.js' | asset_url | script_tag }}` if you don't need the search overlay. Ship target: Lighthouse Performance ≥ 90, LCP < 2.0s, CLS < 0.05.