top of page

Protool Ltd - Custom B2B/B2C Shopify Store - Case Study

protool website homepage

Protool Ltd are an independent precision tool supplier based in the United Kingdom. They have been running since 2009 and serve customers mainly in the UK & Ireland, but also worldwide.

Selling precision tooling, most of their customers are established businesses running CNC Workshops, mainly in the industries of automotive, F1, and aerospace. They also sell these tools, and other equipment like safety gloves, to DIYers or hobbyists. This meant their new website we was building them, had to cater for both b2b and b2c customers.

Creating The Store To Cater For B2B and B2C Customers

protool website cart

Choosing Shopify as their E-commerce platform, this initially posed as an issue. At the moment, Shopify doesn't give many options for a b2b functioning store. They do offer a Shopify Plus which offers some b2b functionalities, but to integrate with Protool's CRM of managing customers credit balances and limits, etc. this was not an option. Also, to then have the flatline of the Shopify store to support b2b aspects (MOQ, Pay on account, multibuy discounts, etc.) it made it difficult to keep the standard b2c options there. We overcame this challenge by integrating with a Shopify app, Sparklayer. This allowed to display different elements on the website depending on if the customer was logged in or not. When logged in with a b2b account, the customer has access to: MOQ, Multibuy Discounts, Loyalty Points Scheme, Faster Checkout, Able To Pay On Credit Account, and much more. Yet when not logged in, they see the usual b2c store. This worked perfectly, as it catered for all customers and gave new customers an incentive to register, increasing Protool's guest to customer conversion rate.

Getting Around Shopify's Limitations

Another challenge posed to us was Shopify's limitations around products. With only 3 product options (size, colour, ...) and 100 product variants, this was a huge issue. With precision tools being very precise to the 0.01mm, some product ranges had 10+ specification options and 300+ variants. For example, there was a type of drill which ranged from 0.1mm - 20mm, going in sizes; 0.1mm, 0.2mm, 0.3mm.... 12.6mm, 12.7mm,...

Beating the 100 Product Variant Shopify Limitation

After looking at all the limited options, we come up with a solution. All products were to go on as separate products. We then created a product metafield named Parent No. All the products within the same range (variants) were all given the same number within this metafield value. This, in the back end, grouped the products together.

We imported new collections, based off the condition that the Parent No. matched the products. This collection had the title of the product range, and the product description. This collection was then given a new, separate template, which we named 'Parent'.

For example: If a Vortex End Mill had 34 different variants. All 34 products were put on Shopify. They all had the same value, 16, in the Parent No. metafield. A collection titled "Vortex End Mill" was then imported into Shopify, reading the condition that all products must have the Parent No. metafield value equal to "16". The template was then set to 'Parent' . Now, by this logic, every product went into just 1 collection which had the template 'Parent'. Using this, we then added a button on the product page "View Other Sizes" which linked dynamically, to any collection page that product was in, which had the template 'Parent.' We then custom coded and designed this new collection to act as a product parent page. The page pulled the first product from the collection, and displayed the product image. It then pulled the lowest priced product in the collection and displayed this as a "From £X" price. It also displayed the collection title and description, which matched all products. This was designed to look like a product page. Now we had to find a way to display all of the variants. We figured a well designed table would work best. So we coded to display all of the products within the collection to display in a table. This showed Product SKU, Live Stock Levels, Product Price and a View Product button. This was successful. See it in action here.

protool parent page

Beating the 3 Product Options Shopify Limitation

Although this worked, there was no way to tell the difference between these products as they was imported with no options. There was no specifications options like; cutting diameter, shank diameter, drill depth, corner radius, etc. to differentiate. As Shopify only let's you have a max of 3, but most of Protool's products had 5+, we also overcome this issue using product metafields. We imported a metafield named 'Specification Options' which read string data as a value. We'd have the values for a product as

'{"Cutter Diameter":"6","Number of Flutes":"4","Flute Length":"7","Overall Length":"70","Shank Diameter":"6","Reach":"33","Neck Diameter":"5.8"}'. We then went back to our parent page collection table, and coded some extra columns. It would read "Cutter Diameter" as a column heading, and "6" as the value. The table now read all the product variants, with all of their different specification options.

We then further custom coded the product page to display these specification options as a table in the product description, to show the values again, ensuring the customer is looking at the right tool.

Making The Tools Easy To Find

The website had before this, was very basic. You had to keep clicking through categories to then get to page with a few products on, and select the one you were after. If you knew you needed a 4.2mm Straight Shank Carbide Reamer, it was a long-winded job to find it. With Protool's new AI Powered filter and search bar, it is as easy as ever. Simply load the collection you want, select the sizes you're after, and within seconds the exact product you're after is right there. It even shows alternative products which are the same, but from different brands, so the customer can compare the price!

protool filters

Mobile Responsiveness

Again, Protool's previous website was not very mobile responsive, leading to less than 0.2% conversion rates for all mobile users.

Loading Speed

For customer retention & usability and SEO purposes, page loading speed is crucial. Even with over 60,000 products, the website loads very, very fast.

In conclusion, Protool Ltd's new website is a game-changer for their business. Overcoming challenges posed by Shopify's limitations, we implemented innovative solutions to cater to both B2B and B2C customers seamlessly. The integration of Sparklayer allowed for a personalised experience based on customer login status, boosting guest-to-customer conversion rates.

Addressing Shopify's product variant and option limitations, we devised a smart grouping strategy using metafields and collections. This not only beat the 100 product variant limitation but also provided a comprehensive table showcasing product specifications, ensuring clarity for customers.

The addition of an AI-powered filter and search bar revolutionised the user experience, making it incredibly easy for customers to find the precise tools they need. The website's mobile responsiveness and impressive loading speed further enhance customer satisfaction, contributing to improved conversion rates.

Overall, the revamped website positions Protool Ltd for success in the competitive market, providing a user-friendly platform that caters to diverse customer needs and sets the stage for continued growth.

14 views0 comments


bottom of page