Documentation

Table of Content

Store Design

This guide is intended to be used as an introduction to the StoreMantis default store front. The store front reveals how the customer views and interacts with the store.

The default theme

StoreMantis comes with a default theme after a fresh installation:

The products seen above are included as sample data with the StoreMantis installation. These products can easily be removed and replaced with the shop's products later.

This guide will cover the basics of browsing the store front with the default theme. You can find an ever expanding list of available themes at the StoreMantis Extension Directory.

Navigating the shop

The StoreMantis default theme makes navigating a shop's products easily accessible to its customers.

Anatomy of the home page

The home page is arguably the most important page in the shop, in terms of presentation. In most cases, this will be the first page that a customer interacts with (especially if they are directed to the store site from a search engine). The shop's homepage needs to be user-friendly, while at the same time highlighting the shop's products.

The first step in becoming familiar with the store front is understanding the anatomy of the StoreMantis default homepage.

The top bar

The header will be displayed at the top of the page, on every page of the store; not just the home page.

The top menu has the following navigation options:

The background and font colour of the top bar can be changed by using the colour picker tool.

The header

The top menu category displays both the logo and the top parent categories of products. See Categories for more information on how to create and assign product categories.

Clicking on the store logo will direct the customer back to the home page of the store.

Like the header, the top menu will be displayed on every page. When the customer's mouse is dragged over a category, a drop down menu will display the sub-categories for that parent category.

When a parent category is clicked, the customer will be directed to the category page, which displays all the products within that category.

Just like the top bar, the background and font colour of the header can be changed by using the colour picker tool.

Slideshow

The slideshow displays several product banners of your choice by alternating the images in a slideshow. After a certain amount of time, one banner will shift to the the next banner. Banners in this slideshow are useful for highlighting certain products to be easily accessible by the customer. When the banner is clicked on, the customer will be directed to the product on the banner's page.

Unlike the top menu and header, the slideshow in the StoreMantis default can only be viewed on the home page in this position.

As much as ten slides can be displayed on the homepage slideshow. Each slide displays the top text, main text, button text, button link and the slide image.

Ads

The Ads can be displayed on the homepage of your store. It displays the advertisement of products or categories to the customers and can be linked to the specific product or category you want the customer to visit.

Special Message

A special message can be displayed beneath the adverts on the homepage.

The background and text color can also be changed.

Lattest Products

The 'Lattest Products' section displays your store's new products which you have been added. This section contains the product image, name, category and price and a link to the product details page when clicked by customers as specified when uploading products.

You can add products to the lattest products section by entering the product ids of the items you wish to display.

Paralax Slider

Typically the paralax slider could be used for News and Announcements. The paralax slider can be displayed within the homepage.

As much as five slides can be displayed on the paralax slider. Each slide displays the title, main text, button text, button link and the slide image.

Featured Products

The featured products displays the procduct you want to be displayed. This section comes with an automatic slide show. For you to enable the slider you only need to add more than three products and you will see them slide on the homepage. Displayed in the featured products section is the product image, name, category and price.

You can add products to the featured products section by entering the product ids of the items you wish to display.

Best Sellers

The Best sellers section is just beside the Featured products section. Products which have made the best sales are displayed here. Unlike the Featured products section, the Best Sellers section does not come with a slide show. Thus you can only display three products.

You can add products to the best sellers section by entering the product ids of the items you wish to display.

Trendy products are displayed in this section. Displayed along with the product picture is the product name, category and price of the product.

You can add products to the trends section by entering the product ids of the items you wish to display.

HTML Advanced

You can write any HTML code in this section. It appears beneath all the homepage elements.

The footer is located at the bottom of every page, not just the Home Page. This block of miscellaneous links is useful in sorting relevant pages for the customer that may not logically sort anywhere else.

The organizational scheme of the footer can be divided into the following sections:

Product pages

The StoreMantis default product page will follow the structural format seen below (minus header/top menu/footer).

The product page can be divided into the following sections:

Shopping Cart page

Once a customer adds a product to the cart, they can access the shopping cart in the header under "Shopping Cart".

The shopping cart gives an overview of the product selected by including the categories "Image", "Product Name", "Model", "Quantity", "Unit Price", and "Total". The customer has an option to add a coupon code or gift voucher, or estimate shipping & taxes, before heading to the checkout. The "Continue Shopping" button links back to the homepage.

Creating an account

Before a customer can continue checking out a product from the shopping cart, the customer needs to select either guest checkout or log into their account. The guest checkout doesn't require log-in details. Returning customers may want to make an account with the store.

There are a few ways a customer can make an account:

  1. Checkout



    Step 1 of the check out process allows the user to make an account before continuing with payment. Selecting "Register Account" will change Step 2 of checkout from Billing to Account & Billing details. Account & Billing asks for the same personal details as Billing, except that it asks for the user to create a password for their account. After Step 2 is completed, the customer may continue with the checkout process.

  2. Header- "create an account"



    Clicking the "create an account" in the header will direct the customer to the "Register an Account" page. The same personal details included in the checkout will need to be filled in here.

  3. Header- "My Account"



    Clicking "My Account" in the header will direct the customer to the "Account Login" page. This page gives the customer an option to log in if they already have an account, or create a new account. In the "New Customer" section the customer can click "Continue" under Register Account to be directed to the "Register an Account" page.

Checkout

Once a product has been added to the cart, the customer can continue to the checkout to make their product purchase. The Checkout page can be accessed in the header section of every page (found under the search box). Customer checkout using StoreMantis is a simple process that can be completed in 6 steps.

Step 1: Checkout options

The customer can log into or register their account (as explained above), or select guest checkout.

Step 2: Billing details

Personal details including "First Name", "Last Name", "E-mail", and "Telephone" are filled into a form. It also requires the customer's address details.

Step 3: Delivery details

In Billing Details, the user can check a box to indicate that the delivery details and billing details are the same. This will cause it to skip over this step to Delivery Method. If the delivery etails are different from the billing details the customer can enter this information in a form in this section.

Step 4: Delivery method

A method of shipping is selected here. A comment box is added for the customer to add comments about their order.

Step 5: Payment method

The customer selects their method of payment here and may add comments in the comment box.

Step 6: Confirm order

In this last step, the customer will see an overview of their purchase; including the product description, quantity, and price (with tax & shipping).

Store front customization using the admin dashboard

All of the features listed above can be customized to some degree in the admin panel. The administrator can change the position of certain products, disable categories, edit prices and descriptions, upload banners, etc. There is much work that can be done in the StoreMantis admin to establish the shop's brand.