Template Gallery and Store Design

Part 1: Accessing the Template Gallery

1.1 Navigating to the Gallery

From your dashboard sidebar, click Appearance → Templates. This opens the Template Gallery — the central hub where you browse, preview, and select the visual design for your store.

1.2 Gallery Layout

The gallery displays all available templates as a card grid. Each card shows:

• A screenshot preview of the template as it appears on a live storefront.
• The template name in large bold type.
• A type badge (Basic, CyberStore, Sage-Minimal, or Fashion).
• A status indicator: Free, Premium, or Installed.
• A quick-action button — Preview or Apply.

1.3 Sorting and Filtering

Above the grid you will find:

• A search bar to filter by template name or keyword.
• A type filter — toggle to show only Basic, CyberStore, Sage-Minimal, or Fashion templates.
• A sort dropdown — by Newest, Most Popular, or Name (A–Z).

---

Part 2: Template Types

2.1 Overview

Each template belongs to one of four design families. The family determines the overall visual language — layout structure, colour palette, typography, and component style.

2.2 Basic

• Purpose: A clean, neutral starting point for any store.
• Layout: Single-column, centred content, generous white space.
• Colours: Uses your store's default palette — no forced brand colours.
• Best for: First-time users, general-purpose stores, or quick setup.

2.3 CyberStore

• Purpose: A bold, tech-forward aesthetic with dark-mode defaults.
• Layout: Two-tier header, full-width hero section, grid-based product cards.
• Best for: Electronics, gadgets, digital products, or SaaS storefronts.

2.4 Sage-Minimal

• Purpose: An earthy, soft-toned minimal design inspired by natural brands.
• Layout: Compact navigation, rounded cards, soft shadows, ample vertical rhythm.
• Best for: Handmade goods, artisan shops, organic products, or boutique stores.

2.5 Fashion

• Purpose: A high-contrast, editorial layout optimised for visual merchandising.
• Layout: Full-bleed hero images, asymmetric product grids, large thumbnail tiles.
• Best for: Apparel, accessories, beauty, or any store where imagery drives sales.

2.6 Template Type Comparison

---

Part 3: Previewing Templates

3.1 Opening a Preview

Click the Preview button on any template card. A full-page overlay opens with three viewport tabs at the top: Desktop, Tablet, Mobile.

3.2 Desktop View (default)

The preview renders the template at full desktop width. You see the full layout: header, hero, product grid, footer, and all components as they would appear on a laptop or monitor.

3.3 Tablet View

Click the Tablet tab. The viewport shrinks to a tablet-sized screen. Observe:

• How the navigation collapses (hamburger menu behaviour).
• Whether product cards stack into two columns instead of three or four.
• How hero images crop or reflow.
• Whether font sizes scale down naturally.

3.4 Mobile View

Click the Mobile tab. The viewport shrinks to a phone-sized screen. Check:

• Single-column stacking of all sections.
• Touch-target sizing (buttons, links, tap areas).
• Readable body text without horizontal scrolling.
• Whether the template passes the thumb-zone test — critical actions (cart, menu, search) are within easy reach.

3.5 Preview Controls

While in any viewport, you can:

• Scroll through the full page length.
• Click interactive elements (buttons, links, product cards) to test their state — they respond in-preview without applying the template.
• Toggle dark/light mode if the template supports both.
• Return to the gallery by closing the overlay (click the X or press Escape).

---

Part 4: Customising a Template

4.1 Opening the Customiser

Once you have chosen a template, click the Apply button. The Template Customiser opens as a side panel or full-page editor.

4.2 Colours

The Customiser shows a colour palette editor with the following controls:

• Primary colour: The dominant brand colour — used for buttons, links, headers, and key accents. Click the swatch to open a colour picker, or type a hex value directly (e.g., #3b82f6).
• Secondary colour: A complementary accent — used for badges, sale tags, hover states. Usually sits one step away from the primary on the colour wheel.
• Background colour: The page background. Set to white (#ffffff), off-white (#f8fafc), or a dark tone if using CyberStore.
• Text colour: The main body text colour. Default is near-black (#111827); lighter greys are available for muted text.

Each colour change updates the live preview instantly.

4.3 Banners

• Hero banner: The top-of-page promotional strip. Set the banner image (upload or paste a URL), adjust the overlay gradient, and choose the text alignment (left, centre, right).
• Announcement bar: A thin strip above the header. Choose background colour, text colour, and message. Can be toggled on/off.
• Sale / promotion banners: Mid-page or footer banners. Set image, headline, and CTA button text.

4.4 Layout

• Header style: Choose between Centred Logo, Left Logo, or Hamburger-only (mobile-first).
• Product card layout: Grid (uniform rows), Masonry (staggered), or List (horizontal rows).
• Footer columns: 1, 2, 3, or 4 columns. Each column can hold links, text, or a newsletter sign-up form.
• Section spacing: Compact, Default, or Spacious — controls the vertical padding between major sections.

4.5 Typography

• Heading font: A dropdown of available fonts. The template suggests a default, but you can override it with any supported font.
• Body font: Separate from headings. Choose a complementary pair — serif headings with sans body, or the same family throughout.
• Font size scale: Small, Default, Large — adjusts all heading sizes proportionally.
• Letter spacing: Normal, Tight, Wide — applied globally.

4.6 Live Preview

The right two-thirds of the Customiser screen shows a live, scrollable preview of your store with the current customisations applied. Changes are:

• Instant: No save required — colour picker, banner swap, and font changes render immediately.
• Non-destructive: The preview does not affect your published store until you explicitly save.
• Per-device: You can toggle desktop/tablet/mobile inside the preview panel to verify how each customisation behaves at each breakpoint.

---

Part 5: Applying and Managing Templates

5.1 Applying a Template

When you are satisfied with the customisations:

1. Click Save & Apply (top-right corner of the Customiser).
2. A confirmation dialog appears with two options:
   • Apply to Live Store — Replaces your current store design immediately.
   • Save as Draft — Keeps the customisations but does not publish them.
3. If you choose Apply to Live Store, a progress bar runs while the template assets are compiled and deployed. A toast confirms "Template applied successfully" when complete.

5.2 Changing a Template

To switch to a different template:

1. Return to Appearance → Templates.
2. Your current template shows a "Currently Active" badge.
3. Click Preview on any other template.
4. In the preview overlay, click Apply this Template (not just Preview — this replaces the active one).
5. A warning dialog appears: "This will replace your current design. Any unsaved customisations will be lost."
   • Confirm with Apply to switch.
   • Cancel to keep the current design.

---

Part 6: Quick Reference

Template Gallery Pages

Template Types at a Glance

Required Customisations Before Applying

Common Actions

---

End of Guide

Your store's look and feel is fully under your control. Browse, preview, customise, and switch templates at any time.