Adding a wholesale area to your Shopify store is easy, and it doesn't require an expensive app. Just copy and paste a bit of code and you're all set!
This tutorial will help you set up a wholesale section in your Shopify store. This means that you'll be able to make certain products, collections, and pages locked down so that only customers that you've approved as wholesalers will have access to them.
This method uses Shopify's existing customer accounts feature--just tag the customer accounts who you've approved and they'll be able to access your wholesale products, collections, and pages.
Watch the video below to see how to install this wholesale feature. All of the code you'll need is in the tutorial below.
Step 1: Edit theme.liquid
In your Shopify theme editor, open theme.liquid. Find the code that looks like this:
{{ content_for_layout }}
and replace it with this:
{% if template contains 'wholesale' %}
{% if customer %}
{% if customer.tags contains 'wholesale' %}
{{ content_for_layout }}
{% else %}
{% include 'wholesale-note' %}
{% endif %}
{% else %}
{% include 'wholesale-note' %}
{% endif %}
{% else%}
{{ content_for_layout }}
{% endif %}
Step 2: Add a snippet called "wholesale-note"
In the theme editor, click on Snippets in the sidebar and then click "Add snippet." Name it "wholesale-note." Copy and paste the code below into your new snippet:
<h1 style="text-align:center;">This page is for approved wholesale customers only.</h1>
<p style="text-align:center;">
{% unless customer %}
<a href="/account/login">Log in to your account</a> |
{% endunless %}
<a href="/pages/contact-us">Contact us</a> to request a wholesale account.
</p>
This is the message that people will see if they stumble across a page/product/collection that you only want approved wholesale customers to see. It asks them to either log into their account to view the page or contact you to request a wholesale account.
If your contact page has a handle other than "contact-us," change the handle in the code above to link to the correct page.
Step 3: Add some templates
Click on Templates > Add a new template.
Choose "page" and call it "wholesale."
Repeat this process two more times, creating a new template for "product" and "collection," calling each one "wholesale." Shopify will automatically place some code in these templates for you--just leave it as is.
Step 4: Create some wholesale products
Create products in your Shopify Dashboard just like you normally do, but make sure to choose the wholesale template.
If you want to sell the same product at both retail and wholesale prices, just duplicate the retail version, change the price, and apply the wholesale template.
In the editor for any product, collection, or page, you can now choose the wholesale template. Any product, collection, or page that has this template will now be protected so that only approved wholesale customers can view it.
Step 5: Add the "wholesale" tag to your wholesale customers
I recommend creating a customer account for yourself first and tagging it with "wholesale" to test out the new feature. Go in your Shopify Dashboard to Customers, then create a customer account for yourself if you don't already have one. Open your customer account page, then scroll down to the bottom and add the tag "wholesale."
Next, go to the front end of your site and log into your customer account. If you've followed the steps above, you should be able to view your wholesale products but only if you're logged in.
If you log out of your customer account and try to visit a wholesale product, you should see the message we added above in Step 2. Feel free to modify that snippet to make the message say whatever you want it to say.
Step 6: Show a different navigation menu to wholesalers
The tricky part of this is how to make it so your wholesale customers can browse your wholesale collections and products. If they use your regular navigation, they'll be browsing the retail products and they won't see your wholesale prices.
To make it so your wholesale customers can browse your products and see the wholesale versions, we're going to modify your theme code to show a different navigation menu for visitors who are logged in and approved wholesalers.
This may be more or less difficult depending on which theme you're using. But the general idea is this:
We add code that says, "Are you logged in as a customer? If yes, are you an approved wholesale customer?" If the answer to both of these question is "yes," we show them a navigation menu that links to all of your wholesale collections. If the answer to either of these questions is no, we show them the normal site navigation menu that everyone sees.
Here's how to implement it:
In your theme editor, open theme.liquid and search for "main-menu." If you don't find anything, try searching for "navigation," "site-nav," "nav," "menu."
You can also look in the Snippets folder for a snippet called "site-nav," "navigation," or "dropdown."
If your theme uses Sections, look in Sections > header.liquid.
The main thing we're looking for is the following code:
{% for link in linklists.main-menu.links %}
It may look slightly different, something like this:
{% for link in linklists[section.settings.main_linklist].links %}
Once you find it, replace it with the following:
{% assign menu_handle = 'main-menu' %}
{% if customer %}
{% if customer.tags contains 'wholesale' %}
{% assign menu_handle = 'main-menu-wholesale' %}
{% endif %}
{% endif %}
{% for link in linklists[menu_handle].links %}
Important tip: Make sure to check and see if your theme has separate code for the mobile navigation. If so, you'll have to copy/paste the code above in two places.
There's one final step in this process: In your Shopify Dashboard, go to Online Store > Navigation and add a new menu. The menu should be titled "Main Menu Wholesale." Inside this menu, add whatever links you want your wholesale customers to see.
And that's it!
If you had any trouble, feel free to leave a comment below and I'll do my best to help.
UPDATE: How to hide wholesale products from your search results
A potential issue that you may find is that your wholesale products show up in search results on your site. For example, if you have a search bar in the header of your site, and you do a search, your wholesale products may show up in the search results. You probably want to avoid this, so that regular customers can't see your wholesale products and pricing.
Here's how to hide wholesale products on your search results page:
1. In your theme editor, in the Templates folder, open search.liquid.
2. Find the code that looks like this:
{% for item in search.results %}
...
{% endfor %}
Add the following two lines of code, so the final result will look like this:
{% for item in search.results %}
{% unless item.tags contains 'wholesale' %}
...
{% endunless %}
{% endfor %}
3. Add the tag "wholesale" to all of your wholesale products.
With this code, your search results page will now check to see if a product has the wholesale tag. If it does, it will not be shown on the search results page.