B2B-only content

How it works

Your theme can check who's browsing and show different content to B2B customers. The examples on this page use 2 checks:

Check	When it's true
`customer.tags contains 'b2b'`	The signed-in customer has the `b2b` tag in Shopify.
`customer.metafields.sparklayer.authentication`	The customer is signed in as a SparkLayer B2B customer.

Wrap content in one of these {% if %} checks to show it only to B2B customers, or put it in the {% else %} part to show it only to everyone else.

Show products only to B2B customers

If you run B2B and retail in one Shopify store, you may have products that only signed-in B2B customers should see and buy, such as high-volume or B2B-exclusive lines.

B2B Catalogs (opens in a new tab) is a free SparkLayer app that controls which products each type of customer can see. You can hide products from retail customers, make products B2B-only, or show different ranges to different customer groups, all with tags and no code.

Install B2B Catalogs (opens in a new tab) from the Shopify App Store, then follow the B2B Catalogs documentation to set it up. To hide variants from particular customer groups, see How products are shown.

Hide prices from signed-out visitors

On a dedicated B2B (wholesale-only) store, you can hide prices from anyone who isn't signed in. Logged-out visitors and guests, and customers without the b2b tag, see your normal Shopify (retail) prices, because SparkLayer only shows B2B prices to signed-in B2B customers. To stop prices being visible to the public, add code like the example below to:

Product cards on your collection pages (for example /collections/all). The code is usually in the /snippets/ folder, for example /snippets/card-product.liquid.
The product page. This is usually in the /sections/ folder, for example /sections/main-product.liquid.

The code shows the SparkLayer product card to signed-in B2B customers, and a "Please sign in to see pricing" message to everyone else:

{%- 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/login?return_url={{ request.path }}" style="color: #000; text-decoration: underline">sign in</a> to see pricing
  </div>
  <style>
    [data-spark="b2c-only"] { display:none !important; }
  </style>

{%- endif -%}

Show content only to B2B customers

You can show or hide any content depending on who the customer is, such as extra links in the navigation, or content on your homepage or product pages.

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

    Show this content to logged-in B2B customers

{% else %}

    Show this content to logged-out customers

{% endif %}

Show B2B-only product information

You can store extra wholesale information against each product, such as barcodes or marketing content, in Shopify metafields. Then show it only to B2B customers, for example in an "Additional information" box on the product page.

This example lists a product's metafields, but only to signed-in customers tagged b2b:

{% 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 %}

To show a single SparkLayer metafield on a collection or product page, such as the pack size:

<!-- 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 %}

See Shopify metafields and data mapping to set metafields up, and Shopify's metafields guide (opens in a new tab) to learn more about them.

You can show signed-in B2B customers a different menu, using Shopify's own menus. If you use our Shopify B2B Dawn theme, it has a B2B menu built in.

Create the menu

In your Shopify admin, go to Online Store,Navigation (opens in your Shopify admin in a new tab) and create a menu. Note its Handle, for example b2b-menu.

Update your header code

Find the Liquid file that builds your menu, usually /sections/header.liquid. Look for a line like this:

{%- for link in menu.links -%}

Replace it with the code below, changing b2b-menu to your menu's handle:

{%- if customer.metafields.sparklayer.authentication -%}
{% assign menu = linklists.b2b-menu %}
{%- else -%}
{% assign menu = linklists.main-menu %}
{%- endif -%}
{%- for link in menu.links -%}

In the Shopify B2B Dawn theme, edit these files instead:

/snippets/header-drawer.liquid
/snippets/header-dropdown-menu.liquid
/snippets/header-mega-menu.liquid

Repeat for the footer (optional)

Do the same for your footer if you want it to change for signed-in B2B customers too.

A banner that only signed-in B2B customers see can confirm they're getting wholesale prices, or link to bulk ordering. This example shows a dark bar above your header with a B2B Partner badge, a welcome message and a Shop Wholesale link.

Add it to layout/theme.liquid for a banner on every page, or to sections/header.liquid:

{% if customer and customer.tags contains 'b2b' %}
    <style>
    .b2b-banner-premium {
        background: linear-gradient(90deg, #1a1a1a 0%,rgb(35, 35, 35) 100%);
        color: #fff;
        padding: 10px 20px;
        text-align: center;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        letter-spacing: 0.5px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    .b2b-banner-premium .badge {
        background: #fff;
        color:rgb(50, 50, 50);
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: 900;
        font-size: 11px;
        text-transform: uppercase;
    }
    .b2b-banner-premium a {
        color: #fff;
        font-weight: bold;
        margin-left: 15px;
        text-decoration: none;
        border-bottom: 1px dotted #fff;
        transition: opacity 0.2s;
    }
    .b2b-banner-premium a:hover { opacity: 0.8; }
  </style>

  <div class="b2b-banner-premium">
    <span class="badge">B2B Partner</span>
    <span>Welcome back! You are accessing <strong>Exclusive Wholesale Pricing.</strong></span>
    <a href="/collections/all">Shop Wholesale →</a>
  </div>
 {%- endif -%}

Hide content from B2B customers with CSS

You can also do the opposite, and hide content from B2B customers. One way is CSS that only loads when a B2B customer is signed in:

{%- if customer.metafields.sparklayer.authentication -%}
<style>
.element-name {
display: none !important;
}
</style>
{%- endif -%}

Content hidden with CSS still loads on the page, so anyone can find it in the page source, including search engines.

Change the Core Script by customer tag

You can change how SparkLayer behaves for different customers with logic in the SparkLayer Core Script. For example, you might show a custom checkout field only to customers with a particular tag. Start from this example:

<!-- SparkLayer core script code -->
{% for tag in customer.tags %}

{% if tag == "b2b-group-1" %}
   -- Code in here for group-1 --

{% elsif tag == "b2b-group-2" %}
    -- Code in here for group-2--

{% else %}
    -- Code in here as fallback --
{% endif %} 

{% endfor %}

<!-- SparkLayer core script code -->

Redirect B2B customers from a page

You can send signed-in B2B customers from one page to another: for example, from your homepage (the index template) to a B2B collection such as /collections/b2b.

Add this to layout/theme.liquid before the closing </head> tag, and change the pages to suit your store:


{%- 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 -%}

To choose where B2B customers land when they sign in, see Shopify B2B landing page.

Redirect signed-out visitors from a page

To block pages for anyone who isn't a signed-in B2B customer, redirect them elsewhere. Add this to layout/theme.liquid before the closing </head> tag, and change the paths to suit your store:


{%- 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 -%}

To lock your whole store until customers sign in, see Make customers sign in before they see your store.