The shop visitor experience

This page describes the shop visitor experience. Many aspects of this experience can be customised through the shop management panel.

Browsing for products

Visitors start by browsing for products. They can do this using the category and product pages generated from the information you enter in the shop management panel. In addition to the generated pages, you can use the product details and category listing components to create custom category and product pages.

Once viewing a product, the visitor will see the product details and will be able to add the product to their basket by clicking Add to basket, as shown in figure 1 (provided the product is available).

Figure 1. an example product

The basket

Wherever the visitor is on your site, they will be able to see the current state of their basket using the basket summary, as shown in figure 2, which is usually near the top-right corner of the site.

Figure 2. the basket summary

The visitor is taken to the basket page whenever they add a product to their basket or click View basket in the basket summary. The basket page shows the current basket contents and lets the visitor update the basket and check delivery prices before checking out.

Figure 3. the basket contents

Checking out

After clicking Checkout on the basket page, the visitor starts the checkout process. The first step is to enter their e-mail address, as shown in figure 4.

Figure 4. the e-mail address form in the checkout

The visitor is given the option to create an account during the checkout process, but is also able to check out as a guest (without setting up an account). If the visitor has previously created an account they can check the Yes checkbox and enter their password in the field that appears, so that they do not need to enter their contact details again.

If the visitor does not log in to a previously created account, they are taken to the contact details form, as shown in figure 5.

Figure 5. the contact details form in the checkout

The visitor enters their contact details, and has the option to create an account.

Delivery and billing addresses

The next step is for the visitor to enter their delivery and billing addresses, as shown in figure 6. If they have logged in to a previously created account they will be able to choose from previous addresses.

Figure 6. the address forms in the checkout

Delivery and payment methods

The next step is to select from the delivery and payment options and to enter any comments, as shown in figure 7.

Figure 7. the delivery, payment, and comments forms in the checkout

If there is only one delivery or payment option then that section of the page is not shown. If the shop has discounts set up then a form to enter discount codes is also shown.

Confirming the order

The visitor is then shown a summary of the order so that they can confirm the details entered. If they have selected an offline payment option, the order can be confirmed immediately. If they have selected another payment method (such as PayPal), they will be taken to the payment pages, and the order will be confirmed after the site is notified of a successful payment.

After the order is confirmed an e-mail is sent to the visitor, and a copy of the e-mail is sent to a notification e-mail address of your choosing. The order will also shown on the orders page in the shop management panel.