Core Pages

Category Page

Page Overview The category page provides a list of all items that belong to the category being viewed, which the customer can click on to see more detailed information. Filter options are also provided, which are a useful navigation tool to narrow your search. Here are some example categories: Skeletal Theme Country Theme Store Front Theme Atomic Theme Filter Products Product filters provide the ability to narrow down your searches, using the following options: Product specifics that are set up as part of your product data (e.g. colour, size, etc.). Sub-category Stock availability Price range Brand Filters naturally stack, which means you can use multiple filters at the same time (for example filtering by a category, and also a brand). The filters that display are directly related to the products on the category page being viewed. For example, if the category being viewed doesn't contain any items associated with the brand "Apple", then that brand won't appear as a filter option. Category Menu A full category menu is available for the user to find other products if they wish. When hovering over a top-level category, sub-categories will appear as a fly-out menu. Similarly, when hovering over sub-categories, sub-sub-categories will also be presented. Information Menu Some useful utility links are offered to the customer so that they can easily have any pressing questions answered. Breadcrumb The breadcrumb is a quick and easy way to identify where you are in the website's structure, in relation to the home page. For example, if viewing a top level category page, the following will show: Home / Category One If viewing a sub-category page, it'll be as below: Home / Category One / Sub Category One Page Header The page header is a clear way for the user to identify the current page being viewed. Product Thumbnail View Buttons We offer two product thumbnail views - gallery and list view - which can be alternated between using these two buttons. Information on the two layouts is below. Product Thumbnails/Listings The product thumbnails consist of the necessary information for each product. We have two unique views: Gallery View This layout allows 4 products per row, with the most important aspects of each product displayed to the customer - image, title, price, and call-to-action button. List View This design offers a much larger thumbnail for each product, and includes a short description for each. XX Products Found This lets the user know how many products belong to the category being viewed. Sorting Options A number of sorting options are available for the customer to change the order of the products on the page. These include: Most Popular Name SKU Lowest Price Highest Price Pagination In order to speed up page load times, we split the products for each category into different pages, which the user can access by using the pagination controls.

More Info
Product Page

Page Overview The product page provides in-depth information on the item, offering the ability to choose a variation and add the item to your shopping cart, in addition to a number of other functions. Page Examples Skeletal Theme Country Theme Store Front Theme Atomic Theme Product Images The main product image allows the user to see exactly what they're buying, with the ability to zoom into the image when hovering their mouse over it. The alternative images underneath provide some additional views of the product being sold. Clicking on an image will open it up in a popup, with the ability to scroll through the entire range. Product Title The large title identifies the product, and also acts as a page header. Social Share Plugin The social plugin allows customers to share the product to their various social networks, which takes advantage of free social marketing. Product Price This section lets the user know how the item costs. Stock Status The colour-specific stock status offers a quick visual way to check whether the item is available to buy. Product Variations Some products will consist of variations, for example a mobile phone may come in a number of different colours. If this is the case, a variations section will appear to enable the customer to choose their preferred product. Variations can be presented in the following ways, depending on how the specific is set to show in the system: A dropdown box. Text with the specific name (e.g. red, blue, etc.). Images Images with accompanying text. Radio buttons. Multilevel Pricing (Buy In Bulk) Table If you offer structured pricing for different quantities, the multilevel pricing table presents this information in a clear way. Product Options These allow you to offer additional options to the customer, with added cost if required. An example of an extra option would be extended warranty. Add To Cart Button & Quantity Field This is where the user can choose the number of items to buy, and easily add them to cart. Add To Wishlist Button If the customer wants to save the item for later, they can click "Add To Wishlist" and review their list in their account section. Shipping Calculator This feature provides a means to calculate shipping costs before deciding whether to purchase. The shipping costs in question are pulled from your shipping matrix setup in your cpanel. Using the calculator shows the following results, depending on how your matrix is set up: Shipping method name (e.g. "Standard Shipping"). Shipping method subtext (e.g. "Road delivery Australi wide"). Shipping price. An ETA for the delivery. Product Information This information is kept neatly in tabs, and includes the following by default: Description The description field allows you to educate your customer on the product itself. Warranty Many customers want to know warranty information before purchasing; this is where you enlighten them. Specifications The specifications tab include both text information that can be edited in the backend, and an automatically generated table based on values for the product, such as SKU, brand, shipping metrics, and much more. "We Also Recommend" Cross-sells This sections enables you to generate extra revenue by offering items that you feel may tickle the customer's fancy. The items shown must be manually added in the "cross-sells" section for each product in the cpanel. "More From This Category" Products This is an automatically generated list of products that are pulled from the same category as the item being viewed. It's useful for customers who might not be convinced on the product they're viewing, and are seeking an alternative. "Your Browsing History" Products The products on display here are those that the customer has already viewed; it provides a quick and easy way to get back to the items that you've previously taken a look at.

