Bigcommerce: How-To

This series has proven to be a huge success! We’ve already went through Squarespace and Shopify and now we’re ready to show you what we can do with Bigcommerce. Once you’ve registered for a Reamaze account and integrate it with Bigcommerce we’ll automatically sync pertinent customer information in the conversations view. In addition, you’ll be able to access your Reamaze right through your Bigcommerce dashboard!

In this tutorial, we’re also going to show you how to integrate Reamaze’s JavaScript Shoutbox, Lightbox, and Contact Form right into your storefront.

Installing the Reamaze App, DEFAULT Shoutbox, and CUSTOM Shoutbox

  1. Log into your Reamaze and Bigcommerce dashboard respectively. If you don't have a Reamaze account already, you can follow the on-screen instructions to sign up for one.

  2. Click on Apps > Marketplace and search for Reamaze. Install the Reamaze app and authenticate. Click "Confirm" to install the app and "Yes" to connect your Reamaze account to your Bigcommerce account.

  3. Once installed, follow the on screen instructions to install the DEFAULT Reamaze Shoutbox Embed code snippet.

  4. Go to "Storefront Design" in your Bigcommerce dashboard. Click on "My Themes". If you've already selected a theme, click on "Theme Details". Under "Theme Options", select to "Make a Copy".

  5. Once a copy has been generated, go back to "My Themes" and click on the copied version your theme. Once that loads, use the "Theme Options" dropdown menu to select "Edit Theme Files".

  6. Click on the "Templates" folder, then "Layout", and finally "base.html".

  7. If you want the DEFAULT Shoutbox Embed, paste the JavaScript snippet code provided to you in Step 3 above the </head> tag in your base.html template.

  8. If you want a CUSTOM Shoutbox Embed, go to your Reamaze Embed Builder found in your settings menu, customize the Embed to your liking, an paste the JavaScript snippet code provided to you above the </head> tag in your base.html template.

  9. Click "Save" and preview your work!

Video Tutorial

Implementing a Reamaze Embedded Contact Form

To embed a Reamaze Contact From and/or replace an existing contact form provided to you via a Bigcommerce template, follow the below steps:

  1. First use the Reamaze Embed Builder to build the contact form that you like.

  2. In your Bigcommerce account, go to the Theme Editor to edit your theme files. Remember, you can only edit the theme for a copied theme, not the current theme you're using.

  3. Under the "Templates" folder, click on "Components", and then "Page", then "Contact-us-form.html".

  4. Select all and remove the contents of contact-us-form.html.

  5. In your Reamaze Embed Builder, copy and paste both the script snippet and the div snippet. Paste the div snippet underneath the script snippet. and click on save.

  6. If you now load the contact form page for your theme, the contact form should now show the Reamaze embedded contact form.

Video Tutorial

Implementing a Reamaze Lightbox Embed

The Reamaze Lightbox is one of the easiest Embeds to implement. It differs from the Shoutbox Embed in that you can define your own trigger and it does not utilize a floating trigger.

  1. You will not need the theme editor to implement the Reamaze Lightbox. It can be done by editing the pages in your Bigcommerce theme. In your Bigcommerce dashboard, click on "Storefront Content".

  2. Click on the page that you want to implement the Lightbox on. For example, pick the "Contact" page.

  3. For this example, we will be embedding the Lightbox on the word "Assistance" as detailed in the page content area.

  4. Click on the HTML button on the right side.

  5. Using the Reamaze Embed Builder, build the Lightbox configuration you like. Copy the script snippet, and paste it above the very first paragraph block.

  6. Paste the second div snippet by replacing a word in the paragraph. In this case, we're replacing the word "Assistance". Now, replace the words "YOUR SITES CUSTOM TRIGGER" with the word "assistance". This essentially makes the word assistance a hyperlink but also attaches the necessary div to call the Reamaze Lightbox modal.

Video Tutorial

Old Version of Bigcommerce Tutorial Video: