ECE Storefront Admin — User Guide

Your online shop: the catalogue you publish, how the site looks, how shoppers pay, and how their orders become invoices.

The storefront shares one catalogue, one stock ledger and one customer list with ECE Inventory. A product added here is the same product there; stock sold online comes off the same shelf. This admin covers what is specific to the web shop — appearance, publishing, payment gateways and web orders.

1. Getting started

Signing in

Open /admin on your storefront address and sign in with your Username and Password — the same staff account you use in ECE Inventory. Your session survives a browser restart, so you are not asked to sign in every morning.

Your role must hold the Ecommerce permission to reach this admin, and the Sales permission to create sales orders and invoices from it. An Admin has both. Roles are managed in ECE Inventory under User Management → Roles.

Your own account sits at the bottom of the sidebar: click it for Change password and Sign out. It is the same staff account as ECE Inventory, so a password changed here is changed for both apps. There is no user management in this admin — new staff and their roles are created in ECE Inventory.

What lives where

JobDo it in
Adding products, prices, categoriesEither app — same data
Deciding what appears on the website, and at what discountStorefront admin
Site design, pages, navbar, footer, payment gatewaysStorefront admin
Web orders → invoiceStorefront admin (or ECE Inventory)
Sales register, invoice printing, accounting, reportsECE Inventory
Purchases, stock, warehouses, duesECE Inventory

There is deliberately no sales list or invoice print here. Once an order is invoiced, the sale belongs to the inventory app's sales register — that is where you print, view or void it.

MenuEntryWhat it is for
DashboardSales and profit by month.
Sales ordersOrders placed on the website; confirm them and turn them into invoices.
ProductsNewCreate a product with variants, prices and images.
ListEvery product with its picture; search, edit, delete, and set Featured / New arrival in bulk.
CategoryCategories shoppers browse by.
TypeSerial/expiry rules and the tax class per type.
UnitUnits of measure and conversions.
DiscountsSet online discounts, singly or in bulk.
PublishingChoose which items appear on the website.
GroupsCurated product collections for the home page.
PaymentsMethodsEnable and configure payment gateways.
TransactionsEvery payment attempt, for tracing “I paid but the order says unpaid”.
Delivery settingsAreasDelivery zones and their charges.
Item costPer-item delivery charges.
PagesBuild content pages (Home, About, Policy) from sections.
NavbarThe top bar: logo, links, topbar, search, dark-mode toggle.
FooterAbout text, quick links, contact details, social links, copyright.
AppearanceTemplate, colours, favicon, currency, publish switch, shopper sign-in and phone country.
Contact formWhere enquiries are emailed and the mail server used.
MessagesEnquiries received; unread ones show a badge on the menu.

3. Dashboard

A monthly chart of sales and profit, so you can see the trend of the online channel at a glance. Detailed reporting lives in ECE Inventory.

4. Sales orders & selling

4.1 The order list

Every order a shopper places arrives here. Search by order number or customer, and open one to see its lines, delivery details and payment state. Orders move Draft → Confirmed → Partially fulfilled → Fulfilled, or Cancelled.

4.2 New sales order (by hand)

For phone or social-media orders. Fields: customer (or name and mobile for a guest), warehouse, item lines with quantity and unit price, Delivery area, Delivery address, Delivery cost and a Note. Choosing an area fills the cost from your Delivery settings; you can still override it.

No stock moves and nothing is posted to your accounts at order stage. That happens at invoicing.

4.3 Turning an order into a sale

Open a confirmed order and choose to invoice it. The full sale form opens with the order's lines pre-filled:

Saving deducts stock, marks the serials sold, awards or redeems points, posts the accounting entry, and returns you to the order list. Print the invoice from ECE Inventory.

5. Products

Same catalogue as ECE Inventory, presented for online selling. Product and item concepts are identical: a product is the general thing, an item is the exact variant that carries price, stock and images.

5.1 The product list

Products → List shows every product with its thumbnail, code and how many variants it holds. The catalogue is loaded once and then searched and paged in your browser, so the search box filters as you type and turning a page costs nothing; pick 20, 50 or 100 rows per page.

