Skip to main content
The Shopify SDK provides Liquid snippets, theme app extensions, and cart integration for Shopify stores.

Installation

Install via the Shopify App Store or add the script tag to your theme:
<script src="https://cdn.heychocolate.com/shopify/v1/heychocolate.js"></script>
<script>
  HeyChocolate.init({ apiKey: 'sk_live_your_key_here' });
</script>

Product page integration

Carbon badge

Add to your product template (product.liquid or theme block):
<div
  data-hc-carbon-badge
  data-product-id="{{ product.id }}"
  data-variant="detailed"
  data-theme="light"
></div>

<script>
  HeyChocolate.renderBadges();
</script>

Impact score display

<div
  data-hc-impact-score
  data-product-id="{{ product.id }}"
  data-metrics="co2,mki,water"
  data-show-equivalency="true"
></div>

Cart integration

Automatically calculate and display the cart’s environmental impact:
<div
  data-hc-cart-impact
  data-session-id="{{ cart.token }}"
  data-shipping-country="{{ localization.country.iso_code }}"
></div>

<script>
  HeyChocolate.renderCartImpact();
</script>
The widget updates automatically when items are added or removed from the cart.

Comparison widget

Add product comparisons to collection pages:
<div
  data-hc-comparison
  data-product-ids="{{ collection.products | map: 'id' | join: ',' }}"
  data-metrics="co2,mki"
  data-limit="4"
></div>

Theme app extension

For Shopify 2.0 themes, use the Hey Chocolate theme app extension:
  1. Install the Hey Chocolate app from the Shopify App Store
  2. Go to Online Store > Themes > Customize
  3. Add Hey Chocolate blocks to any section:
    • Carbon Badge — Product sustainability score
    • Impact Calculator — Interactive calculation widget
    • Cart Impact — Shopping cart carbon footprint
    • Comparison Table — Product comparison widget

Webhook integration

Connect Shopify order webhooks to Hey Chocolate for automatic Scope 3 tracking:
{
  "topic": "orders/create",
  "address": "https://api.heychocolate.com/webhooks/shopify",
  "format": "json"
}
Every Shopify order automatically gets a carbon footprint calculation, contributing to your CSRD/ESG reports.

Liquid variables

When using the app, the following variables are available in Liquid:
VariableDescription
product.metafields.heychocolate.co2_scoreCO2 equivalent in kg
product.metafields.heychocolate.mki_scoreMKI score in EUR
product.metafields.heychocolate.equivalencyHuman-readable equivalency
product.metafields.heychocolate.dpp_urlDigital Product Passport URL