📍 Bolt Help / Core Products / Checkout / Manage Bolt for BigCommerce / Set Up SSO Commerce for BigCommerce

Set Up SSO Commerce for BigCommerce

Give feedback
Learn how to set up SSO Commerce buttons and stylings on your BigCommerce storefront.

Prerequisites

  • You have completed the process of migrating customer accounts to Bolt. See Customer Account Migration for a step-by-step guide.
  • You have contacted Bolt and requested SSO Commerce be enabled for your account.

How to Set Up SSO Commerce

1. Replace All Log in, Log out and Track My Order buttons

  1. Navigate to your storefront’s theme files.
  2. Make a copy the active theme.
  3. Replace all Login, Logout and Track My Order buttons with the Bolt SSO button using one of the following options:

Conditionally Displayed Button

<!-- This conditionally adds the login/logout button -->
{{#if customer}}
    <a class="bolt-sso-custom" data-logged-in="true"> <!-- Add Link Here --> </a>
{{else}}
    <a class="bolt-sso-custom" data-logged-in="false"> <!-- Add Link Here --> </a>
{{/if}}

Static Bolt Branded Button

<!-- This creates a new Bolt branded login/logout button -->

    {{#if customer}}
        <div class="bolt-account-sso" data-logged-in="true"></div>
    {{else}}
        <div class="bolt-account-sso" data-logged-in="false"></div>
    {{/if}}

Login/Logout buttons can be commonly found in the following places:

  • templates/components/common/navigation.html
  • mobile menu: templates/components/common/navigation-menu.html

TIP

Make sure you analyze the intended functionality of all of the buttons you are changing. Occasionally, there may be buttons that do not toggle between Login/Logout, but perform other actions post-login such as link to an account page (e.g.,href="/account.php").

2. Customize Button Styling

Use the following styles to override the button’s font and icon color:

<style>
    --bolt-account-sso-color: #fff;
    --bolt-account-sso-font: 'Verdana';
    --bolt-account-sso-font-size: 16px;
    --bolt-account-sso-font-weight: 700;
</style>

You can also add classes to the bolt-account-sso div as necessary to customize the style further.

WARNING

Do not replace icon-only buttons. Instead, add class=”bolt-sso-custom" data-logged-in="true/false". This enables the icon button to trigger Bolt SSO instead of redirecting to the platform login page.

3. Install Required Scripts

Ensure the following account script is loaded whenever the button is created, using one of the following script urls for {{bolt-script-url}}:

  • Sandbox: https://connect-sandbox.bolt.com/account.js
  • Production: https://connect.bolt.com/account.js
    <script>
        var insertAccountScript = function () {
            var scriptTag = document.getElementById('bolt-account');
            if (scriptTag) {
                return;
            }
            scriptTag = document.createElement('script');
            scriptTag.setAttribute('type', 'text/javascript');
            scriptTag.setAttribute('async', '');
            scriptTag.setAttribute('src', '{{bolt-script-url}}');
            scriptTag.setAttribute('id', 'bolt-account');
            scriptTag.setAttribute('data-publishable-key', <insert publishable key>);
            document.head.appendChild(scriptTag);
        }
      
        function insertButtons() {
            if (typeof BoltAccount === 'undefined') {
                window.setTimeout(insertButtons, 100);
                return;
            }
            BoltAccount.injectButtons();
        }

        insertAccountScript();
        insertButtons();
    </script>

4. Define Redirects (Optional)

You can specify where a link or button redirects to after successful login, using the following html attribute: data-destination-on-success=”{{urls.accounts.example.all}}”

For example, you can redirect to a wishlist when a non-logged in user selects a wishlist link. This would present the SSO Commerce modal for authentication before redirecting the shopper to their wishlist page.

data-destination-on-success=”{{urls.accounts.wishlists.all}}”

5. Replace Login and Create Account Pages

Ensure that the native Login (login.html) and Create Account (create-account.html) pages have their contents replaced with the SSO Commerce login/register button. You can typically find these pages by navigating to /templates/pages/auth/.

Login Page

...
{{#partial "page"}}
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
<div class="login">
    <h1 class="page-pending">{{lang 'login.heading'}} </h1>
    <!-- insert Bolt code here -->
    <!-- comment page content -->
</div>
<!-- comment page content -->
{{/partial}}
{{> layout/base}}

Create Account Page

...
{{#partial "page"}}
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
<div class="account">
    <h1 class="page-pending">{{lang 'create_account.heading'}} </h1>
    <!-- insert Bolt code here -->
    <!-- comment page content -->
</div>
<!-- comment page content -->
{{/partial}}
{{> layout/base}}

Example of Customizations

    <style>
        .login-page-sso {
            --bolt-account-sso-color: #fff;
            --bolt-account-sso-font: Gibson-Regular,Arial,Helvetica,sans-serif;
            background-color: #444;
            border-color: #444;
            border-style: solid;
            border-width: 1px;
            border-radius: 4px;
            padding: 12px 32px;
            display: block;
            width: fit-content;
            margin: auto;
            cursor: pointer;
        }

        .login-page-sso:hover {
            background-color: #666;
        }
    </style>
    <div class="bolt-account-sso login-page-sso bolt-sso-custom"/>

6. Remove the Addresses, Payment Methods, and Account Details Pages

Remove any fields and pages that let the shopper modify their account information on the store website, including:

  • addresses
  • payment methods
  • phone/email
  • passwords

Removing these pages prevents shopper confusion and ensures they make all relevant changes from the Bolt Checkout modal. To remove these pages, you can simply comment out any links or fields related to these pages in the following places:

  • Navigation.html (templates/components/account/navigation.html)
  • Addresses.html (templates/pages/account/addresses.html)
  • Edit.html (templates/pages/account/edit.html)

Example

<!-- Start: Replaced by Bolt -->
<!-- 
{{#if account_page '===' 'addresses'}}
   <li class="navBar-item is-active">{{lang 'account.nav.addresses'}}</li>
{{else}}
   <li class="navBar-item">
       <a class="navBar-action" href="{{urls.account.addresses}}">{{lang 'account.nav.addresses'}}</a>
   </li>
{{/if}}
-->
<!-- End: Replaced by Bolt -->

7. Contact Bolt

Once you have completed setup, contact Bolt so that our team can:

  • Re-run necessary account migrations steps to capture any newly added accounts
  • Enable all imported accounts

Testing

TIP

Bolt recommends setting up a sandbox environment first before making any changes in production. Preview mode does not work for testing Bolt SSO Commerce.

  1. Test the Login/Register button. This action should populate the SSO Modal. Try going all the way through the login flow with your own Bolt account.
  2. Test any Icons or Elements with the id=”bolt-sso-custom” attribute. This action should populate the SSO modal.

Disabling SSO Commerce

See the guide onhow to disable BigCommerce for instructions on how to disable SSO Commerce.

# bigcommerce # sso
📖On This Page
Go to Advanced Search
Filter by Section
Filter by Topic