Compass theme

Edition: CS-Cart & Multi-Vendor · Latest version: 1.0.1 · Compatible with: CS-Cart & Multi-Vendor 4.17.2 – 4.21.x, PHP 7.4 – 8.3 · Changelog: view

Compass is a storefront theme for stores whose shoppers know their need but not the product: supplements and wellness, personal care, pet food and pet care, coffee and tea, skincare, baby care and any store with a “find the right product” question. Instead of a menu bar and a boxed banner, the homepage is a consultation: a question, answers placed around a compass dial whose needle turns to the chosen answer, and a column of live matches that re-sorts after every answer.

What you get

• The Compass theme, a child of the standard Responsive theme, so every add-on keeps working.
• Four styles:
  • Sage (default): warm paper with a fine grain, deep teal, a peach highlighter and a halftone shadow behind the dial.
  • Clinic: white, navy and mint for pharmacies and clinics; straight type, lettered answers (A, B, C), underline highlights and body text with at least 7:1 contrast.
  • Pet: biscuit paper, conker brown and orange with a teal highlighter; fully casual type, pill-shaped answers with thick outlines and a dotted dial.
  • Roast (dark): espresso, cream and copper for coffee and tea; a double copper ring like a scale and outlined answers.
• Header: your logo, a long ask field (“Tell us what you need…”: the store search), an Advisers link, your account and a Basket button with the number of items; underneath, your main menu as a sentence of goals: “Help me sleep better · more energy · stay well · … or browse A-Z”.
• The consultation (homepage): route dots, the question in big casual type with a highlighter, the compass dial with up to eight answers and a needle, and the live matches next to it (“7 matches so far”). After the last answer the matches show as Best fit (every answer) and Good fit (all but the last answer), with “your route” and a link to every match in your store (the category page with the filters already set).
• Quiz engine: you write the questions as plain text in the block (see Usage); answers point to your own product features and categories by name. Questions can depend on earlier answers. Without JavaScript the quiz still works as a form.
• Match cards everywhere: a round image lens, “why it fits” ticks from your product features, rating, the price per unit (“$0.21 / capsule”) and the add button.
• Goal index: your categories as a list of goals in plain words, each with three round product images.
• Side by side, in plain words: a comparison table of three products (their features, price per unit, rating, add buttons) next to an Ask an adviser card.
• Field notes (blog), What people tell us (store reviews), the newsletter and a footer that opens with “Not sure? Ask us anything.”
• Goal pages (categories): the category name in big type with a highlighter, the first paragraph of its description, Narrow it down chips for the subcategories and a card that opens the questions; product filters are shown as questions with answer chips.
• Product pages: the product in a round lens with a price-per-unit badge, an Is this right for me? checklist (good for, format, diet, caffeine, when, not for), the price per unit under the price and Compared with two alternatives from the same category.
• Phones: the questions first with answers two by two, a floating “Tell us what you need…” bar with the basket, a sticky buy bar, a swipe gallery and a filter sheet.
• Installs with complete demo content: the store looks finished right after activation, quiz included.
• Self-hosted font (Recursive, SIL Open Font License): one variable family for headlines, text and prices; no external font requests.

Compatibility

• CS-Cart, CS-Cart Ultimate, Multi-Vendor and Multi-Vendor Ultimate 4.17.2 – 4.21.x (tested on 4.17.2 and 4.21.2).
• PHP 7.2.5 to 8.3, depending on your CS-Cart version.
• Works with the full page cache of 4.21: the quiz block holds no visitor data and the matches load in the browser.

Licence

Compass uses a domain-bound licence like every Kavio Labs product. Without a valid licence (after the 14-day period of a new installation, or 14 days after the licence server became unreachable) the storefront shows the standard Responsive look instead of the Compass design; cart, checkout and orders keep working and visitors see no message. See Configuration.

Next steps

• Installation
• Configuration
• Usage: the quiz, goal pages, prices per unit, the fit checklist
• Developer notes
• FAQ