Customizing your Cloverly Shopify app design

By default, Cloverly will install on your Shopify store with the following design. 

image.png

While this design is nice, it's not for everyone. We've given you access to all the underlying HTML and CSS that produces this design. To access it, simply uncheck "Use default Cloverly views" in the Settings area of the admin.

Screen_Shot_2019-11-05_at_10.32.05_AM.png

This will give you access to all the underlying HTML/CSS used to create the widget. Please customize the code to design Cloverly to fit perfectly with your store. In additionYou have access to the following variables when designing the widget.

##pretty_url##   A URL to an external Cloverly page showing details to the specific offset
##pretty_cost##   $0.63
##cost_in_words##   63 cents
##cost_in_usd_cents##   123
##offset_type##   solar

Be mindful of the code behind the <input>. This powers your checkbox, and changes to this code could disable your widget.

The most common design variant we've seen is replacing the Cloverly default with a single checkbox, in this case with the words "carbon neutral delivery" going to the ##pretty_url##. 

Sample_Checkbox.png

Here's the underlying code that creates that checkbox. 

Style.css

.cloverly-checkmark:after{content:'';position:absolute;display:none}
.cloverly-label-container input:checked ~ .cloverly-checkmark:after{display:block}
.cloverly-label-container .cloverly-checkmark:after{left:6px;top:-7px;width:5px;height:14px;border:solid #00CB8F;border-width:0 4px 4px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}

Estimate View

<div id='nested-cloverly-container' style='margin: 0;'>
<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;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:5px;left:0;height:15px;width:15px;background-color:#fff;border: 1px solid #bbb;'></span>
</label>
<p style='margin: 0;font-family: inherit; font-size: 14px;color: #10171f;'>
Add ##pretty_cost## 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>

Loading View

<div id='nested-cloverly-container' style='margin: 0;'>
<div id='cloverly-content-wrapper' style='display: flex; align-items: center;'>
<div id='cloverly-check-wrapper'>
<p style='margin-bottom: 3px;font-size: 14px; font-family: inherit; text-transform:capitalize; color: #10171f; font-weight: 300;'>Estimating carbon neutrality...</p>
</div>
</div>

In this particular implementation, the Shipment greened view and Error view were left empty. 

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

Comments

2 comments

  • Very helpful article! I implemented the changes by copying the code but the box isn't aligning correctly. Do you know why that is? I'm using the Shopify theme, Debut.

    0
  • Hi Akil! This is Lydia from Cloverly! Thanks for your comment. Try adding the following to the nested-cloverly container: 

         display: inline-block; text-align: inherit !important;

    This should pull the Cloverly element to the right for you! Please reach out to support@cloverly.com if you have any more difficulties. We are happy to help! 

    0

Please sign in to leave a comment.