# Theme setup

URL: https://docs.sparklayer.io/help/platforms/shopify/theme-setup
Applies to: Shopify

Check SparkLayer's app blocks on your Shopify theme in Theme setup, add the optional product blocks, or ask our team to install SparkLayer for you, free.

> **Quick summary**
>
> - **Theme setup** shows whether SparkLayer is installed on your Shopify theme, block by block. Find it at **Home > Setup > Theme setup** in the SparkLayer Dashboard, or **SparkLayer Wholesale > Setup > Theme setup** in the Shopify app.
> - Two blocks are required: **SparkLayer** (the cart and account) and **B2B Account Redirect**. Two are optional: **Product block** and **Product card block**.
> - **Edit** or **Add** opens Shopify's theme editor at that block, with no code to write.
> - If something isn't right, click **Something not right? Install SparkLayer for me**. Our team installs SparkLayer on your theme for you, free.

## How it works

SparkLayer adds its storefront widgets to your Shopify theme as app blocks: small pieces you turn on and position in Shopify's theme editor, without editing theme code. When you install the **SparkLayer Wholesale** app, SparkLayer sets up B2B on your theme automatically, so your B2B customers see it as soon as they sign in. Retail customers don't see any of it.

Theme setup is where you check that setup and change it. It's step 4 of Setup, after your price list, customer group and first buyer.

To get there, click **Review theme setup** on step 4 of **Setup**, or **Open theme setup** on the **Store status** card on **Home**.

## Check SparkLayer is on your theme

1. Go to **Home > Setup > Theme setup** in the SparkLayer Dashboard, or **SparkLayer Wholesale > Setup > Theme setup** in the Shopify app.
2. Check the status says **Complete**. If it does, SparkLayer is installed, and your B2B customers see it when they sign in.
3. Under **App blocks**, check both required blocks show **Enabled**.

If a required block isn't on, [turn it on](#edit-or-add-a-block), or [ask our team to install it](#get-our-team-to-install-it) for you.

Theme setup controls where SparkLayer's widgets sit on your theme. For what you can change inside them, such as colours, labels and which fields show, see [What you can and can't change on the storefront](https://docs.sparklayer.io/help/storefront/what-you-can-change.md).

### What each block does

| Block | Needed? | What it does |
| --- | --- | --- |
| **SparkLayer** | Yes | Adds the B2B cart and account to your store. |
| **B2B Account Redirect** | Yes | Sends B2B customers back to your storefront after they sign in, where SparkLayer runs. |
| **Product block** | Optional | Lets you choose where B2B prices and quantity controls sit on product pages. |
| **Product card block** | Optional | Lets you choose where B2B prices show on product cards in collections. |

If you use Shopify's new customer accounts, the **B2B Account Redirect** needs turning on: see [Set up new customer accounts](https://docs.sparklayer.io/help/platforms/shopify/install.md#set-up-new-customer-accounts). 

## Edit or add a block

Use **Edit** or **Add** to turn a block on, or to change where it sits on the page.

1. Go to **Home > Setup > Theme setup** in the SparkLayer Dashboard, or **SparkLayer Wholesale > Setup > Theme setup** in the Shopify app.
2. In **App blocks**, click **Edit** beside a block that's on, or **Add** beside an optional block. Shopify's theme editor opens at that block.
3. Make your change, such as turning the block on or moving it on the page, then click **Save** in the theme editor.
4. Go back to Theme setup to check the block's status.

**When to add the optional blocks**

The **Product block** puts B2B prices and quantity controls on your product pages, and the **Product card block** puts B2B prices on the product cards in your collections. Add them to choose exactly where SparkLayer shows on those pages. On some themes SparkLayer adds these interfaces for you: see [Automatic install on supported themes](https://docs.sparklayer.io/help/platforms/shopify/install.md#automatic-install-on-supported-themes).

## Ways to install SparkLayer on your theme

Theme setup uses the recommended app embed. **Storefront > Widgets** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets** in the Shopify app lists all 3 ways to add SparkLayer to your theme:

| Way | Best for | Button |
| --- | --- | --- |
| **App embed** (Recommended) | Most stores. SparkLayer's app blocks, turned on in your theme, with no code. | **Open theme setup** |
| **Ask us to install it** | Anyone who'd rather not touch their theme. Our team installs SparkLayer for you, free. | **Request installation** |
| **Manually** | Developers, and heavily customised themes. Add the core script to `theme.liquid`. | **Installation guide** |

For the manual route, see [Install the widgets yourself](https://docs.sparklayer.io/help/platforms/shopify/install.md#install-the-widgets-yourself) and the [frontend integration guide](https://docs.sparklayer.io/developers/frontend.md). If you'd rather not change your existing theme at all, the [B2B Dawn theme](https://docs.sparklayer.io/help/platforms/shopify/dawn-theme.md) comes with every SparkLayer widget installed.

## Ask our team to install it

If you'd rather not touch your theme, a block won't turn on, or SparkLayer doesn't look right on your store, our team installs it on your theme for you, free of charge, on every plan.

1. On Theme setup, click **Something not right? Install SparkLayer for me**, or at **Storefront > Widgets** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets** in the Shopify app, click **Request installation** under **Ask us to install it**.
2. Our onboarding team is notified and gets in touch, usually within a working day.
3. We ask for collaborator access to your Shopify store, which you approve in your Shopify admin. 

As part of the install, we:

- Add the storefront widgets for the product page and product cards.
- Match your store's branding (colours and fonts).
- Add a B2B login and application page.
- Check that everything is set up correctly.

On a paid plan, we then walk you through it all in a personalised onboarding session. See [Contact support](https://docs.sparklayer.io/help/support.md).

## FAQs

**Theme setup says Complete, but I can't see SparkLayer on my store**

SparkLayer only shows to signed-in B2B customers. Retail and signed-out visitors see your store as normal. To see it, use [Try it out](https://docs.sparklayer.io/help/get-started/launching.md#place-a-test-order), which opens your store signed in as a test B2B customer, or click **Preview storefront** on Home's **Store status** card.

**Which theme does Theme setup check?**

The theme chosen in **Select theme** on **Home > Setup** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/)), or **SparkLayer Wholesale > Setup** in the Shopify app, which starts on your published theme (marked **Active**). Choose another theme there, such as a copy you're working on, to check it before you publish it.

**I've changed or updated my theme. Do I need to set SparkLayer up again?**

Not always, but check Theme setup for the new theme. App blocks you turned on in the old theme aren't always carried across, and a theme update can remove changes made to theme code. If anything's missing, turn it on again with **Edit** or **Add**, or click **Something not right? Install SparkLayer for me**.

## Next steps

- [Launch checklist](https://docs.sparklayer.io/help/get-started/launching.md): Test your setup, invite your first customers and go live
- [Install SparkLayer on Shopify](https://docs.sparklayer.io/help/platforms/shopify/install.md): The full install, from the app to your first buyer
- [Storefront widgets](https://docs.sparklayer.io/help/storefront/interfaces.md): What the B2B widgets do on your store