What's wholesale got to do with your role as a designer or developer?
Well, a lot actually. According to Forbes, the B2B market is “expected to grow to $6.7 trillion in gross merchandise value by 2020.” That’s a lot of dollars that your clients can easily grab a piece of while utilizing their existing Shopify store.
Building a wholesale store is one of my number one requests as a Shopify Expert. If you haven’t built one yet, it can be a great way to re-engage a client with whom you’ve lost touch. Maybe they’ve never thought B2B was possible, and if that's the case, you could be the inspiration for a new-found revenue stream. Plus, it's worth mentioning to your clients that online wholesale trashes the antiquated system of wholesalers having to buy from a catalog or worse — a line sheet.
For the developer, the best news is that with a little jimmy rigging and one clever app, you can design a wholesale shop for your clients almost out of the box with Shopify.
Before you can start building a wholesale store, you have to decide what kind of wholesale site you want to build. There are two main types of wholesale stores that exist: those that are solely dedicated to wholesale or those that are B2C sites that have a VIP/wholesale aspect.
For the purpose of this article, I’m going to use three shops I have built on Shopify as examples: Teroforma Wholesale, Bellocq Tea Wholesale and Whisky Stones. Teroforma Wholesale & Bellocq Tea are both examples of an entirely wholesale-dedicated store or a fully custom B2B setup, while Whisky Stones has a wholesale portal within a store that is predominantly B2C.
But before we get to our end result, we need to take a few steps backwards and start at the beginning.
The first question you'll likely encounter on this type of project is: “How do we lock down a store and allow only approved customers buy at our wholesale prices? What tools do we have at our disposal to make this happen?”
Before we get started, let's see what Shopify has available natively. If you go into "Settings → Checkout", you have the option to enable a requirement that a customer needs be logged in before they can make a purchase.
Given that wholesale transactions are largely done in a gated system, this seems like a good place to start. But you’ll quickly realize that someone could just start a new account and checkout without any approval process. Additionally, there also exists the looming mystery of how you would add new customers yourself.
Also let’s not forget that with this method, your shop wouldn’t be entirely gated to the public. That means people who aren’t wholesale customers would be able to see your wholesale prices, which is far from what we want (especially if we offer B2C products as well). One option would be to password protect the whole site in the "Settings → Online Store" section (seen below).
That core problem with this method is that everyone needs the same password and anyone that has it could enter the site at any time.
To overcome this, we need a way to segment our customers and institute an approval process. We need a way to lock down your store and simultaneously be able to import new wholesale customers manually. Thankfully, there’s an app for that.
Enter Locksmith by Isaac Bowen. At only $9.00 a month, this is an extremely powerful app that’s beautifully coded and elegantly designed. The best thing about Locksmith is that it can either lock down your whole site (in the case of dedicated wholesale store like Teroforma Wholesale) or it can be used to lock down a certain collection within your store (in the case of the partially wholesale store like Whisky Stones).
In both cases we’re going to set the key to only permit people who are signed in and for customers that are tagged with “wholesale”. The wholesale tag is how we are going to institute our approval process to our customer list.
Now we’ve got to import our new customer list (Let’s operate on the assumption that this is a new store so we’ll be importing our entire customer list). To simplify this process, Isaac and I coordinated on a new bulk import feature so that we could add tags and passwords for all the newly imported customers.
You can important your customers information manually or by uploading a CSV. Once you've done this, just open the Locksmith app in the Shopify Admin and add a password and a tag. Once you’re done and everything imports successfully, your wholesale site is ready to rock. Wasn’t that easy?
Now when someone comes to your front page they will see something like this:
Of course, out of the box this page will look like the account login screen that your standard theme supplies. But with a little CSS and some liquid magic, you can customize it to look however you like. Ta da!
You can do all of this within the Locksmith app "Settings". In the case of Teroforma Wholesale, I created the landing page above using a javascript snippet that’s essentially covering the entire site and when you click “I’m buying for my store” it disappears. Alternatively, if you pick "I’m buying for myself," it ports you to the B2C site Teroforma.
Running a wholesale business is no easy feat. If your clients are new to wholesale, they're more than likely to have plenty of questions for you. Here are some of the most frequently asked questions that I've received from wholesale merchants.
The answer for this question will vary depending on your client and the type and amount of wholesale customers they want to be working with. In the case of Teroforma Wholesale, we made a new wholesale customer application link that links to a dedicated contact form page.
If someone passes the application process, then we can easily add the "wholesale" tag to their new customer account and give them the password that you attached to said account (we do all of this through the Locksmith app).
There is an easy solution for this: you can force their selection by using a dropdown for quantity.
To do this, we first need to make a new product template — we are calling this one "case-packs-of-six":
Based on your client's requirements, you can make as many of these as you need.
Once we've created our new template, we copy over the original product liquid and then edit the quantity function. Here’s the original code (this will vary based on your theme):
Here’s our code to make a dropdown:
<div class="units_in_case_packs"> | |
<p> Quantity (units in case pack increments)</p></div> | |
<div class="quantity_dropdown"><!--style class for the dropdown>--> | |
<label for="qty"></label> | |
<select id="quantity" name="quantity"> | |
{% for i in (1..12) %} <!-- i is the interval value that we are going to multiplying. --> | |
<option value="{{ i | times:6}}">{{ i | times:6 }}</option> <!-- we use a multiple that corresponds to your case pack in this case we have packs of 6 but you can use any multiple.--> | |
{% endfor %} | |
</select></div> | |
<input type="submit" name="add" class="btn_c" id="addToCart" value="{{ 'products.product.add_to_cart' | t }}"> |
The result:
As seen above, our wholesale customers can now only pick quantities from 6 to 72 at a multiple of 6.
This is a simple liquid fix. For this example, let's say we want a requirement of a $200 minimum subtotal to be able to check out.
With this requirement in place, customers who don’t have a sufficient subtotal will not see the checkout button. We can of course style this and make it more pronounced and to our liking, but this covers the basics.
As shown above, customers with a subtotal that is more than the minimum in their cart will be able to checkout normally.
Here’s the liquid update to the cart.liquid search for the “submit” input. Put this liquid code above it and add the “{%endif%}” directly after.
{% if customer.tags contains 'Wholesale' and cart.total_price < 20000 %} | |
<p> Your wholesale total must be $200 or more.</p> | |
{% else %} | |
<input type="submit" name="update" class="btn--secondary update-cart" value="{{ 'cart.general.update' | t }}"> | |
<input type="submit" name="checkout" class="btn checkout" value="{{ 'cart.general.checkout' | t }}"> | |
{% endif %} |
If you need even more control over the “set minimum and maximum order” and “item amounts” and don’t want to code a custom solution, then you can check out the Order Limits Shopify app. It’s a phenomenal app that offers tons of options for maximum and minimum item limits, plus you can set different item limits on each individual product.
We can do this with manual payments natively on Shopify. Go to "Settings → Payments" then click "Create a new custom payment method".
You can name your new payment method whatever you like. In this case, we named it "Pre-Approved Net 30 Terms".
You can also fill in some additional details that will be presented on the checkout screen and the Thank You page.
Now your client's approved wholesale customers can checkout without putting in their payment information every time.
The nice thing about setting up a wholesale shop on Shopify is that you can copy over everything you have previously built and make a B2C website in the same style. That way, the customer UX remains the same regardless of whether they are a wholesale or retail customer.
To exempt certain customers from taxes, you can go to "Customers" in the Shopify Admin to edit your customer information by clicking "Customer is tax exempt". You can also do this in bulk by using your customer CSV.
Creating a wholesale stores is a great opportunity for developers to bring some of their more old school B2B clients into the ubiquitous world of ecommerce. Whether you are building a full-fledged wholesale store or just adding wholesale capabilities to a B2C store, Shopify has everything you need to make the transition as seamless as possible.
To access the code snippets from this article, check out my GitHub Repository.