EcoCart + Tapcart

What is EcoCart?

EcoCart is a sustainability software solution that aims to make ecommerce less harmful to the environment by offering Carbon Offsetting at checkout.

Why EcoCart + Tapcart? 

The EcoCart X Tapcart integration leverages machine learning to calculate the ecological footprints of ecommerce brands, enabling customers to offset the emissions of their orders through seamless in-app experiences. By joining the EcoCart movement, businesses can turn ecommerce into a tool for progress and achieve sustainable growth.

How to Connect EcoCart + Tapcart? 

Here’s how to set up this integration:

The integration is available to all Tapcart Enterprise customers (through Custom Blocks) and all EcoCart customers. For more information on EcoCart plans, check out their pricing page.

Steps

1. Prepare a Custom Block for the Cart page by navigating to the Tapcart dashboard 
2. Select 'App Studio' 
3. Choose 'Cart' and tap 'Blocks Editor'
4. Update the 'Custom Block' name to 'EcoCart - Checkout Widget'
5. Next, integrate EcoCart by updating the following:  

   • Under HTML:

     • <script src="https://widget.ecocart.tools/ecocart.js?shop_name=[shop_name]" defer></script> <eco-tapcart-checkout-widget style="padding: 15px; display: block;"></eco-tapcart-checkout-widget>

     • Replace [shop_name] with your "unique_name.myshopify.com" Shopify URL
   • Then on the right side, click 'Settings' and scroll to the bottom to ensure Custom Block SDK Version is set to v1.7 (or later)
6. For the Custom Blocks editor to display the widget preview properly, you must use productId + variantId Variable Preview Values from your live store. These can be found under, 'Settings' > 'Cart' > 'Items' and must reference the productId and variantId of a physical product in the respective live store (so the offset calculation can run and display properly in the widget).
   • Where to find ProductID and VariantID of ANY Physical product:
7. Once you've completed all those steps you're all set! Make sure to select 'Save' before closing out the 'Launch Blocks Editor'.
8. To preview your EcoCart widget, you can just go back to the 'App Studio' header section and look under 'Custom Blocks' to find your EcoCart widget. You can drag and drop the block to the desired location on your cart page.