Add Wholesale Area To Your Shopify Store

Here are 6 steps to add a wholesale area to your Shopify store using code:

Step 1: Edit theme.liquid

In your Shopify theme editor, open theme.liquid. Find the code that looks like this:

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:

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.

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

Step 3: Add some templates

- Click on Templates > Add a new template.

- Choose “page” and call it “wholesale”

- Create a wholesale template in your Shopify theme editor

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

- This way you can create pages, products and collections that are limited to the wholesalers only.

Step 4: Create some wholesale products

- Create products in 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,

- now create a customer account for yourself if you don’t already have one. Open our customer account page, now 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 questions is “yes,” you can 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.

- 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 for mobile navigation:

{% assign menu_handle = ‘main-menu’ %}

{% if customer %}

{% if customer.tags contains ‘wholesale’ %}

{% assign menu_handle = ‘main-menu-wholesale’ %}

{% endif %}

{% for link in linklists[menu_handle].links %}

Or with this for desktop navigation:

{% assign menu_handle = ‘main-menu’ %}

{% if customer %}

{% if customer.tags contains ‘wholesale’ %}

{% assign menu_handle = ‘main-menu-wholesale’ %}

{% endif %}

{% include ‘site-nav’, linklist: menu_handle %}

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 multiple 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, wholesale collections, pages or products.

And that’s it!