Shopify B2B-only Content

B2B-only products (hiding products)
Important to note
If you are looking to customise the behaviour of your Shopify store, we strongly recommend engaging a Shopify expert to assist. Whilst we can provide an overview of how to approach making customisations, our team cannot assist in applying any code changes.
﻿
If you're running both B2B and DTC within the same Shopify store, there may be a range of products that you want to only show and be purchasable to logged in B2B customers. Perhaps they can only be purchased in high-volumes or they are exclusive to your B2B customers. 
There are a number of options you could consider to achieve this:
You could create a B2B-only collection and redirect customers to this once they login. If you wanted to show special B2B-only products, you would need to create these as separate products within Shopify (i.e. with unique SKUs, etc)
With SparkLayer pricing, if you don't upload a price against a SKU, the B2B customer won't be able to purchase it. So this is a way to prevent them from adding items you don't want them to purchase
It's possible to achieve this by using Shopify's tagging system making it easy to hide and show products based on who the customer is. Read our full guide here﻿
To make things easier, the Shopify app store also has a number of third-party applications that make this possible and one we recommend is Locksmith. You can read our Locksmith guide here﻿ 
Hiding variants
Looking to hide variants for specific B2B customer groups? Read our guide﻿﻿
﻿
Hiding prices
If you have a dedicated B2B Shopify store and want to fully hide prices from your logged out customers, you can do this by adding special code to your storefront theme. Typically you could apply this to:
The product cards that show on your collection pages (e.g. on /collections/all). The code for product cards is typically found in the /snippets/ directory, e.g. /snippets/card-product.liquid
The product details page. This is typically found in the /sections/ directory, e.g. /sections/main-product.liquid
To get started, you can adapt our example code below. This code simply shows some HTML code if the customer browsing the site is not a logged in B2B customer.
HTML
{%- if customer.metafields.sparklayer.authentication -%}

<!-- B2B content here -->
<spark-product-card parent-id="{{ product.id }}"></spark-product-card>

{%- else -%}

  <div style="font-size: 14px; position: relative; z-index: 10">
    Please <a href="/account" style="color: #000; text-decoration: underline">sign in</a>  to see  pricing
  </div>
  <style>
    [data-spark="b2c-only"] { display:none !important; }
  </style>
  
{%- endif -%}
{%- if customer.metafields.sparklayer.authentication -%}

<!-- B2B content here -->
<spark-product-card parent-id="{{ product.id }}"></spark-product-card>

{%- else -%}

  <div style="font-size: 14px; position: relative; z-index: 10">
    Please <a href="/account" style="color: #000; text-decoration: underline">sign in</a>  to see  pricing
  </div>
  <style>
    [data-spark="b2c-only"] { display:none !important; }
  </style>
  
{%- endif -%}
﻿
﻿
﻿
B2B-only content
Within Shopify, you can very easily adapt your Shopify code to show (or hide) content based on who the customer is. This means, for B2B customers, you could show additional links in the navigation, content on the homepage or product pages, or even hide content from showing.
The code to do this is very simple and we've included a sample below.
HTML
{% if customer.tags contains 'b2b' %}

    Show this content to logged-in B2B customers

{% else %}

    Show this content to logged-out customers

{% endif %}
{% if customer.tags contains 'b2b' %}

    Show this content to logged-in B2B customers

{% else %}

    Show this content to logged-out customers

{% endif %}
﻿
﻿
B2B-only metafields
Shopify also has a powerful feature called metafields that allows you to extend product data to include additional content specific to a product SKU. In the context of wholesale (B2B) ordering, it can be a great way to enrich your product pages with additional wholesale-specific information such as bar codes, marketing content, and anything else. You can learn more about metafields in our guide here﻿.
﻿
Setting up metafields on Shopify
To learn more about how to configure metafields on Shopify for SparkLayer, please refer to our guide here﻿﻿
Once you've populated additional content against your products, you can then update your product detail template to render the data. Here's a sample that renders additional product information but only if a customer is signed in and has a tag of b2b assigned against them. For any other customer, this additional content will be hidden from view.
HTML
{% if customer.tags contains 'b2b' %}

  {%assign custom_attributes = product.metafields.products %}
  
  {%if custom_attributes.size > 0 %}  
  
  <div class="product-meta">
    <p><strong>Additional wholesale information:</strong></p>
    <ul>
      {% for field in custom_attributes %}
        {% assign attribute_code = field | first %}
        {% assign attribute_value = field | last %}
        <li class="custom-attribute-item">
        <span class="custom-attribute-name">{{ attribute_code }}</span>: 
        <span class="custom-attribute-value">{{attribute_value}}</span> 
        </li>
      {% endfor %}
    </ul>
    </div>
  {%endif%}

{% endif %}
{% if customer.tags contains 'b2b' %}

  {%assign custom_attributes = product.metafields.products %}
  
  {%if custom_attributes.size > 0 %}  
  
  <div class="product-meta">
    <p><strong>Additional wholesale information:</strong></p>
    <ul>
      {% for field in custom_attributes %}
        {% assign attribute_code = field | first %}
        {% assign attribute_value = field | last %}
        <li class="custom-attribute-item">
        <span class="custom-attribute-name">{{ attribute_code }}</span>: 
        <span class="custom-attribute-value">{{attribute_value}}</span> 
        </li>
      {% endfor %}
    </ul>
    </div>
  {%endif%}

{% endif %}
﻿
If you're using metafields﻿ on your Shopify store and want to display these to the customer (e.g. on a collection page or product detail page), you can do this by adding special Liquid code to your Shopify theme. 
HTML
<!-- Only show this to logged in B2B customers -->

