How to install Instant Checkout onto a new theme in BigCommerce

This document will guide you through the process of transferring the Instant checkout button to a new theme in BigCommerce.

1. Access the Site Source Code in your old theme

1. Navigate to the Themes:

   • Go to: Storefront > Themes 
   • Select the old theme that contains Instant Checkout
     
   • Select Customize
     

2. Alternative Navigation (if Themes is not accessible under Storefront):

   • Go to: Channel Manager > Themes

1. • Select the theme you wish to edit and click "Customize"

2. Edit Theme Files:

   • In the menu on the left-hand side, navigate to Theme Styles > Edit Theme Files
     
   • If prompted, click "Edit Theme Files" to continue. 
     

     

1. Navigate the Theme Files:

   • You will now be able to navigate and edit the theme files on the left-hand side.

• • The blue dot next to the file name indicates the file has been changed.

2. Locate the Files

Locate the following files to find the button locations. The file structure may vary based on customizations.

• Product Page (PDP):
  • templates > components > products > add-to-cart.html
    

    or

  • templates > components > products > product-view.html
• Cart Page:
  • templates > pages > cart.html
• Mini Cart:
  • templates > components > common > cart-preview.html
    or
  • templates > components > cart > totals.html
• Add to Cart Pop-up:
  • templates > components > cart > preview.html

3. Copy button code 

• Each file contains a block of Instant code. You will need to copy the code block from each file and store it to be used in the new theme. The code is identified by the following lines:
  
  • <!------ INSTANT CHECKOUT BUTTON START ----------->
    
    
  • <!------ INSTANT CHECKOUT BUTTON END ----------->

4. Restrict Button Visibility

To ensure buttons are only visible to those with access, follow these steps:

1. Create an Account on your site. Log in to you account.

2. Add the Email used to create the account and wrap the button code snippet as follows:

   Copy the code below

   {{#or (if customer.email '===' 'your email')}}

   // Paste the button code here. {{/or}}

   See example below, the Instant buttons will only be visible to the user signed in to the site with the email help@instant.one

   

5. Add the Buttons to your new theme

To add the Instant buttons to the site, they need to be added manually by inserting a code snippet directly into the source code.

1. Identify the location using the corresponding file within the new theme.
2. Insert the Button Code at the appropriate locations within these files, wrapped with the visibility restriction code if necessary.

6. Style the Buttons

To ensure the buttons match the new theme, they need to be styled accordingly using CSS.

1. Add the Custom Styles for the Instant buttons as per your theme styling. For example:

   

2. Save and Apply the changes to ensure the styles are implemented on the live site.

6. Save and Apply Changes

• Once all necessary changes are made, remove the lines: 
  
  
  {{#or (if customer.email '===' 'your email')}}
  {{/or}}
   
• Once the changes are saved, the buttons will become visible to all users.
  
  

By following these steps, you will successfully transfer and style the Instant checkout button from one theme to another in BigCommerce.

For further support, please reach out to help@instant.one