Overview
Corso supports headless stores that use the Shopify Storefront API for cart and checkout management. Site developers can implement Checkout Plus on a site by placing a single <script /> tag. You may also want to add specific one-line <div /> tags in your theme where you want the Corso Checkout Plus elements to appear. Checkout Plus will manage getting customer buyer consent, retrieve the protection pricing from the Corso API, and it will add the appropriate Corso protection product variant to the cart.
App Installation
This guide assumes that you have installed the Corso App from the Shopify app store. If you have not completed this step, you can install the app here: https://apps.shopify.com/corso-crew. You must also have accepted the required app subscription, which can be done from inside the app in your Shopify Admin.
Implementation Steps
Once the installation is complete, the basic steps to implement Green Shipping Protection on your site are:
- Add a script tag to the
<head>of any page that needs the widget on it - Configure the Checkout Plus elements in the Corso Checkout Plus settings: checkout button, pricing info, opt out button. If you do not have specific selectors (i.e. element ID or class) for these elements, then you may need to add this to your theme.
- Style the elements in the Corso Checkout Plus settings.
The placement process can typically be completed in just a few minutes. We are always available to work through the process together during an implementation call, but the steps can generally be completed in a self-guided manner after exchanging a few points of information.
The Corso Customer Success Team leads the implementation effort and can bring in members of the product development team as needed to assist.
Functionality
At a high level, the widget that you will be incorporating into your site works by performing the following steps:
- Query the Corso API to retrieve details about how the widget should be displayed. The response includes various settings and styles which can be set from within the Green Shipping Protection app in the Shopify admin.
- Attempt to place the widget on the page.
- Based on the contents of the cart, request a protection price from the Corso API.
- Display the Checkout Plus elements
- Get buyer consent from the customer to add shipping protection at checkout