# Quick start
4 steps to finalize your theme integration
Download and unzip your current BigCommerce cornerstone theme.
Create
templates/components/b3/b3json.html
using the code below:{{{json this}}}
Modify files
templates/layout/base.html
<!DOCTYPE html> <html lang="en"> <head> <!-- other head content --> <!-- add 4 lines right before the head closing tag --> + {{~inject "customer" customer}} + {{~inject 'store_hash' settings.store_hash}} + {{~inject "settings" settings}} + {{~inject "page_type" page_type}} </head> <body> <!-- other body content --> <script> {{!-- Exported in app.js --}} window.stencilBootstrap("{{page_type}}", {{jsContext}}).load(); // add the following line before the script closing tag + window.jsContext = JSON.parse({{jsContext}}) </script> </body> </html>
assets/js/theme/global.js
export default class Global extends PageManager { onReady() { // other code // only need to change the version number to update the version. + const url = 'https://cdn.bundleb2b.net/bundleb2b.2.10.0.js'; + const el = document.createElement('script'); + el.setAttribute('src', url); + document.querySelector('body').append(el); + window.b3themeConfig = {} } }
assets/js/theme/auth.js
registerCreateAccountValidator($createAccountForm) { // other code + window.createAccountValidator = createAccountValidator; }
Since the
checkout
page and theorder confirmation
page of the BigCommerce cornerstone theme do not supportglobal.js
, you will need to add the following code to the footer of these two page:templates/pages/checkout.html
<!-- other body content --> {{{ footer.scripts }}} + <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script> + <script> + window.b3cartId = '{{cart_id}}'; + </script> + <script src="https://cdn.bundleb2b.net/checkout.2.10.0.js"></script> <!-- other body content -->
templates/pages/order-confirmation.html
<!-- other body content --> {{{ footer.scripts }}} + <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script> + <script> + window.b3checkoutId = '{{checkout.order.id}}'; + </script> + <script src="https://cdn.bundleb2b.net/order-confirmations.2.10.0.js"></script> <!-- other body content -->
Upload your theme
Stencil is BigCommerce’s latest theme framework engine. You have to use it before you pushlish your new theme.
Please run
stencil bundle
to bundle up the theme into a structured.zip
file, which can be uploaded to BigCommerce. Upload the.zip
file to BigCommerce and apply it.
If you are using one of the following bundelb2b approved theme, please use the following links to do some extra configuration after this instruction.