Child pages
  • Browsing the front-office

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Browsing the front-office

A shop's The front-office is what customers constantly see when browsing ityour shop. It is the interface, the products, the pictures, the descriptiondescriptions, the whole transaction purchase process, etc.

As a customer, this is all you will see of a shop during your browsing and buying experience, from start to finish.

...

Note that we here are describing the default theme with its default settings and modules. Activating other modules, or obviously using another theme, can dramatically change the shopping experience.

...

  • The shop logo. A click on the logo brings the customer back to the front page, from anywhere in the shop. The default logo reads "YourLogoHere": this is an incentive for you to use your own logo rather than keeping the PrestaShop one (as was often the case with the previous default theme).
  • 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.
  • Contact and Sitemap. These two links take the customer to specific pages, out of the shopping context: contacting the shop administrators, or viewing a complete list of all the pages that are publicly accessible.
  • Bookmark. This is not a link per se, but a JavaScript action: when clicked, it will trigger the customer browser to add the shop as a bookmark. The customer can then choose to complete the action or not.
  • The currency selector. 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.
  • Cart: (empty). A quick reminder of the current status of the customer's cart. 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.
  • Welcome. A simple welcome message. When the customer is logged in, it becomes "Welcome Firstname", with the customer's first name being a link to the his or her customer account.
  • Log in. An invitation for the customer to connect to the shop by entering his or her credentials, or to create an account. Once connected, the customers is taken to the "My account" page.
    If connected, this will display "Log out".

...

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. The customer can click on the text to access the shopping cart summary, from which the check out checkout process can be started.

The block's interface changes when the customer puts its mouse cursor over the cart: it opens to display exactly the name of each added product. Each product lines features the quantity, the combination (if any), and the price. The customer can also directly remove unwanted product with a click of the mouse.

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 check out checkout process can be started.

The footer

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

  • A list of the shop's categories
  • (if connected) Links the The "My account" block, containing links to the main pages of the user's profile (or the authentication page):
    • My orders. All past and currently processing orders.
    • My 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 info. First name, last name, e-mail address, home address, phone number, date of birth: all the necessary information about a customer.
    • My vouchers. All coupons code that have not yet been used.
    • My favorite products. The
    "Informations
    • customers can mark products as favorite, for later purchase. They are stored here.
  • The "Information" block, containing:
    **Three links to products lists:
      • Specials: all . All the current promotions.
      • New products: recently . Recently added items.
      • Top sellers: most . Most popular items.
    • Four links to informational pages:
      • Our stores
      • Contact us
      • Terms and Conditions
      • About us
  • The "Follow Us" block, containing links to your shop's Facebook and Twitter accounts, and a link to your CMS's RSS feed.
  • The "Contact Us" block, containing the address, phone number and e-mail address of the shopyour business.

Note that all this content can be changed by the shop owner.

...

The default theme's left column stays primarily static, as it mainly serves as a handy placeholder for navigation and secondary links:.

Tags block

The shop owner can indicate a set of tags for each product. A tag is a non-hierarchical keyword, also described as metadata: it is not displayed on the product page as it does not bring any useful information, but it can prove very useful when building thematic lists – such as a tag-cloud, where the most common tags are written in a bigger font than the rarer ones.

...

"Viewed Products" block

Only displayed when the customers customer has viewed at least one product during the current session.

This block serves as a reminder of the products previously took interest in, and gives a shortcut back to these if he wants to pick them in the end.

"My account" block

Only displayed when the customer is logged in.

Image Removed

Once the customer is logged in, the "My account" block appears in the left column. Its sole purpose is to give the customer quick access to all his or her personal pages:

  • My orders. All past and currently processing orders.
  • My 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 info. First name, last name, e-mail address, home address, phone number, date of birth: all the necessary information about a customer.
  • My vouchers. All coupons code that have not yet been used.
  • My favorite products. The customers can mark products as favorite, for later purchase. They are stored here.
  • My alerts. The customer can subscribes to many mail alerts, and view/edit them from this page.

This block is a replication of the content of the "My account" page, which can be accessed from the eponymous link at the right of the header.

Suppliers block

Customers can choose to display all the products from a single supplier, regardless of their types or prices.

...

Customers can choose to display all the products from a single manufacturer, regardless of their types or prices.

...

CMS block

This is where PrestaShop lists the default static pages, as created by the shop owner: delivery information, legal notices, T&C, etc. They are not selling points, but their content is important enough that it warrants being always available.

...

By default, this block features a simple image with a link to PrestaShop's official website. But you You can change the settings of this block to turn this into an ad for a friend's website or another shop.

...

The default front page gives the customer a broad overview of the shop and its possibilities. An image slider servers serves as an introduction to the shop.

...

While this is not the case by default, you can choose to have the category image replaced by an image map. A category can feature an unlimited number of image maps, which you the visitor can scroll through with the tool below it.

An image map is simply an image which has links available for some of its areas. A "+" symbol is placed upon the products which are linked from that imageareas which have links. The image map can feature as many links as necessary.

...

  • Create a new account.
  • Log in to an existing account.

The first step for a new customer to create an account is to enter his or her e-mail address in the form and validate. This will bring up the account creation page itself. Two blocks of information are necessary to fill in order to get an account:

...

  1. (if the visitor is not logged in) Display the The authentication screen, where the visitor can either go to the account creation page, or log in.
  2. The delivery address page. If the user account has no registered address, the customer is directly taken to the address creation form.
    Note

    Two addresses are necessary for an order:

    • The delivery address, where the order should be sent.
    • The billing address, which should be the one that is tied to the payment method.

    If the customer needs to have the order billed to an address other than the delivery one, he or she can deselect the "Use the delivery address as the billing address" box and either select an address from the currently registered ones, or create a new one.

    If an address turns out to be wrong, the customer can use the "Update" link to correct it.

  3. The shipping page.

    This is where the customer can choose from different shipping- and packaging-related options:
    • Agreeing to the shop's terms of service is a requirement.
    • Depending on what the shop can offer, the customer may be able to choose recycled packaging and gift-wrapping (with an optional gift note)
    • The customer MUST choose a carrier in order to reach the next step.
  4. The payment page.

    The customer can choose many payment options, depending on what the shop owner has set up. The customer clicks on the chosen method and depending on the method, is either sent over to the chosen third-party handler or continues to one of PrestaShop's pages where he or she can enter the needed details, such as a validation before displaying check or bank wire information.
    Note

    Check and bank wire are installed by default, but PrestaShop makes it easy to offer payment through PayPal, Google Checkout or other 3rd party providers. See the modules installed by default in PrestaShop's back-office, or check the Addons marketplace for even more modules: http://addons.prestashop.com/.

  5. Once the customer has validated everything, the summary page is displayed.

    It begins with "Your order on (name of the shop) is complete". Depending on the chosen method of payment, some final information chould should be provided to the customer, along with a notification that a confirmation e-mail has been sent and a link to the customer support page. The customer must click on the "I confirm my order" button in order to have it validated

...