Add SparkLayer to your website

The SparkLayer Frontend is what your B2B customers see on your website: their prices, the cart, quick order and their account. Adding it takes a few small code changes to your theme. Once they're in place, B2B customers can log in and start placing orders.

It takes three steps:

After that, you can tailor the B2B experience further: Storefront has the settings, and Integrations has advice for each platform.

The SparkLayer Core Script

The Core Script is a JavaScript snippet in your website's theme. It loads the frontend interfaces your B2B customers use to place orders, manage their account and more.

Installing the script

<script async src="https://sparkcdn.io/sparkjs/yourstorehere/live"></script>

<!-- Copy your own from the SparkLayer Dashboard: Storefront > Widgets -->

<script>
  window.sparkOptions = {
    siteId: "examplestore", // your unique site id
    platform: "shopify", // your platform
    rootUrl: {{ routes.root_url | json }},
    language: {{ request.locale.iso_code | json }},
    accountRedirect: {
      urlRegex: /\/account/g,
      goTo: "/index", // page to redirect logged in users to
    },
    display: {
      stock: {
        show: false, // set to true to show stock level display
        max: 50, // highest stock level to show
        last: 5, // last remaining stock threshold
        low: 15, // low stock threshold
      },
    },
    auth: {
      user: {{ customer.email | json }},
      token: {{ customer.metafields.sparklayer.authentication | json }},
    },
  };
</script>
<script async src="https://sparkcdn.io/sparkjs/yourstorehere/live"></script>

Modifying the core script

The Core Script's options turn specific features on or off and customise how they work.

<script>
  window.sparkOptions = {
    ...window.sparkOptions,
    // Add your customisations here
  };
</script>

<script>
  window.sparkOptions = {
    ...window.sparkOptions,
    language: 'en',
    accountRedirect: {
      urlRegex: /\/account/g,
      goTo: '/collections/all',
    },
  };
</script>

For every option, see the Core Script options. For the settings merchants manage in the Dashboard, see Storefront.

Upgrading to the latest version

To upgrade to the latest version of the Core Script, go to Storefront,Widgets (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Widgets to do this now, whichever platform you're on. Opens in a new tab. in the SparkLayer Dashboard.

<script async src="https://cdn.sparklayer.io/spark.1.36.x.js"></script>

<script async src="https://sparkcdn.io/sparkjs/<site-id>/<env>"></script>

<script async src="https://sparkcdn.io/sparkjs/b2bstore/live"></script>

Product page widgets

The product page widgets are the parts of SparkLayer B2B customers see on your product and collection pages when they log in. There are three:

Adding them takes two steps:

Hiding elements

SparkLayer can hide any element on your website from B2B customers with a data-spark attribute.

Elements you would typically hide include:

• Price information
• Product variant information
• Quantity selection
• Buy button

You need access to your website's source code to find the files that contain the elements you want to hide, such as:

• A product detail page
• A product collection page
• Specific "components" that are used in multiple locations on your website

In those files, add data-spark="b2c-only" to each element you want to hide. SparkLayer then applies display: none to the element when a logged-in B2B customer views the page.

This step changes your website's code, so you may want a developer to help. For platform-specific guidance, see Integrations.

<div data-spark="b2c-only">
  <!-- Anything inside here will be hidden for B2B customers -->
</div>

<p class="price" data-spark="b2c-only">
  <!-- In this example, the price would be hidden -->
  {{ product.price }}
</p>

<!-- Repeat this process for any HTML element you want hidden -->

Displaying the SparkLayer interfaces

Next, add the SparkLayer frontend interfaces to your pages. Each interface's page explains how to add its code snippet.

Design customisations (CSS)

SparkLayer's interface is neutral by default, and you can change nearly every aspect of its look and feel with CSS variables, including:

• Colours
• Typography (e.g. typefaces and font sizing)
• Spacing (e.g. padding and margin)
• Button styling
• Form styling

Add the CSS to your existing stylesheets, or to your website's <head>...</head> as you did with the Core Script.

What can be styled

To find the styles you want to change, use your browser's Inspect element tool. SparkLayer's styles use CSS variables prefixed with --spark-, and you can override each one.

In the inspector, you'll see something like the example below. To change a style, such as a button colour, set the matching variable in your website's CSS. See Customising the design for details.

.btn, .btn-large, .btn-small {
    color: var(--spark-button-raised-color,var(--spark-lightest-color,#fff));
    background-color: var(--spark-button-raised-background,var(--spark-secondary-color,#125ef8));
    border: var(--spark-button-border,none);
    border-radius: var(--spark-button-radius,var(--spark-border-radius-button,4px));
    padding: var(--spark-button-padding,.875em 1.75em);
    text-transform: var(--spark-button-text-transform,none);
    letter-spacing: var(--spark-button-text-letter-spacing,0);
    font-weight: var(--spark-button-font-weight,400);
    font-family: var(--spark-button-font-family,Poppins,sans-serif);
}

Frontend integration checklist

Before you launch, check you've covered everything:

Next steps

• Storefront widgets: add and customise each interface.
• Core Script options: every sparkOptions setting.
• Technical information: browser support and analytics event tracking.
• JavaScript SDK: build custom or headless interfaces.