What you can and can't change on the storefront
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 (opens in your SparkLayer Dashboard in a new tab), change the setting, then click Save and publish. See Storefront options.
| What | Setting |
|---|---|
| Any text in the widgets, such as Add to Cart, in each language | Translation overrides. See Change SparkLayer's 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. |
| 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 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 (opens in your SparkLayer Dashboard in a new tab). Pack sizes and quantity limits are fields on your products: see Quantity rules.
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, and the full list of variables for your developer.
| What | Can you change it? |
|---|---|
| Brand colours and fonts | Yes, with 4 values. See Change your brand colours and fonts. |
| Button colours, font, corners and padding | Yes, with the button variables. |
| 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. |
| Toast notifications (the short pop-up messages) | Yes, style or hide them. See Toast notifications. |
If there's no variable for what you need, contact us 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.
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. |
| Quick buy mode and 1-click ordering buttons | Code in your theme. See How products are shown. |
| 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. |
| Show the header cart count for SparkLayer's cart | The JavaScript SDK. See 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. |
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-onlyinstead. See 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 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.
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.
If you use either, tell us when you request installation, 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. 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.
Next steps
Last updated