Install SparkLayer on Shopify

We can set this up with you

On a paid plan, our team can set up SparkLayer on your store with you in a personalised onboarding session. Click Book setup call on SparkLayer Wholesale,Setup (in your Shopify admin), or book an onboarding call (opens in a new tab), and we'll walk you through it. On any plan, we'll install the widgets on your theme for free. Or follow this guide to do it yourself.

How it works

SparkLayer adds B2B ordering to your existing Shopify store. Your B2B customers sign in, see their B2B prices, place orders and manage their account. Your retail (DTC) customers see your store as it is today.

Getting SparkLayer live on Shopify

Install

Add SparkLayer Wholesale from the Shopify App Store

Setup

A price list, a customer group and your first buyer

Theme setup

Check SparkLayer is on your theme

Try it out

Place a test order as a B2B buyer

Launch

Invite the rest of your buyers

New to SparkLayer? How SparkLayer works explains the basics, and Storefront covers the B2B interfaces SparkLayer adds.

Before you start

Check you have these in place before you install:

Customer accounts turned on, so customers can sign in to your store. In your Shopify admin, go to Settings,Customer accounts (opens in your Shopify admin in a new tab) and choose a version. SparkLayer works with both Legacy and new customer accounts: see Choose your customer accounts version.
A unique SKU on every product, so SparkLayer can store B2B prices against it. If you need to add them, see Shopify's SKU guide (opens in a new tab).
Your first buyer's email address. You can add them in Shopify with the b2b tag, or tag a customer you already have. Customers you've already tagged b2b in Shopify need at least one complete address on their record. See Add B2B customers on Shopify.
A payment method on test stores. If you're installing on a test store, turn on an example payment method at Settings,Payments (opens in your Shopify admin in a new tab).

Install the app and connect your store

Open the SparkLayer Wholesale app (opens in a new tab) in the Shopify App Store and install it on your store.
Choose a SparkLayer plan when Shopify asks. You're billed through Shopify, and every paid plan is free for 14 days. See Plans and features.
SparkLayer opens on Home. It's now a sales channel called SparkLayer Wholesale in your Shopify admin, and it starts syncing your products and customers.

If you created your SparkLayer account first, connect your store from the SparkLayer Dashboard instead. Go to SparkLayer Wholesale,Integrations,Platform (in your Shopify admin), select Shopify and enter your store's address. Then install the app and choose a plan when Shopify asks.

The B2B Ordering app pixel

SparkLayer also adds an app pixel called B2B Ordering to Settings,Customer events (opens in your Shopify admin in a new tab). It tells SparkLayer when a customer completes a card payment in the Shopify checkout, so their cart is cleared. You don't need to do anything with it.

Find your way around the app

In your Shopify admin, click SparkLayer Wholesale under Sales channels to open Home. Each menu item opens an area, with that area's pages as tabs. These are the ones you need to get going:

Menu item	Use it to
Home	See this week's B2B sales and follow the Get your first wholesale order card.
Setup	Work through the 5 setup steps.
Try it out	Place a test order as a B2B buyer.

The same screens are also in the SparkLayer Dashboard at app.sparklayer.io (opens in a new tab).

Work through Setup

Setup is the checklist that gets you selling. Use it to do each step yourself. Go to SparkLayer Wholesale,Setup (in your Shopify admin): it has 5 steps in 2 groups, and each step ticks itself off when it's done.

Get started walks through every step. On Shopify, these details also apply.

Set up a price list

An Automatic price list works from your Shopify prices, for example 50% off your Shopify retail price or 40% off your compare-at price. A Manual price list takes exact prices from a CSV file. See Managing pricing.

Assign a price list to a customer group

Each customer group has a Shopify tag, shown under its name, such as b2b-trade. A customer joins the group when their Shopify record has the b2b tag and the group's tag. Customers with only b2b get the Base customer group. See Customer groups.

Add your first buyer

To add the buyer yourself, create them in your Shopify admin as a new customer with the b2b tag. See Add a new customer from scratch.

Tag existing customers in Shopify

Customers already in Shopify become B2B customers through their tags. Check each one has:

The b2b tag on their Shopify customer record.
Their group's tag, if they belong to a group other than Base: for example b2b and b2b-vip.
No more than 2 B2B tags. b2b with b2b-vip is correct; b2b with b2b-vip and b2b-user is not.
At least one complete address on their Shopify record, so they can get through checkout.

To add a tag, open the customer in Shopify and type it in the Tags field. If the tag doesn't exist yet, Shopify creates it. To tag many customers at once, see Add B2B customers on Shopify. Customers that don't sync show in a banner at SparkLayer Wholesale,Customers (in your Shopify admin): click Show errors to see why.

If you use Shopify's B2B companies, see Shopify Companies for how they work with SparkLayer.

Add SparkLayer to your theme

