Shopify App for Product Grouping and Filtering: A Case Study

Revolution Vapor is a brick and mortar electronic cigarette store in a trendy area of San Jose. The owner needed his online Shopify store to work with dual languages and currencies, as well as a sidebar filter similar to Amazon where customers could drill down to exactly what they were looking for. The results are a slick user interface for both him and his customers.


Integrating VendHQ, Shopify and Google App Engine

Revolution Vapor is a brick and mortar electronic cigarette store in San Pedro, Costa Rica; a trendy area of San Jose near the University of Costa Rica. The owner has created a hip vibe in the store, branding his products as high-end, customized liquids for top-of-the-line electric cigarettes. He already had a Shopify store, which served the purpose of reaching online shoppers as well as providing an online marketing venue and solidifying his brand.

Problems

The owner wanted dual languages (English/Spanish) and dual currencies (Dollars/Colones) available on his Shopify, online store.  He also wanted a sidebar filter similar to Amazon where customers could drill down to exactly what they were looking for. His primary problem was the way Shopify listed his products for the customer.  He was happy with VendHQ as his inventory management and POS, but was not satisfied with its limitations in allowing him to create variants from composite products. These limitations primarily effected his name-brand, e-liquid products. His “house” brand consisted of a bottle and a quantity of liquid which are separate inventory items he put together for an end product for the customer. This made it necessary to create composite products (products with multiple inventory items), however, VendHQ does not allow for variants among composite products that varied by size, strength, etc..

Normally, in Shopify if you have a product that has different sizes or strengths you would enter one product with many variants. But this was not possible because of the limitations of VendHQ. The end result was that each different flavor of e-liquid had twelve or more size and strength variations that were all listed as separate products. Therefore, on his catalog page the first twelve products were all the same flavor, listed with different variations of size and strength. The next twelve were the second flavor and so on. This made for twelve times more pages the customer had to look though before making a purchase.

Solutions

The owner needed a solution that would integrate VendHQ, Shopify, and Google App Engine.

Dual Language and Dual Currency

Shopify supports different languages and different currencies, but it does not support more than one language and/or currency at the same time. His client base is in Costa Rica and many of his customers speak English. Furthermore, his customers in Costa Rica can make purchases with either dollars or the local currency, colones. Because of this, I needed to tie the currency to the appropriate language.

My solution was to create a currency selector drop-down that would also change the language to match the respective currency. So, if an online customer selects US dollars, the language defaults to English and, conversely, if colones is selected, the language defaults to Spanish. I also added a Geo IP script that detects if the site is being viewed from within Costa Rica, which automatically defaults to Spanish. The language selections can be easily changed at any time.

Product Grouping

I needed to create a Shopify app that requested all the products from my client’s store and re-index them according to Collection and Group. Collections are built into Shopify. They are a way to organize similar products like Shirts, Hats, Shoes, etc. Shopify has variants for very similar products. But because variants weren’t an option for his composite products, I needed to create a different grouping mechanism. I called it simply, “grouping.”

I accomplished this through the use of product tags, which are already an integral part of the Shopify system. They are one or two word descriptions that are added by the shop owner as a way to filter products. For example, each e-liquid had a tag for size, strength, etc.. I created two new tags for each product: a tag that reflects the name of all products of the same flavor, and a master tag I applied to only one of the products of a  particular flavor. This allows for two things to be discerned for each product:

  1. Flavor group to which the product belongs
  2. Product representing the group (master)

I created an app on Google App Engine that re-indexed all his products by these flavor groups using the aforementioned tags, in addition to an API to request these groups in JSON format. With that in place I could request product groups using JavaScript from within the Shopify theme, allowing the store to display the products just as it would display products with variants. This format displays the master product only and provides a drop-down to select different product options.

product-group-drop-down

Sidebar Filtering

To complete the project, I created an app that allows the shop owner to build a sidebar filter to his specifications.

revolution-vapor-home

All the filter items in the sidebar filter consist of tags the shop owner had already added to each of his products. He created these tags for filtering through the available Shopify system, but Shopify could only filter by one tag at a time. Using the improved filter system I created, as shown in the above image, the customer can now filter by size, strength, brand and flavor profile. This is a drastic improvement in user interface.

I wanted the shop owner to be able to create this sidebar from existing tags and place them in his preferred order.

product-group-tool

As you can see from the image above, I added an additional level of filtering, allowing the shop owner to create custom filter categories.  He can then drag product tags–created in Shopify– on the right into that filter category of his choosing on the left. He can also reorder the tags and the filters categories any way he wants them displayed to the customer.

Work-Arounds

A Shopify app must be hosted on a https (secure) server.  I couldn’t justify paying for a SSL certificate for a one-off app for a single client . So, instead I settled on Google  App Engine. It provides a free tier, based on usage, and I felt this app wouldn’t exceed that usage quota. In addition, all GAE apps are hosted with https, so are secure.

I’m a PHP developer and GAE has just started supporting PHP . In fact, it’s still in beta release. Some features of PHP aren’t supported on GAE,  namely CURL. CURL is the standard function PHP developers use to access other website like the Shopify API. Also Shopify API SDKs have already been created for PHP. I settled on ohShopify.php., but it relied on CURL, which isn’t supported by GAE. That lead me to a work-around called PURL that substituted CURL calls for file_get_contents() calls that GAE would accept.

This work-around functioned well for GET request but not PUT or POST requests, which was acceptable for this application, because I only required GET requests. I could have created my own Shopify SDK for GAE but the time investment wasn’t in the product budget, and I didn’t want to reinvent the wheel. Now that I had an https server running PHP that could interface with the Shopify API, I was ready to move forward with creating the app.

I wanted the app to run from the client’s Shopify admin console. Therefore, I needed to use Shopify’s Embed API. This added another layer of complexity because I also needed to tie in their JavaScript library.

The end result is a slick user interface for both the shop owner and his customers.

About the author: Brian Gaeddert is a Web Developer for Maya Creative Group. He is a native Oklahoman who currently lives with his wife and daughter in Costa Rica.

  • Araa FX

    Hi we run a popular web store for Indian textiles.. http://www.india1001.com on shopify

    Our problem is we update products everyday (most of them unique designs).. and they get sold out really fast. While the sold out tags tend to show how popular our products are to new visitors, it is annoying for repeat customers looking to shop.

    We already have a tag based filter system in some of our collection pages (on top), and are looking for a filter that show/hide sold out products.

    Your suggestions on this would help us.

    Thank you