App block settings

How it works

The SparkLayer app embed loads the Core Script (the SparkLayer code on your storefront) for signed-in B2B customers. Retail customers and signed-out visitors don't get it, so none of the settings on this page change what they see.

As it loads, the app embed:

• Sets the Core Script options SparkLayer needs to run on your store.
• Matches SparkLayer's colours and fonts to your theme's, then applies your CSS variable overrides on top.
• Hides the retail prices, buy buttons and other parts of your theme B2B customers shouldn't use, plus anything in CSS selectors for hidden elements.

The styling and hiding are part of the automatic install. If your developer has turned off the automatic install, the 2 styling settings do nothing on their own: see If the automatic install is off.

Change colours and fonts in the theme editor

1. Go to SparkLayer Wholesale,Setup,Theme setup (in your Shopify admin)In your Shopify adminOpen SparkLayer Wholesale under Sales channels, then Setup › Theme setup. and click Edit beside the SparkLayer block. Shopify's theme editor opens at the app embed.
2. Under Styling, enter your CSS variables in CSS variable overrides, one per line.
3. Click Save, then sign in to your store as a B2B customer to check the result.

For example, to set your brand colour and fonts:

--b2b-brand-color: #1A4D8F;
--b2b-brand-color-hover: #133A6B;
--b2b-brand-font: Arial, sans-serif;
--b2b-brand-font-heading: Georgia, serif;

Each line is a variable name starting with two hyphens, a colon, the value and a semicolon. Leave out <style> tags, :root { and comments. Lines that aren't a variable are ignored, so you can paste the variables from the recommended starting CSS without its first and last lines.

For what each variable changes, see the CSS variable reference. The 4 brand values are enough for most stores.

Hide elements from B2B customers

On a store that sells retail and B2B, some parts of your theme, such as a retail price or a subscription widget, shouldn't show to B2B customers. SparkLayer already hides the common ones for your theme. To hide more:

1. Go to SparkLayer Wholesale,Setup,Theme setup (in your Shopify admin)In your Shopify adminOpen SparkLayer Wholesale under Sales channels, then Setup › Theme setup. and click Edit beside the SparkLayer block.
2. Under Styling, enter a CSS selector for each element in CSS selectors for hidden elements, one per line.
3. Click Save, then check your store as a B2B customer and as a retail customer.

.product__inventory
.announcement-bar
#loyalty-widget

A selector is how CSS finds an element: .name for a class, #name for an ID. Your browser's developer tools show an element's class and ID when you inspect it. A line that isn't a valid selector is ignored, and the other lines still apply.

To hide an element in your theme's code instead, add data-spark="b2c-only" to it. See Install the widgets yourself.

Add Core Script options

Core Script options turn features on and off and change how they work, such as the language or where signed-in customers go from the account page. On Shopify, the app embed sets the options SparkLayer needs. Your developer adds any others in theme.liquid:

1. In your Shopify admin, go to Online Store,Themes (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Online Store › Themes to do this now. Opens in a new tab., open the … menu on your theme and click Edit code.
2. Open layout/theme.liquid.
3. Paste a window.sparkOptions block just before the closing </head> tag, with your options inside it.
4. Click Save, then check the change on your store as a B2B customer.

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

Shopify adds the app embed after your theme's <head> content, and the app embed combines your options with its own, so there's nothing else to add. Set all your options in this one block: a second window.sparkOptions = {…} in your theme replaces the first. For every option, see the Core Script options.

Product block settings

The product blocks place SparkLayer's interfaces exactly where you want them on a page. Each block has settings in the theme editor, which match the tag settings in your theme's code. Click a block in the theme editor to see them.

Every block also has a Product setting. On a product page or in a product grid, connect it to the page's product, so the block shows the right one. The SparkLayer Product RRP block has no other settings.

For the SparkLayer Form block, see Embedding and styling forms.

If the automatic install is off

This is for developers. With disableAutoInstall set, the app embed still loads the Core Script, but doesn't add the interfaces, match your theme's styling or hide anything. CSS variable overrides and CSS selectors for hidden elements only apply when you call the functions that use them. The app embed's script adds the functions when it loads, so call them once the page has loaded:

<script>
  window.addEventListener('load', () => {
    if (!window.sparkShopify?.injectSparkStylingBehaviour) return; // not a B2B customer

    // Matches SparkLayer to your brand, then applies CSS variable overrides
    window.sparkShopify.injectSparkStylingBehaviour({
      '--b2b-brand-color': 'var(--color-primary)',
      '--b2b-brand-color-hover': 'var(--b2b-brand-color)',
      '--b2b-brand-font': 'var(--font-body-family)',
      '--b2b-brand-font-heading': 'var(--font-heading-family)',
    });

    // Hides these elements, plus CSS selectors for hidden elements
    window.sparkShopify.injectSparkHidingBehaviour(['.price', 'product-form']);
  });
</script>

Calling either function again replaces what it added before. To turn off the automatic install, see Turn off the automatic install.

FAQs

Next steps