Installing SparkLayer on Shopify

To ensure new customer accounts are compatible with SparkLayer, there are 2 actions to take:

You can see how it works in our video below

Adding an automatic redirect to the customer account area

The first step is to enable the special SparkLayer customer account extension within your Shopify store. Once setup, if a B2B customer accesses the Shopify customer account area, they will automatically be redirected and taken back to your online store.

In your Shopify admin, go to Settings, Checkout, and within Configurations, click "Customize".

From the top, navigate to the "Orders" page, click "Apps" on the left, and then enable the "B2B Account Redirect" extension. You can also include:

Finally, click "Save" and that will complete the process. You only need to apply this once and it'll take effect on all pages within the Shopify Customer Account area

Updating your theme

In additional to the automatic redirect detailed above, you can also add some minor customisations to your Shopify theme to make the process a little smoother.

With the addition of some minor code, you can redirect a customer back to the page they were viewing prior to logging in.

Once set up, when a customer signs in, they'll be taken back to your store and can proceeed to use SparkLayer. To get started, you'll need to locate the Shopify liquid code that controls the My Account link.

In our sample code below, we've modified the link destination with the correct syntax.

Similarly, you can add the route to any URL on your storefront:

The app embed loads SparkLayer's JavaScript on your storefront. From the dashboard, select your theme and click Enable app embed - this opens your theme editor in a new tab where you'll click Save to activate it.

The product detail interface replaces your standard product purchasing area with SparkLayer's B2B-specific pricing and quantity controls when a B2B customer is logged in.

