Setting up a Pay-it-forward widget in your Shopify Theme Editor. 

How to set up your GoGenerosity Pay-it-forward widgets

This guide covers adding the GoGenerosity Pay-it-forward widgets to your store, styling them to match your brand, and moving them to where you want them.

You can add the following widgets to your site:

You need at least one widget for Pay-it-forward to work.

Create your pay-it-forward product

1. Open GoGenerosity → Setup in Shopify.
2. Complete Step 1: Create a Pay-it-forward product.
3. Click Customise product to update its name, description and image. These are the details customers will see when they add a donation to cart. 

 Add the pay-it-forward widgets to your store

1) Adding the widget to your Cart Page

1. Under Step 2: Add GoGenerosity Pay-it-forward widgets to your store, find Cart page and click Add in theme editor.
2. The theme editor opens with the GoGenerosity widget added.
3. Select the widget to open its settings.
4. Turn on Use custom button classes.
5. Enter the following Custom Button Classes to style the widget's buttons to look like other buttons in your store: 

 6. Optionally turn on Expand impact section to display your impact statistics.

7. Click Save.

These classes use your theme’s existing styling. If your theme uses different button classes, you’ll need those instead.

2)  Adding the widget to your side cart / cart drawer

1. Return to GoGenerosity → Setup.
2. Under Cart drawer, click Add in theme editor.
3. In App embeds, open and enable Cart drawer auto-inject.
4. To place the widget below the checkout button area, enter the settings shown in the recording:

5. Adjust Prompt horizontal margin and Prompt vertical margin to create the spacing you want.

6. Add a product to your cart. Open the side cart in the preview and check the widget’s position and appearance.

7. Click Save.

These selectors are theme-specific. If the widget doesn’t appear, or appears in the wrong position, contact GoGenerosity for the correct selectors for your store via support@gogenerosity.com. 

3)  Adding the checkout widget  - Shopify Plus stores only.

1. Return to GoGenerosity → Setup.
2. Under Checkout, click Add in theme editor.
3. Add the GoGenerosity Prompt (Checkout) block.
4. Move it to your preferred available position.
5. Adjust the settings as needed, including:
   • Whether to include the block in Shop Pay.
   • Whether to hide the impact statistics.
   • Whether to hide the charity image.
   • Whether to use alternative button styling.
6. Click Save.
7. Return to onboarding and mark the step as done.
   
   Note that only Shopify Plus stores can customise the checkout with third party App blocks.
   
   

Complete setup and customise your wording

1. Under Pick your Charity Partner, let GoGenerosity know which charity you’d like to support. Charity partnerships are processed manually due to fundaising compliance. Sending us an email completes this step. 

1. Complete Choose a plan.
2. In Configuration, click Edit beside Edit your pay-it-forward wording.
3. Update and save your wording under 'Configuration'. This is the wording customers will see on your pay-it-forward widgets. 

Make your widgets live

1. Once setup is complete, turn on Show Pay-it-forward widgets on your storefront at the top of the GoGenerosity setup page.
2. Check the widgets on your storefront and test adding a pay-it-forward amount.
3. To hide the widgets later, turn this toggle off.

Instruction video on how to set this up

Need help?

Email support@gogenerosity.com and we’ll help you get set up.