Storefront options

How it works

Storefront options are settings that used to need code in the Core Script. On the Options page, you change them on screen and publish them in one step. Only signed-in B2B customers see the result.

The Publishing card at the top of the page shows the status:

As a rule, Settings,Configurations (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Settings › Configurations to do this now, whichever platform you're on. Opens in a new tab. turns features on and off, and the Options page sets how they look and behave on your storefront.

A few settings are on both screens, and carry an Also in Configurations badge here. They're the same setting in 2 places: change it on either screen and the other one follows.

Change a setting and publish it

Every change follows the same 3 steps:

1. Go to Storefront,Options (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options to do this now, whichever platform you're on. Opens in a new tab..
2. Click a section to open it, and change the settings you need. See the settings reference.
3. Click Save and publish.

There's no separate draft: saving and publishing is one step.

Copy or import your options as a snippet

Every option on this page is also a Core Script setting, in the window.sparkOptions code your developer uses. Use these buttons to move settings between the two, for example to back up your settings or hand them to a developer:

Add a Core Script setting

Some pages show code labelled Core Script. Each is a setting for the Core Script, the SparkLayer code in your theme, and is usually a job for your developer.

1. Open your theme's code. On Shopify, that's theme.liquid.
2. Find the window.sparkOptions block, just before the closing </head> tag. If there isn't one, add it.
3. Paste the setting inside the curly brackets, after any settings already there, and end it with a comma.
4. Save, and check the change on your store while signed in as a B2B customer.

For example, with two settings:

<script>
  window.sparkOptions = {
    language: "en",
    display: {
      hideFinancials: true,
    },
  };
</script>

If you already have a setting, such as translations or display, add the new lines inside it rather than adding it twice. For more, see Modifying the Core Script in the developer docs.

Settings reference

The Options page has 6 sections. Click one to open it. Switches marked "(on)" below are on by default.

Checkout

What buyers fill in and choose at checkout: fields, payment methods and cart behaviour.

Standard checkout fields need Core Script version 4.7.0 or later. Custom fields work on any version. Check your version at Storefront,Widgets,Core script version (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Widgets › Core script version to do this now, whichever platform you're on. Opens in a new tab..

My Account

What buyers see and do in their My Account area.

Pricing and display

How buyers see prices, savings and the product interfaces.

Translation overrides

Translation overrides change the text buyers see in SparkLayer, such as a button label or a heading, for each language. Each piece of text has a name, called a key, such as cart.checkout.notes.label for the label of the order notes field.

Until you add one, the section shows "No overrides. SparkLayer's own text is used."

1. Click Add override, choose the language and the key, and enter your own text.
2. Click Save and publish.

Translation overrides replace the translations setting in the Core Script. See Languages and international for how to find a key, the supported languages and the keys with variables.

Custom slots

Custom slots let you show buyers your own content in set places in SparkLayer's interfaces, such as a message in the cart. Click Add slot to add one. These are the slots you can use:

To add your content to these places, see Custom slots (targets).

Analytics

Analytics sends SparkLayer storefront events, such as items added to the cart, to your analytics tools. Click Add provider to connect one.

FAQs