Shopify widget installation guide : Green Story

Client specific inputs

Client Key: The client key is unique to each company or brand and is required for all our widgets to identify the company and load the correct widgets and data. Replace the CLIENT_ID with the client Key in all the widgets. The client key is provided separately.

Adding private App

(Required if Greenstory app is not installed on the store – Only for new clients or new stores after 1- Jan - 2021)

This App is required to extract Shopify product IDs from the client store for the first time. For later product additions a webhook is added.

Click on ‘Apps’ menu item
At the very bottom you will see ‘Working with a developer on your shop? Manage private apps’. Click on Manage private apps and then on ‘Create a new private app’ button
Give the app name as ‘Green Story’, email as ‘navodit@greenstory.ca’
Select read-only access to ‘Products, variants and collections’ item. For all remaining items select no access.
Once you save it will generate the API credentials. Copy the ‘Example URL’ and send it to our customer relationship manager over email.

Add Greenstory JS File
Add the Greenstory JS file in the <head> section of the theme.liquid file

(Required if Greenstory app is not installed on the store – Only for new clients or new stores after 1- Jan - 2021)

Embed Carbon Neutral Widget Code in Shopify Liquid Files

1. Add theme settings to enable/disable Greenstory carbon neutral widgets.

Add the in below code at the bottom of settings_schema.json file

2. Carbon neutral brand summary visual widget

The carbon neutral brand summary has two design templates available. One with lightbox and another without lightbox. These can be used based on the available space.

a. Lightbox enabled brand summary visual widget - Sample Visual

Instructions for adding to homepage.

Create a new section with name ‘greenstory-offset-summary-widget’
Add the following code to this section. Replace the CLIENT_ID with client key.

3. Go to Themes > Customize and click on ‘Add Section’

4. Go to Custom Content and select ‘Greenstory Offset Summary’. This will add the section to the Homepage.

5. Drag it to the desired section location on the homepage and save.

Instructions for adding to other pages.

Add the following code at the exact location on the page where the visual needs to be rendered. Replace the CLIENT_ID with client key.

b. Full page offset brand summary visual widget - Sample visual

Instructions

Add the following code at the exact location on the page where the visual needs to be rendered. Replace the CLIENT_ID with client key.

3. Carbon neutral product visual widget - Sample visual

Instructions

Create a new snipped with recommended name ‘greenstory-offset-widget’
Add the following code to this snippet. Replace the CLIENT_ID with client key.
Include the snippet in sections/product-template.liquid (or similar file depending on the theme) where the carbon offset product visual is to be displayed using the following code.
‘{% render 'greenstory-offset-widget' %}’.

Embedding Impact Savings Widget Code in Shopify Liquid Files

1. Add theme settings to enable/disable Greenstory widgets.

Add the in below code at the bottom

2. Homepage counter visual widget - sample visual

Instructions

Create a new section with name ‘greenstory-counter-widget’
Add the following code to this section. Replace the CLIENT_ID with client key.

Go to Themes > Customize and click on Add Section
Go to Custom Content and select ‘Greenstory Counter’. This will add the section to the Homepage.
Drag it to the desired section location on the homepage and save.

3. Product visual widget

Instructions

Create a new snipped with recommended name ‘greenstory-product-widget’
Add the following code to this snippet. Replace the CLIENT_ID with client key.

3. Include the snippet in sections/product-template.liquid (or similar file depending on the theme) where the carbon offset product visual is to be displayed using the following code ‘{% render 'greenstory-product-widget' %}’.

4. Add the class listener in the quantity input box and Add and Remove product item buttons to show all the impact for current selected items

<div>
 <button class="gs-product-quantity-btn c-numberSelector__action" type="button">
 <input readonly="" class="gs-product-quantity-input c-numberSelector__input" step="1" type="number" value="12">
 <button class="gs-product-quantity-btn c-numberSelector__action" type="button">
</div>

4. Cart visual widget - Sample visual

