> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Checkout/Confirmation Injection

This article covers styling, scripting, and extending the functionality of the checkout confirmation page.

## Adding Storewide Styles

A prerequisite for the next two options is to add themewide styles to your Checkout or Order Confirmation page. To do so, add this statement:

`{{{stylesheet '/assets/css/theme.css'}}}`

...before this statement, which is already present at the head of each template:

`{{{ checkout.checkout_head }}}`

## Applying Storewide Header

You can replace each page's predefined header with your storewide header. To do so, first add themewide styles as described above. Next, replace the following code block (if present):

```html showLineNumbers={false}
<header class="checkoutHeader optimizedCheckout-header">
    <div class="checkoutHeader-content">
        <h1 class="is-srOnly">{{lang 'checkout.title'}}
        <h2 class="checkoutHeader-heading">
            <a class="checkoutHeader-link" href="{{urls.home}}">
                {{#if checkout.header_image}}
                    <img alt="{{settings.store_logo.title}}" class="checkoutHeader-logo" id="logoImage" src="{{ checkout.header_image }}"/>
                {{ else }}
                    <span class="header-logo-text">{{settings.store_logo.title}}</span>
                {{/if}}
            </a>
        </h2>
    </div>
</header>
```

with this Handlebars partial reference:

`{{> components/common/header }}`

Ensure that you paste it before this **existing** statement:

`{{{ checkout.checkout_head }}}`

## Applying Storewide Scripts

You have the following options to add and customize headers and footers, on either or both templates:

* Adding your themewide header/footer.
* Adding themewide scripts (for analytics, etc.).
* Adding both.

If you are working on a theme that does not have the scripts already enabled, here are the steps to enable these options:

1. Add themewide styles, as described above.

2. Towards the top of the checkout template (`checkout.html`), add this Handlebars statement to enable header scripts:

`{{{ head.scripts }}}`

Add it between these existing statements, so it will ultimately read as shown below.

```html showLineNumbers={false}
<script type="text/javascript">
    window.language = {{{langJson 'optimized_checkout'}}};
</script>

{{{head.scripts}}}

{{/partial}}

{{#partial "page"}}
```

Additionally, at the bottom of the checkout template (`checkout.html`), add this Handlebars statement to enable footer scripts:

`{{{ footer.scripts }}}`

Add it between these existing statements, so it will ultimately read as shown below.

```html showLineNumbers={false}
    {{{ checkout.checkout_content }}}

    {{{ footer.scripts }}}

    {{/partial}}
```

3. Towards the top of the order confirmation template (`order-confirmation.html`), add this Handlebars statement to enable header scripts:

`{{{ head.scripts }}}`

Add it between these existing statements, so it will ultimately read as shown below.

```html showLineNumbers={false}
<script type="text/javascript">
    window.language = {{{langJson 'optimized_checkout'}}};
</script>

{{{head.scripts}}}

{{/partial}}

{{#partial "page"}}
```

Additionally, at the bottom of the order confirmation template (`order-confirmation.html`), insert this Handlebars statement:

`{{{ footer.scripts }}}`

Insert it between these existing statements, so it will ultimately read as shown below.

```html showLineNumbers={false}
{{{ checkout.order_confirmation_content }}}

{{{ footer.scripts }}}

{{/partial}}
```

4. In your store's BigCommerce control panel, ensure that you have inserted any desired script text in the `Storefront` > `Script Manager` field.

## Adding Trust Seals

To add a trust seal to either template:

