How to configure Cloverly for Shopify

This article assumes you have created an account on http://cloverly.com and installed the Cloverly Shopify app. Once you have installed the app, here's how to configure it to work successfully. 

Installation Video

The following 9 minute video covers everything you'll read in this document.

Default Settings

The installation takes place entirely in the Settings area of the app. The first step is to make sure you completely fill out the first section, which contains default settings. If you don't fill this out fully, the app won't work. 

Lpe3_e4EZq18U6oUchKfBvFOgzAB70-GAudRkQvFbFDwWen6sYxpeCtyYea-JoCCbUbOcPiGQ8qaVryTYn8hVsrk_gbMpjl6ql7fRfOQL7JkokHuresUj8Ht9R86MkkZWBjbs0sL.png

Make sure your two-digit country code is in uppercase. If you are using a drop-shipping method, or ship from multiple locations, read here about how to set up your "ship from" settings. 

Default item weight will be used as the calculation weight for the offset if you don't have weights assigned to your products. We recommend 2000 or 3000 grams for default weight or something close to the your average product weight (remember this is in grams). 

Price & Offset Behavior

Next please choose how you would like Cloverly to charge customers. We recommend leaving this to the default behavior during testing and initial implementation. More information regarding the meaning of these different behaviors can be found here

Screen_Shot_2019-10-28_at_2.20.54_PM.png

Placement on Page

The next section requires the most configuration, including some knowledge of HTML/CSS and a level of comfort with the code inspector in your browser. We're using Google Chrome, and the Chrome Inspector, for screenshots in this article.

Here's a screenshot of this step in the configuration process. Glance over it briefly, and then keep reading for an explanation of these form fields.

Screen_Shot_2020-04-07_at_3.16.56_PM.png

In order to properly configure Cloverly, you need to decide where you would like Cloverly to appear on your store. In the majority of cases, Cloverly should show up on your /cart page. Here's an example of Cloverly displayed on the cart. Note the "Add 29 cents for carbon neutral delivery" above the checkout button. That's Cloverly!

Screen_Shot_2019-10-28_at_2.26.49_PM.png

In order to do this installation, this store first decided that they would like Cloverly to appear above the CHECKOUT button on their store. The next step was to right-click on the checkout button and choose Inspect.

Screen_Shot_2019-10-28_at_2.30.14_PM.png

This brings up a code inspector. Here's the relevant code that comes up when you inspect the checkout button on this cart page. 

Screen_Shot_2019-10-28_at_2.31.40_PM.png

You're looking for a class or an id to reference in your placement of Cloverly. In this case, here's the specific code for the checkout button.

Screen_Shot_2019-10-28_at_2.31.40_PM.png

This code is what generates the checkout button on this particular example. 

Screen_Shot_2019-10-28_at_2.34.37_PM.png

So, in this case, we want Cloverly to appear above this checkout button. In order to make this placement, we need to establish a CSS class or id to reference. For this installation, we've chosen the class Cart__Checkout. It's important that you choose a class that is unique; otherwise Cloverly could appear in multiple places throughout the page. You would not want to choose the class Button, for example, because a lot of elements on the page probably use this class. 

