Shopify B2B Dawn Theme

introduction dawn is the first free online store 2 0 https //themes shopify com/themes/dawn/styles/default 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 learn more you can learn more https //help shopify com/en/manual/online store/themes/os20/themes by shopify/dawn about the dawn theme and see it in action here https //themes shopify com/themes/dawn/styles/default 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 try the demo you can try our shopify dawn demo store here https //standalone demo sparklayer io/ how it works the sparklayer b2b optimised version of dawn works by adapting specific parts of the dawn theme, activating the sparklayer frontend interfaces docid\ ccz1vnh0o6d 722w35xpa 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 docid\ mrp z0qizq2qksseujylv that display on collection pages, showing the customers b2b pricing and the ability to add to an order product detail interface docid\ jkcjbyuanjzp75i8ul7mt that show the customers b2b pricing and the ability to add to an order my account interface docid\ lqxani7ivdqna09d9soap and my cart interface docid\ efevur a3ycjxuhvrr7t using the sparklayer frontend interfaces docid\ ccz1vnh0o6d 722w35xpa a quick buy mode that lets customers quickly build orders please note the dawn theme is maintained and built by shopify and may be subject to periodic updates inline with their own releases 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 please note the installation process will add all the necessary theme code for you; you'll then need to add your b2b pricing https //app sparklayer io/pricing and customer groups https //app sparklayer io/customers/groups to complete the testing process if you wish to remove the b2b theme, this works as with any other shopify theme and can be easily deleted from within shopify shopify has a limit of 20 themes for some shopify plans, you'll be notified if you need to remove an existing theme to complete the installation process each time you click the install button, this will create a new b2b theme within your shopify store 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 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 download the full repository via github here https //github com/sparklayer io/dawn/archive/refs/heads/main zip and then uploading as a new theme https //help shopify com/en/manual/online store/themes/adding themes#upload a theme file from your computer in your shopify store 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 frontend integration guide docid\ ncgylsrjkvmtcboxwvkma to complete set up click here https //github com/sparklayer io/dawn/blob/main/layout/theme liquid templates/page b2b login json a new file that creates a b2b login page (see guide below) click here https //github com/sparklayer io/dawn/blob/main/templates/page b2b login json sections/main b2b login liquid a new file that creates the content for the b2b login page click here https //github com/sparklayer io/dawn/blob/main/sections/main b2b login liquid sections/main product liquid the product detail page with sparklayer enabled click here https //github com/sparklayer io/dawn/blob/main/sections/main product liquid snippets/card product liquid the product card with sparklayer enabled click here https //github com/sparklayer io/dawn/blob/main/snippets/card product liquid templates/customers/register liquid an updated registration page that is required if using the forced login page click here https //github com/sparklayer io/dawn/blob/main/templates/customers/register liquid using github? click here https //github com/sparklayer io/dawn the full dawn github repository with changes for sparklayer customisations creating the b2b 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 first, add sections/main b2b login liquid ( download here https //github com/sparklayer io/dawn/blob/main/sections/main b2b login liquid ) and the templates/page b2b login json ( download here https //github com/sparklayer io/dawn/blob/main/templates/page b2b login json ) files to your theme, ensuring each file goes into the correct directory within your shopify admin, under online store , click pages , and then click the add page button at the top give the page a title and then under edit website seo at the bottom, ensure the url and handle is set to b2b login under online store and theme template , choose b2b login you can edit how the page looks and functions by going to online store > themes and click the " customize " button search for b2b login to begin making changes you can customise nearly all areas of the page such as colours, form fields, text, and more to see how the page works, in your browser, visit www yourstore com/pages/b2b login and you should see the new login page learn more you can learn more about how to customise this page in shopify b2b registration & login docid\ gfc0uw7mjnmnpnno6edrl 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 {% raw %} {% assign showsiteforb2b = true %} {% endif %} {% if showsiteforb2b == blank %} {% assign showb2blogin = true %} {% endif %} {% endraw %} 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 how do i stop my shopify pricing showing on google search? by default, google will almost certainly index your shopify store to show on their search listings a result of this is your shopify prices (retail prices) may also show within google it's very important to note that this is not related to sparklayer and is in fact a built in feature of shopify if you do not want your prices to show on google this is a customisation that would need to be applied via your shopify store (not via sparklayer directly) the shopify support team may be able to best advice here but there are a range of 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 that you can review please note, making any changes to your shopify store in this manner may effect your google search results and we strongly advise speaking with a shopify expert before making any changes 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 file name details code sample sections/featured collection liquid the homepage featured collection click here https //github com/sparklayer io/dawn/blob/main/sections/featured collection liquid sections/main collection grid liquid the main product collection page click here https //github com/sparklayer io/dawn/blob/main/sections/main collection product grid liquid sections/predictive search liquid the quick search feature that shows products click here https //github com/sparklayer io/dawn/blob/main/sections/predictive search liquid sections/main product liquid the main product detail page click here https //github com/sparklayer io/dawn/blob/main/sections/main product liquid 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 https //admin shopify com/menus ) 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 {% assign showb2bnav = true %} 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 try the demo visit our demo site https //demo sparklayer io/ and click quick buy https //demo sparklayer io/collections/sample quick buy once logged in 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 "product grid" { "type" "main collection product quick buy", 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 view sample code /snippets/card product quick buy liquid view sample code 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 important to note if you apply the new 'quick buy mode' to your collection pages, this will also take effect for logged out customers also if you are looking to customise the behaviour of how this works, we recommend engaging a shopify expert to assist 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 https //b2b demo store dawn myshopify com/ 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 https //cdn shopify com/s/files/1/0608/1642/5195/files/sample shopify products csv?v=1635762514 sparklayer sample b2b pricing upload csv via the price lists docid\ ldepanhogqwegnf jhz6l admin in the sparklayer dashboard click here https //cdn shopify com/s/files/1/0608/1642/5195/files/sample sparklayer b2b prices csv?v=1635762514 sparklayer sample metafields upload csv via a third party app such as metafields guru click here