1. Generate a code snippet (seal script) from your trust-seal provider. You can find instructions for GeoTrust seals in [this BigCommerce KB article](https://support.bigcommerce.com/s/article/Adding-a-GeoTrust-SSL-seal-to-your--footer). (Instructions for other providers will vary.)

2. Copy and paste the seal script into your checkout or order confirmation template, before or after the `{{{ checkout.checkout_content }}}` Handlebars statement.

## Checkout App Injection

With BigCommerce's extensible software, there are a variety of ways to add scripts to your store. The steps above outline only one method of adding header and footer scripts to your store, which is by directly editing the theme files.

As mentioned in the App Injection Script Examples, you can use BigCommerce's Script Manager and Script API to inject scripts to your store. The Script Manager user interface is available to store owners and other users via granted permission directly in the Control Panel, or scripts can be programmatically injected into the store by developers using the Scripts API. These are the recommended methods as they allow seamless and intuitive injection of scripts.

The following sections present examples of scripts that inject popular apps into the checkout/order confirmation sequence.

### Olark Live Chat

As an example of injecting an app from the BigCommerce App Marketplace, you could enable the Olark Live Chat app on either page by using the script manager or our new Scripts API:

```html showLineNumbers={false}
<!-- begin olark code -->
<script type="text/javascript" async>
  ;(function(o,l,a,r,k,y){if(o.olark)return;
  r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0];
  y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r);
  y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)};
  y.extend=function(i,j){y("extend",i,j)};
  y.identify=function(i){y("identifyv",k.i=i)};
  y.configure=function(i,j){y("configure",i,j);k.c[i]=j};
  k=y._={s:[],t:[+new Date],c:{},l:a};
  })(window,document,"static.olark.com/jsclient/loader.js");
  /* Add configuration calls bellow this comment */
  olark.identify('4080-493-10-1035');
</script>
<!-- end olark code -->
```

### Conversion Tracking: Conversions on Demand

Here is one final example of an app that you could enable by using the script manager or our new Scripts API. This example enables Conversions on Demand:

```html showLineNumbers={false}
<script type='text/javascript'>// <![CDATA[
    var cod_page_guid = 'CHECKOUT';
    var COD_CONFIG = {'platform':'bigcommerce', 'stoken':'as2_bcmarket_org'};
        (function(){
            var divCOD = document.createElement('div');
            divCOD.id = 'codScripts';
            var bodytag = document.getElementsByTagName('body')[0];
            bodytag.appendChild(divCOD);
            var cod = document.createElement('script');
            cod.type = 'text/javascript';
            cod.src = 'https://www.conversionsondemand.com/codadmin2/framework/cod-scripts-loader.js';
            var s = document.getElementById('codScripts');
            s.parentNode.insertBefore(cod, s);
        })(COD_CONFIG);
// ]]></script>
```

### Google Analytics: Addrexx Address Verification

The Addrexx app is integrated to the Checkout or Order Confirmation page via the BigCommerce control panel's Google Analytics box, rather than through injection directly into either Stencil template file. Here is the corresponding script to enter into the control panel:

```html showLineNumbers={false}
<!-- START  Addrexx -->
<script type="text/javascript">
  wwPage = window.location.href;
  if (wwPage.indexOf("billing_address") >= 0 || wwPage.indexOf("create_account") >= 0 || wwPage.indexOf("shipping_address") >= 0 || wwPage.indexOf("checkout") >= 0) {
    function loadaddrexx() {
      var _cc_url = "xxredda.s3.amazonaws.com/bcmarket/loader.js";
      var _cc_s = document.createElement('script');
      _cc_s.type = 'text/javascript';
      _cc_s.src = (("http:" === document.location.protocol) ? "http:" : "https:") + "//" + _cc_url;
      document.getElementsByTagName("head")[0].appendChild(_cc_s);
    };
    loadaddrexx();
  }
</script>
<!-- END  Addrexx -->
```

## Resources

* [REST Management API: Scripts](/developer/api-reference/rest/admin/management/scripts)

### Related Articles

* [Adding a GeoTrust SSL Seal to Your Store's Footer (Help Center)](https://support.bigcommerce.com/s/article/Adding-a-GeoTrust-SSL-seal-to-your--footer)

### Additional Resources

* [Olark (Olark)](https://www.olark.com/integrations/bigcommerce)
* [Set up conversion tracking for your website (Google)](https://support.google.com/google-ads/answer/6095821)
* Addrexx ([BigCommerce App Marketplace](https://www.bigcommerce.com/apps/))