Shopify migration

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.

Improving on solid SEO foundations

Having worked with the brand for an extended period of time, when the time for a migration arrived, we already had some potential SEO improvements in mind. Firstly, despite LES UK’s products falling under so many collections, none of their collection listings had any content to guide the user along.

Outside of implementing the mass of necessary 301 redirects needed for a successful migration to Shopify, writing all of this content was set to be our first action. Although relatively short - often no longer than 100 words - the amount of descriptions we had to write for LES was a long spanning task, but one well worth the result. Newly implemented collection descriptions would not only let customers know they were in the right place, but also boost the site’s search rankings by hitting the keywords that potential customers would be searching for.

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. 

Firstly, by greatly increasing the size of the search bar and making other elements a bit smaller, it was much easier to immediately locate how to search for products. Secondly, we opted to change the product navigation tree to take up the entire width of the screen, rather than appearing in the middle as it had in Magento. By doing so, and by making minor edits to the colours, fonts, font sizes, and using imagery where possible we were able to guide customers along in a much easier fashion. 

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 nearly 15 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.