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.
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.
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!
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.
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.
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.
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.
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.
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:
A short blurb describing the store.
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.
On the far right is a simple form for signing up for an email newsletter - in this case for the "Shopify & You" newsletter.
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.
Underneath the footer navigation is the copyright information for the store. Shopify will insert the year and the name of your shop automatically.
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.
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.
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.
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.
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:
Fill in your details and click the Continue to next step button. Let's see what happens!
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:
With the bogus gateway, we can confirm a test order to see what happens. Let's try it!
Making an order on a Shopify store is really as simple as that!
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.
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.
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.
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.