Above the table sit a search box and two filters, All categories and All types. Choosing a parent category brings back everything filed beneath it too. Like the search, both filter the catalogue already in your browser, so they apply the moment you pick one.

Tick one or more rows and an action bar appears above the table:

Row actions sit on each row, and deleting a single product asks for confirmation there too.

Publishing is deliberately not on this screen. Products → Publishing owns that switch, for variants as well as whole products, so only one screen ever decides what the website shows.

5.2 Product form

Products → New, or open a row from the list. You set the product's name, code, category, type, unit, brand, description and video link; the tax rate and price basis (whether your prices include tax); and then its variants with purchase price, sale price, wholesale price and price band. Every field means exactly what it does in ECE Inventory — see the Product chapter of that guide.

5.3 Images

Products → List → an item → Manage images. Upload several pictures per item and order them; the first is the one shoppers see in listings. Good photos are the single biggest lever on online conversion — use consistent framing and a plain background.

Every image field takes a web address as well as a file. Under each upload box there is an …or paste an image URL line: paste a full https://… address and the shop uses the picture where it already lives instead of storing a copy. It must be an absolute address — a path like /images/x.jpg is refused, because it would resolve against this server and show nothing. This works for the product's main image, an item's gallery, the navbar logo and the favicon, and a gallery may mix uploaded and hosted pictures.

5.4 Category, Type and Unit

Deleting a category, type, unit or group asks for confirmation first and spells out what the deletion takes with it — every product using that entry is affected, so these are not one-click deletes.

5.5 Discounts

Set the online discount for items. Filter by category, type or product, or search, then either set a discount on individual rows or use Discount all listed items by to apply one figure to everything currently listed — the fast way to run a category-wide sale. The discounted price is what shoppers see and pay; the original price is shown struck through.

Bulk discounting applies to every row matching the current filter. Check the filter before you apply, and clear the discount the same way when the sale ends.

5.6 Publishing

The gate between your catalogue and your website. Filter by category, type or product and switch items on or off. Unpublished items exist for in-shop selling but never appear online — use it for staff-only lines, out-of-season goods, or products whose photos are not ready.

Discounts, Publishing and Delivery settings → Item cost share one grid: filters on top, then a fixed-height table with a sticky header, so you can work down a long list without losing the column titles.

5.7 Groups

A Group is a named collection — “New arrivals”, “Eid offers”, “Best sellers”. Create the group, search products and add them, and order the members. Groups are what you place on the home page as a product row through Pages.

6. Payments

6.1 Methods

One card per payment method, each with:

FieldEffect
EnabledWhether the method is offered at checkout at all.
Name shown to shoppersThe label on the checkout page — use words your customers recognise.
Note at checkoutA short line under the option: instructions, fees, or expected delay.
Deposit accountWhich of your cash/bank accounts the money lands in. This is what makes the receipt post to the right account in your books, so set it for every method you enable.
Sandbox modeOn: the gateway's test environment — no real money moves. Turn it off before going live.

Gateway credentials differ by provider:

Check the crypto wallet address character by character. Funds sent to a wrong address cannot be recovered by anyone.

6.2 Transactions

Every payment attempt with its order number, method, amount, status and gateway reference. Search by order number or reference. This is the page to open when a shopper says “I paid but my order still shows unpaid” — it tells you whether the gateway ever confirmed the payment.

7. Delivery settings

These are the same rows the inventory app uses, so a change here changes both channels.

8. Pages

Your website's content, built from stacked sections rather than raw HTML. The list shows every page with its title; open one to edit. Deleting a page asks for confirmation, and if the delete is refused it says why instead of leaving the page silently listed.

Page settings

FieldEffect
TitleThe page heading and the label used in navigation.
Hide title on pageFor pages whose first section is already a banner with its own heading.
Show in navWhether the page gets an automatic navbar link.
SEO title / SEO descriptionWhat the browser tab, Google and social previews show. Leave the title blank and the page's own title is used, followed by your shop name; write your own and it is used exactly as typed, so include the shop name yourself. Write for a person, not a keyword list.
Padding top / bottomVertical breathing room around the page content.
SectionsThe content blocks — banners/carousels, text, product rows fed by a Group, category grids, FAQ, contact form. Add, reorder and configure each. A section image can be removed as well as replaced, and a product row's View all link carries that row's own filter through to the shop page.

