Friday, August 23, 2013

Setting up a Book Store Web Site in South Africa

My wife is a true bibliophile: she's mad about books. She works for Bookdealers, a group of bookshops around Joburg. In fact she managed the Bryanston branch, until it caught fire on 20th June.
The week before the fire there was a flood, and another fire. On top of that, one of the partners left; and he was the one who ran the Bookdealers web site. All the web site stock went with him. The flood had forced Bookdealers to remove all the books on sale on ABE Books, because the stock was in complete disarray as a result of the flood, and all the stock was in boxes. The same applied to everything offered for sale on Bid or Buy. Plus the guy who did the orders for these two sites took a month's leave. For the last 2 weeks the Bookdealers web site has been a single "under construction" page.
So they had to start from scratch. This has turned out to be a blessing in disguise, because they could use a newer cloud-based web solution, rather than the more traditional Drupal system used before. I had suggested using Squarespace, but its payment system works only in the USA. Then we heard about uShop, a South African cloud company that has partnered with both Shopify in Canada and PayFast in South Africa. I offered to check it out. That was less than a month ago. We'll probably go live next week. That's remarkable.
Did I say "we"? That would be my wife and myself. Penny has spent the last 4 weeks obtaining stock from the various branches and the warehouse, and scanning the covers. These get placed in a DropBox folder on her laptop. The file name matches the title of the book. Then she creates a text file with all the product details: title, subtitle, author, publisher, condition, price, etc. This is followed by a short description of the book. This is stored in the same folder as the scanned file.
In the meantime I had signed up for the free 2 week trial period on uShop, and started figuring out how to load the products and adjust the template to suit our needs. When I first looked at the sample pages on Shopify, I was delighted to see several example book stores. I wrote to a few of the sites, and the owner of Cookbook Village told me about the "Split" function. This was a revelation, because it introduced me to the whole concept of "filters" as used by the Shopify template language, called "liquid". Take a look at the image below (click on it for a full size view):
It shows a "product" page for one of the books, when you log in as an administrator. Notice how there is a "Name" field and a "Details" field, but no "Author" field. I used the "Split" function to divide the details field into three sections, using the "+++" string as a separator. Now part 1 is the standard product details, i.e. up to the first "+++" marker. Part 2 is the "author" section, i.e. between the first "+++" and the second "+++". Part 3 is the "blurb" or detailed description, and is everything that follows after the second "+++".
Now take a look at the template editor, and in this case we are looking at the section of the product page where the general "Details" information is placed. This has been substituted for the following code:
 {% assign words = product.description | split: '+++' %}
 {{ words.first }}
First, the variable "words" has been assigned the contents of "product.description", and then it has been split into pieces using the delimiter "+++". On the next line, part 1 is displayed, by using the phrase "words.first", or "words[0]" which would do the same thing. The code that follows is the code for the "Add to Cart" button, and then after that the blurb/description text is displayed, using "words.last". Here is the resulting product page, as shown in my web browser (click to see a full size image):
This is the store product page. Whenever you have a "was" price as well as the selling price, the template puts "Sale" over the top left of the picture. By fiddling with the template and the CSS, I could change the text to "Special Price", and move it up so it doesn't obscure the book picture. I also added some space between the two prices to make them easier to read.
Finally, I wanted to be able to display the categorisation(s) of the book, and allow the user to find other titles in the same category. The Shopify system uses "tags", and the category display page shows all the tags in use and allows you to filter by tag just by clicking on the tag. I copied this code and included it (with suitable modifications) in the product template.
Now take a look at the main page (click to see a full size image):
From left to right: the first highlighted text was to replace the heading "Featured Products" with "Titles of Interest" instead.
Next, to get all the pictures to look even and align left (each book is a different size) we simply changed the scan picture's canvas size so that it is as wide as it is tall, with the image part centered left. This allowed all the images to be treated eaqually, resulting in a neat, logical page.
Finally, I wanted to display the author name below the product name. The code shown here does it. As you can see, we use "words[1]" to get the middle part of the general description, and then strip out any html or line breaks using the liquid filters.
As you can see, none of this code is particularly difficult or earth-shattering. I used similar code in the "search results" page to remove the "+++" when search results are displayed. The entire Shopify experience has been enjoyable, getting to learn how the whole system hangs together, but knowing that understanding everything is not a requirement to getting the job done. I take no credit for the ease of use or technical excellence of the Shopify system, or the support and value-added services of uShop or PayFast. That's the great thing about cloud services: you get to benefit from the skills and expertise of others. I was able to apply my many years of experience in developing and running other web sites, to choose and tweak the templates, and get everything to work in a way that was straightforward enough for the bookshop manager to use and understand.
We don't have to worry about security patches or upgrading to the next version of Drupal or PHP or Apache or whatever. The cloud service is secure and reliable, and is updated for us as new features are rolled out to all the Shopify customers. Backups are done automatically, and the hosting system can handle surges in demand that would cause a conventional web server to fail.
All Bookdealers have to worry about is keeping the stock up to date, shipping the orders, and keeping the customer happy. I can monitor the web traffic using Google Analytics and Webmaster Tools, and the Bing tools. All the products that Bookdealers sells are automatically listed on the uPrice comparison engine, which is good for sales.
There are more aspects of the web store that we need to organise, but none of them is hampered by the technology. It's just a case of getting properly organised, and making sure people know what they need to do. After all, Bookdealers sell books, they're not a technology company.

See also: uShop: Cloud-based online shopping on my company web site. Hopefully I can do a few more online shopping sites that help small startup businesses.


conway said...

A really insightful article thank you - we are about to start an online shop and your advise has been critical in helping make the decision of who to go with.I might be in touch for some help with code.Thank you for your generous spirit.

Addison adolf said...


Warning: The NSA and 4 million other sick weirdos with "security clearance" have intercepted this page and know that you are reading it.