Transcript
What a shopper sees: browsing, the cart, checkout with destination tax, paying, and the order page.
0:00 Introduction
In this episode we shop the online store as a customer would: browse, choose a product, fill the cart, check out, and pay.
0:07 Browsing
This is the home page of the store. The menu is at the top, with search and the cart on the right, and the collections are further down.
Scroll down to the collections, and open Outdoors and cycling.
The collection lists its products with their prices. A product that cannot be bought is marked Sold out, and the Sort by menu changes the order. Open the Packable Rain Jacket.
0:31 A product
The product page has the picture, the price, and the choices. This jacket comes in sizes and colours. Options we cannot sell are crossed out.
Under the button, the page tells the shopper which stores offer pickup, and how long an order usually takes to be ready. Press Add to cart.
0:48 The cart
The cart shows the jacket, the quantity, and the subtotal. Shipping and taxes are worked out at checkout. We want a gift too, so press Continue shopping.
Go back to the home page from the menu, open the Gifts collection, and then the Lighthouse Snow Globe.
Add it to the cart. The cart now has two items.
1:10 Checkout
Press Check out. The checkout page is simple and has your logo on it. First the contact details, an email, and an optional phone number.
Delivery is either Ship to me, or Pick up in store at one of the stores that offer it. We will have it shipped. Then the shipping address, in Boston, Massachusetts.
Press Update totals. The summary on the right now shows the subtotal, the shipping, and the tax for this address.
Standard shipping is free, because the order is over one hundred dollars. Massachusetts sales tax is added, because the store is registered there and the shopper is in Massachusetts.
The shipping methods are listed under the address, with their price and delivery time. Below them, a shopper can enter a discount code, or a VAT number for a business purchase.
1:57 Payment
Press Continue to payment. The order is placed, and its stock is reserved, while the shopper pays.
This practice store uses the simulated payment page, which says that no card is charged. A real store shows the card form from Stripe here. The page offers three outcomes. First, let us decline the card.
The page says the card was declined, and the shopper can try again. This time, press Pay.
2:23 The order page
The order page says thank you, with the order number and the email address. It lists the items, the shipping, the tax and the total, and the shopper is told that a confirmation was sent.
The order is placed. In the next episode we see it from the other side, in the back office, and fulfil it.