The Imposters Demo Store

Now let's look at a store that uses one of the other standard themes, New Standard, but has been customized using the theme settings. I created a demonstration store called "imposters" that sells poster prints of some of my photos. You're going to see me build this store throughout the rest of this guide. Apart from preparing the product images, all I did with the design was change a few settings in the New Standard theme.


I want to use this demonstration store to illustrate the key elements that make up an online store. That way, when you go to look at the hundreds of themes available to you, you'll be able to see how these key elements are done in each theme. That should help you find your ideal theme. Let's open up the imposters store and take a look.



The page header

Let's start by looking at the top of the page, or the page header, as it is often called. This part of the page is shown on every page of the store.


Store name or logo

Every online store has a name. Many stores have a logo. Shopify gives you the option of using either the name in text or inserting a logo. In the imposters store, I chose to use a logo, hopefully to good effect!


Store navigation

Every online store, and indeed website, also needs a good navigation so that visitors can move around it quickly and easily. In the imposters store, the navigation is to the right of the logo and includes links to "Home", "Catalog", "Blog" and "About Us". You'll notice that if you put the mouse over the link "Catalog", a menu will appear with links to some other pages. In your store, you will be able to customize, exactly as you like, what appears in the navigation.


Cart and checkout

A shopping cart and secure checkout system are essential to an online store. With the shopping cart, the visitor can choose the products they would like to purchase. With the secure checkout system, they can confidently and securely pay for their order. When a visitor browses your store, it is practical for them to be able to easily get to their cart to see what products they have in it. On the imposters store, as on all stores using the New Standard theme, the visitor will find how many items they have in their cart and their cart's running total at the top right of the page. Clicking on either of these, or the Check out link, will show them the detail of their cart.


Search

For most online stores, particularly those with quite a few products, the ability to search the store is very important. If you've ever used Amazon.com for example, you've probably used their excellent search. Shopify provides an easy to use search for your store. On the New Standard theme, there is a simple search box at the top of the page with a button to the right which activates the search.



The slideshow

Beneath the page header on the imposters store, you'll find a slideshow (or carousel) of some of the top posters. A slideshow can be an attractive way to introduce your products to your visitors. With the New Standard theme, you can also place a title and caption on each slide. I didn't use this as I didn't want to distract from the image of the posters.


The product slider

Below the slideshow there's what's called a product slider - it features a number of posters from a collection I chose. You can only see three on the screen at anytime but if you click on the arrow to the right of the third poster, it'll slide over the next three posters.
For each product, there's a product image, the name of the product, the price and a Buy button. You can also see that the "Jumping Goat Poster" is on sale - if you place the mouse over it, you'll see a sale tag that highlights the product as on sale.


The page footer

At the bottom of the page is what is called the page footer. This part of the page is included on every page in the store. From left to right, top to bottom, the imposters store has the following in the footer:


About blurb:

A short blurb describing the store.


Social media icons:

These little icons just below the about blurb link through to the imposters store's presence on Twitter, Facebook, Pinterest, etc. These so-called "Social media sites" have enjoyed explosive growth in the last few years. Pinterest, the new kid on the block, is now the third-largest source of referral traffic on the Internet and motivates more online purchases than Facebook. Being present on the social media sites is becoming an essential part of business online.


Email newsletter sign up:

On the far right is a simple form for signing up for an email newsletter - in this case for the "Shopify & You" newsletter.



Footer navigation:

At the top of the page, we saw the main store navigation. Here on the left-hand side of the footer, we can see the footer navigation. Imposters just links to "Search" and "About Us" but this could be expanded to include links to more customer service information or perhaps some of the poster collections. On your store, you can customize the links that appear here in the Links section of your admin.


Copyright information:

Underneath the footer navigation is the copyright information for the store. Shopify will insert the year and the name of your shop automatically.


Payment methods:

At the bottom of the page footer is a set of badges for different payment methods accepted at imposters. You can't actually buy from imposters but you get the idea. Some visitors to your store will want to pay using a specific method, Paypal for example. For them, it can be very reassuring to see the Paypal badge. For other visitors, their preference might be to pay using American Express. Showing the payment methods here reassures visitors. It also associates your store and brand, with the trust linked to brands like Visa, Paypal, etc.



