Shopify Dawn Theme & SparkLayer

Search…
Credit: Shopify
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. You can learn more about the Dawn theme and see it in action here.
To make it easy to get up and running with SparkLayer, we've a B2B optimised version of the Dawn theme that you can download, configure, and then customise.
Try the demo! You can try our Shopify Dawn demo store here​
How it works
The SparkLayer B2B optimised version of Dawn works by adapting specific parts of the Dawn theme, activating the SparkLayer Frontend 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 cards that display on collection pages, showing the customers B2B pricing and the ability to add to an order
Product detail page that show the customers B2B pricing and the ability to add to an order
My account and cart using the SparkLayer Frontend​
Installing the code snippets
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.
File Name
Details
Code sample
layout/theme.liquid
The code theme file where the SparkLayer core script is installed along with a number of other customisations for CSS and forced login. You'll need to add the SparkLayer core script to complete set up
​Click here​
templates/page.trade-login.liquid
A new file that creates a B2B login page (see guide below)
​Click here​
sections/trade-login.liquid
A new file that creates the content for the B2B login page
​Click here​
sections/main-product.liquid
The product detail page with SparkLayer enabled
​Click here​
snippets/product-card.liquid
The product card with SparkLayer enabled
​Click here​
templates/customers/register.liquid
An updated registration page that is required if using the forced login page
​Click here​
Using Github? Click here the full Dawn Github repository with changes for SparkLayer
Creating the login page
Important! If you're wanting to set up a forced login page, please ensure a new page is created in Shopify as detailed below.
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.
1.First, add the templates/page.trade-login.liquid and sections/trade-login.liquid files to your theme, ensuring each file goes into the correct directory. Download these files​
2.Within your Shopify admin, under Online Store, click Pages, and then click the Add page button at the top
3.Give the page a title and then under Edit website SEO at the bottom, ensure the URL and handle is set to trade-login
4.Finally, under Online store and Theme template, choose trade-login
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.
1
<div class="field">
2
    <input class="field__input" autocomplete="name" type="text" id="ContactForm-company" name="contact[Company]" placeholder="Company">
3
    <label class="field__label" for="ContactForm-company">Company</label>
4
</div>
Copied!
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. 
Disabling the forced login page
If you'd rather not force customers to login before seeing your store, you can easily adjust this within the layout/theme.liquid file. This means you can have both a B2C and a B2B store running alongside each other.
To disable the login page, simply change the following code to false.
1
{%- if showSiteForB2B == blank -%}
2
    {% assign showB2BLogin = false %}
3
{% endif %}
Copied!
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.
Modifying theme.liquid
In order to enable the SparkLayer Frontend and customise your storefront to have a login screen, you'll need to update the /layout/theme.liquid file. You can use our code sample here to get started and see the exact file location here.
Please note, you'll still need to add the SparkLayer Core Script to this file. Learn more here​
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 you can learn more about how this works in our guide here​
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.
Item
Notes
Download CSV
Shopify sample products
Upload CSV via the Products admin in Shopify
​Click here​
SparkLayer sample B2B pricing
Upload CSV via the Price Lists admin in the SparkLayer Dashboard
​Click here​
Additional information
The Dawn theme is maintained and built by Shopify and may be subject to periodic updates inline with their own releases.
Installing our code snippets does require moderate technical experience in how Shopify themes work and you may want to ask a Shopify expert to assist.