{% if customer.tags contains 'b2b' %}

  {% if product.metafields.sparklayer.pack_size %}

    <!-- In this example, we're outputting the pack size -->
    Pack size: {{ product.metafields.sparklayer.pack_size }}
  
  {% endif %}

{% endif %}
<!-- Only show this to logged in B2B customers -->

{% if customer.tags contains 'b2b' %}

  {% if product.metafields.sparklayer.pack_size %}

    <!-- In this example, we're outputting the pack size -->
    Pack size: {{ product.metafields.sparklayer.pack_size }}
  
  {% endif %}

{% endif %}
﻿
Learn more about metafields
For learn more about how metafields work on Shopify, please see this guide.
﻿
B2B-only navigation menu
It's possible to create a B2B-only navigation menu for your store that you can show to logged in customers. It works by using Shopify's built-in menu system and then applying some special logic that shows for B2B customers. 
1
First, you'll need to create a new menu in your Shopify store from the "Navigation" section of Shopify (you can access it here). Proceed to set up your menu, making note of the "Handle".
﻿
2
Next, you'll need to locate the liquid file where the menu is setup (normally this is within /sections/header.liquid) You should see a line of code that looks roughly like this:
{%- for link in menu.links -%}
Once you've located this, replace this with the below code, making a note to change b2b-menu to the Handle set up above.
JS
{%- if customer.metafields.sparklayer.authentication -%}
{% assign menu = linklists.b2b-menu %}
{%- else -%}
{% assign menu = linklists.main-menu %}
{%- endif -%}
{%- for link in menu.links -%}
{%- if customer.metafields.sparklayer.authentication -%}
{% assign menu = linklists.b2b-menu %}
{%- else -%}
{% assign menu = linklists.main-menu %}
{%- endif -%}
{%- for link in menu.links -%}
﻿
If you're using the Shopify B2B Dawn Theme﻿, you can edit the following files:
/snippets/header-drawer.liquid
/snippets/header-dropdown-menu.liquid
/snippets/header-mega-menu.liquid
3
You can repeat this process for your website footer if you want that to vary based on a B2B customer being logged in or logged out.
Using the Shopify B2B Dawn Theme?
This theme comes with a ready-made B2B navigation menu. Learn more.﻿﻿
﻿
Hiding content for B2B customers (via CSS)
Just as above in "Showing B2B-only content", it's also possible to do the inverse and hide content from B2B customers. One of the easiest ways to do this is by using special CSS which allows you to selectively hide elements based on whether a customer is logged in or not. In the example below, this CSS is only loaded when a B2B customer is signed into your store.
CSS
{%- if customer.metafields.sparklayer.authentication -%}
<style>
.element-name {
display: none !important;
}
</style>
{%- endif -%}
{%- if customer.metafields.sparklayer.authentication -%}
<style>
.element-name {
display: none !important;
}
</style>
{%- endif -%}
﻿
Please note
When hiding content via CSS, the content will technically still be loaded on your website and can be access in the source code (such as via search engines). Please bear this in mind when controlling the display of content via CSS.
﻿
Redirecting URLs based on URL
Within Shopify, it's possible to redirect a logged in B2B customer based on a specific URL. For example, you may want to redirect the B2B customer from the homepage (the index URL) to a dedicated B2B collection page (e.g. collections/b2b)
To set this up, within the layout/theme.liquid file, before the closing </head> tag, simply add the below code, adjusting to your needs.
JS

{%- if customer.metafields.sparklayer.authentication -%}

 {%- if template contains 'index' 
      or request.path == '/index' 
      or request.path == '/pages/your-specific URL' 
     -%}
  
   <script>
       window.location.href = '/collections/all';
   </script>

   {%- endif -%}

{%- endif -%}

{%- if customer.metafields.sparklayer.authentication -%}

 {%- if template contains 'index' 
      or request.path == '/index' 
      or request.path == '/pages/your-specific URL' 
     -%}
  
   <script>
       window.location.href = '/collections/all';
   </script>

   {%- endif -%}

{%- endif -%}
﻿
﻿
Redirecting URLs for logged out customers
If you're looking to 'block' specific URLs based on a customer being logged in or logged out, this can be done relatively easily within Shopify. If a customer is signed in or logged out, you can perform a simple redirect using JavaScript. To set this up, within the layout/theme.liquid file, before the closing </head> tag, simply add the below code, adjusting to your needs.
JS

{%- if customer.metafields.sparklayer.authentication -%}
<!-- Do nothing for logged in B2B customers -->
{%- else -%}

{%- if  request.path == '/path-to-page-here' or request.path == 'path-to-another-page-here' -%}

   <script>
   window.location.href = '/url-to-redirect-to';
   </script>
{%- endif -%}
{%- endif -%}

{%- if customer.metafields.sparklayer.authentication -%}
<!-- Do nothing for logged in B2B customers -->
{%- else -%}

{%- if  request.path == '/path-to-page-here' or request.path == 'path-to-another-page-here' -%}

   <script>
   window.location.href = '/url-to-redirect-to';
   </script>
{%- endif -%}
{%- endif -%}
﻿
﻿
﻿
Updated 06 Mar 2025
Did this page help you?
Shopify B2B Registration & Login
Shopify Flow for B2B
Shopify B2B-only Content

B2B-only products (hiding products)

Hiding prices

B2B-only content

B2B-only metafields

B2B-only navigation menu

Hiding content for B2B customers (via CSS)

Redirecting URLs based on URL

Redirecting URLs for logged out customers

﻿
