Skip to main content

Side Cart / Cart Drawer Customer Donations Setup

How to set up the cart drawer (side cart) for customer donations via the Shopify theme editor embed.

Written by Liam Houlahan

Set up customer donations in your cart drawer

Let customers add a donation to their order directly from your store’s cart drawer. Enable the Virtue app embed, then customise its appearance in the Shopify theme editor.

1. Open the theme editor from Virtue

  1. Open Virtue in your Shopify admin.

  2. Go to your customer donation widget settings and find Cart Drawer Customer Donations widget.

  3. Click Enable via Shopify Theme Editor.

You’ll be taken to Shopify’s theme editor to enable and customise the embed.

2. Enable the app embed in Shopify

  1. In the theme editor, open App embeds.

  2. Find Cart drawer donations under Virtue – Charity Donations.

  3. Turn the toggle on.

  4. Click the embed’s name to expand its settings.

By default, the donation widget appears below your cart drawer’s checkout button.

3. Choose your layout and style

Under Widget layout, choose:

  • Collapsed (compact card): A compact donation option with a checkbox and amount selector.

  • Full (pill bar): An expanded layout displaying your cause and donation amount buttons.

Use the Theme dropdown to choose a style.

Custom style is available on the Impact Plus and Impact Unlimited plans. Custom settings include:

  • Text, background and accent colours.

  • Small or large widget size.

  • Border, rounded corners and drop shadow.

  • Row padding.

  • Donation button and button text colours.

  • A tagline.

  • A toggle for the custom donation option.

4. Save and test

  1. Click Save in the Shopify theme editor.

  2. Open your storefront or theme preview.

  3. Add a product to your cart and open the cart drawer.

  4. Check that the widget appears and select a donation.

  5. Confirm that the donation is added to your cart.

  6. Check the layout on both desktop and mobile.

Make sure you’re editing your published theme if you want the widget to appear on your live store.

You can also return to the widget page in Virtue to check its status. The app embed status refreshes when you revisit the page.

Optional: Change the widget’s position

The Placement (advanced) settings let you position the widget relative to a specific element in your cart drawer.

  • CSS selector anchor: Enter the selector for the element you want to position the widget beside.

  • Position relative to anchor: Choose the widget’s position relative to that element.

  • CSS selector anchor (mobile): Use a separate anchor for mobile if needed.

  • Mobile position relative to anchor: Set the mobile placement.

Leave these fields unchanged to use the default placement. If you need help finding the correct selector, contact Virtue support.

Troubleshooting

The widget isn’t appearing

Check that Cart drawer donations is enabled and your theme changes are saved. Confirm that you’re viewing the correct theme, then add a product and reopen the cart drawer.

The widget’s position or cart behaviour needs adjusting

Contact Virtue support with your store URL, theme name and a screenshot of the issue. If you use a separate cart drawer app, include its name too.

The embed includes technical settings for cart update handling, reloading after a donation and insertion delay. Leave these at their default values unless Virtue support advises otherwise.

Did this answer your question?