# ECStores — Tenant Guide
### For Store Owners

Last updated: 2026-05-07

This guide covers everything you need to know to set up and manage your ECStores online shop. No technical knowledge required.

---

## Table of Contents

1. [Getting Started](#1-getting-started)
2. [Logging Into Your Admin Panel](#2-logging-into-your-admin-panel)
3. [Site Settings — Your Store Identity](#3-site-settings--your-store-identity)
4. [Branding Studio — Colours, Fonts & Logo](#4-branding-studio--colours-fonts--logo)
5. [Connecting Stripe to Accept Payments](#5-connecting-stripe-to-accept-payments)
6. [Managing Categories](#6-managing-categories)
7. [Managing Suppliers](#7-managing-suppliers)
8. [Managing Products](#8-managing-products)
9. [Product Variants (Sizes, Colours, etc.)](#9-product-variants-sizes-colours-etc)
10. [Variant Combinations — Pricing & Stock Per Option](#10-variant-combinations--pricing--stock-per-option)
11. [Shipping Methods](#11-shipping-methods)
12. [Managing Orders](#12-managing-orders)
13. [What Your Customers See](#13-what-your-customers-see)
14. [Customer Accounts](#14-customer-accounts)
15. [Quick Reference](#15-quick-reference)

---

## 1. Getting Started

Your store runs on ECStores — a hosted e-commerce platform. You don't need to install anything. Everything is managed through your **Admin Panel**, a web-based control panel only you can access.

Your store has two web addresses:

| Address | What it is |
|---|---|
| `yourstore.ecstores.ca` | Your public storefront — what customers see |
| `yourstore.ecstores.ca/admin` | Your private admin panel |

Replace `yourstore` with your actual store name (e.g. `acme.ecstores.ca`).

---

## 2. Logging Into Your Admin Panel

1. Open your browser and go to `yourstore.ecstores.ca/admin`
2. Enter your admin email address and password
3. Click **Sign In**

You'll land on the dashboard, which shows a welcome message with your name.

**Can't log in?** Contact Denis at denis.gallant@gmail.com with your store name and he'll reset your access.

---

## 3. Site Settings — Your Store Identity

Site Settings is where you configure the basic identity of your store.

**How to get there:** Click **Site Settings** in the left navigation menu.

### What you can set

| Field | What it does |
|---|---|
| Company Name | Appears in the browser tab, header, and footer of your storefront |
| Company Slogan | Short tagline displayed in the header (optional) |
| Currency | The symbol shown next to all prices (e.g. `$`, `€`) |
| Return Policy | Text shown to customers about your returns (plain text) |
| Privacy Policy | Text shown to customers about their data (plain text) |

### How to save

Fill in the fields and click **Save** at the top or bottom of the form. Changes take effect immediately on your storefront — no cache to clear.

---

## 4. Branding Studio — Colours, Fonts & Logo

The Branding Studio lets you customise how your store looks — no design experience needed.

**How to get there:** Click **Branding Studio** in the left navigation under **Settings**.

### Colours

Five colour pickers control your store's palette:

| Colour | Where it appears |
|---|---|
| Primary | Buttons, cart badge, links, accents — the most important one |
| Secondary | Secondary accents |
| Accent | Badges and highlights |
| Background | The page background colour |
| Body Text | The main text colour |

Click the colour swatch to open the colour picker. You can type a hex code directly (e.g. `#E63946`).

### Typography

Choose a font for headings (product names, section titles) and a separate font for body text (descriptions, prices). The list includes popular Google Fonts — they load automatically.

### Button Style

Three options control the shape of all buttons across your store:

| Style | Look |
|---|---|
| Rounded | Slightly rounded corners (default) |
| Pill | Fully rounded — oval-shaped buttons |
| Sharp | Square corners — clean, minimal look |

### Logo & Images

| Upload | What it does |
|---|---|
| **Logo** | Replaces your store name text in the header. Recommended: 300×100 px, transparent PNG |
| **Favicon** | The tiny icon in the browser tab. Recommended: 32×32 px |
| **Homepage Banner** | A wide image displayed at the top of your home page. Use a landscape image for best results |

### Custom CSS (Advanced)

If you know CSS, you can write your own style overrides in the Custom CSS field. This is injected after all other styles so it always wins. Example:

```css
.btn-brand { font-weight: 900; letter-spacing: 0.05em; }
```

### Saving

Click **Save Branding** at the bottom of the page. Changes take effect immediately — hard-refresh your storefront (`Ctrl+Shift+R` or `Cmd+Shift+R`) to see them.

---

## 5. Connecting Stripe to Accept Payments

Before customers can pay at checkout, you need to connect a Stripe account to your store. This routes customer payments directly to your bank account.

**How to get there:** Click **Stripe Connect** in the left navigation under **Settings**.

### First time setup

1. Click **Connect Stripe Account**
2. You'll be sent to Stripe's secure onboarding flow
3. Fill in your business details, banking information, and identity verification
4. When complete, Stripe sends you back to your admin panel

### Checking your status

The Stripe Connect page shows:

| Field | Meaning |
|---|---|
| Account ID | Your Stripe Express account identifier |
| Charges | **Enabled** = you can accept customer payments / **Pending** = onboarding incomplete |
| Payouts | **Enabled** = Stripe can send money to your bank / **Pending** = bank account not yet verified |

Your store is ready to accept payments once **Charges** shows **Enabled**. Payouts being Pending just means Stripe hasn't verified your bank yet — payments are still accepted and held until payouts are enabled.

### If you see "Continue Onboarding"

Stripe's onboarding wasn't fully completed. Click **Continue Onboarding** to pick up where you left off. You may need to re-enter some details.

### How customer payments work

When a customer checks out:
1. They enter their card details on the payment step (powered by Stripe)
2. The payment is charged immediately
3. Stripe deposits the funds into your connected bank account (usually 2–7 business days)
4. A small platform fee (2%) is deducted by ECStores automatically

You can view all your payments in your Stripe Express Dashboard — Stripe emails you a link during onboarding.

---

## 6. Managing Categories

Categories help you organise your products and let customers filter by type.

**How to get there:** Click **Categories** in the left nav under **Catalog**.

### Creating a category

1. Click **New Category**
2. Enter the category name (e.g. `Clothing`, `Accessories`)
3. The **Slug** field fills in automatically — this is used in the website URL. Leave it as-is unless you need something specific.
4. Click **Save**

### Editing a category

Click the category name in the list to edit it. Changing the name automatically updates the slug.

### Deleting a category

Click the three-dot menu (⋮) next to a category and choose **Delete**. Any products in that category will have their category cleared — they'll still exist but won't be categorised.

---

## 7. Managing Suppliers

Suppliers are the companies or people you source products from. This is for your records only — customers never see supplier information.

**How to get there:** Click **Suppliers** in the left nav under **Catalog**.

### Creating a supplier

1. Click **New Supplier**
2. Fill in the name (required) and optionally email, phone, and notes
3. Click **Save**

---

## 8. Managing Products

Products are the heart of your store. Each product becomes a listing that customers can browse and purchase.

**How to get there:** Click **Products** in the left nav under **Catalog**.

### Creating a product

1. Click **New Product**
2. Fill in the required fields:

| Field | Required | Notes |
|---|---|---|
| Name | Yes | What customers see |
| Slug | Auto-fills | The URL path (e.g. `/products/blue-t-shirt`) — usually leave as-is |
| Category | No | Select from your categories list |
| Supplier | No | For your internal records |
| SKU | No | Your stock-keeping unit code |
| Price | Yes | The regular selling price |
| Sale Price | No | If set AND "On Sale" is checked, this price shows with the regular price crossed out |
| On Sale | No | Toggle — activates the sale price display |
| Units in Stock | No | How many you have available |
| Track Inventory | No | If ON, the system enforces stock limits and shows "Out of stock" when units_in_stock reaches 0 |
| Description | No | Shown on the product detail page |
| Additional Info Title / Body | No | An extra section on the detail page (e.g. "Shipping Info", "Size Guide") |
| Is Featured | No | Marks the product with a "Featured" badge on the storefront |
| Is Discontinued | No | If ON, the product is hidden from the storefront |

3. Click **Save**

### Uploading product images

On the product edit page, scroll to the **Images** section:

1. Click the upload area or drag and drop your image files
2. You can upload multiple images — the first one is used as the main/thumbnail image
3. Click **Save** after uploading

**Supported formats:** JPG, PNG, WebP  
**Recommended size:** At least 800×800 pixels for good display quality

### Editing a product

Click the product name in the list to open the edit form. All fields are editable. Click **Save** when done.

### Hiding a product without deleting it

Check the **Is Discontinued** toggle and save. The product disappears from the storefront but stays in your database — you can un-discontinue it at any time.

### Deleting a product

Click the three-dot menu (⋮) on the product list and choose **Delete**. This is permanent. Consider using "Is Discontinued" instead if you might want the product back later.

---

## 9. Product Variants (Sizes, Colours, etc.)

Variants let a single product listing offer multiple options, like different sizes or colours. Each combination of options is called a **variant combination** — for example, "Medium / Red" or "Large / Blue".

### When to use variants

Use variants when:
- A product comes in different sizes (S, M, L, XL)
- A product comes in different colours (Red, Blue, Green)
- Any product attribute changes the item the customer receives

Do NOT use variants for things like gift wrapping or personalisation messages — those are better handled as order notes.

### Setting up variant groups

On the product edit page, scroll to the **Variant Groups** section:

1. Click **Add variant group**
2. Enter the group name (e.g. `Size`)
3. Within the group, click **Add option** for each choice (e.g. `S`, `M`, `L`)
4. Repeat for additional groups (e.g. `Colour` with `Red`, `Blue`)
5. Click **Save**

**Order matters:** The first option in each group appears first on the product page. Drag the handles to reorder.

### Variant toggles

On the product form, two toggles control how variants affect pricing and stock:

| Toggle | What it does when ON |
|---|---|
| Track Variant Price | Each combination can have its own price modifier (e.g. XL costs $5 more) |
| Track Variant Inventory | Each combination has its own stock count (instead of one count for the whole product) |

If both toggles are OFF, all combinations share the product's base price and one stock number.

---

## 10. Variant Combinations — Pricing & Stock Per Option

After setting up variant groups and saving the product, you need to **generate the combination matrix** — the full list of every possible option combination.

**How to get there:** Edit a product that has variant groups → scroll to the **Variant Combinations** tab at the bottom of the page.

### Generating combinations

1. Click **Generate Combinations**
2. Rows appear — one for each combination (e.g. if you have 3 sizes × 2 colours = 6 rows)
3. Each row shows the combination label (e.g. `M / Red`), SKU, price modifier, and units in stock

**Note:** Generating combinations only adds new rows — it never deletes existing ones. If you add a new option to an existing group and re-generate, only the new combinations are added.

### Editing a combination

Click **Edit** on any row to open a small form:

| Field | Notes |
|---|---|
| SKU | Optional — a specific code for this combination |
| Price | Toggle between **Add to base price** (e.g. +$5.00) or **Fixed price** (replaces the base entirely) |
| Price amount | The dollar amount to add or the fixed price |
| Units in Stock | How many of this specific combination you have |

Click **Save** in the modal — the row updates immediately without a page reload.

### Important notes

- If **Track Variant Price** is OFF on the product, price modifiers are ignored — all combinations use the base product price
- If **Track Variant Inventory** is OFF, units_in_stock per combination is ignored — the product's main stock count is used
- Customers must select all variant groups before they can add the product to their cart

---

## 11. Shipping Methods

Shipping methods are the delivery options shown to customers at checkout.

**How to get there:** Click **Shipping Methods** in the left nav under **Store**.

### Creating a shipping method

1. Click **New Shipping Method**
2. Fill in:

| Field | Notes |
|---|---|
| Name | What customers see (e.g. `Standard Shipping`, `Express Delivery`) |
| Description | Optional extra detail (e.g. `3–5 business days`) |
| Price | The flat rate charged at checkout |
| Sort Order | Lower numbers appear first in the checkout list |
| Active | Only active methods appear at checkout — toggle off to hide without deleting |

3. Click **Save**

**Important:** You must have at least one active shipping method, or customers won't be able to complete checkout.

### Tips

- Create a `Free Shipping` method with price `0.00` if you offer free delivery
- Use sort order to control which option appears first (most customers pick the first option)
- Toggle a method inactive during holidays or if a carrier is unavailable

---

## 12. Managing Orders

Every completed checkout creates an order. You can view and manage all orders from the admin panel.

**How to get there:** Click **Orders** in the left nav under **Store**.

### The orders list

The list shows all orders with:
- Order ID (#)
- Customer name and email
- Status (colour-coded badge)
- Total
- Date ordered
- Shipped date (if set)

You can filter by status using the filter button at the top right.

### Order statuses

| Status | Meaning |
|---|---|
| Pending | Order placed, not yet processed |
| Processing | You're preparing the order |
| Shipped | Order has been sent to the customer |
| Cancelled | Order was cancelled |
| Refunded | Payment was refunded |

### Updating an order

Click an order ID to open it:

1. The top section shows the **editable fields**:
   - **Status** — change as the order progresses
   - **Shipped Date** — the date you shipped the order
   - **Required Date** — any deadline the customer requested

2. The bottom section shows the **Order Items** tab (read-only):
   - Product name, variant label (e.g. `M / Red`), unit price, quantity, and line total
   - Also shows the contact info and billing/shipping addresses

3. Click **Save** after changing the status or dates.

### Workflow for a typical order

1. New order arrives → status is **Pending**
2. You check stock, package the item → change status to **Processing**, save
3. You ship the parcel → change status to **Shipped**, enter the Shipped Date, save
4. Customer receives it → no further action needed

---

## 13. What Your Customers See

Your storefront (`yourstore.ecstores.ca`) is the public-facing shop. Here's how it works:

### Home page — Product catalogue

- All non-discontinued products are listed in a grid
- Customers can search by product name or filter by category
- Each product card shows: image, category, name, and price (with sale badge if on sale)
- A heart icon (♡) appears on each card — logged-in customers can click it to save products to their wishlist

### Product detail page

Clicking a product opens the detail page showing:
- Full-size image gallery (all uploaded images)
- Category breadcrumb navigation
- Product name and description
- If the product has variants: option buttons for each group (e.g. Size: S / M / L, Colour: Red / Blue)
- Price (updates live when a variant combination is selected)
- Stock status (In Stock / Out of Stock)
- Quantity selector and **Add to Cart** button
- Wishlist heart button

### Cart page (`/cart`)

- Lists all items with quantities, unit prices, and line totals
- Customers can increase/decrease quantity or remove items
- Shows order subtotal
- "Proceed to Checkout" button

### Checkout (4 steps)

**Step 1 — Contact & Billing:** Customer enters their name, email, phone, and billing address. If they're logged in, these are pre-filled from their profile.

**Step 2 — Shipping:** Customer selects from your active shipping methods. They can ship to a different address if needed.

**Step 3 — Review:** Customer sees the full summary — items, subtotal, shipping cost, and total — before committing.

**Step 4 — Payment:** Customer enters their card details (powered by Stripe). The payment is processed immediately. After a successful payment, they see a confirmation page with their order number and a "Payment Received" notice.

> **Stripe must be connected** for customers to reach Step 4 and complete payment. See [Section 5 — Connecting Stripe](#5-connecting-stripe-to-accept-payments).

### Header navigation

The header always shows:
- Your store name (links to home)
- Cart icon with item count badge
- If logged in: **My Account** link and **Log out** button
- If not logged in: **Sign in** link and **Register** button

---

## 14. Customer Accounts

Customers can create accounts on your storefront. This is entirely optional — guests can still complete checkout without an account.

### Benefits of having an account

- Checkout is pre-filled with their saved name, email, and address
- They can view their full order history
- They can save products to a wishlist

### What customers can do in their account

**Profile page (`/account`):**
- Update their name, email address
- Save a default address (used to pre-fill checkout)
- Change their password

**Order History (`/account/orders`):**
- See a paginated list of all orders they placed while logged in
- Each order shows: date, status, items, and total
- "Shipped [date]" appears once you mark an order as shipped in the admin

**Wishlist (`/account/wishlist`):**
- See all products they've saved by clicking the heart icon
- Click "View Product" to go directly to that product's page
- Remove items by clicking the heart again

### Note on guest orders

Orders placed without logging in (guest checkout) are still recorded in your admin panel — they just won't appear in that customer's account order history, because there's no account to link them to.

---

## 15. Quick Reference

### Pages your customers visit

| Page | URL |
|---|---|
| Product catalogue | `yourstore.ecstores.ca/` |
| Product detail | `yourstore.ecstores.ca/products/product-slug` |
| Cart | `yourstore.ecstores.ca/cart` |
| Checkout | `yourstore.ecstores.ca/checkout` |
| Sign in | `yourstore.ecstores.ca/login` |
| Register | `yourstore.ecstores.ca/register` |
| My Account | `yourstore.ecstores.ca/account` |
| Order History | `yourstore.ecstores.ca/account/orders` |
| Wishlist | `yourstore.ecstores.ca/account/wishlist` |

### Admin panel pages

| Page | URL |
|---|---|
| Dashboard | `yourstore.ecstores.ca/admin` |
| Products | `yourstore.ecstores.ca/admin/products` |
| Categories | `yourstore.ecstores.ca/admin/categories` |
| Suppliers | `yourstore.ecstores.ca/admin/suppliers` |
| Orders | `yourstore.ecstores.ca/admin/orders` |
| Shipping Methods | `yourstore.ecstores.ca/admin/shipping-methods` |
| Site Settings | `yourstore.ecstores.ca/admin/site-settings` |
| Branding Studio | `yourstore.ecstores.ca/admin/branding-studio` |
| Stripe Connect | `yourstore.ecstores.ca/admin/stripe-connect` |

### Common tasks at a glance

| Task | Where |
|---|---|
| Change your store name | Admin → Site Settings |
| Change store colours, fonts, or logo | Admin → Branding Studio |
| Connect Stripe to accept payments | Admin → Stripe Connect → Connect Stripe Account |
| Add a new product | Admin → Products → New Product |
| Upload product images | Admin → Products → edit product → Images section |
| Hide a product temporarily | Admin → Products → edit → check "Is Discontinued" → Save |
| Set up free shipping | Admin → Shipping Methods → New → name "Free Shipping", price 0.00 |
| Mark an order as shipped | Admin → Orders → click order → set status to "Shipped" + enter date → Save |
| Add a sale price | Admin → Products → edit → set Sale Price + check "On Sale" → Save |

---

*This guide will be updated as new features are added. For help or questions, contact Denis at denis.gallant@gmail.com.*