The global Covid-19 pandemic devastated the restaurant business. With more uncertainty ahead with new waves coming and ever-changing government policies, restaurant owners are struggling to survive. For many restaurant owners, taking their store online is one of the best ways to keep the business running.
Pearl House Restaurant, a local family-owned restaurant that specialized in Taiwanese cuisine and bubble tea drinks came knocking on our doors. They want to build a website with eCommerce capabilities. Including online ordering, payment processing and discount code system.
Building an eCommerce website from scratch can get expensive real quick. The amount of effort to ensure the checkout process is secure and safe, along with a discount code system, product inventory and other standard eCommerce features, would cost a fair bit of time and money. Both are something restaurant owners don’t exactly have the luxury to spare during these difficult times.
Here is where Shopify comes in. Shopify provides a platform with great performance, a high-security checkout process and just enough flexibility to customize it the way Pearl House wants. The catch is that Shopify at its core was designed for eCommerce selling products that are not meant to be consumed within the timeframe of a couple of hours. Shopify, out of the box, includes great features like a discount code system, gift card system, product inventory and many more. However, while it is great for selling physical items such as clothes or household items, it was not originally designed to sell hot food that is meant to be consumed within the next hour. We had to do a fair amount of modifications to make sure it works smoothly with a restaurant.
Build process
Shopify offers 3 months free trial. This is great for people that are not sure if Shopify provides what they want. This also gives developers time to build the site. First, we looked for a theme that suits the Pearl House Restaurant. Unfortunately, most themes are not built for restaurants. Therefore, we used the basic Express theme instead. It is plain and simple and it gives us a lot of room to work with.
The Pearl House Restaurant has two locations, so we made sure we enter all the locations information before we put in any products. This saved us a lot of trouble down the road. If you already input all your products, then add a second location, you will have to manually go into each individual products, and set it to be available at the new location.
Shopify provides comprehensive shipping features. But because we were not going to utilize Canada Post or UPS to ship the food, we disabled all shipping options, and only enabled local pickup. If you are planning to have your own delivery service, then the shipping option can also be modified to your needs.
We looked at the menu of the Pearl House Restaurant and made a map of how we are going to display the items. We then modified the product template, utilized collections, variants and line-items to accommodate different products. For example, items that need to choose a side dish or toppings. By default, Shopify provides 3 variants and up to 100 different options per product. For most dishes at Pearl House, it is more than enough. However, similar to having a combo at a fast-food restaurant, Pearl House also has its set of combos that need to be incorporated into the ordering system. This is where it gets complicated.
Imagine there is a main course you can order, and you can choose to add a bowl of rice and soup to make it a combo. But you can also add a bubble tea, that you can choose the toppings with. You can also add a side dish at a discounted price. On top of that, different drinks and different side dish costs slightly different. This is the scenario we ran into.
As complicated as it sounds, the solution was fairly straightforward. We built a custom form that shows the options, used jQuery and CSS to hide and show the options depending on what they choose (For example, not showing the toppings checkbox when no drink is chosen). And calculate a price depending on all the different options they choose. We then utilized the Shopify API to add the product and variant according to the final price.
Other than versatile UI for site setting, products, discount codes and theme settings, Shopify also allows the developer to modify the codebase. The Liquid template language that has a similar syntax as PHP, gave us the ability to make changes behind the scene. We created templates, web forms, promotion banners, coupon code pages with Liquid files. As for other front-end development, having access to the codebase through the browser allows us to incorporate Bootstrap, jQuery and SASS files that make styling easy.
Limitations
Shopify is a great eCommerce platform, but not without flaws, there are some limitations that a custom build website might not have. One of the limitations is the level of customization for the checkout process. Shopify is known for being secure for their checkout process. Store owners can have peace of mind knowing that the chances of having clients’ credit card information stolen are very low, and even if there are some vulnerabilities, Shopify will patch it as soon as possible. This also means that Shopify does not allow any jQuery script or styling changes to be applied on the checkout pages. Therefore, other than some modifications you can do through the provided UI in settings, you get an out of the box checkout process from Shopify.
Another issue we ran into was the number of developers that can work on this project at the same time. Since everything is done through the browser, If two or more people were working together on the site, we had to communicate very precisely which files we were working on so we don’t overlap and accidentally remove someone else’s work. The liquid files, sass, js files do not have version controls. There are no branches or commits to work with.
One thing to keep in mind is that once the website is live, there are no testing or development environments to work on, and every update and modification you make to the code or to the theme will be displayed instantly.
Shopify is not the best solution for everyone, but it might the best solution for a local restaurant trying to survive a pandemic. You can build an eCommerce website cheaper and faster with Shopify, with some limitations. Overall, it was an interesting experience working with Shopify to build a revenue-generating website for a local family-owned business. With the pandemic not going away anytime soon, it is a great way to stay in business. Contact us for more information about how we implemented the Shopify website for Pearl House and how Old Moon Digital can utilize Shopify to help with your business.