Project URL
Github
Overview
Harling’s Jewellers approached us to develop a full functional online store with an integrated booking system and CRM.
Harling’s Jewellers is a high-end jewellery store in downtown Vancouver. Since their products range in price from $200 to $82,000, the plan for their website was create more of a brochure website with the focus on getting clients to contact them or book appointments to increase ROI. With this in mind, we focused on designing a beautiful and user-friendly site, with a custom appointment system integrated with their CRM.
The appointment system is developed from scratch using Fancybox (jQuery), Liquid, and custom JavaScript to pass along data such as the users current page, product and variations selected, and UTM codes (AD and ref tracking). A booking submission will post all the data to their CRM (AgileCRM) via their JavaScript API, then a new contact is saved with the appointment information, contact info, UTM codes as well as opt-in status for future newsletters. The system then triggers events to email both Harlings and the prospective customer to inform them the booking has been confirmed.
To make the booking system as successful as possible we also needed to import all of Harling’s Jewellers product lines / brands to Shopify. With 10 different brands, almost 5,000 products (not including variations) this wasn’t so easy.
Some brands were easier than others, providing excel spreadsheets that we were able to reformat to Shopify’s CSV import structure, add USD to CAD calculations and import with minimal effort. Some brands were more difficult, only providing product sheets like PDFs or XLS with no variations that we were unable to re-format. To save time and effort I ended up developing a NodeJS web scraper from scratch that exports CSV’s in Shopify’s import data structure. Including variations with images assigned, USD to CAD calculations, product types, etc. I customized and ran this app for two different bands, in the end we were able to import more than 2,000 products, saving a lot of time and effort for us and our client.
Another unique request for this website was to create a “mini-site” for their most important brand, Tacori. This was developed using JavaScript, cookies, and a custom CSS stylesheet. In the end, we have now created two different mini-sites within harlings.com. One for Tacori and one for Hearts On Fire. They are both functionality the same but use two different CSS stylesheets and slightly different JS files for displaying image and text changes.
Another unique request for this website was to create a “mini-site” for their most important brand, Tacori. This was developed using JavaScript, cookies, and a custom CSS stylesheet. In the end, we have now created two different mini-sites within harlings.com. One for Tacori and one for Hearts On Fire. They are both functionality the same but use two different CSS stylesheets and slightly different JS files for displaying image and text changes.
Apart from the initial development, we have continued to add to the website’s functionality. Some of the recent additions include:
- Google Places API integration for live stream of Google reviews on homepage:
https://gist.github.com/martinbkaiser/e5113da040cccfb59972ba1b3e0698e7
Custom HTML and CSS design as well - Developed and integrated currency switch/estimation for CAD to USD using live exchange rate API data
- Developed custom homepage slider/banner with video and mobile compatibility https://github.com/martinbkaiser/shopify-responsive-video-slider
- Created custom theme template options for homepage banner, including separate overlay jewellery item images, image placements for items, dark and light mode for text, etc.
- Updated the theme’s single product image gallery slider to use Shopify variation selection image switch
- Impoved SEO and website search results with product title and permalink changes