# Storefront

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

What the SparkLayer frontend adds to your store for signed-in B2B customers, and how to control its design, product display, stock, quantity rules and language.

> **Quick summary**
>
> - When a B2B customer signs in to your store, they see their own prices, a B2B cart and checkout, and an account area. These are SparkLayer's [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md) (or widgets), and they sit on top of your existing store theme.
> - Only customers signed in as B2B customers see them. Retail visitors see your store as normal.
> - You add them to your theme at **Storefront > Widgets** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets** in the Shopify app, and control how they behave without code at **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app. Design, product display, stock, quantity rules, text and language can all be changed. Some parts are fixed: see [What you can and can't change](https://docs.sparklayer.io/help/storefront/what-you-can-change.md).
> - The interfaces and customisation are included on every plan.

## How it works

You keep your store, theme and catalogue on your eCommerce platform. SparkLayer adds a script to your store, the [Core Script](https://docs.sparklayer.io/help/storefront/storefront-options.md#add-a-core-script-setting), that loads its interfaces. When a B2B customer signs in, the interfaces replace parts of your store with B2B versions, such as product pricing, the cart and the account area.

What a signed-in B2B customer sees:

1. **Customer signs in**: SparkLayer recognises them as a B2B customer and looks up their customer group
2. **Interfaces load**: Product pricing, the B2B cart and My Account replace your theme's own versions
3. **Their rules apply**: Prices, quantity rules, stock display and payment methods come from their customer group
4. **Order placed**: The order is created in your eCommerce platform

The interfaces cover the whole B2B journey: B2B pricing and ordering on product and collection pages, the B2B cart and checkout (**My Cart**), and the customer's account area (**My Account**). You can also add your own content to them with custom slots. See [Storefront widgets](https://docs.sparklayer.io/help/storefront/interfaces.md) for each interface and where it appears.

## Add SparkLayer to your theme

This is your set-up step. **Storefront > Widgets** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets** in the Shopify app offers 3 ways to install the interfaces:

| Option | How it works |
| --- | --- |
| **App embed** (recommended) | SparkLayer's app blocks, turned on in your Shopify theme. No code. Click **Open theme setup**. See [Theme setup](https://docs.sparklayer.io/help/platforms/shopify/theme-setup.md). |
| **Ask us to install it** | Our team installs SparkLayer on your theme for you, free. Click **Request installation** and we'll be in touch within a working day. |
| **Manually** | Your developer adds the Core Script to your theme's code. Click **Installation guide**, or see your platform's install guide under [Platforms](https://docs.sparklayer.io/help/platforms.md). |

The same screen has a **Core script version** card. New installs use the latest version. To pin your store to an earlier version, choose it under **Version for this store** and click **Save version**.

**See what's new** lists the changes in each version. The [frontend integration guide](https://docs.sparklayer.io/developers/frontend.md) explains how the Core Script works.

## What you can control

Each of these pages starts with what your customers see, then shows you how to set it up.

- [Storefront widgets](https://docs.sparklayer.io/help/storefront/interfaces.md): Every interface your B2B customers use, and where each appears
- [Storefront options](https://docs.sparklayer.io/help/storefront/storefront-options.md): Change settings, text, checkout fields and My Account sections without code
- [Customising the design](https://docs.sparklayer.io/help/storefront/customising-design.md): Match SparkLayer to your brand colours and fonts, and turn on dark mode
- [What you can and can't change](https://docs.sparklayer.io/help/storefront/what-you-can-change.md): What's a setting, CSS or a slot, what needs a developer and what's fixed
- [How products are shown](https://docs.sparklayer.io/help/storefront/product-display.md): Table view, variant modes, SKUs and barcodes, quick buy and 1-click ordering
- [Stock display](https://docs.sparklayer.io/help/storefront/stock-display.md): Live stock levels, pre-orders and back-orders, restock dates and reserved stock
- [Quantity rules](https://docs.sparklayer.io/help/storefront/quantity-rules.md): Pack sizes and minimum or maximum quantities
- [Product rules per customer group](https://docs.sparklayer.io/help/storefront/product-settings.md): Apply pack sizes, quantity limits and visibility to specific customer groups
- [Languages and international](https://docs.sparklayer.io/help/storefront/languages-and-international.md): Change SparkLayer's text, supported languages and locale formats
- [B2B Catalogs](https://docs.sparklayer.io/help/storefront/b2b-catalogs.md): Control which products B2B and retail customers see (free, Shopify only)

## Related features

These features also shape what B2B customers see on your store. They're covered in other sections of the Help Center.

- [How prices are shown](https://docs.sparklayer.io/help/pricing/pricing-display.md): RRP (MSRP) pricing, quantity pricing and unit cost pricing
- [Prices for one customer](https://docs.sparklayer.io/help/pricing/customer-pricing.md): Customer discounts and customer price lists
- [Payment methods](https://docs.sparklayer.io/help/ordering/payment-methods.md): Enable B2B payments, set defaults, rename payment methods and request quotes
- [Cart and checkout](https://docs.sparklayer.io/help/ordering/cart-and-checkout.md): Custom checkout fields, file uploads, terms and conditions and checkout text
- [Shipping and tax](https://docs.sparklayer.io/help/ordering/tax-and-shipping.md): B2B-only shipping, free shipping rules, tax handling and product tax rules
- [Credit and invoicing](https://docs.sparklayer.io/help/ordering/credit-net-terms-and-invoicing.md): Credit limits, account balances, net terms and PDF invoices
- [Customise My Account](https://docs.sparklayer.io/help/customers/account-and-addresses.md): Custom account fields, address editing and display, sales statistics
- [Automation and workflows](https://docs.sparklayer.io/help/ordering/automation-and-workflows.md): Update order statuses and send notifications
- [Order timeline and messages](https://docs.sparklayer.io/help/customers/timeline.md): Track messages and activity across all order types
- [Sales agent ordering](https://docs.sparklayer.io/help/sales-ordering.md): Let your team place orders and manage accounts for B2B customers
- [Company users](https://docs.sparklayer.io/help/customers/company-users.md): Let a customer's colleagues share one company account
- [Set up quotes](https://docs.sparklayer.io/help/ordering/quoting.md): Manage the quote-to-order process for your sales team and customers
- [Forms](https://docs.sparklayer.io/help/forms.md): Capture, review and approve wholesale customers from your store