# Storefront options

URL: https://docs.sparklayer.io/help/storefront/storefront-options

Change SparkLayer's storefront without code: checkout, My Account, pricing display, text overrides, custom slots and analytics, then save and publish.

> **Quick summary**
>
> - **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app is where you change what B2B customers see and can do on your store, without editing code in your theme.
> - It has 6 sections: **Checkout**, **My Account**, **Pricing and display**, **Translation overrides**, **Custom slots** and **Analytics**.
> - Nothing reaches your store until you click **Save and publish**. Buyers see the changes on their next page load.
> - Settings your developer already made in the [Core Script](https://docs.sparklayer.io/help/storefront/storefront-options.md#add-a-core-script-setting) (the SparkLayer code in your theme) keep working. **Import snippet** and **Copy snippet** move settings between the two.

## 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.

From change to live store:

1. **Change settings**: Open a section of the Options page and change what you need
2. **Save and publish**: One button saves your changes and makes them live
3. **Buyers see it**: Signed-in B2B customers see the change on their next page load

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

| Status | What it means |
| --- | --- |
| **Published** | Your storefront uses these options. Changes go live when you publish. |
| **Not published** | Nothing has been published yet, so buyers see SparkLayer's defaults. |

As a rule, **Settings > Configurations** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/settings/general)), or **SparkLayer Wholesale > Settings > Configurations** in the Shopify app 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.

| On the Options page | At **Settings > Configurations** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/settings/general)), or **SparkLayer Wholesale > Settings > Configurations** in the Shopify app |
| --- | --- |
| **Checkout** > **Hide AI features in the cart** | **Pricing and cart** > **Hide AI features in the cart** |
| **My Account** > **Show payment status** | **Ordering** > **Payments visibility** |
| **My Account** > **Timeline and communications** | **Quotes and invoices** > **Timeline and communications** |
| **Pricing and display** > **Tiered pricing across variants** | **Pricing and cart** > **Tiered pricing across variants** |

## Change a setting and publish it

Every change follows the same 3 steps:

1. Go to **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app.
2. Click a section to open it, and change the settings you need. See the [settings reference](#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:

| Button | What it does |
| --- | --- |
| **Copy snippet** | Copies your options as a `window.sparkOptions` snippet. Use it to keep a copy before a big change, or to send your settings to a developer. |
| **Import snippet** | Loads the values from a `window.sparkOptions` snippet you paste into the page. Click **Save and publish** to make them live. |

## 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:

```html title="theme.liquid"
<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](https://docs.sparklayer.io/developers/frontend.md#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.

| Setting | What it does |
| --- | --- |
| **Checkout fields** | The extra fields customers fill in at checkout, such as a PO number or delivery notes. Click **Add field** to add one. See [Checkout fields](https://docs.sparklayer.io/help/ordering/checkout-fields.md). |
| **Payment methods, in order** | Drag **Payment on account**, **Payment by invoice**, **Upfront payment** and **Quote** to set the order buyers see them in at checkout. Which methods each customer can use is set by their customer group, where the names differ: see [The same method in each place](https://docs.sparklayer.io/help/ordering/payment-methods.md#names). |
| **Save addresses to the address book** (on) | A new address entered at checkout is saved to the buyer's address book by default. |
| **Hide AI features in the cart** | Hides the [Intelligent Cart](https://docs.sparklayer.io/help/ordering/intelligent-cart.md) features in the SparkLayer cart. Also in Configurations. |

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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets > Core script version** in the Shopify app.

### My Account

What buyers see and do in their [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md) area.

| Setting | What it does |
| --- | --- |
| **Hide financial figures** | Hides financial figures from buyers. It also hides the **Financials** section of My Account. |
| **Show shipping address in the order list** | Shows each order's shipping address beside it in the order list. |
| **Show payment status** | Shows the payment status of orders in My Account. Also in Configurations, where it's called **Payments visibility**. |
| **Timeline and communications** | Buyers and sales agents can send messages on quotes and orders. Also in Configurations. See [Order timeline and messages](https://docs.sparklayer.io/help/customers/timeline.md). |
| **Favourites lists** (on) | Buyers can save products to a favourites list. See [Favourites](https://docs.sparklayer.io/help/ordering/favourites.md). |
| **Shopping lists** (on) | Buyers can save reusable shopping lists. See [Shopping lists](https://docs.sparklayer.io/help/ordering/shopping-lists.md). |
| **Account sections, in order** | Drag the sections to set the order they appear in: **Recent activity**, **Favourites**, **Shopping lists**, **Financials**, **My details**, **Reports**, **Address book** and **Company users**. Each one shows whether buyers can see it. |

### Pricing and display

How buyers see prices, savings and the product interfaces.

| Setting | What it does |
| --- | --- |
| **Base savings on RRP** | Shows savings against the RRP, rather than the buyer's own price. |
| **RRP toggle** | Buyers can switch between seeing the RRP and their own prices. See [How prices are shown](https://docs.sparklayer.io/help/pricing/pricing-display.md). |
| **Savings on price breaks** (on) | Shows the amount saved next to each quantity price break. |
| **Round price break percentages** (on) | Shows price break percentages as whole numbers. |
| **Tiered pricing across variants** (on) | Quantity tiers count every variant of a product together. Also in Configurations. See [Quantity pricing](https://docs.sparklayer.io/help/pricing/quantity-pricing.md). |
| **Dark theme** | Shows SparkLayer's interfaces in the dark colour scheme, for stores with a dark theme. See [dark mode](https://docs.sparklayer.io/help/storefront/customising-design.md#turn-on-dark-mode). |

### 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](https://docs.sparklayer.io/help/storefront/languages-and-international.md#change-sparklayers-text) 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:

| Slot | Slot ID |
| --- | --- |
| My Account | `spark-slot-my-account` |
| My Cart | `spark-slot-my-cart` |
| Cart line item | `spark-slot-my-cart-line-item` |
| Order complete | `spark-slot-order-complete` |
| Cart shipping step | `spark-slot-cart-shipping-step` |
| Cart payment step | `spark-slot-cart-payment-step` |
| Purchase summary header | `spark-slot-purchase-summary-header` |
| Purchase summary footer | `spark-slot-purchase-summary-footer` |

To add your content to these places, see [Custom slots (targets)](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md).

### Analytics

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

## FAQs

**Do I still need to edit my theme code to configure SparkLayer?**

No. Settings that used to need Core Script changes can be managed on the Options page. Design changes, such as your brand colours, still use CSS: see [Customising the design](https://docs.sparklayer.io/help/storefront/customising-design.md).

**Does this replace my existing Core Script?**

No. The Options page works alongside your Core Script, so anything already set there keeps working. To bring settings from your theme code onto this page, use **Import snippet**.

**Will my changes go live as soon as I make them?**

Only when you click **Save and publish**. Buyers then see them on their next page load.

**Can I undo a change after publishing?**

There's no undo button. Change the setting back and click **Save and publish** again. Before a big change, click **Copy snippet** to keep a copy of your settings: you can bring them back with **Import snippet**.

**Why does a setting say Also in Configurations?**

It's the same setting as one at **Settings > Configurations** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/settings/general)), or **SparkLayer Wholesale > Settings > Configurations** in the Shopify app. Changing it on either screen changes it on both.