Who is this for?
EcoCart typically handles the entire integration on our end, free of cost. This document was created for customers who wish to handle the implementation on their end, and have access to a developer with knowledge of HTML and CSS. If that does not apply to you, please contact us at support@ecocart.io and we'll get started with your custom integration, without any lift from your end.
Before you start integrating, attached is a snapshot of how the widget usually looks like in the cart page.
If you want to see how it looks like in an actual store, go to our development store. https://ecocart-merch.myshopify.com/
Complete the onboarding process
We assume you’ve already installed the EcoCart app from the Shopify app store and authorized EcoCart for billing.
To sign in to your EcoCart dashboard, go to the Apps section in your Shopify admin and click on “EcoCart: Carbon Neutral Orders”
This will take you to your EcoCart Dashboard.
EcoCart Modes
Before moving forward, there are two switches here under Store information. These switches will not be available if credit card information/Shopify payment authorization is not available.
The EcoCart enabled switch lets you enable or disable EcoCart's script on your site.
Preview mode allows you to test EcoCart's widget without having it visible to the general public. This is done by appending "?eco-preview=true" to your store's URL, which would load EcoCart as if it was live.
Turn on preview mode when you want to make some changes on the templates or placement of the widget. After you are done, you can turn off preview mode and see the widget without the query in the URL.
Basic Setup
From the Settings tab in the left navigation pane, head over to EcoCart Settings to choose between the Customer paying and Merchant paying options.
For the Customer Paying option, you can also choose the "Opt-out" mode. With this option enabled, our checkbox will be checked by default and the customer will have to uncheck it if they don't wish to make the order carbon neutral.
Customization
To customize your EcoCart widget, choose the Customize option from the navigator on the left and click on "Code it yourself".
Select "No" in the next step to expose fields required to modify the CSS.
You will see that there are default styles and HTML templates for you to use, but you can make any changes in the CSS and HTML. Make sure you save the changes from the Save button at the bottom of the page.
NOTE: The preview you see from the dashboard will be different from what you’ll see on your site, so try to save the changes and see it in effect from your cart page. You will need to clear cache/cookies after every change to see it in action.
Style CSS
The Style CSS field already has our default CSS, but if you'd like, you can add custom CSS for your store. Please make sure the format is in standard CSS format. The CSS you write here will apply to all of the templates which you will be designing for different states of the widget.
.
Website View / More Information View
This field is for the estimated view of the widget, this represents the state of the widget before the EcoCart carbon neutral product is added to the cart, i.e before the box is checked.
NOTE: You will not see this view if you’ve selected the Merchant Paying option.
Success View
Once the EcoCart checkbox is checked, the "success view" state of the widget is shown. Make changes to this state in the "Success view" field.
Loading View
This state of the widget will be shown when it’s waiting for data to arrive from our servers or when it’s switching states. Change the contents of the templates as required.
Selectors
Finally you will need to decide where you want to put the widget in your cart page. After you decide where you want to put the widget in your page, get a unique identifier of the element in your page which will be the immediate neighbor of the widget. Put the identifier in the Element query selector for placement field.
We use querySelector or querySelectorAll (which can be selected from the selector method) to get the element based on the identifier you provide and add the widget.
There is a field called placement option where you can select before or after as its value. Depending on the value of placement option, the widget will be prepended or appended, before or after the element respectively.
Finally
After you’re done with the changes, save the changes from the bottom of the page by clicking on the Save button. Even if you’ve not completed the designs, you can save your work to continue later.