You may want to allow your customers to choose which nonprofit your donation goes to when they check out their order. This article will explain how to add that to your shopping cart page.
NOTE: You must have two or more nonprofits selected in order to see the customer choice menu in your cart page.
Embed the Dropdown
You will need to edit the code for your theme. First you will need to add the following script to the head of your theme (explained bellow).
<script id="plg-npo-select" src="https://hello.pledgeling.com/assets/shop/nonprofit/select.js" async></script>
Once you locate the section or snippet for your shopping cart form, paste the following line inside the <form> tags.
<div data-select-nonprofit-via-pledgeling></div>
The labels on the Customer's Choice Dropdown are set by default.
This can be changed by adding the data-label and data-split-label attributes to the Customer's Choice div:
old: <div data-select-nonprofit-via-pledgeling></div> new: <div data-label="hi_there" data-split-label="hello_again" data-select-nonprofit-via-pledgeling></div>
To edit the code:
- Go to Online Store settings in sidebar
- Click the “Actions” button and select “Edit Code”
- Find the section with the <head> of the theme (usually located in the Layout section in a file called theme.liquid).
- Paste the script tag before the ending </head> tag.
- Find the section/snippet for the shopping cart form. In the default Shopify theme, this is located in a file called "Sections/cart-template.liquid".
- Let's add the button under the shopping cart contents. To locate the form, run Ctrl+F (on PC) or Cmd+F (on Mac) and type “/cart”. Then paste your embed code inside it. This is how it looks on our store:
- Click the Save button, and Preview the Customer's Choice dropdown on your shopping cart page.
- If you are having trouble embedding the Customer's Choice, we are happy to help. Send an email to [email protected] with the subject line: "Integration Help."
