Integrate Store Donation Widget with Cart and Checkout Page

Integrate with Shopping Cart Page

Note: We recommend you follow the Before you edit your theme checklist before you start.

There are two options to implement the Store Donation on Purchase widget on the Shopping Cart Page. It can be placed within its own <div> tag or it can be inserted within an existing <div> or other elements.

The widget by default will appear where the script tag is placed.

Integrate with Checkout Page (*Shopify Plus Only*)

To place the Store Donation on Purchase widget on the theme’s checkout page you are required to be a Shopify Plus store. You may also be required to request access to the checkout page theme files from Shopify Support. This can be done by accessing support in your store settings.

1. Ask Shopify Support for access to the checkout.liquid
2. Access your checkout.liquid: https://help.shopify.com/en/themes/development/layouts/checkout
3. Place the tag directly where you want it OR choose an element to target and provide after or before URL params (see optional URL params below).

 Note: The widget by default will appear where the script tag is placed.

Optional: Expanding Mobile Checkout Page View to Show Billing Page Details

To create an optimal experience for mobile users and ensure the users see the option to select a cause on the billing page, you can set the details to expand by default. To do so:

1. Navigate to “Online Store > Preferences “Google analytics”
2. Place the following script below your google analytics script:

if(typeof Checkout === 'object'){
  if(typeof Checkout.$ === 'function'){
    Checkout.$('button.order-summary-toggle.order-summary-toggle--show').trigger("click"); }
} 

If you have any questions regarding how to test the integration, please review this FAQ article.

Widget Script

<script src="https://cdn.shoppinggives.com/cc-utilities/shopify-cart.js?store-id={store-id}"></script> 

Optional URL Params

Cart & Checkout Widget

Compact:

Contained:

Full: