How to Connect BigCommerce to WISMOlabs via BigCommerce API

Connecting your BigCommerce store to WISMOlabs is a straightforward process that allows WISMOlabs to consume shipment data from your store, ensuring seamless post-purchase experiences for your customers. Follow the steps below to integrate BigCommerce with WISMOlabs.

Step 1: Access BigCommerce Connect in WISMOlabs

1. Log in to your WISMOlabs account.
   
2. Navigate to Settings > BigCommerce Connect in the navigation menu.

Step 2: Create API Keys in BigCommerce

Step 3: Assign Permissions and Save

1. Set the access permissions for the API key to "Read Only" for the following resources:
   • Customers
   • Orders
   • Order Transactions
   • Products
   • Order Fulfillment
2. Once the permissions are set, click the [Save] button.

Step 4: Enter API Credentials in WISMOlabs

1. Return to the BigCommerce Connect app in your WISMOlabs account.
2. Paste the BigCommerce API credentials you just created into the corresponding fields.

By following these steps, your BigCommerce store will be successfully connected to WISMOlabs, allowing you to automate and enhance your post-purchase customer experience. If you encounter any issues during the setup process, WISMOlabs support is available to assist you.

How to Add a Tracking Button to Customer Account Pages

Adding a "Track My Order" button directly to your BigCommerce customer account pages provides a seamless experience for your customers, allowing them to track their shipments without having to search for a tracking number. This guide will walk you through editing your theme to add this functionality.

Prerequisite: This guide requires editing your Big-Commerce theme files. Before you begin, we strongly recommend you create a backup of your theme. 

Step 1: Duplicate Your Theme

First, create a copy of your current theme. This ensures you have a safe backup to restore if you make a mistake.

1. From your BigCommerce dashboard, go to Storefront > Themes.

2. Find your current, active theme. Click the Advanced button and select Make a Copy.

3. Give the copy a descriptive name (e.g., "My Theme with Tracking Button") and save it. All edits will be made on this copied theme.

Step 2: Edit Your Theme Files

Now you will launch the in-browser editor to modify the theme's code.

1. On the theme copy you just created, click the three-dot icon ( ... ) and select Edit Theme Files.

2. This will open the Stencil theme editor, with a list of your theme files on the left.

Step 3: Add the Button to the Order Details Page

This will place a tracking button on the page customers see when they view the details of a specific order.

1. In the file list on the left, navigate to templates > pages > account > orders > details.html. Click to open the file.

2. Search the file (using Ctrl+F or Cmd+F) for the following line:

   codeHtml

   <button data-print-invoice="{{order.invoice_url}}" class="button">{{lang 'account.orders.details.print_invoice'}}</button>

3. Immediately after that line, paste the following code snippet:

   codeHtml

   {{!-- WISMOlabs Track My Order Button --}}
   {{#if order.shipping_address.zip}}
       <a href="https://[YOUR_STORE_NAME].wismolabs.com/[YOUR_STORE_NAME]/tracking?ON={{order.id}}&DZIP={{order.shipping_address.zip}}" class="button" target="_blank">Track My Order</a>
   {{/if}}

4. Crucially, you must customize the URL. Replace both instances of [YOUR_STORE_NAME] with your unique store identifier provided by WISMOlabs.

5. Click Save File.

Step 4 (Optional): Add the Button to the Main Orders List

To provide even better access, you can add a tracking button next to each order in the customer's main order history list.

1. In the file list on the left, navigate to templates > pages > account > orders > all.html. Click to open the file.

2. The structure of this file can vary by theme, but you need to find the loop that displays each order. Look for a line that says {{#each customer.orders}}.

3. Inside this loop, find a suitable place to add the button. A good location is often within a table cell (<td>) that contains other actions, like a "View Order" link.

4. Paste the following code snippet in your desired location.

   codeHtml

   {{!-- WISMOlabs Track My Order Button --}}
   {{#if shipping_address.zip}}
       <a href="https://[YOUR_STORE_NAME].wismolabs.com/[YOUR_STORE_NAME]/tracking?ON={{id}}&DZIP={{shipping_address.zip}}" class="button button--small" target="_blank">Track</a>
   {{/if}}

5. Note the small code change: The variables are now {{id}} and {{shipping_address.zip}} (without order.). This is necessary because you are inside the order list loop.

6. Again, remember to replace [YOUR_STORE_NAME] with your unique WISMOlabs identifier.

7. Click Save File.

Step 5: Apply the Theme

Once you have saved your changes and are happy with the result (you can use the Preview option), you are ready to make the theme live.

1. Go back to Storefront > Themes.

2. Find the theme copy you edited.

3. Click the three-dot icon ( ... ) and select Apply.