# B2B Dawn theme

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

Install SparkLayer's B2B version of Shopify's Dawn theme and set up its B2B login page, forced login, hidden prices, B2B-only products and Quick Buy mode.

> **Quick summary**
>
> - Our B2B version of Shopify's free Dawn theme comes with the SparkLayer frontend code already installed.
> - It adds an optional B2B login page (which can force customers to sign in), hidden prices for signed-out visitors, B2B-only products and menus, and a Quick Buy mode for collection pages.
> - Upload the full theme from [GitHub](https://github.com/sparklayer-io/dawn), with no coding needed, or have your developer copy the changed files into your own Dawn theme. Most optional settings on this page are theme code changes for your developer.

## How it works

Use the B2B Dawn theme if you'd rather start from a theme that's ready for B2B than change your existing one. [Dawn](https://themes.shopify.com/themes/dawn/styles/default) is Shopify's free Online Store 2.0 theme, and the default theme for new Shopify stores. To learn more about it, read Shopify's [guide to the Dawn theme](https://help.shopify.com/en/manual/online-store/themes/os20/themes-by-shopify/dawn).

Our B2B version adapts parts of Dawn to turn on the SparkLayer [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md) and add a B2B login page. It includes:

- **A B2B login page** that can force customers to sign in before they see your store, and lets prospective customers apply for an account. You edit its content in the Shopify theme editor.
- **The [product card interface](https://docs.sparklayer.io/help/storefront/interfaces/product-card.md)** on collection pages, showing B2B prices with the option to add to an order.
- **The [product detail interface](https://docs.sparklayer.io/help/storefront/interfaces/product-detail.md)**, showing B2B prices with the option to add to an order.
- **The [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md) and [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md) interfaces.**
- **Quick Buy mode**, a compact collection page layout for building orders quickly.

Dawn is built and maintained by Shopify, so it may change with Shopify's own releases.

## Install the B2B Dawn theme

You need Dawn installed on your Shopify store. Then choose one of these options:

| Option | How | Best for |
| --- | --- | --- |
| **Download the full theme** | Download it from [GitHub](https://github.com/sparklayer-io/dawn/archive/refs/heads/main.zip) and [upload it as a new theme](https://help.shopify.com/en/manual/online-store/themes/adding-themes#upload-a-theme-file-from-your-computer). | A new store: the quickest option |
| **Download our code samples** | Replace the matching files in your Dawn theme. | A Dawn theme you haven't changed yet |
| **Review our code samples** | Apply the changes to your theme files by hand. | A Dawn theme you've already customised |

Downloading the full theme needs no coding. The other 2 options mean editing your theme's code files. So do most of the settings further down this page: forced sign-in, hidden prices, the B2B-only menu and Quick Buy on every collection. If you don't edit theme code yourself, pass this page to your developer, or [contact our support team](https://docs.sparklayer.io/help/support.md) for help.

These are the files that change, with links to the code on GitHub. The full theme is in the [SparkLayer Dawn repository](https://github.com/sparklayer-io/dawn).

| File | What it does | Code |
| --- | --- | --- |
| `layout/theme.liquid` | The main theme file. It loads the SparkLayer Core Script and adds other changes for CSS and forced login. Follow the [frontend integration guide](https://docs.sparklayer.io/developers/frontend.md) to finish setting it up. | [`theme.liquid`](https://github.com/sparklayer-io/dawn/blob/main/layout/theme.liquid) |
| `templates/page.b2b-login.json` | **New file.** The template for the B2B login page. | [`page.b2b-login.json`](https://github.com/sparklayer-io/dawn/blob/main/templates/page.b2b-login.json) |
| `sections/main-b2b-login.liquid` | **New file.** The content of the B2B login page. | [`main-b2b-login.liquid`](https://github.com/sparklayer-io/dawn/blob/main/sections/main-b2b-login.liquid) |
| `sections/main-product.liquid` | The product page, with SparkLayer turned on. | [`main-product.liquid`](https://github.com/sparklayer-io/dawn/blob/main/sections/main-product.liquid) |
| `snippets/card-product.liquid` | The product card, with SparkLayer turned on. | [`card-product.liquid`](https://github.com/sparklayer-io/dawn/blob/main/snippets/card-product.liquid) |
| `templates/customers/register.liquid` | An updated registration page, needed if you use the forced login page. | [`register.liquid`](https://github.com/sparklayer-io/dawn/blob/main/templates/customers/register.liquid) |

To see the theme as a B2B buyer before you publish it, choose it in [Try it out](https://docs.sparklayer.io/help/get-started/launching.md#place-a-test-order) and place a test order. When you publish it, step 5 of **Home > Setup** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/)), or **SparkLayer Wholesale > Setup** in the Shopify app, **Publish theme**, ticks itself off.

## Create the B2B login page

To use the B2B login page, and to force customers to sign in, create a Shopify page that uses the `b2b-login` template. The page has a sign-in form, a section inviting prospective customers to apply for an account, and an optional set of questions and answers.

1. Add [`sections/main-b2b-login.liquid`](https://github.com/sparklayer-io/dawn/blob/main/sections/main-b2b-login.liquid) and [`templates/page.b2b-login.json`](https://github.com/sparklayer-io/dawn/blob/main/templates/page.b2b-login.json) to your theme, each in the right folder.
2. In your Shopify admin, go to **Online Store > Pages** ([open in the Shopify admin](https://admin.shopify.com/pages)) and click **Add page**.
3. Give the page a title. Under **Edit website SEO**, set the **URL and handle** to `b2b-login`.
4. Under **Online store**, set **Theme template** to `b2b-login`, then save.
5. Visit `www.yourstore.com/pages/b2b-login` to see the new page.

To change how applications work, see [Shopify B2B registration and login](https://docs.sparklayer.io/help/platforms/shopify/customisations/registration-and-login.md).

### Customise the login page

You can change nearly every part of the login page in Shopify's theme editor, including colours, form fields and text.

1. Go to **Online Store > Themes** ([open in the Shopify admin](https://admin.shopify.com/themes)) and click **Customize**.
2. Open the `b2b-login` page from the page selector at the top.
3. Select the **Login Page** section. Its settings include the **Background Image**, **Title**, **Introduction Text**, **Open Account Title**, **Open Account Text** and **Open Account Button Title**. Add **FAQs** blocks to build the questions and answers.

### Force customers to sign in

To make every customer sign in before they can see your store, first [create the B2B login page](#create-the-b2b-login-page). Then edit `layout/theme.liquid` and set this code to `true`:

```javascript
{% raw %}
{% assign showSiteForB2B = true %}
  {% endif %}
{%- if showSiteForB2B == blank -%}
  {% assign showB2BLogin = true %}
{% endif %}
{% endraw %}
```

## Hide prices until customers sign in

You can hide prices on collection and product pages until a B2B customer signs in. Signed-out visitors see a message such as "Please sign in to see pricing" instead.

Set `hidePricesLoggedOut` to `true` in these files:

- `/snippets/card-product.liquid`
- `/sections/main-product.liquid`

In the same files, you can change the text and styling that signed-out visitors see.

## Show products only to B2B customers

The theme can hide chosen products from signed-out visitors. In your Shopify admin, open a product and add the tag `b2b-only` in its **Tags** field. The product then disappears from your collection pages for everyone who isn't signed in.

To change how this works, edit these files:

| File | What it controls | Code |
| --- | --- | --- |
| `sections/featured-collection.liquid` | The featured collection on the homepage | [`featured-collection.liquid`](https://github.com/sparklayer-io/dawn/blob/main/sections/featured-collection.liquid) |
| `sections/main-collection-grid.liquid` | The main collection page | [`main-collection-product-grid.liquid`](https://github.com/sparklayer-io/dawn/blob/main/sections/main-collection-product-grid.liquid) |
| `sections/predictive-search.liquid` | Products shown in the quick search | [`predictive-search.liquid`](https://github.com/sparklayer-io/dawn/blob/main/sections/predictive-search.liquid) |
| `sections/main-product.liquid` | The product page | [`main-product.liquid`](https://github.com/sparklayer-io/dawn/blob/main/sections/main-product.liquid) |

## Show a B2B-only menu

The theme can show B2B customers a different navigation menu from signed-out (retail) visitors.

1. In your Shopify admin, go to **Online Store > Navigation** ([open in the Shopify admin](https://admin.shopify.com/menus)) and create a menu.
2. Add your menu items. Under **Handle**, enter `b2b-menu`, then click **Save menu**.
3. In these files, set `showB2BNav` to `true`:
   - `snippets/header-mega-menu.liquid`
   - `snippets/header-dropdown-menu.liquid`
   - `snippets/header-drawer.liquid`

```html
{% assign showB2BNav = true %}
```

To test it, sign in as a B2B customer and check the menu.

## Use Quick Buy mode

Quick Buy mode shows a collection as a compact list, so buyers can build orders quickly. Each product has its B2B price and RRP, quantity price breaks, variant drop-downs, quantity controls with any product rules (such as pack sizes) and an **Add** button. To try it, sign in to our [demo store](https://demo.sparklayer.io/) and open the [Quick Buy collection](https://demo.sparklayer.io/collections/sample-quick-buy).

To use it on one collection:

1. In your Shopify admin, go to **Products > Collections** ([open in the Shopify admin](https://admin.shopify.com/collections)) and open the collection.
2. Under **Online Store**, set **Theme template** to `quick-buy`, then save.

To use it on every collection, open `/templates/collection.json` and change the product grid section's type:

```json
"product-grid": {
      "type": "main-collection-product-quick-buy",
```

Quick Buy mode uses its own template files:

- [`/sections/main-collection-product-quick-buy.liquid`](https://github.com/sparklayer-io/dawn/blob/main/sections/main-collection-product-quick-buy.liquid)
- [`/snippets/card-product-quick-buy.liquid`](https://github.com/sparklayer-io/dawn/blob/main/snippets/card-product-quick-buy.liquid)

To change its styling, edit the CSS at the top of `/sections/main-collection-product-quick-buy.liquid`.

Quick Buy mode also applies to signed-out visitors on the collections where you use it. To change that, we recommend working with a Shopify expert.

## Add sample products and prices

If you're starting a B2B store from scratch, load our sample B2B products and prices to see how SparkLayer works before you add your own. You can see them on our [demo store](https://b2b-demo-store-dawn.myshopify.com/).

| Item | How to import it | Download |
| --- | --- | --- |
| **Shopify sample products** | Upload the CSV in your Shopify admin under **Products** | [Sample products CSV](https://cdn.shopify.com/s/files/1/0608/1642/5195/files/Sample_Shopify_Products.csv?v=1635762514) |
| **SparkLayer sample B2B prices** | Upload the CSV in **Pricing > Price lists** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/pricing/lists)), or **SparkLayer Wholesale > Pricing > Price lists** in the Shopify app | [Sample B2B prices CSV](https://cdn.shopify.com/s/files/1/0608/1642/5195/files/Sample_SparkLayer_B2B_prices.csv?v=1635762514) |
| **SparkLayer sample metafields** | Upload the CSV with a third-party app such as [Metafields Guru](https://apps.shopify.com/metafields-editor-2) | Not available |

## FAQs

**How do I stop my Shopify prices showing in Google search results?**

Google indexes most Shopify stores, so your Shopify (retail) prices may appear in its search results. This is standard Shopify behaviour, not something SparkLayer controls.

To stop it, you need to customise your Shopify store itself. Shopify Support can advise, and there are [Shopify community articles](https://community.shopify.com/c/forums/searchpage/tab/message?advanced=false\&allow_punctuation=false\&filter=location\&location=category:en\&q=hide%20prices%20from%20google) on the topic. Changes like this can affect your search rankings, so speak to a Shopify expert first.