Other pages on the imposters store

The Catalog And Other Collections

Using links in the navigation or on other parts of the page, we can click through to the other parts of the imposters store. Clicking on "Catalog" in the navigation brings us through to a full listing of products being sold in this store. Notice that although we have changed page in the demo store, the page header and footer have remained the same. These elements will remain in place on all pages on the site, apart from the checkout pages.


Imposters only has a small number of products and they all fit on one page. This is the collection of all products. I have also created some other collections - you can access them through the menu that appears when you put the mouse over "Catalog" in the navigation. If I add more products then I may need to create more collections and adjust the store navigation to include them.


The Product Pages

Next let's click on a product image or the name of a product to find out more about that particular product. The page that opens up is called a product page. For a visitor, this page should be able to give them all the detail necessary to purchase.


I clicked on the "'Oh the trees' Poster" as you can see in the screenshot. The product page shows me all the images for the product - one main one and several smaller images (often called thumbnail images). Clicking on one of the thumbnail images will replace the main image with the one you clicked on. Also clicking on the main image will open up a lightbox where you can see an even larger version of the image. It's easier to see than understand reading - try it yourself!

Product images are very important for online stores. In the world of physical shops, you can pick up the product, turn it around, open it up, look underneath, try it on and ask your girlfriend what she thinks. In an online store, a visitor is much more limited. To encourage sales, it is vital that you provide a good selection of high quality images. This gives the visitor a way to look underneath, turn it around, etc. Shopify makes it easy to include a good selection of high quality images. The different themes however, work differently when it comes to seeing a larger version of the image and zooming in on the image. In the case of the New Standard theme, as used on imposters, you can click to see a larger version but there is no zoom.

The product page also displays the product title, price and its full description. Most importantly however there is an Add to cart button. With this button, the visitor can put the product in the cart so they can purchase it. A well-designed online store will have an easy to find and prominent Add to cart button. Lastly there are also share buttons so that the store's visitors can easily share this product direct to Twitter, Facebook, Pinterest, Tumblr, Google+ and by email.



The Shopping Cart

Still on the product page, click Add to Cart to add the product to your cart. The running total for your cart will be updated at the top right of the page and your shopping cart will be displayed.


This shows you what products you have placed in your shopping cart. Clicking on the thumbnail image or the name of a product brings you back to look at the product page again. The price for the individual products is clearly shown as is the subtotal for the order. You can update product quantities, remove products from the cart, add a comment and, when you are ready, proceed to the checkout.


Because you have not yet given your address, there is no way for the store to know the price for shipping this order. The New Standard theme provides a shipping rate calculator at the bottom of the cart page - you can use it to know how much you will pay for the shipping of your order.



The Checkout

On the cart page, click on the Check out button and let's see the first of the two steps that make up the checkout. You'll notice that the design of the page is slightly different from the rest of the store. In fact, you have now moved from the imposters store to the general Shopify checkout. All stores on Shopify use the same checkout. It can be customized somewhat to look more like your store but the layout will essentially be the same. Having one checkout process for all stores has enabled Shopify to optimize the checkout process and ensure the maximum security for transactions.


On the first step of the checkout, you'll find:

  • Secure server message:Right at the top of the page, you'll notice the yellow bar with the message "You are browsing our secure server". The entire checkout process takes place on a secure server - this ensures that the customer's data is safe.
  • Order summary:On the left-hand side is a list of the products currently in the cart. On the right-hand side there is the subtotal, excluding the shipping and possibly also taxes. Step 1 of 2 is written below the price, emphasizing the ease and simplicity of the process.

  • Email address:For an online purchase, an email address is essential. Shopify will automatically send emails to this address, confirming the order and its shipment. Also for the store owner, it will probably be the principal method for contacting the customer.
  • Billing and shipping address:The billing address is the address that will be used for the bill. Sometimes the customer will want to ship their order to a different address than the billing address. If they uncheck Ship items to the above billing address, they will be able to fill in a separate shipping address.
  • Continue to next step button:Clicking this button when the form is complete, will bring you onto the next step. Alternatively you can click return to store to continue shopping in the store.
  • Refund, privacy and terms of service statements:Click on one of these three links at the bottom of the page to see the imposters refund, privacy or terms of service statements. It's good to know what happens if you need to return the products you ordered.

