OVERCOMING SHOPIFY'S VARIANT LIMIT | LIFTING EQUIPMENT STORE

The Challenge

A website migration is a complex challenge no matter how you slice it, but for LES UK, there were additional factors that would make it a more complex challenge even still. 

Coming from Magento, where LES UK were let loose to have as custom of a store as they wanted, Shopify would be a significantly more rigid box to fit into. The primary issue was that LES UK’s products were far too complex for Shopify to handle - having too many variants and too many customisation options. 

Let’s take, for example, the Lodestar Electric Chain Hoist. This product has five customisation options for customers to build their desired variant, with a total of 1708 different variants. Shopify only natively allows for a product to have a maximum of 100 variants and three dropdown options, meaning that this product not only had two more options then was allowed, but over 17 times the number of variants.

This product was not unique either, in fact many of the products in LES UK’s portfolio exceeded Shopify’s native limits for product options and variants. On LES UK’s previous Magento site, this had not been an issue, but we would have to come up with a creative solution to get around this limitation in Shopify.

“Variant limits aren’t limits if you code around them”

Another one of LES UK’s primary goals was to close the gap between the average order value of customers shopping on desktop and on mobile. We knew that this could be achieved by the implementation of a more modern and user friendly design overall. Additionally, LES UK’s service offering made it clear that they cared deeply for their customers, but this was not at the forefront of their site as it should have been. So, we knew that this was a new opportunity for the brand to tap into too. 

The Solution

Mapping Out New Product Pages.

It was essential that all of LES UK’s product variants were carried over to their new site. But, considering that there is no way to add additional drop downs into a Shopify product page, we knew that custom code would be required. 

Let’s take the Lodestar Chain Hoist again as an example to explain how our custom solution works. We can think of this as one product that exceeds Shopify’s parameters for variants with 1708 possible variants, or, as 18 different products (17 products with 100 variants and one product with eight), each fitting tightly within the max of 100. These 18 “sub-products” are then put into LES UK’s Shopify product portfolio, with every variant of these products having its unique properties listed against it (in this case there were 5 for each variant).

Using a combination of Vanilla JavaScript and Liquid, we created a custom front end display that would give customers the ability to select the properties they wanted for their product from five drop downs, which would select the corresponding variant from across the 18 different sub-products. Considering none of the drop downs in our custom display count as a drop down in Shopify, we weren’t technically going over Shopify’s limit of three product options. From here, we repeated this process for every product in LES UK’s portfolio.

That is a massively oversimplified way of explaining how we got around the variant issue, if you’d like to learn more, we do have a full blog on this process - here.

Secondly, with LES UK having customers coming from many different industries, we felt like they were missing a trick by not reflecting this in their website. And so, we posed the idea of introducing a ‘shop by industry’ navigation, merchandising their stock based on the different sectors that a potential customer could be purchasing products for - such as Agriculture, Offshore & Marine, or Mining & Extraction. LES UK loved the idea from the start, and we went straight to work getting it set up in Shopify, a process that we could never have done with such speed had the brand stayed on Magento.

Lifting Up LES UK’s Design

From the offset, we noted some potential improvements that could be made that would boost the user experience of the LES UK store - namely, the search bar and product tree. Due to the difficulty of navigating the previous store, the search bar had been identified as one of the most-used features, however it was not as prominent of a feature as you’d expect. Similarly, LES UK’s navigation tree took a bit of time to wrap your head around as a new user, and this was entirely a design fault. So, when it came to refining the site, these were some of the first areas we focused on. 

Finally, We also made major strides towards putting LES UK forwards as the place customers should shop from, rather than just being the site they know stocks the products they need. LES UK makes an effort to go above and beyond for their customers, and have been in business for 13 years. They are, by all means, one of the most reputable wholesalers in their industry, but this was not highlighted on their site to the extent that it should have been. So, through improvements to the user navigation and the site’s UI, we brought this aspect to the forefront of their business.