This Article provides an overview of how to use Tapcart's Custom Block feature to integrate EcoCart into your Cart experience. Don't worry, you don't need to be technical here.
- Click on Custom Blocks => Launch Blocks Editor - Edit the title to be "EcoCart - Checkout Widget"
- Under HTML, add the following script, replacing [shop_name] with your "unique_name.myshopify.com" Shopify URL.
<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>
- - On the right side, click Settings, scroll to the bottom and ensure Custom Block SDK Version is set to v1.7 (or later)"
In order 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 that our offset calculation can run and display properly in the widget).
- Where to find ProductID and VariantID of ANY Physical product:
- Navigate to the App Studio header section and look under "my blocks" to find your EcoCart widget. You can then drag and drop to the desired location in your cart or checkout page.
Need support? Our team can enable this for you. Contact us as support@ecocart.io