Fill in your details and click the Continue to next step button. Let's see what happens!



The Checkout Step 2

So now we are on step two of two of the checkout process - see the screenshot on the next page. Again there is the order summary on the left and the total price on the right, this time including $15 worth of shipping. Below that there is:

  • Shipping method:Here you can choose the shipping method for your order. In my case, on the last step, I said that I was in France and it has only offered me one option, international shipping for $15. There could be a few options here if for example the store offered both economy and express shipping.
  • Payment method:Further down the page, the visitor can fill in the details for how they will pay. With Shopify payments can be made through Paypal, credit card, cash on delivery, money order or bank deposit. Shopify now also offer their own payment service, Shopify Payments to stores based in the U.S. On your store, you will be able to choose which options you would like to provide. In this store however, there is only one option. It's the "Shopify bogus Gateway" with which we can test placing orders, but not place real orders. You'll know it because it's marked with either a "B$" or a little image of a unicorn on the left-hand side.
  • Keep me updated: With this checkbox, the visitor can decide if they want to be on the store's mailing list or not. Checked, it permits the store owner to recontact the customer by email. For a store owner, a mailing list is very important. Customers easily forget about the store. Emails sent through the mailing list can remind them about the store and offer them more opportunities to make purchases.


Passing A Test Order

With the bogus gateway, we can confirm a test order to see what happens. Let's try it!

  1. Fill in the number 1 for the "Credit Card Number".
  2. For the "Expiration Date", put in any date that has not yet expired. Next month for example.
  3. Put in any three numbers for the "Card Security Code".
  4. Click on the Complete my purchase button at the bottom.

Making an order on a Shopify store is really as simple as that!



The thank you or order confirmation page

That's your order confirmed. How easy was that! At the top is the list of products you ordered. Below is your order ID for your reference and a note telling you to expect an email receipt. If you check your email, you will see a very simple text receipt that confirms your order.

So now you've seen the whole order process. Let's go back to the store and look at a few other pages that we missed along the way. Click on the link Imposters Poster Prints to go back to the store and when the store homepage loads, click on Blog in the main navigation.



The Blog

A blog is a great way to share news about your store or other information that might be of interest to your customers. A blog consists of a number of individual posts (or articles), with the most recent one appearing first.In general, each post includes the date it was published.


Often a website can seem like it's a bit dead, like nothing is happening. Features like blogs, Twitter feeds, etc. can bring more life to your store. A blog gives you a chance to show your customers and visitors that there are things happening, that you're an alive and active business. Most of the time, visitors to blogs can also post comments on the posts that interest them. This can be a great way to interact with your visitors and customers. In your admin, you can choose whether comments are allowed or not.
On the imposters store there is only one post so far. It's called "A new collection of art prints" announcing a new series of art prints now available in the store. You can click the link Read more to view the entire post and see the comments.



About Us Page

A website (for example an online store) is made up of one or more web pages, which we can also just call pages. In Shopify terms however, a page, is a web page on your store that provides the customer with extra information about your business. Not specific information about your products but general information about who you are and the service you provide.

Clicking on the About Us in the navigation, you can see one example of an important page that should be included in your store. In the imposters store, this is just a simple page that describes the nature of an about us page. But you will want to customize yours to describe your business. Before someone will buy from your store, they will want to know a bit about you and your store. Can you be trusted with their money and their confidence?

For me, the "About Us" page is really just one page in a larger customer service section that explains to visitors what they can expect from your store in terms of service. Yes, who you are is important. What is the story that makes your store special? But also, what happens if they are unhappy with their purchase? If the products are defective, or broken? Or if they need to contact you?

The goal is to provide the answers to all their objections, to anything that prevents them from making the purchase. Sometimes that won't be possible, sometimes they will need to speak to someone on the phone or by email. Often they just like to know there is someone real behind this online store. But still, a lot of objections can be answered with a thorough customer service section. And this you will create using pages in your store admin.



Summary

In this section, we have explored the imposters store, the store I will build throughout this guide. You have seen the key elements that make up an online store and seen a little bit how the look and feel of a store can be customized.

In the next section, we will explore the theme store in more detail, and look at some interesting features from other themes. This will help you to judge the themes and choose which one you will use for your store.