B2B landing page

How it works

When a signed-in B2B customer opens your store's account area (for example /account), SparkLayer normally sends them to the SparkLayer My Account interface. You can send them to a page of your choice instead: a central hub for your B2B store that highlights products, shares important information or links to account tools.

Choose a landing page

Start by choosing what kind of page to send customers to:

A B2B product collection

Create a collection in Shopify that holds the products you want B2B customers to see first. Manage collections in your Shopify admin at Products,Collections (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Products › Collections to do this now. Opens in a new tab..

A custom Shopify page

Create a standard Shopify page, for example called "B2B Landing Page", at Online Store,Pages (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Online Store › Pages to do this now. Opens in a new tab.. You can also edit it at Online Store > Customize on your live theme. It could include:

• Welcome text or messaging
• Links to featured products or categories
• Helpful content or banners
• Links to account tools, such as invoices or quick order

What you can add depends on your theme, so you may need to ask your theme developer how best to approach it.

A page builder app

Shopify page builder apps give you a drag-and-drop editor for designing pages. Options in the Shopify App Store include PageFly (opens in a new tab), Shogun (opens in a new tab), Instant (opens in a new tab) and many others (opens in a new tab). Like other Shopify pages, each page you build has its own URL.

Other ideas

You could also add:

• Quick links to quotes, past orders or special offers.
• B2B-only content using Shopify Liquid (see Shopify B2B-only content).
• A video or help resources for new customers.

Send B2B customers to your landing page

Once your page is ready, tell SparkLayer to send B2B customers there. Use the Core Script, or the B2B Account Redirect extension if you use new customer accounts.

With the SparkLayer Core Script (for your developer)

This option is a code change, so pass it to your developer. If you use new customer accounts, the no-code option below does the same job. Add this to your SparkLayer Core Script, and change goTo to your landing page's URL:

accountRedirect: {
  urlRegex: /\/account/g,
  goTo: "/index", // page to redirect logged in users to
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    accountRedirect: {
      urlRegex: /\/account/g,
      goTo: "/index", // page to redirect logged in users to
    },
  };
</script>

With new customer accounts

If you use Shopify's new customer accounts, you can set the destination in your Shopify admin instead:

1. Go to Settings,Checkout (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Settings › Checkout to do this now. Opens in a new tab..
2. Under Configurations, click Customize beside your live configuration.
3. From the page selector at the top, open the Orders page.
4. Click Apps on the left, then turn on the B2B Account Redirect extension.
5. Optionally, enter a Redirect Notice (Optional) to show customers before they're redirected.
6. Enter your landing page in Redirect Path (Optional), for example /collections/b2b-products. If you leave it blank, customers go to your homepage.
7. Click Save.

Send customer groups to different pages

With Legacy customer accounts, you can send each customer group to a different page: for example, customers tagged b2b-group-1 to /collections/wholesale-page and customers tagged b2b-group-2 to /collections/another-wholesale-page.

In your SparkLayer Core Script, replace the accountRedirect code above with this Liquid code, and change the tags and URLs to suit your groups:

accountRedirect: {
  urlRegex: /\/account/g,

  {% assign goTo = "/index" %}
  {% for tag in customer.tags %}
    {% if tag == "b2b-group-1" %}
      {% assign goTo = "/collections/wholesale-page" %}
    {% elsif tag == "b2b-group-2" %}
      {% assign goTo = "/collections/another-wholesale-page" %}
    {% endif %}
  {% endfor %}

  goTo: {{ goTo | json }},
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    accountRedirect: {
      urlRegex: /\/account/g,

      {% assign goTo = "/index" %}
      {% for tag in customer.tags %}
        {% if tag == "b2b-group-1" %}
          {% assign goTo = "/collections/wholesale-page" %}
        {% elsif tag == "b2b-group-2" %}
          {% assign goTo = "/collections/another-wholesale-page" %}
        {% endif %}
      {% endfor %}

      goTo: {{ goTo | json }},
    },
  };
</script>

Show B2B content on your landing page

You can use Shopify's Liquid templates to change what the landing page shows, depending on whether the customer is a B2B customer. For example:

{% if customer.tags contains 'b2b' %}
  <p>Welcome back, valued wholesale customer!</p>
  <a href="/collections/b2b-products" class="button">Browse B2B Products</a>
{% else %}
  <p>This page is for B2B customers only.</p>
{% endif %}

For more examples, see Shopify B2B-only content.