Add the following snippet to the file that controls your product detail page (typically main-product.liquid or product-template.liquid in your theme's /sections/ directory):

If your theme includes the following block, we recommend adding the snippet directly beneath it:

Important: if you're running SparkLayer on your existing DTC theme, you'll need to hide elements that B2B customers shouldn't see (prices, quantity selectors, product options, buy buttons, etc.). To hide an element, add data-spark="b2c-only" to it:

See our Frontend integration checklist for the full list of elements to hide.

The product card interface shows SparkLayer pricing and quantity controls on your collection pages, so customers can add items to their order from anywhere on your store.

Add the following snippet to the file that renders product cards on collection pages (typically card-product.liquid, product-grid-item.liquid, or similar in your theme's /snippets/ directory):

Look for the line that renders the product title:

Add the SparkLayer snippet directly below it.

Please note: depending on your theme, the variable product.id may need to be card_product.id or similar. Check your theme's existing variable naming.

As with the product detail interface, hide any DTC elements with data-spark="b2c-only".

SparkLayer works on all versions of Shopify, from Shopify Basic right through to Shopify Plus. All you need is an active Shopify store and you're good to go.

Shopify expanded native B2B features to all plan tiers, including company accounts, up to 3 pricing catalogs, net terms, PO numbers, and easy reorders. For merchants with a handful of wholesale accounts on simple terms, this covers the basics.

SparkLayer is designed for merchants who need more. Here are the key differences:

Pricing flexibility - Shopify's free B2B tier limits you to 3 pricing catalogs assigned to Markets (customer groupings). If you need more than 3 pricing tiers or per-customer pricing, you'd need Shopify Plus at $2,300/month. SparkLayer gives you unlimited price lists on all plans, assigned directly to customer groups.

Sales team ordering - Shopify offers staff accounts that can create draft orders in the admin. SparkLayer has a dedicated Sales Agent Portal where reps log in, switch between customer accounts, see customer-specific pricing, and place orders on behalf of buyers. It's a fundamentally different workflow.

B2B ordering features - Several capabilities are only available through SparkLayer and don't exist on any Shopify plan, including Plus: CSV and bulk order upload, AI Intelligent Cart (auto-builds carts from emailed POs), saved shopping lists, advanced discounts, a Quoting Engine for quote-to-order workflows, and self-service invoicing.

Works on any theme - SparkLayer overlays a B2B experience on top of your existing Shopify theme. Shopify's native B2B works best with their Trade theme.

Transaction fees - SparkLayer charges no transaction fees on any plan. Shopify charges variable platform fees on B2B orders across all plan tiers.

Shopify Companies compatibility - SparkLayer works alongside Shopify's Companies feature. Draft orders created through SparkLayer are automatically associated with the correct Shopify Company, Contact, and Location for accurate order attribution and reporting.

SparkLayer and Shopify's native B2B can't currently run side by side for the same customer session - it's one or the other for the ordering experience.

For a full feature-by-feature breakdown, read our detailed comparison: SparkLayer vs Shopify B2B - What You Need to Know

Yes! If you're setting up SparkLayer on a development store (e.g. a test account), we can enable a special developer-mode that lets you use SparkLayer until you're ready to activate a billing plan. Please contact us for more details.

Yes, It's possible to install SparkLayer onto your existing Shopify DTC store (i.e. retail), meaning you can run both DTC and B2B on the same store. We call this a 'hybrid setup' and we've a guide here that explains how works. When your B2B customers sign in, they simply see the special SparkLayer Frontend interface that allow them to see their prices and place orders.

If you want to see this in action, you can try our B2B/B2C demo store here  Sometimes it can be better to separate out your B2B store onto a secondary Shopify store and we've detailed some of the common reasons.

When setting up your Shopify store, it's possible to choose from two types of 'Customer Accounts' within Shopify:

Compatibility with SparkLayer

SparkLayer works with both versions of accounts. You can learn more in Shopify Customisations under "Shopify customer accounts"

Yes, please refer to our full guide, Shopify Companies.

When a customer places an order via the Shopify Checkout, SparkLayer needs to know when the order is completed. By adding a special Shopify pixel, this then resets contents of the customer's order and allows them to place additional orders if they wish. Please note, this step is fully automated when you install SparkLayer and no action is typically required.

To check the SparkLayer pixel has been added to your Shopify store, go to Settings and click Customer events. You should see a pixel added by SparkLayer and this should be set to the Connected state. When you view the pixel, you will see it called "B2B Ordering" which corresponds to the Sales Channel used by SparkLayer.

If you don't see the SparkLayer "B2B Ordering" pixel, you will need to reconnect your Shopify store via the SparkLayer Dashboard. Simply click the "Save" button at the bottom, and this will activate the pixel for you.

Yes! Within the SparkLayer Dashboard, you'll see an option to request our team to install SparkLayer for you. Typically we can do this within 1-2 working days and you're then good to go. We then offer an onboarding session to walk you through how everything works.

Yes! SparkLayer is compatible with all Shopify themes, even fully customised. If you need help in the setup, our team can add all the code snippets for you. You can even try our Shopify B2B Dawn Theme

SparkLayer works by updating the product page templates with our special frontend widgets - these automatically pull in your variants, SKUs, and any associated product data that is required for your B2B customers. When they are loaded into your Shopify store, they essentially 'replace' the existing Shopify purchase area that your regular DTC (retail) customers see. Very often, we see Shopify themes that have functionality whereby changing variants will auto-update the main product imagery.

This itself is almost always very specific "custom coding" to the theme that is being used - on a technical level, it will be using Shopify theme specific JavaScript coding to do this and will be engineered in a particularly way for the theme. When our SparkLayer widgets are loaded in, they won't have any handling for this specific JavaScript that controls the imagery, so this functionality isn't compatible for logged in B2B customers. As a solution to this, we have released a guide (aimed at Shopify developers) to point them in the right direction to make SparkLayer compatible based on the specific theme they are using. Learn more

SparkLayer requires adding specific code to your Shopify store and normally involves updating 3 or 4 files within your theme. When you perform a theme update, it's likely that these changes will be removed and the SparkLayer code will need adding back in. We are always happy to perform this re-install for you, please get in touch and we'll be happy to help.

The SparkLayer B2B widgets, including B2B pricing, cart and my account area, are only loaded once a customer who has been tagged with b2b successfully signs in to your store.

For all other users, your store will remain completely unaffected.

This allows you to have full control over which customers are able to see your B2B pricing and place B2B orders.

If you already have a B2B / Wholesale app installed on your store, SparkLayer can work alongside this. It's a great way to test out SparkLayer and, once you're happy, you can simply uninstall any previous B2B apps you were using. If your previous B2B app has made code changes to your Shopify store, you may want to ask the app developer to remove these although this is optional.

No. For performance, the SparkLayer Frontend only loads when a valid B2B customer successfully logs into a website; for your standard (B2C) customers, no code is loaded at all. When a B2B customer logs in, all loading of the interfaces is asynchronous which means a negligible impact on page load times and performance even though SparkLayer is a hosted third-party solution. The result is the end customer will have a rapid experience browsing products and placing orders.

If you're looking to enable a wholesale/B2B registration form, we recommend the following options:

It's also worth noting that you can manually add customers via the Shopify Customers admin and from there you could moderate your wholesale applications.

By default, Google will almost certainly index your Shopify store to show on their search listings. A result of this is your Shopify prices (retail prices) may also show within Google.

It's very important to note that this is not related to SparkLayer and is in fact a built-in feature of Shopify. If you do not want your prices to show on Google this is a customisation that would need to be applied via your Shopify store (not via SparkLayer directly). The Shopify support team may be able to best advice here but there are a range of Shopify community articles that you can review.

Please note, making any changes to your Shopify store in this manner may effect your Google search results and we strongly advise speaking with a Shopify expert before making any changes.

It's possible to set up discount codes that customers can use during the checkout process. For example, you could set up a discount coupon that gives them 10% off their order.

To learn how discounts work, please see our guide here.

Within the SparkLayer Discounts , using the "Advanced requirements and rewards", you can setup discounts to apply to products with specific tags setup within your store (e.g. in Shopify). For example, you could set the discount to only apply if products within the cart have a tag of dog-toy applied, or match a broad term of dog. This allows you to setup discounts to apply to collections and product ranges easily. There are also other workarounds without using discounts:

It's possible to set up discounts that apply based on a certain threshold, e.g. the order total or the number of items in a cart. To learn more about discounts, see our guide here

SparkLayer supports a range of B2B-specific payment methods that can be tailored on a per-customer basis. Our diagram below illustrates how they work in the context of SparkLayer and Shopify. To learn more, please see our full guide here.

Yes! Shopify's vaulted credit card feature is fully compatible with SparkLayer. For it to work, the customer placing the order must be assigned to a Shopify company (under Customers > Companies in the Shopify admin). Once a customer within that company location has saved a card - either during checkout or via their customer account - any other customer linked to the same company location can use it.

Vaulted cards appear as an option when a customer selects "Pay Online by Card" during the SparkLayer checkout process. They can also be charged against draft orders created by SparkLayer - for example, if a customer places an order using "Pay by Invoice", you can collect payment on the resulting draft order using a vaulted card directly from the Shopify admin.

To get started, you need Shopify Payments enabled and your B2B customers linked to company records in Shopify. No additional SparkLayer configuration is required. You can learn more in our Shopify Companies guide.

In terms of payment methods supported by SparkLayer and Shopify. If your customers choose "Pay Online by Card" during the SparkLayer checkout process, they will simply be taken to the Shopify checkout. From there, any payment methods you have set up in Shopify (e.g. Paypal, Shop Pay, Affirm Pay) will show up, allowing the customers to pay by this method. We've attached a screenshot to illustrate this.

In short, if Shopify support this payment method, your B2B customers could select it during the checkout providing they choose "Pay Online by Card".

There may be scenarios where you want to add an additional charge on an order based on the payment type used (e.g. if the customer is paying by credit card, you may want to charge an additional 2%).

Currently, there is no way to do this directly via SparkLayer. One potential option is to allow the customer to place an order via a manual payment method (e.g. Pay by Invoice), and when the order arrives into Shopify as a draft order, adjust the order totals accordingly. From the draft order within Shopify, you can then use their "Collect payment" functionality to take the card payment.

B2B Catalogs is a free SparkLayer app that lets you control which products are visible to different types of customers on your Shopify store. Hide products from B2C customers, restrict items to B2B-only, or show different product ranges to different customer groups - all using simple tags, no code required.

Install B2B Catalogs from the Shopify App Store, then head to our B2B Catalogs documentation for the full setup guide.

Yes! SparkLayer allows you to automatically synchronise your Shopify prices (e.g. your main Shopify price, Compare-at price), making it really easy to set up B2B pricing for your customers. For example, you could set your B2B prices to be 20% off your Shopify prices and we can even make provisions for your tax set up in Shopify (e.g. exclusive or inclusive of tax).

In terms of pre-ordering, SparkLayer has full support for different stock status messages and it's possible to set up products as pre-order/back-order easily - it does rely on some configuration within Shopify, but it's relatively easy to do!

We've full information here on how it works and you can even set up "due in" dates to give your customers visibility.

In terms of product SKUs, SparkLayer relies on these being added to your products within Shopify so that we can display the correct B2B pricing when your customers log in. Without a unique SKU, there's no way for SparkLayer to do this.

If you don't already have SKUs in Shopify, it's relatively quick to do. You can either edit individual products and add them manually, or you can use Shopify's 'Import' or 'Edit products' feature to do this in bulk.

If you're installing SparkLayer on a single website and you are looking to run both DTC and B2B at the same time, it will be necessary to use the same stock pool behind the scenes. From an inventory point of view, this essentially means that both DTC and B2B customers will be ordering from the same stock source which can pose challenges.

SparkLayer has a way to "reserve" stock for your DTC customers, essentially blocking B2B customers from ordering too much inventory for a specific product. Learn more

To enable a customer as B2B, this works by adding a special tag in Shopify against their customer record. This tag by default is always b2b and you can add additional tags based on the rules you've set for the customer in the SparkLayer Customers admin.

To learn more about setting up customers as B2B, see our guide here.

Please refer to our guide here.

For non-card payment orders (e.g. Payment by Invoice), the order is saved as a "Draft order".

When a customer places an order via non-card payment methods, it will show with a status of "Awaiting Merchant" until the order ("Draft" order) is converted into a Completed order.

Firstly, it is possible to edit orders within Shopify when an order is placed via SparkLayer. If you have it configured to create orders as 'Draft orders' you can go into the order and make changes. If you subsequently then manually complete the order (i.e. Mark as paid), you can still edit the order up until the point of fulfilment.

The issue arises in one scenario we know about which is a limitation of Shopify. If you have 'Auto-complete Shopify Draft orders' turned on within the SparkLayer Dashboard > Settings this will skip the ability to make subsequent orders. This is why, when you try and edit a 'Completed order', you are seeing the "Unable to edit order" message. At this point in time, we don't have a solution to this, other than switching 'off' the SparkLayer setting that automatically completes a draft order.

Yes! By default, prices from SparkLayer into Shopify will show exactly as you've set them up in the SparkLayer Price Lists.

If you'd prefer to show the original Shopify price, please contact our team.

You can change the wording of "Custom discount" by editing the languages within your Shopify store.

Please see our guide: Invoices

Within SparkLayer, we do have support for minimum (and maximum) quantities, but you're only able to set these at a product or product-variant level. It's not possible to currently set minimum order-level quantities but it's something we are considering as part of a future update!

There is a potential workaround for product-variant requirements and we've included our recommend approach

Please refer to Shopify Markets & Currencies

At the moment, Shopify doesn't have a built-in 'notification' for when a draft order is placed so it does require workarounds for now. There are a few options:

Receive notifications as store owner:

Receive notifications as a customer:

Yes, there are methods to do this. Please refer to our guide here

Due to current limitations in Shopify, there is currently no way to differentiate the Shopify Order Number (e.g. #123456) between regular (DTC) and B2B orders. In terms of filtering and segmenting orders between retail and B2B, SparkLayer will by default add a tag to an order b2b. Within Shopify, or systems you may have integrated (e.g. shipping, 3PLs), this can then be used as a way to separate out workflows to allow you to differentiate between the customers who are placing orders.