Implementation
In addition to the prerequisites above, the following steps will get Green Shipping Protection (GSP) up and running on your store.
Obtain a Corso storefront identifier (storefrontId)
The storefrontId value is used by the Corso API to identify your store as API requests are made. This identifier is not considered secret and does not need to be hidden, encrypted, or obfuscated in any way. The API’s used by the GSP widget are unauthenticated, although standard protection measures such as rate-limiting etc. are employed.
The storefrontId is generated at the time your app is installed, and can be given to you by a member of the implementation team.
There should be one storefront identifier per installed GSP app from the Shopify app store.
Supply your store domain(s) to be added to the API allow list
To prevent a widget from inadvertently being placed on the wrong store, the “Origin” header is examined on any requests to ensure a match with the storefrontId. Any number of domains can be added to support testing across different environments, etc., but the domains should all be associated with the store that the GSP app is installed to.
Note that a referrer of “localhost” is always allowed, which will allow the widget to function normally if you are developing locally.
Place the Corso <script>
tag
To integrate the widget, place a script tag as follows on any page where the widget should appear. The script should generally be placed inside of the <head>
element. The script can safely be placed globally, as the display of the widget is controlled in the next step.
<script
type="text/javascript"
id="gsp-script"
storefrontId="your-corso-storefront-id-here"
src="https://cdn.corso.com/js/gsp-spfsf.min.js"
></script>
Note that all attributes on this element are required, and the storefrontId value should be replaced with the value you obtained in the first step above.
Insert the widget placeholder div where needed
At any point on the page where you would like the GSP widget to appear, you can insert the following div:
<div id="corso-protection-placeholder" style="”display:" none”></div>
Generally, the widget is best placed below any “total” area in a cart, and above any “checkout” buttons. Our design team will be happy to assist with this step.
Style the widget
Several different widget styles can be selected from within the GSP app in the Shopify admin. If additional styling is needed, please work with the Corso implementation team to accomplish this. The implementation of the design for the widget has been specifically built for maximum compatibility and applying styles from your own style sheets may not work as expected.
At this point, GSP should be fully implemented and ready to go for your customers!