More Info
Checkout Page

Page Overview The checkout page is where you enter the necessary personal and payment information in order to complete the order. "Checkout With Paypal" Button If the customer would prefer to use Paypal, they can click on this button to be redirected to Paypal. "Returning Customer?" Login Customers who have already purchased from your store or registered an account can choose to login here, so that their personal information is autofilled once doing so. Step 1 - Billing Details This entire section is devoted to the customer's billing information. The fields with "required" next to them are mandatory in order to complete the checkout process. If a mandatory field is empty, the customer will be prompted with an error message to fill in the field. All fields that are part of this section go directly into the newly-created customer card once the checkout process is complete, and will be auto-populated in the checkout if the user logs in to purchase from items from the store. This information can also be edited by the user in their account section. Step 2 - Shipping Details At the top of this area, the user can choose to use their billing details for shipping, negating the need to fill the same info twice. They can also choose to fill out a different address (with the exact same fields in the "billing details" section being presented), or send each item in their cart to a unique address if required, by clicking the "multiple addresses" radio button. The "shipping options for [postcode]" section displays the shipping options available depending on the methods set up in your shipping matrix, each one being accompanied by a clickable radio button to make your choice. Once a selection is made, the "total shipping" and "order total" fields will refresh in the order summary section. The "delivery instructions" box offers a place to enter text for the delivery driver, for example "walk to rear of house and knock". The "save for future orders" box saves your delivery instructions to your account for the next time you order. If the customer is happy for the parcel to be left outside of the delivery address, the "Authority to leave parcel" checkbox can be set to "yes". A business who uses dropshipping methods will find the "send invoice with goods" option handy, as it'll leave a note on the order requesting that the invoice is sent with the order through the post. The "buying this for work?" field allows you to enter a PO number for the customer's own accounting purposes. Step 3 - Payment Details This area is where the customer chooses their preferred payment methods by either clicking on the image, or choosing from the dropdown menu. Here's a brief overview of the payment options in question: Paypal Express This redirects to Paypal; once logged in and their preferred billing and payment info is confirmed, the user is directed back to the checkout page, with the billing and shipping details auto-populated (or overwritten) based on their Paypal account information. The purchase can then be completed. BPAY, Money Order, Cheque & Direct Deposit Choosing and completing the checkout process using any of these payment methods will result in the necessary information being presented to the user on the payment confirmation page, so that they can pay the full amount for the order. American Express, Mastercard or VISA Opting to pay with a debit/credit card will result in the standard fields (such as card number, security code, etc.) being presented to the customer in order to complete the purchase. Redeem a Gift Voucher If the user has a gift voucher that they'd like to use, they can click on this section to enter their personal code to redeem. Agree To Terms All purchases can only be completed once the user has ticked on the "agree to terms" checkbox. "Confirm & Process Order" Button The final stage of the checkout process, which (providing all mandatory information is correctly completed) confirms the order and sends an invoice to the customer.

More Info