After you've selected a charity and added your credit card, you're ready to customize your campaign. To set up and connect your first % of Sales give-back campaign, follow these steps in the admin dashboard:
Configure your donation preferences
First, from the dashboard, select your donation preferences, donation amount, and whether it applies to total purchase (every customer purchase) or that of specific products (for example, pink apparel for Breast Cancer Awareness month in October).
Customize the look & feel of the widget (colors, alignment, and text)
Customize the look and feel of your customer-facing plugin as well as what you want the plugin to say (consider naming your chosen charities, e.g., “$5 of your purchase will be donated to the Environmental Defense Fund and Oceana. No cost to you.”):
Select where to show the widget
Select whether you want the widget to appear on ALL product pages (the charity promotion automatically appears on the bottom of every product) or SPECIFIC product pages (the charity promotion only appears on the bottom of the selected product).
Placement & Preview
Select whether you want the plugin to appear automatically:
If instead, you want to place it manually on the product page or elsewhere (for example, the cart page), follow these instructions:
Manual Placement Instructions
Switch to manual mode
Manually paste the code snippet <div class=”dk-backend-static”></div> into the page of your choice:
It will vary by theme but, for example, to place it into your cart page, you'll probably want to place the code snippet in your cart-template.liquid file above your cart form code and then hit SAVE. Refresh your cart page to see the % of Sales plugin in your cart.
Paste the code snippet above your cart form code:
Save your code changes, go to your cart page (you might need to refresh it), and you’ll see the % of Sales plugin:
Have questions? Contact email@example.com and we’ll respond within 72 hours.
Important note about manual placement
If you change the theme of your Shopify store and the app is connected, please disconnect & reconnect the app via the Shop for Good dashboard.
If you would like to unpublish the app from your store, but keep your settings saved so you can republish later, simply click “Disconnect” in the Shop For Good app dashboard.
If you would like to completely uninstall the app, in your store’s main app management dashboard, simply click the trash can icon next to our app name. This will disconnect the app from your site automatically. This applies to both automatic and manual installation.
Once you've either selected Automatic placement or Manually placed the code snippet in your code files, you can use Preview mode to see how it will look before you connect the campaign.
To do this, hit Save (but not Connect) before hitting "Preview" to see how your widget will look once you connect. Or you can choose to connect immediately and go to your product page to see how it looks!
If you use Preview mode:
You'll know you're in Preview mode because you'll see a red banner across the top of your page like so:
To exit Preview mode, return to the dashboard and hit Connect:
After that, the charity promotion will automatically appear on the bottom of every product:
If you don’t see your widget appear or have additional questions, contact firstname.lastname@example.org and we will assist you within 72 hours.