• About Us
  • Contact Us
  • Portfolio
  • Blog
  • CART
    • About Us
    • Contact Us
    • Portfolio
    • Blog

    How to Design a Wholesale Store on Shopify

    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.

    Looking for some great Shopify wholesale store examples?

    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.

    shopify wholesale web design: Teroforma

    shopify wholesale web design: whisky stones

    shopify wholesale web design: whisky stones

    But before we get to our end result, we need to take a few steps backwards and start at the beginning.

    Understand what you have to work with

    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.

    Adding account requirements to your Shopify wholesale store

    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.

    Account login: wholesale shopify store design

    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). 

    Enabling a storefront password on your wholesale ecommerce store

    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.

    Creating a wholesale approval process

    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). 

    Using Locksmith on your Shopify Wholesale Store

    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.

    how to design a wholesale ecommerce solution

     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.

    Creating a wholesale customer on Shopify

    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:

    Basic wholesale login for Shopify

    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!

    Teroforma wholesale account login design

    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. 

    Javascript example for wholesale store design

    Helping your client run their wholesale store

    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. 

    Question 1: How do your wholesale clients accept new applications?

    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.

    Wholesale customer application form example

    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).

    Question 2: What if your wholesale client needs to sell their stock in case packs and they don’t want people to be able to break up their wholesale inventory? 

    There is an easy solution for this: you can force their selection by using a dropdown for quantity.

    Whole store design tip: dropdown quantity menu

    To do this, we first need to make a new product template — we are calling this one "case-packs-of-six":

    Add new template example

    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)​: 

    <div class="qty">
    <a class="minus_btn" ></a>
    <input type="text" id="quantity" name="quantity" class="txtbox" value="1" min="1">
    <a class="plus_btn" ></a>
    </div>
    view rawqty.html hosted with ❤ by GitHub

    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 }}">
    view rawunits.liquid hosted with ❤ by GitHub

    The result:

    Quantity limited drop-down menu

    As seen above, our wholesale customers can now only pick quantities from 6 to 72 at a multiple of 6.

    Question 3: What if your wholesale client wants a minimum order total for their wholesale transactions? 

    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.

    Add a minimum order total to your wholesale shopify store

    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 %}
    view rawwholesale.liquid hosted with ❤ by GitHub

    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.

    Question 4: What if your wholesale clients need net 30 or 60 terms? 

    We can do this with manual payments natively on Shopify. Go to "Settings → Payments" then click "Create a new custom payment method".

    Creating a custom payment method on your Shopify wholesale store

    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.

    The custom payment method: result

    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.

    Question 5: What if my client's wholesale customers aren’t required to pay taxes?

    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.

    Adding a tax exemption to your wholesale customers.

    Start designing wholesale stores today

    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.

    Want me to install this on your store? 

    • About Us
    • Portfolio
    • Contact Us

    ICEE Social © 2022. All rights reserved.