Install Step 4: Installing Fast Login Buttons on BigCommerce

There are 2 different pages where you can install our Fast Login button:

  • Login Page
  • Create Account Page

Let's get started:

Installing Fast Login Button to Login Page

  1. In the theme files, click templates > pages > auth > login.html. login.html file
  2. Use command-F to find the line:
Copy
Copied to Clipboard
<h1 class="page-heading">{{lang 'login.heading' }}</h1>
  1. Below this line, copy and paste the following code. When you do this, you will need to replace the REPLACE-WITH-YOUR-APP-ID placeholder with your Fast App ID.
Fast APP ID

The Fast App ID (app_id) can be found in the Install section of your Fast Seller Dashboard. You can also retrieve your Sandbox App ID from the Sandbox Seller Dashboard.

Copy
Copied to Clipboard
{{#if customer.name '===' 'Fast Testing'}}
<!------ FAST LOGIN BUTTON START ----------->
{{#unless customer}}
<div class="fast-wrapper-login">
  <div class="fast-or-login">OR</div>
  <fast-login app_id="REPLACE-WITH-YOUR-APP-ID" />
</div>
<style>
  .fast-wrapper-login {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border-bottom: 1px solid #dfdfdf;
    padding-bottom: 40px;
    margin-bottom: 20px;
    padding-top: 20px;
  }
  .fast-or-login {
    position: relative;
    top: 100px;
    background: white;
    width: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #757575;
  }
  @media (min-width: 551px) {
    .fast-wrapper-login {
      padding-left: 20%;
      padding-right: 20%;
      border: 1px solid #dfdfdf;
      border-radius: 5px;
      /*width: 98%;*/
    }
  }
</style>
{{/unless}}
<!------ FAST LOGIN BUTTON END ----------->
{{/if}}
  1. Click Save File, or Save & apply file depending on the wording of the page.

  2. Go to the Login page on your online store and make sure that the Fast Login button, which appears there now, looks good to you.

    You may have to refresh the page a few times before the Fast Login button appears.

    login page
    Button Styling

    If you want to adjust the appearance of the Fast button, refer to Styling Fast buttons.

Installing Fast Login Button to Create Account Page

  1. In the theme files, click templates > pages > auth > create-account.html. create-account.html file

  2. Find the line:

    Copy
    Copied to Clipboard
    <h1 class="page-heading">{{lang 'create_account.heading' }}</h1>

  3. Below this line, copy and paste the following code. When you do this, you will need to replace the REPLACE-WITH-YOUR-APP-ID placeholder with your Fast App ID.

    Copy
    Copied to Clipboard
    {{#if customer.name '===' 'Fast Testing'}}
<!------ FAST LOGIN BUTTON START ----------->
{{#unless customer}}
<div class="fast-wrapper-create-account">
 <div class="fast-or-create-account">OR</div>
 <fast-login app_id="REPLACE-WITH-YOUR-APP-ID" />
</div>
<style>
 .fast-wrapper-create-account {
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   border-bottom: 1px solid #dfdfdf;
   padding-bottom: 40px;
   margin-bottom: 20px;
   padding-top: 20px;
 }
 .fast-or-create-account {
   position: relative;
   top: 100px;
   background: white;
   width: 40px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   color: #757575;
 }
 @media (min-width: 551px) {
   .fast-wrapper-create-account {
     padding-left: 20%;
     padding-right: 20%;
     border: 1px solid #dfdfdf;
     border-radius: 5px;
     /*width: 68.33%;*/
   }
 }
</style>
{{/unless}}
<!------ FAST LOGIN BUTTON END ----------->
{{/if}}
  4. Click Save File, or Save & apply file depending on the wording of the page.

  5. Go to the Create Account page on your online store and make sure that the Fast Login button, which appears there now, looks good to you.

    You may have to refresh the page a few times before the Fast Login button appears.

    create account page
    Button Styling

    If you want to adjust the appearance of the Fast button, refer to Styling Fast buttons.