Notes on individual section types

SectionWorth knowing
Product GridIts Show list offers Newest products, Featured products and every one of your Groups — so a hand-curated group can be laid out as a plain grid, not only as a carousel. Number of products caps how many are drawn.
Product Group CarouselA single scrolling row rather than a wrapping grid. The arrows page it one screenful at a time and grey out at each end; a phone or trackpad can swipe it directly.
TextThe editor's toolbar has a block-type list — Normal text and Heading 1 to 4 — and a font-size list. Headings now render at heading size on the website, not at body size, and the size you pick survives into the published page.
FAQRows open and close, with a chevron that turns to show it. They start open, so a shopper sees the answers without hunting for what is clickable.
Banner / HeroIts outline is drawn only when there is no background image, and it is drawn in a colour that stays visible in dark mode.
SettingEffect
Show in navbarMaster switch for the whole top bar.
LogoThe image at the top left; links back to the home page. Upload a new file to replace it, or use Remove to take it off — that one is confirmed first, because it deletes the stored file and the same logo prints on your invoices.
Company name / font sizeWhether the name is shown beside the logo, and how large.
AlignmentWhere the menu items sit — left, centre or right.
ItemsThe navbar links themselves, in order.
Show Shop linkAdds a Shop link right after Home, pointing at the full product listing. It needs its own switch because /shop is built in and has no page under Pages to tick Show in nav on. Off by default, so an existing site does not sprout a new link on its own.
Category buttonShows an all-categories dropdown — worth it once you have many categories.
Search iconWhether shoppers get product search in the bar.
Dark mode toggleLets shoppers switch the site's theme.
Thin topbarA slim strip above the navbar for a phone number or an offer line. It is shown on desktop only — on a phone it would eat the height the navbar and hero need, and the same details are in the footer.
SettingEffect
Show in footerMaster switch for the footer.
About textA short line about the shop, in the first footer column.
Quick links + how many to showThe link column; the count caps how many are listed.
ShopA column of shop/category links.
Contact — address, phone, emailPrinted in the contact column; also how shoppers reach you fastest.
Social linksFacebook, Instagram, X, YouTube, TikTok, LinkedIn, Messenger — each shown only if you supply a URL.
CopyrightThe bottom line. {year} and {company} are filled in automatically.

11. Appearance

SettingEffect
TemplateThe overall storefront layout. Switching changes structure and spacing site-wide; your content and colours are kept.
Colours — primary, secondary, accent, background, foregroundThe site palette. Primary is buttons and highlights; accent is links and small emphasis; background/foreground are the page and its text. Keep enough contrast between the last two or the site becomes hard to read.
FaviconThe little icon in the browser tab. Upload one or paste an image URL; it replaces the default ECE icon outright. Leave it empty and the ECE icon is used.
Currency — symbol, name, decimal placesThe symbol shown before every amount in this admin, the name used in the “amount in words” line on printed documents, and how many decimals amounts are shown with (0–4).
Storefront is publishedThe master on/off switch for the public site. Leave it off while you build, then switch it on to go live.
Google client IDEnables shopper sign-in with Google. Create a Web application OAuth client in the Google Cloud Console and paste its client ID here.
Mobile number countryThe country whose calling code is shown as a fixed prefix on the shopper signup form, and against which mobile numbers are validated.

Google sign-in is the only way shoppers can log in — there is no password, no OTP and no “forgot password”. Without a Google client ID, shoppers can browse and order as guests but cannot have accounts. And one country per shop for mobile numbers: it is what lets a shopper's number match the contact you already have in ECE Inventory instead of creating a duplicate.

Currency is one shop-wide setting shared with ECE Inventory, not a storefront-only preference — change it here and invoices, receipts and reports there change too. Screens already open pick up the new symbol without a reload. Editable number boxes, percentages, exchange rates and crypto amounts stay bare on purpose.

12. Contact form