With your prices and buyers ready, check SparkLayer is on your theme. The SparkLayer frontend is a set of B2B widgets that sit over parts of your Shopify store: the cart and account area, the product page and the product cards on collection pages. They only appear for signed-in B2B customers, so your retail store is untouched.

When you install the app, SparkLayer sets itself up on your theme automatically. Steps 4 and 5 of Setup, Add SparkLayer to your theme and Publish theme, check it for the theme you choose under Select theme. You don't have to edit any theme code yourself. To check each SparkLayer block is on, click Review theme setup on step 4: Theme setup explains every block, and the 3 ways to install SparkLayer on your theme.

Ask our team to install it

If you'd rather not touch your theme, or something doesn't look right, our team installs SparkLayer for you, free of charge, on every plan. Click Something not right? Install SparkLayer for me on Theme setup, or Request installation at SparkLayer Wholesale,Storefront,Widgets (in your Shopify admin). See Ask our team to install it for what happens next and what the installation includes.

Match your store's design

Optionally, style the widgets to match your store: button colours, font sizes, spacing and typefaces. This is a CSS change for you or your developer. Add the CSS snippet from Change your brand colours and fonts to theme.liquid or a separate CSS file. If our team installed SparkLayer, we match your branding for you.

Use the B2B Dawn theme instead

If you'd rather not change your existing theme, our B2B Dawn theme comes with all the SparkLayer widgets installed.

Automatic install on supported themes

SparkLayer works on any Shopify theme. On the themes below, the product detail and product card interfaces are added automatically as app blocks. You don't need the theme code in steps 2 and 3 of Install the widgets yourself.

Dawn family: Dawn, Refresh, Sense, Studio, Craft, Taste, Origin, Ride, Colorblock, Crave, Spotlight, Publisher, Trade
Horizon family: Horizon
Archetype family: Impulse, Expanse, Streamline
Other: Savor, Ritual, Vessel, Atelier, Dwell, Pitch, Heritage, Tinker

On these themes, the automatic install also applies a small amount of CSS, so the B2B widgets sit cleanly alongside your theme. If that causes styling conflicts, your developer can turn off the automatic install and add the interfaces by hand.

Install the widgets yourself

This section is for you or your developer, if you want to place the widgets by hand. Step 1 takes a couple of clicks. Steps 2 and 3 can be done with the optional blocks on Theme setup, or as theme code changes. Skip the code on a supported theme, or ask our team and we do it free of charge.

Work on a copy of your theme

Duplicate your live Shopify theme and make the changes on the copy. Choose the copy under Select theme on Setup to check it, then publish it when you're happy with it.

Turn on the SparkLayer block

The SparkLayer block loads SparkLayer's JavaScript on your storefront, with the cart and account area. On SparkLayer Wholesale,Setup,Theme setup (in your Shopify admin), check it shows Enabled. If it doesn't, click Edit to open your theme editor at the block. Turn it on and click Save.

Add the product detail interface

The product detail interface replaces your product page's buying area with B2B prices and quantity controls when a B2B customer is signed in.

The quickest way is the Product block: on Theme setup, click Add beside it, place it in the theme editor and click Save. To add it in theme code instead, add this snippet to the file that controls your product page. That's usually main-product.liquid or product-template.liquid in your theme's /sections/ folder:

<spark-pdp parent-id="{{ product.id }}"></spark-pdp>

If your theme has a {% when 'price' %} block, add the snippet directly beneath it:

{% when 'price' %}<spark-pdp parent-id="{{ product.id }}"></spark-pdp>

If you're adding SparkLayer to your existing retail theme, hide the elements B2B customers shouldn't see, such as retail prices, quantity selectors, product options and buy buttons. To hide an element, add data-spark="b2c-only" to it:

<div data-spark="b2c-only" class="product-meta-reference">

The frontend integration checklist lists every element to hide.

Add the product card interface

The product card interface adds B2B prices and quantity controls to your collection pages, so customers can add items to their order from anywhere in your store.

The quickest way is the Product card block: on Theme setup, click Add beside it, place it in the theme editor and click Save. To add it in theme code instead, find the file that renders product cards on collection pages. That's usually card-product.liquid, product-grid-item.liquid or similar in your theme's /snippets/ folder. Look for the line that renders the product title:

{{ product.title }}

Add this snippet directly below it:

<spark-product-card parent-id="{{ product.id }}"></spark-product-card>

Depending on your theme, product.id may need to be card_product.id or similar: check how your theme names the variable. As with the product page, hide any retail elements with data-spark="b2c-only".

When the widgets are in place, use Try it out to check your product pages and collection pages as a B2B customer. Your developer can use the frontend integration checklist to check everything is configured correctly.

Turn off the automatic install

This is for developers. Turn off the automatic install to control exactly where the interfaces appear on a supported theme, or to avoid the automatic styling. Add this to your theme's theme.liquid file, just before the closing </head> tag:

<script>
  window.sparkShopify = {
    options: {
      disableAutoInstall: true
    }
  };
</script>

Then follow steps 2 and 3 of Install the widgets yourself to add the interfaces where you want them.

Choose your customer accounts version

B2B customers sign in to your store with a Shopify customer account, so customer accounts must be turned on. Shopify offers 2 versions:

Legacy (formerly "classic"): customers create an account and sign in with an email and password. Most Shopify stores use this version. It works with third-party apps, and you can customise how it looks.
Customer accounts (often called "new customer accounts"): customers sign in with a one-time code sent to their email, with no password. The account area is Shopify's own, much like the checkout, and can't be restyled.

Version	Advantages	Disadvantages
Legacy	A smoother customer experience. No extra setup.	Functionality is specific to your Shopify store. Not fully supported by Shopify.
Customer accounts (new)	Works on all Shopify stores. Actively maintained by Shopify.	Limited customisation (for example, you can't change the look and feel). Customers sign in with a 6-digit code rather than a password.

To check or change your version:

In your Shopify admin, go to Settings,Customer accounts (opens in your Shopify admin in a new tab).
Make sure Show login links is on, so the sign-in link shows in your store's header and at checkout.
Under Choose which version of customer accounts to link to, select Customer accounts or Legacy, then save.

If you use Legacy accounts, there's nothing more to do. If you use new customer accounts, follow Set up new customer accounts below.

With new customer accounts, anyone can sign in with an emailed code and get a Shopify customer account, without applying. On a wholesale-only store, see Wholesale-only stores for how to handle them.

Set up new customer accounts

New customer accounts need 2 changes. The first is required. The second is optional, but makes signing in smoother.

Turn on the B2B Account Redirect extension

When a B2B customer opens Shopify's customer account area, this extension sends them back to your online store, where they can use SparkLayer.

In your Shopify admin, go to Settings,Checkout (opens in your Shopify admin in a new tab).
Under Configurations, click Customize beside your live configuration.
From the page selector at the top, open the Orders page.
Click Apps on the left, then turn on the B2B Account Redirect extension.
Optionally, fill in the extension's Block settings:
- Redirect Notice (Optional): a message shown before the customer is redirected. If you leave it blank, customers see "Please note, you are being redirected to our website to begin your B2B ordering."
- Redirect Path (Optional): where to send the customer, for example /collections/all. If you leave it blank, they go to your homepage.
Click Save.

You only need to do this once. It applies to every page in the Shopify customer account area. Theme setup lists the redirect as a required block, B2B Account Redirect, so you can check it's on there.

Update your theme's sign-in links (optional, for your developer)

With a small theme code change, customers return to your store, and the page they were on, after signing in. You can skip this step: signing in works without it. If you'd like it but don't edit theme code yourself, pass the detail below to your developer or contact our support team.

Theme code for your developer

Shopify's technical guide to customer account links (opens in a new tab) explains the routes used here.

In your theme code, find the Liquid code for the account link: usually the person icon in your store's header.
Update the link destination as in the sample below.

{%- if shop.customer_accounts_enabled -%}
  <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.storefront_login_url }}{%- endif -%}"
    class="icon"
    rel="nofollow">
  </a>
{%- endif -%}

You can use the same route on any link in your store:

<a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}/customer_authentication/login?return_to={{ request.path | append: "#spark-account" | url_encode }}{%- endif -%}">
Login
</a>

If you need help with either step, contact our support team.

Try it out as a buyer

Before you invite anyone, see SparkLayer the way your buyers will.

Go to SparkLayer Wholesale,Try it out (in your Shopify admin) and choose the theme.
Work through Test as a B2B customer, Assign a price list and Place a test order.

SparkLayer creates a test customer with the b2b tag for you, and the test order doesn't count towards your plan. See Try it out.

Test and launch

When Setup shows You're ready to go with SparkLayer and your test order looks right, work through the launch checklist. It covers the remaining checks, such as products in the SparkLayer Wholesale sales channel, and inviting the rest of your buyers.

To go live, click Start taking B2B orders on the app's Home. A preview mode banner on your store means this step isn't done yet. See Turn off preview mode.

Troubleshooting

For other problems, such as pricing, see Troubleshooting, or contact our support team.

Recommended next steps

Once SparkLayer is live, optional extras improve the B2B experience, such as a B2B login and registration page, B2B-only products, pack sizes and B2B shipping. See Turn on extra B2B features and Shopify customisations. For every storefront option, see Storefront.

Answers to common questions about plans, setup, payments, products and orders are in Shopify FAQs.

Theme setup

Check SparkLayer's blocks on your theme, or ask our team to install it

Launch checklist

The final checks, then invite your B2B customers

My store shows a preview mode bannerCopy link

Someone signed in without a trade account and sees retail pricesCopy link