Are you looking for how to add a wholesale area to your Shopify store without the app? This article is for you.
One way to encourage wholesale purchases on your Shopify store is to add a wholesale area to your store where wholesalers enjoy access to exclusive products, collections, and pages. This wholesale area can only be accessed by customers you have approved as wholesalers. To do this, simply use Shopify's existing customer accounts features, tag your approved customer accounts, and you are all set to go.
Adding a wholesale to 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 step-by-step tutorial is a guide to add a wholesale area to your Shopify store without the app using code:
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:
{{ 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:
<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"
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 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 questions 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:
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:
{% if customer %}
{% if customer.tags contains 'wholesale' %}
{% assign menu_handle = 'main-menu-wholesale' %}
{% endif %}
{% endif %}
{% for link in linklists[menu_handle].links %}
Or with this for desktop navigation:
{% if customer %}
{% if customer.tags contains 'wholesale' %}
{% assign menu_handle = 'main-menu-wholesale' %}
{% endif %}
{% 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.
For the Debut theme it should look like this:
1.
2.
3.
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!
Wholesale Area Shopify Store
Using this tutorial and code provided, you should be able to add a wholesale area to your Shopify store without the app using only code. If you have any more questions, be sure to leave a comment below or contact Ecom Experts.