Table of content

Browsing the front

...

office

The front - office is what customers constantly see when browsing your shop. It is the interface, the products, the pictures, the descriptions, the whole purchase process, etc.

...

As a shop owner, you should know your front - office like the back of your hand, not only because you owe it to yourself to know your shop inside and out, but also because you need to understand what your customers face, the number of pages and clicks they go through during a typical buying sessions, where they might get stuck and how to help them out, etc.

The default theme

PrestaShop comes with a default theme, which uses shades of gray on a white white on light grey background. This simple design is intentional, in order to be adaptable to just about any line of business: cars, photographs, antiques, or anything at all! It was designed to be easy to browse, ergonomic, standard-compliant, and adapted to all screen sizes and devices. It is complete, has been heavily tested by thousands of shops, and has proven its value. 

If you installed PrestaShop with its sample data, you will see clothing products.

While the shop owner can change the front - office theme at any time, thanks to the wealth of themes that are available on the PrestaShop Addons website (http://addons.prestashop.com/), we will base this chapter on the default theme only.

...

The header is a thin bar of content, accessible from any of the front - office pages.

It contains several essential tools and links, which apply to the whole shop and is seperated in two parts.

A thin container with:

• • A
top banner, presenting a 70% discount. The image and link can be completely customized through the Banner Block module.A thin container for the shop's phone number, along with:A link to the
• • link to the contact page.
  • The language (if more than one language is available). The customer can choose the language in which the shop should display texts.
  • The currency selectors (if more than one currency is available). The customer can choose the currency in which the shop should display prices. This is great in order to compare prices with other international shops.
  • A link to the
contact page
• • sign-up page. When the customer is logged in, it displays his first name and last name as a link to the customer's account.

    Once connected, the customers is taken to the "

My

• • Your account" page, and a "Sign out" link appears.

  • Cart (0). A quick reminder of the current status of the customer's cart (by default it is "(0)" for empty). Sometimes customers select items while browsing and forget about them after a few pages. It is therefore essential to give them a way to keep these products in mind.

A larger container with:

• The shop logo. A click on the logo brings the customer back to the front pagehomepage, from anywhere in the shop. The default logo reads "YourLogo"Classic" (after the default theme's name): this is an incentive for you to use your own logo rather than keeping the default one (as was often the case with the previous default themes).
• The menu. By default, it displays the "Women" category, and its subcategories when you mouse hover it. To update the menu with your own categories, you should configure the "Main menu" module.
• The search engine. Many customers prefer to look for a specific item through the search engine rather than browsing through categories after categories of products. On some online shop, this is even the only way to browser the site's content for most customers. Cart: (empty). A quick reminder of the current status of the customer's cart (by default it is "(empty)"). Sometimes customers select items while browsing and forget about them after a few pages. It is therefore essential to give them a way to keep these products in mind.This is the module "Search bar".

The header hardly ever changes throughout the whole buying experience.

...

The header's essential part is the cart. By default, it is folded in order to only show the number of products it currently contains (if any). The customer can click on the text to access the shopping cart summary, from which the checkout process can be started.

The

...

The bottom of the block adds the shipping costs and the total price of the order, along with a "Check out" button leading to the shopping cart summary, from which the checkout process can be started.

The footer

The footer begins with a short container which presents two things:

• An "Enter your e-mailA "Get our latest news and special sales" form, in order for the customer to subscribe to your newsletter. Customers can register to your shop's newsletter directly using this form. Afterwards, the newsletter itself is entirely managed by you; PrestaShop does not handle the transmission of e-mails emails to the customers. The "Newsletter" module enables you to generate a .CSV file of all the registered customers and their e-mails, and you should be able to import that CSV file in any e-mailing emailing system. A "Follow us" section, from which the customer can reach your Facebook page, your Twitter account, your RSS feed or your Google+ pageThe form is handled by the "Newsletter subscription" module.

The footer gives access to pages that could be useful to your users.

• The "CategoriesProducts" block lists the various product categories on your store. It is a useful shortcut to your products.The "Information" block contains:
  
  • Three links to products lists:
    • Specials. All the current promotions.
    • New products. Recently added items.
    • Top sellers. Most popular items.
    Five
• The "Our company" block links to informational pages:
  • Our stores
  Contact us
  • • Delivery
    • Legal notice
    • Terms and Conditions of use
    • About us
    • Secure payment
    • Contact us
    • Sitemap, which lists all the pages on your store.
    • Stores
• The "My Your account" block contains links to the main pages of the user's profile (or the authentication page):
• My orders. All past and currently processing orders.
My credit . The title "Your account" is also a link to the customer account.
• Addresses. A customer can add multiple addresses for different delivery options.
  
• Credit slips. Received when an order has been canceled. Credit slips can be used for any future order.
• My addresses. A customer can add multiple addresses for different delivery options.
• My personal Orders. All past and currently processing orders.
• Personal info. First name, last name, e-mail address, home address, phone number, date of birth: all the necessary information about a customer.
• My vouchersVouchers. All coupons code that have not yet been used (if there are any).My favorite products.
• The customers can mark products as favorite, for later purchase (if there are any).The "Store information" block contains the address, phone number and e-mail address of your business.

Note that all this content can be changed by the shop owner from within the back - office, either through preference settings or through module configuration.

...

The default theme's left column only appears in a category page, when activated from the back - office's. It mainly serves as a handy placeholder for navigation and tools.

...