How to Configure Cloverly for BigCommerce

How to Configure Cloverly for BigCommerce

After you’ve installed the Cloverly for BigCommerce app from the BigCommerce Marketplace, you need to complete a few additional steps before you can begin facilitating the purchase of offsets for carbon via the checkout process. This article is intended to serve as a guide for installing and configuring the Cloverly for BigCommerce app for first time users.


Configuring Your Cloverly Account

Installing the Cloverly for BigCommerce app will automatically create a Cloverly account for your store and also a user account for the email address of the store owner. At this point, the store owner will receive an email notification from Cloverly with an invitation to set their password on the Cloverly site. Please follow the instructions provided in the email to complete your Cloverly set up. If you’d like to immediately begin allowing customers to purchase offsets through your BigCommerce site, make sure you set up a credit card in the Billing section of Cloverly. 


Although the Cloverly app is free, in order to facilitate the purchase of offsets and renewable energy credits for your store consumers, you will need to add a credit card to your Billing profile in Cloverly. Typically, you will want to make sure auto-billing is enabled and you’ll want to buy offset credits in amounts that will be sufficient for your store's products. The majority of ecommerce transactions are below $1 USD however, if you are shipping large, heavy items, you may want to buy credits in blocks of $10 or more USD to ensure when your account is re-credited that a single credit purchase will at least cover the cost of the offset.


If you’ve not yet configured your Cloverly set up with billing enabled, you’ll see the view below when you navigate to the Cloverly for BigCommerce app in your store.


When you’re ready for production, use the links provided to finish your Cloverly set up. 

Configuring Your App Settings

The image below shows a view of your basic app settings. Some of these settings, the Cloverly for BigCommerce app reads from your store settings during installation. But some of these, you will be required to provide before your app can be tested or used for production.




Please note that “Postal Code to ship from” and “Default Item weight” are required fields for the app to function properly.


The settings in the first part of the form are used for calculation purposes in determining the carbon offset for a package shipment.


Additionally, the Cloverly Behavior controls allow you to choose from the following options:

  • Default: customers are offered the option to offset their shipping (customer pays)
  • Flat rate (USD): offer customers the option to cover the flat rate fee (customer pays)
  • Always green: store covers the cost of each offset using default calculations (store pays)


To update any of these fields, just update the data, scroll to the bottom of the form and click the Update Store button.


If you have activated your Cloverly account for production in the Cloverly dashboard but you’ve not yet completed all the required configuration items for the app, such as default from postal code, you will see a view like the one below. If this is the case, simply click the ‘Settings’ link and update any missing fields.




Once you’ve updated your required App Settings, your Home view in the BigCommerce app should look like the one below:



At this point, you are ready to use Cloverly for BigCommerce on your site! You can use the default Cloverly views to begin quickly allowing consumers to offset shipping.


How to Configure the Checkout UI Elements

Some BigCommerce users may prefer to incorporate their own styling and brand into the Cloverly widget appearance on the Checkout page in your BigCommerce store. This section will walk you through customizing the look and feel of your user experience at checkout.


To begin customizing your Checkout UI elements, start by unchecking the ‘Use default Cloverly views’ checkbox located near the bottom of your Settings view just above the Update Store button.



After toggling default views off, your form will be updated so that you can begin customizing. Notice that below each of the HTML snippets, a preview widget is provided to guide you as you update the HTML.


The table below details each of the editable fields as well as tags that are used inside them.





Style css


Cascading Style Sheet definitions available to all HTML components

Estimate View


View that renders the initial estimate of the carbon offset cost of the shipment. This is generally the first view that will appear and must contain the specific tags mentioned below which will be replaced by the data from the Cloverly estimate.

Shipment Greened View


View that renders after the consumer opts-in (clicks the checkbox accepting the offset cost) in the Estimate View. For Stores that are ‘Always Green,’ This view shows up automatically notifying the consumer.

Loading View


This temporary view appears while the app is waiting on the carbon offset estimate from the Cloverly API.

Error View


This view, when used, will display an error if the app cannot properly interact with the Cloverly API. Many stores leave this field empty so consumers will not be aware of any issues



Estimate View - Required Data Fields

If you customize your estimate view, it is critical that the following data fields be present in the input element (checkbox) definition:










Here is an example of the complete estimate view containing all the required data elements for the input checkbox.


<div id='nested-cloverly-container' style='margin: 20px 0 20px 0px; text-align: left;'>

  <div id='cloverly-content-wrapper' style='display: flex; align-items: center; width: 100%;'>

    <div id='cloverly-check-wrapper'>

      <div style='display: flex; align-items: center;'>

        <label class='cloverly-label-container' style='display:block;position:relative;top:-10px;margin-right: 10px;padding-left:0px;margin-bottom:5px;cursor:pointer;x;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;'>
















<p style='margin: 0; padding-bottom: 24px;font-family: inherit; font-size: 14px;color: #10171f; font-weight; 800;'>

          Add ##pretty_cost## for <a href='##pretty_url##?ref=shopify' target='new' style='color: #10171f;font-weight: 800; text-decoration: underline; text-transform: lowercase;'>carbon-neutral delivery</a>?






How to configure placement

There are two additional required fields that are important to understand.


By default, your store will be configured as shown above. These DOM element selectors control how and when your Cloverly UI Widget appears on your checkout view.


It is important to note that the second element for triggering the Cloverly render needs to be ‘after’ the Shipping Address has been entered by the consumer. This is critical because Cloverly requires both the from (defined by store settings) postal code and to (defined by consumer) postal code in order to create an estimate to offset the shipment.


Please reach out to for assistance configuring your Cloverly app.  



Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.