Once you have decided on a class, now you're ready to update the Settings. In this case, we want Cloverly to appear above the element with the class Cart__Checkout. You need to place the div in the Element query selector (where you'd like it Cloverly to attach) and update the Placement option (how you'd like it to be arranged around the chosen element). Here's how that will look in the configuration.

Screen_Shot_2019-10-28_at_2.41.06_PM.png

By making this configuration, you're telling the app that you want Cloverly to appear on your store before the element that has a class of Cart___Checkout. When you are specifying the element, make sure to include a period (.) before any class name, and a hash (#) before any id, following standard CSS referencing standards.

 

If you have two carts, ex. a side cart and a /cart page, you'll need to place Cloverly twice. After picking the first placement, add a comma and repeat the process above for your second placement. After you have selected and added it to your second placement, change your Selector method from querySelector to querySelectorAll. Here is how that will look in the configuration. 

 

Screen_Shot_2020-04-08_at_11.15.34_AM.png

A few things to note above: (1) You can only choose one placement option, so wherever you chose place cloverly it will be arranged the same (before, after, etc.). (2) The comma separating the two element choices. (3) We often see javascript issues with sidecart placements below is a script to trigger window.Cloverly.run when placing Cloverly in two places.

$(document).ajaxComplete(function(_, _, request) {
if (request.url =~ "cart") {
##cloverly_run##();
}
});


At this point, and whenever you make changes to the settings, make sure you scroll down to the bottom of the page and save your changes.

App Testing

After you save, you can test to see if you’ve placed Cloverly properly in your cart. To do this, add any item to your cart. When you are on your cart page, look at the URL at the top of the page. At the end of the URL in the address bar, add /?cloverly=force. This will activate Cloverly in your browser (it will be active in your browser until you clear your cache). If you configured it correctly, Cloverly should appear on the page in the desired placement.

Screen_Shot_2019-10-28_at_2.54.30_PM.png

If there is an error, you’ll see “you’ve qualified for free Carbon neutral delivery.” Double check your settings are correct.

If you’ve set it up properly, the default version of Cloverly should appear. You’ll able to add Cloverly as an option and go to checkout. You’ll there is now a product for Carbon Neutral Delivery, this is now in your store. If you have a collections/all page, Cloverly will appear in your product field. Here are the instructions for hiding it

 

Design Customization

By default, here's how the Cloverly app looks. 

image__3_.png

However, we give you complete control over the HTML/CSS design of the Cloverly widget. To customize the design, please uncheck Use default Cloverly views

Screen_Shot_2019-10-28_at_2.59.29_PM.png 

This will give you access to all the underlying code used to create the Cloverly widget on the page. If you're familiar with HTML/CSS, all of this should make sense to you. For the particular design we've been talking about, here's the code we used to create the checkbox. 

<div id='nested-cloverly-container' style='margin: 10px 0 10px 30px; text-align: left;'>
<div id='cloverly-content-wrapper' style='display: flex; align-items: center;'>
<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:20px;margin-bottom:25px;cursor:pointer;x;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;'>
<input
data-cost-in-usd-cents='##cost_in_usd_cents##'
data-shopify-variant-id='##shopify_variant_id##'
data-shopify-quantity='##shopify_quantity##'
data-pretty-url='##pretty_url##'
data-offset-type='##offset_type##'
data-offset-subtype='##offset_subtype##'
type='checkbox'
style='position:absolute;opacity:0;cursor:pointer;height:0;width:0;'\
id='cloverly-green-shipping-button'\
/>
<span class='cloverly-checkmark' style='position:absolute;top:15px;left:0;height:15px;width:15px;background-color:#fff;border: 1px solid #bbb;'></span>
</label>
<p style='margin: 0;font-family: inherit; font-size: 13px;color: #10171f;'>
Add ##cost_in_words## for <a href='##pretty_url##?ref=shopify' target='new' style='color: #10171f;font-weight: 400; text-decoration: underline; text-transform: lowercase;'>carbon neutral delivery</a>?
</p>
</div>
</div>
</div>

The result was a much more minimalist design, with a checkbox and a single line of text. The Cloverly branding was also removed. 

Screen_Shot_2019-10-28_at_2.54.30_PM.png

 

Fulfillment

To integrate with Shopify stores, Cloverly needs to be a product in the cart. Because we are a line-item in the order, the Cloverly product interacts with a store's fulfillment services. Read here to learn about we've set up Cloverly to work with fulfillment services.

 

Getting Help

We are always happy to assist on any installation. We have designers on hand who know how to properly design and place the Cloverly widget to look perfect on your particular site. If these instructions seem too difficult, email support@cloverly.com and we'll do all the heavy lifting!

 

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

Comments

0 comments

Article is closed for comments.