Shopify B2B Dawn Theme

Introduction

Dawn is the first free Online Store 2.0 theme released by Shopify and is the ideal way to start configuring your Shopify store in a best-practice way. When you create a Shopify store for the first time, your store will by default use this theme and you can also use it for your existing Shopify store.

To make it easy to get up and running with SparkLayer, we've created a B2B optimised version of the Dawn theme that you can download, configure, and then customise. The B2B optimised Dawn theme brings the following features:

• SparkLayer frontend code snippets fully installed
• The ability to restrict access with an optional login screen
• The ability to hide prices until a B2B customer signs in
• The ability to set B2B-only products that only show when a B2B customer signs in

How it works

The SparkLayer B2B optimised version of Dawn works by adapting specific parts of the Dawn theme, activating the SparkLayer Frontend Interfaces as well as enabling a special login page. You can see how it works in our video below

The B2B optimisations include:

• A login page that optionally forces the customer to sign in before accessing the store and allows prospective customers to apply for an account. This content for this page can be customised via the Shopify Customizer
• Product Card Interface that display on collection pages, showing the customers B2B pricing and the ability to add to an order
• Product Detail Interface that show the customers B2B pricing and the ability to add to an order
• My Account Interface and My Order Interface using the SparkLayer Frontend Interfaces
• A Quick Buy mode that lets customers quickly build orders

Using the 1-click install

If you already have a SparkLayer account, you can use our special 1-click install to rapidly add the Shopify B2B Dawn theme to your Shopify store! It's a great way to quickly test how SparkLayer works or even as a starting point for your new B2B tore!

Within the Frontend Configuration section, simply click the 'Use our demo B2B theme' button to get started.

The Demo B2B theme works by automatically connecting to your Shopify Store and adding a brand new theme to your 'Theme library' within Shopify. The theme comes 'pre-loaded' with all your SparkLayer settings meaning there are no code changes for you to make!

Once the theme is added, you can then edit and preview it just as you would any other Shopify theme. Within the theme code itself, the installation process automatically adds all the SparkLayer code for you such as the SparkLayer Core Script and all the product page widgets, making it really quick to get up and running.

Manually installing

To get started, you'll first need to install the Dawn theme on your Shopify store and then action a number of specific code changes. There are three ways to go about implementing the code snippets:

1. Download our code samples and simply replace the matching files within your Shopify theme: ideal if you've made no changes so far to your Dawn theme.
2. Download the full repository via Github here and then uploading as a new theme in your Shopify store.
3. Review our code samples and manually apply them to your theme files: the best option if you've already made customisations to your Dawn theme.

Installing the code snippets involves adjusting (or adding) the following files and we've included direct links to Github to see the code.

Customisations

Creating the login page

You can optionally force all customers to login before they begin browsing your store and adding products to their B2B order.

Setting up a new login page

To enable this page, you'll need to create a Page within Shopify and then assign this page a special template.

Once you've saved the page, you can then visit yourstore.com/pages/trade-login to see the login page.

Using a contact form to apply for an account

The login page allows prospective customers to apply for an account and is set up to use the built in Shopify contact form to trigger an email.

When a customer fills in this form, an email will automatically be sent to the Shopify store's email address and include any additional fields you've added.

Adding custom fields is simple, and you can customise the fields exactly as you need. To add new fields, simply include a new code snippet within the /sections/trade-login.liquid file, making sure to adjust the names and id accordingly. In our example below, this is set up to capture a Company name.

Using a custom contact form

If you'd prefer to use a custom form to manage applications to your B2B store rather than the Shopify contact form, you can enable this via the Customizer. When in edit mode, simply tick the below box and then paste in your contact form HTML code. Alternatively, you can adjust this directly within the /sections/trade-login.liquid file.

Enabling the forced login page

If you'd rather force customers to login before seeing your store, you can easily adjust this within the layout/theme.liquid file.

To enable the forced login page, simply change the following code to true.

Hiding prices by default

If you want to hide prices until a customer is signed in, you can enable a special setting that will hide prices on product collection and product detail pages.

To enable the hiding of prices, simply set hidePricesLoggedOut to true in the following files:

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

Within the above files, you can also adjust the text and styling that is show to the logged out customer.

Customising the design

Nearly all elements of the login page can be customised via the standard Shopify customisation tools. When you're in the Customize mode, navigate to the login page and you'll see all available content that can be modified.

B2B only products

The B2B optimised Dawn theme also has support for B2B only products. This is a great way to hide specific products from logged out customers and it's easy to configure within Shopify.

The feature works by automatically hiding any products that you have tagged with the specific tag b2b-only from within the Shopify Products admin.

When you tag a product with b2b-only, this product will be invisible to all logged-out customers and won't show on any of your collections pages. If you need to customise this feature, you can edit how it works in the following files:

B2B only navigation

The B2B optimised Dawn theme has support for B2B-specific navigation. This is a great way to have a different navigation based on the customer type, e.g. a B2B customer sees one navigation, a logged-out (DTC customer) sees another.

To get started, you'll need to create a new menu in your Shopify store from the "Navigation" section of Shopify (you can access it here). Proceed to set up your menu and for the Handle, enter b2b-menu, and click Save menu.

To activate the new B2B menu, open and edit the following files and set showB2BNav to true (as shown below)

• snippets/header-mega-menu.liquid
• snippets/header-dropdown-menu.liquid
• snippets/header-drawer.liquid

To test this, sign in as a B2B customer and you'll see the navigation on your store.

Quick Buy Mode

The B2B optimised Dawn theme also has support for 'quick buy mode' that allows you to display product collection pages in a more streamlined view for your B2B customers. Once enabled, your collection pages will be displayed similar to below with pricing, variant options, product rules (e.g. pack sizing) and the ability to quickly add items to an order.

To enable 'quick buy mode', within Shopify, go to Products and click Collections and then edit the collection page you wish to apply this to. From the Theme template section, simply choose quick buy from the list of options and click save.

It's also possible to apply the 'quick buy mode' to all collection pages if you'd prefer. To enable this, open the file /templates/collection.json and adjust the code as shown below.

From an implementation point of view, the 'quick buy mode' enables a special template view, managed within the following files:

• /sections/main-collection-product-quick-buy.liquid
• /snippets/card-product-quick-buy.liquid

It's also possible to adjust the styling of the 'quick buy mode'. Simple open /sections/main-collection-product-quick-buy.liquid and edit the CSS displayed at the top.

Sample products and price lists

If you're starting your B2B store on Shopify from scratch, you can even install our sample B2B products to populate your product catalogue and price lists in SparkLayer. You can see these in action on our demo store

This is a great way to see how SparkLayer works on your Shopify store before then configuring it with your own products.