# What you can and can't change on the storefront

URL: https://docs.sparklayer.io/help/storefront/what-you-can-change

See which parts of SparkLayer's storefront widgets you can change in settings, with CSS or custom slots, which need a developer, and which are fixed.

> **Quick summary**
>
> - Text, many features and the order of My Account sections and payment methods are settings at **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app. Colours, fonts and sizes are [CSS variables](https://docs.sparklayer.io/help/storefront/customising-design.md#variable-reference). Your own messages go in [custom slots](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md).
> - The layout of the product page widget and the order of its buttons are fixed. No setting or CSS variable changes them: only a custom script from your developer can.
> - Your theme's own parts, such as the cart count in your header, aren't SparkLayer's. Your theme or your developer controls them.
> - Our team installs the widgets for you, free, on every plan. That doesn't include customising your theme. See [Contact support](https://docs.sparklayer.io/help/support.md).

## At a glance

| You want to change | How | Who |
| --- | --- | --- |
| Wording, such as a button label | A translation override, in settings | You |
| Features such as favourites, shopping lists and the AI cart features | A setting | You |
| Colours, fonts, sizes, corners and spacing | CSS variables | You or your developer |
| Your own messages, banners and links | Custom slots | Your developer, usually |
| How products are laid out, such as a table or a matrix | An attribute in your theme's code | Your developer |
| The layout inside the product page widget, or its button order | A custom script | Your developer |
| Your theme's header, menus and cart count | Your theme | You or your theme developer |

## Change it yourself, in settings

These need no code. Go to **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app, change the setting, then click **Save and publish**. See [Storefront options](https://docs.sparklayer.io/help/storefront/storefront-options.md).

| What | Setting |
| --- | --- |
| Any text in the widgets, such as **Add to Cart**, in each language | **Translation overrides**. See [Change SparkLayer's text](https://docs.sparklayer.io/help/storefront/languages-and-international.md#change-sparklayers-text). |
| The order customers see payment methods in at checkout | **Checkout** > **Payment methods, in order** |
| Extra checkout fields, such as a PO number | **Checkout** > **Checkout fields**. See [Checkout fields](https://docs.sparklayer.io/help/ordering/checkout-fields.md). |
| The order of My Account sections, and which ones show | **My Account** > **Account sections, in order** |
| Favourites and shopping lists | **My Account** > **Favourites lists** and **Shopping lists** |
| Financial figures in My Account | **My Account** > **Hide financial figures** |
| The AI cart features | **Checkout** > **Hide AI features in the cart**. It hides the [Intelligent Cart](https://docs.sparklayer.io/help/ordering/intelligent-cart.md#hide-intelligent-cart) features, such as **Upload a file** and **Forward an email**. Other cart actions stay. |
| Dark colour scheme | **Pricing and display** > **Dark theme** |

Rules for each customer group, such as stock display, are set on the group at **Customers > Groups** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/customers/groups)), or **SparkLayer Wholesale > Customers > Customer groups** in the Shopify app. Pack sizes and quantity limits are fields on your products: see [Quantity rules](https://docs.sparklayer.io/help/storefront/quantity-rules.md).

## Change it with CSS

Colours, fonts, font sizes, corner rounding and spacing each have a CSS variable. Set the ones you want in your theme: see [Customising the design](https://docs.sparklayer.io/help/storefront/customising-design.md), and the [full list of variables](https://docs.sparklayer.io/help/storefront/customising-design.md#variable-reference) for your developer.

| What | Can you change it? |
| --- | --- |
| Brand colours and fonts | Yes, with 4 values. See [Change your brand colours and fonts](https://docs.sparklayer.io/help/storefront/customising-design.md#add-custom-css-to-your-store). |
| Button colours, font, corners and padding | Yes, with the [button variables](https://docs.sparklayer.io/help/storefront/customising-design.md#buttons). |
| Button width | No. There's no CSS variable for it. Padding changes the space around the text. |
| Some details on product pages, such as the image or SKU | Yes, hide them with a variable. See [How products are shown](https://docs.sparklayer.io/help/storefront/product-display.md#options-at-a-glance). |
| Toast notifications (the short pop-up messages) | Yes, style or hide them. See [Toast notifications](https://docs.sparklayer.io/help/storefront/customising-design.md#toast-notifications). |

If there's no variable for what you need, [contact us](https://docs.sparklayer.io/help/support.md) before your developer writes their own CSS, and we'll advise on the approach.

## Add your own content with slots

Custom slots show your own HTML inside the widgets, in 8 fixed places: the top of My Account and My Cart, under each cart line, the **Shipping** and **Review & Pay** checkout steps, the order complete screen, and above and below the purchase summary. You turn a slot on in settings, and your developer adds the content to your theme. See [Custom slots](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md).

You can't add content anywhere else inside the widgets, or move a slot.

## Needs a developer

| What | How your developer does it |
| --- | --- |
| Show products as a table, all variants or a matrix | An attribute on the widget in your theme. See [Change the product page layout](https://docs.sparklayer.io/help/storefront/product-display.md#change-the-product-page-layout). |
| Quick buy mode and 1-click ordering buttons | Code in your theme. See [How products are shown](https://docs.sparklayer.io/help/storefront/product-display.md). |
| The layout inside the product page widget, or the order of its buttons | A custom script. The layout and button order are fixed: no setting or CSS variable changes them. |
| Hide your theme's own prices and **Add to cart** buttons from B2B customers | Code in your theme. See the [frontend integration checklist](https://docs.sparklayer.io/developers/frontend.md#frontend-integration-checklist). |
| Show the header cart count for SparkLayer's cart | The [JavaScript SDK](https://docs.sparklayer.io/developers/javascript-sdk/cart.md). See [The cart count in your header](#the-cart-count-in-your-header). |
| Show the widgets in a different language from your store, or set one date and currency format for everyone | A Core Script setting. See [Languages and international](https://docs.sparklayer.io/help/storefront/languages-and-international.md). |

A custom script changes SparkLayer's widgets from outside, so an update to SparkLayer can break it. Your developer looks after it.

## Can't be changed

- **Other cart actions.** **Hide AI features in the cart** removes the AI features, but there's no setting to hide the cart's other actions one by one.
- **Single variants for retail shoppers.** Shopify can't hide one variant of a product from retail shoppers. Make the variant a separate product and tag it `b2b-only` instead. See [What hides what](https://docs.sparklayer.io/help/storefront/product-settings.md#what-hides-what).
- **Shopify's new customer accounts.** If you use them, the account pages are Shopify's own and can't be restyled. SparkLayer's [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md) area is separate.

## Language

SparkLayer's widgets show in your store's language. On Shopify, they follow the language the customer is browsing your store in (Shopify's locale), not the customer's browser settings. To change the wording in a language, use translation overrides. Product names and options come from your platform: to show them translated on Shopify, ask us to turn on product translations. See [Languages and international](https://docs.sparklayer.io/help/storefront/languages-and-international.md).

## Page builders and copied themes

SparkLayer is installed in your theme's templates. Two set-ups often cause problems:

- **Page builder apps**, such as PageFly or Shogun. A page made with one uses its own layout, so it may not include SparkLayer's widgets. B2B customers can then see your retail prices and **Add to cart** buttons there. Check each page builder page signed in as a B2B customer.
- **A theme copied from another store.** It can carry the other store's SparkLayer code, such as its Core Script with that store's site ID. Remove that code and set SparkLayer up again on the copy: see [Theme setup](https://docs.sparklayer.io/help/platforms/shopify/theme-setup.md).

If you use either, tell us when you [request installation](https://docs.sparklayer.io/help/support.md), so we can check them.

## The cart count in your header

The cart icon and count in your header belong to your theme, not SparkLayer. SparkLayer's cart is separate from your theme's cart, so for B2B customers the count can show 0, or items added before they signed in. Hide the count for B2B customers, or have a developer keep it in step with SparkLayer's cart using the [JavaScript SDK](https://docs.sparklayer.io/developers/javascript-sdk/cart.md). Our team can hide it for you.

## What the free installation covers

Our team installs SparkLayer's widgets on your theme for you, free, on every plan, and checks they work. Theme customisation isn't included: restyling the widgets, custom scripts, page builder pages and changes to your theme's own design. Your developer or agency does those. See [Contact support](https://docs.sparklayer.io/help/support.md).

## Next steps

- [Customising the design](https://docs.sparklayer.io/help/storefront/customising-design.md): Brand colours, fonts and every CSS variable
- [Storefront options](https://docs.sparklayer.io/help/storefront/storefront-options.md): Every setting you can change without code
- [Custom slots](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md): Add your own content inside the widgets
- [Troubleshooting](https://docs.sparklayer.io/help/troubleshooting.md): Fixes for widgets that don't load or look wrong