Articles on: Shopify

How to display the Greenspark badge using Script Tags

In this article we will cover how to add the cart badge to your Shopify cart drawer.


1. Decide which Greenspark badge you want to add to your cart drawer


Within your Greenspark dashboard head to Engagement Hub -> Badges & Widgets.



On the next page filter by Cart to and decide which one you want to use.



2. Copy the Shopify Script Tag


Once you have decided on your badge, select Shopify Script Tag



Next you will need to decide whether or not to activate the pop-up then the widget is clicked.



The pop-up displays your overall impact and gives additional insights into the supported projects. An example is displayed below.



Now you are ready to copy your script tag.



3. Add the Script Tag to your Shopify store


First choose the theme where you want to add the cart badge and click on Edit code



Type in Theme into the files filter and click on the theme.liquid file.



You can add the Script Tag anywhere in the <head> </head> section of the file. Paste the Script Tag you copied in step 2 above.




You always only need to add this script tag to your stores <head> </head> no matter how many widgets you are adding.


4. Add the widget to your cart drawer


Back in the Greenspark platform, copy the widget div tag.



Then within your Shopify code editor type in Cart into the search and click on the cart-drawer.liquid under either Snippets or Sections.



You can add the badge anywhere in the cart, but we recommend either above or below the checkout button. To quickly find this, click anywhere into your opened cart-drawer.liquid and then hit command + F to open the file search. Type Button into the search to find the correct button where you want to add the badge and paste the HTML tag you copied.



Click Save and you should now be able to see your badge inside your cart drawer above or below the checkout button!




Updated on: 26/08/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!