B2B Dawn theme

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 (opens in a new tab) 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 (opens in a new tab).

Our B2B version adapts parts of Dawn to turn on the SparkLayer frontend interfaces 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 on collection pages, showing B2B prices with the option to add to an order.
• The product detail interface, showing B2B prices with the option to add to an order.
• The My Account and My Cart 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:

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 for help.

These are the files that change, with links to the code on GitHub. The full theme is in the SparkLayer Dawn repository (opens in a new tab).

To see the theme as a B2B buyer before you publish it, choose it in Try it out and place a test order. When you publish it, step 5 of SparkLayer Wholesale,Setup (in your Shopify admin)In your Shopify adminOpen SparkLayer Wholesale under Sales channels, then Setup., 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 (opens in a new tab) and templates/page.b2b-login.json (opens in a new tab) to your theme, each in the right folder.
2. In your Shopify admin, go to Online Store,Pages (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Online Store › Pages to do this now. Opens in a new tab. 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.

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 (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Online Store › Themes to do this now. Opens in a new tab. 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. Then edit layout/theme.liquid and set this code to true:

{% 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:

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 (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Online Store › Navigation to do this now. Opens in a new tab. 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

{% 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 (opens in a new tab) and open the Quick Buy collection (opens in a new tab).

To use it on one collection:

1. In your Shopify admin, go to Products,Collections (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Products › Collections to do this now. Opens in a new tab. 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:

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

Quick Buy mode uses its own template files:

• /sections/main-collection-product-quick-buy.liquid (opens in a new tab)
• /snippets/card-product-quick-buy.liquid (opens in a new tab)

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 (opens in a new tab).

Item	How to import it	Download
Shopify sample products	Upload the CSV in your Shopify admin under Products	Sample products CSV (opens in a new tab)
SparkLayer sample B2B prices	Upload the CSV in SparkLayer Wholesale,Pricing,Price lists (in your Shopify admin)In your Shopify adminOpen SparkLayer Wholesale under Sales channels, then Pricing › Price lists.	Sample B2B prices CSV (opens in a new tab)
SparkLayer sample metafields	Upload the CSV with a third-party app such as Metafields Guru (opens in a new tab)	Not available

FAQs