C.G. Masi Weblog

Building an Online Bookstore - Part 5

25 January 2018 - So, I've had CGMbooks.com up and running for three months now. I haven't kept up this blog too well because I've been spending so much time building the inventory and jump starting the marketing effort.

CGMbooks.com landing page
This is a view of the CGMbooks.com home page.

In this posting, I'd like to start walking you through the main elements of a functioning ecommerce website using CGMbooks as an example. The image above shows the home page, which is the first page you see when you link to the site through its main URL. The image is a screen shot of what you see on your PC screen if you're using the Chrome browser. Obviously, another browser would have some variations in the details, but will present more or less the same picture.

Yes, I've seen the ads with some jamoke claiming: "I built my webstore in under an hour ... " but don't believe them. Plan to spend a couple of weeks tweaking things to get 'em right, and more time to set up the credit-card clearing system. Trying to build an ecommerce website in an hour is like trying to build a house from scratch in a week. You can't even get the permits squared away in that time.

The overall look and feel of the home page is the first decision you have to make when building your website. Your ISP will give you a range of templates to choose from. I chose a template with an overall muted brown background in order to make the book cover images and the type for the sales messages pop out.

Skipping the usual browser navigation toolbar appearing at the top of the screen, the home page has a logo bar at the top, just under a search textbox. The logo bar shows the company logo and contact information. That basically tells you that you got to the website you wanted.

There's a navigation bar below the logo bar from which you can link to the different pages providing the main features of the ecommerce site. Basically, from there you can jump to where you need to go to do your business. The page's layout is prescribed as part of the template. Once you choose the template, the color scheme and page layouts are carried through to other pages in the webstore. Supposedly, you can make considerable modifications to these templates, but I generally don't bother. Just carefully choose a template that meets your needs in the first place, then all you have to do is populate it with your product information.

Below the navigation bar is the main stuff of the web page: another navigation bar on the left leading to fun places you can go to get information relating to the products, and a window linking to three products currently being featured in the bookstore. These featured products change from day to day just to make things interesting. In this case, they're the latest releases, but they could be any products we want to push for any reason.

The navigation bar on the left includes links to product-category pages and a list of external links. Product categories allow the store manager to group products that are somehow related. In this case there are two categories: books belonging to the "Red Series" and "Other." The Red Series includes six novels featuring Judith (Red) McKenna as the principal character. The only novel currently in the "Other" category is a novelette entitled "Lilith," which is unrelated to the Red McKenna novels. In the future, I expect to use this space to provide links to print books that are already available through larger bookstores, such as Amazon and Barnes and Noble.

That left-hand navigation bar also includes links to my external websites. They include my personal website, this blog, and my author pages on Amazon and Goodreads.

Each featured product writeup includes an image, which in this case shows the book cover. Clicking on the image sends you to the sales page for that product. Other elements of the product writeup include information, such as the price and a short description of the story, and a button you can use to add the book to your shopping cart. Clicking on the "more info" button takes you to the same sales page as clicking on the image.

Finally, not shown in the image above because of space considerations are a repeat of the top navigation bar and a copyright notice. They're cut off because the web page is too tall to show completely on my laptop's screen, so they aren't captured in the screen shot.

Next time, I'll walk you through an example product page.