SettingEffect
Email contact form submissionsOn: each enquiry is emailed as well as stored. Off: enquiries only appear under Messages.
RecipientsWho gets the email — several addresses separated by commas.
Sender name / sender addressWho the email appears to come from, e.g. “Your Store” <noreply@yourstore.com>.
SMTP host / Port / Use SSL-TLS / Sender passwordYour mail server. Port 587 for STARTTLS, 465 for SSL; leave SSL/TLS on for almost every provider. If your provider requires an app-specific password, use that rather than the mailbox password.

Send yourself a test enquiry from the website after changing these. If the mail never arrives, the enquiry is still safe under Messages.

13. Messages

Every contact-form enquiry: name, email, subject, message and date. Search across all of them, and open one to read and mark it read — the unread count on the sidebar badge clears as you do. Nothing is deleted, so old enquiries stay searchable.

14. The shopper's journey

Worth knowing, because it explains which settings a shopper actually feels.

  1. Browse — home page (your Pages sections and Groups), shop listing with category and brand filters, and a product page showing published items, images, discounted price and stock availability. A “View all” on a home-page product row carries that row's own filter across — a featured row lands on featured products, a group row on that group — and the shop page lists the active filters with a Reset link.
  2. Install it (optional) — the shop can be added to a phone's home screen and opens like an app, under your shop's own name and colours. It still needs a working connection every time: nothing is kept offline, because a stale price, stock figure or cart is worse than none.
  3. Favourites and cart — items are saved to a favourites list and a cart; both survive between visits for a signed-in shopper.
  4. Sign in (optional) — with Google. On first sign-in they complete a short profile including their mobile number, which links them to an existing contact of yours if it matches, so their loyalty points and history carry over.
  5. Checkout — delivery address, delivery area (which sets the charge), and a payment method from those you enabled.
  6. Pay — through the gateway, or on delivery if you offer it. The attempt is recorded under Payments → Transactions.
  7. Order placed — the order appears on your Sales orders page. Confirm it, then invoice it.
  8. Their account — order history, favourites, and a profile where they can update their name, address and mobile.

A shopper's mobile number is never verified by SMS. Take care before merging or trusting a claimed number if a loyalty balance is involved.

15. Common questions

I added a product but it is not on the website.

Check three things: the item is switched on under Products → Publishing, the storefront is published under Appearance, and the item has stock and a sale price.

A shopper paid but the order shows unpaid.

Open Payments → Transactions and search their order number. If the gateway never confirmed, the money has not reached you — ask them for the gateway reference. If it did confirm, record the payment when you invoice the order.

Where do I print the invoice?

In ECE Inventory, under Sales → List. This admin creates the sale; the inventory app owns the sales register and printing.

Shoppers cannot create an account.

A Google client ID is missing under Appearance. Google sign-in is the only account path — there is no password or OTP option.

The browser tab says “ECE Storefront”, or shows the ECE icon.

Both come from your own settings now. The tab text is the page's SEO title under Pages, or the page title followed by your shop name if you left it blank; the icon is the Favicon under Appearance. Set them and the ECE defaults are replaced.

A dialog opened faded, or the page showed through it.

Fixed — admin dialogs were being painted underneath the page on content-heavy screens such as the product list. Reload the admin if you are still on an old tab.

Some outlines and edges vanish in dark mode.

The category chips, the FAQ card and the hero outline were drawn in a fixed near-black that disappeared on a dark background; they take their colour from your theme now. If you find another spot that vanishes, report it — the rest of the storefront has not been converted yet.

Sign-in fails and I am sure the password is right.

Read the message. “Could not reach the server” means the admin never got as far as your password — the inventory API is down or unreachable, so wait and retry, or ask whoever runs the server. The screen also reports the real reason when the account itself is refused: an expired licence, no subscription to this app, or an inactive user.

Amounts show no currency symbol, or the wrong one.

Set it under Appearance → Currency. It is the same setting as ECE Inventory's General Settings, so it also fixes prints and reports there.

The site colours look wrong after I changed one thing.

Each of these pages saves only its own slice, so Appearance cannot overwrite Navbar or Footer. Re-check the specific page you edited — and the contrast between background and foreground.

Can I run a sale on a whole category?

Yes: Products → Discounts, filter by that category, then use Discount all listed items by. Reverse it the same way when the sale ends.