# 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 the order confirmation page of the BigCommerce cornerstone theme do not support global.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.

← Introduction Customize page containers →