uShop: Cloud-based online shopping

When Bookdealers needed a new online book store, they needed a system that was simple, secure and capable. It needed to have a shopping cart system that would accept South African currency, and it needed to be integrated. The previous site used Drupal, and took quite a while to set up and get going. And the staff who did the setup was no longer around to help. They didn't want to have to go through a steep learning curve or have to employ technical people to manage it and keep it up to date, or deploy security patches. Their business is books, not technology.

I was told about uShop.co.za, and immediately saw the possibilities. They are the South African partners of Shopify, a major web hosting and e-commerce company in Canada. Shopify hosts tens of thousands of web sites, and has the infrastructure to match. All the technical stuff is handled for you, as a cloud-based solution is supposed to. uShop adds additional services and integrated solutions that we liked. They partner with PayFast on the back-end for accepting payments by credit card or EFT, and it is all linked in with the Shopify system.

So I started with an experimental shop based on the "React" template, and over the course of a weekend had a test bookshop with a few products loaded. It works fine on all browsers, and on mobile phones as well, scaling the text and pictures to fit (unlike this site!).

There were other aspects of the template that needed tweaking, and some design elements that I wanted to adjust. All of this is possible because they give you complete access to the CSS Style sheets and the page templates. I contacted one of the Shopify customers (a bookstore) in the USA to find out how they had done some of the effects, and found that the "liquid" language they use is not difficult to learn and can be extremely powerful.

Bookdealers is benefiting from the technical expertise and programming skills of an entire team of people in Canada, plus the local knowledge and integration expertise of the uShop team in South Africa. They are adding new services and facilities all the time, and Bookdealers can focus on what they do best: finding books that their customers want to collect and/or read.

I had a lot of fun setting up the site and getting all the details in place, plus doing some tweaks to the basic template to suit the style and needs of a company that sells books.

The store front page. 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 equally, resulting in a neat, logical page. The last tweak was a bit more tricky: how to display the name of the author below the book title, even though there is no field for "author name", only "product title". Liquid has a few text manipulation filters that made this quite simple.

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 it easier to read. Next, I wanted the "Add to Cart" button to go between the basic product description and the blurb about the book, even though there is only one general text field for this purpose. The same text filters that made the Author display so simple on the front page came into play for this problem, killing two birds with one stone. 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.

Disclaimer: 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.

See also: My blog article "Setting up a Book Store Web Site in South Africa" with some of the more technical details.

Contact information. Private and Confidential

-:| [home] | [free stuff] | [blog] |:-