Instructions

Create a new snipped with recommended name ‘greenstory-cart-widget’
Add the following code to this snippet. Replace the CLIENT_ID with client key.

3. Include the snippet at the correct location in the templates/cart.liquid file where the cart visual is to be displayed using the following code ‘{% include 'greenstory-cart-widget' %}’.

4. (Optional) Alternate Approach to use the cart widget

a) add the cartListener attribute in the greenstory cart widget script tag like shown below cartListener="true"

Example:. <gs-cart widgettype="cart" cartListener="true" clientid="CLIENT_ID" productList='[{{productList}}] b) update the updated_product_list object in below format to view the widget data on every cart update and replace cart.items with product details object from your code

setTimeout(() => {
 let updated_product_list = JSON.stringify( cart.items.map((product_details) => { 

                       
return {
 id: product_details.product_id, quantity: product_details.quantity, 

                       
}; }) 

                       
); 

                       
if (document.querySelector("gs-cart")) { document 

                       
.querySelector("gs-cart") 

                       
.setAttribute("productlist", updated_product_list); } 

                       
}, 500);

Note: setTimeout interval can be removed if page refresh doesn't impact the widget code.

5. (Optional) When the cart widget values is not update either adding or removing the cart item
Add the class listener in the quantity input box and Add and Remove buttons and also add the data-productid attribute

Example:

<div class="quantity pr mr__10 qty__true"> 

                       
<input type="number" data-productid="{{item.product_id}}" class="gs-cart-quantity-input" step="1" inputmode="numeric"> 

                       
<div class="qty tc fs__14" data-id="{{ item.product_id }}">
 {% if item.product_id != 6742665789500 and item.product_id != 6762767777852 %} <button type="button" class="plus db cb pa pd__0 pr__15 tr r__0" > 

                       
<i class="facl facl-plus gs-cart-quantity-btn"></i>
</button>
{% endif %}
 <button type="button" class="minus db cb pa pd__0 pl__15 tl l__0"> 

                       
<svg class='dn' viewBox="0 0 24 24"><use xlink:href="#scl_remove"/></svg> 

                       
<i class="facl facl-minus gs-cart-quantity-btn"></i> </button> 

                       
</div> </div>

Enabling all the widgets
By default, all widgets are disabled. They can be enabled by going to

For carbon neutral visuals: Themes > Customize > Theme Settings > Greenstory Offset Visuals
For impact savings visuals: Themes > Customize > Theme Settings > Greenstory Impact savings visuals

Capturing New Product and Order Information from Shopify

(Only required if Greenstory app not installed – New clients joined after 1-Jan-2021)

Greenstory receives customer order details using Shopify Webhooks. Below are the details to setup webhooks to send order information to Greenstory.

Webhook Setup Location - Settings > Notifications > Webhooks (at the bottom of the page)

1. Order Notification Webhook

Click on Create Webhook and add a webhook with following details.

Webhook Event – Order Creation
Callback URL - https://store-sync-service.greenstory.ca/api/webhooks/clients/save-order
Format: JSON

2. Product Notification Webhook

Click on Create Webhook and add a webhook with following details.
- Webhook Event – Product Creation
- Callback URL https://storeservice.greenstory.ca/api/webhooks/clients/save-products
- Format: JSON

Carbon Neutral Link in the Order Confirmation Email

Greenstory generates personalized details along with certificate of the carbon offsetting for each individual order. These details are accessible via a dynamic link which can be embedded in Order Confirmation email (via Shopify or any other email provider).

Important: This link should be added just before go-live of the carbon neutral functionality

Go to Settings > Notifications > Order confirmation email template.
Add the code in the information in the table

Custom Carbon Neutral section in email: This link can be used if the link is to be embedded in a custom html section/button designed by the brand.

Greenstory Standard Carbon Neutral section in email: Below code can be used to embed Greenstory’s standard carbon neutral section in email along with the link to the carbon neutral details page