Articles in this section

See more

Manual Widget Placement

  • Updated

With our widgets, you have the ability to embed Widget Scripts directly into your Product Description Page (PDP), Cart page, and Checkout page. For additional help using the theme section option, you can read more about this here. 

How to Place a Widget Script on the Product Description Page (PDP)

1. To manually place one of our widgets on your product page, retrieve the Widget Embed Script:

    • Open the Impact Portal

    • Click on Campaigns from the left side menu and select your desired campaign
      mceclip0.png
      • For Store Donation on Purchase...
        • Select Store Donations

        • From the Store Donations campaign page, select the Widget Settings tab and ensure Manual Placement is selected as the placement option as seen below:



        • Scroll down to select your desired widget style, then you will find the required widget script below the widget preview shown below:



      • For Customer Round-Up...
        • Select Round Up Donations

        • From the Round Up Donations campaign manager, select the Widget Settings tab
          mceclip2.png
        • Select either Theme Sections or Automatic Placement from the Widget Placement section seen above

        • Scroll down, then navigate to the Advanced Options tab shown below to retrieve your script:
          mceclip3.png

      • For Customer Add-On...
        • Select Add-On Donations under Campaigns from the left side menu

        • Click on the Widget Settings tab, then select Manual Placement from the Widget Placement section seen below:

          mceclip4.png
        • Scroll down to retrieve the widget script!

2. Once you copy the script, head to the Online Store section of your Shopify admin

3. On your Current Theme, click the Actions button to select Edit Code

Online_Store_Settings.png

4. Open the product-template.liquid under Sections

Sections.png

5. Insert the script retrieved in step 1, into your desired location on the PDP page

    • We recommend placing it above or below your "Add to Cart" / "Buy it Now" button code (Hint: search for "button" in the product-template.liquid page to easily locate)

How to Place a Widget Script on the Cart Page

1. To place the Customer Round-Up or Customer Add-On widget on your cart page, first retrieve the Widget Embed Script as outlined above.

2. Once you copy the script, head to the Online Store section of your Shopify admin

3. On your Current Theme, click the Actions button to select Edit Code

Online_Store_Settings.png

4. Open the cart-template.liquid under Sections

Screen_Shot_2022-06-07_at_1.24.25_PM.png

5. Insert the script retrieved in step 1, into your desired location on the cart page


How to Place a Widget Script on the Checkout Page (*Shopify Plus ONLY*)

To place a widget script 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 widget script directly where you want it
    • The widget script for any particular widget can be found in the Campaigns > Widget Settings > Widget Scripts section of your ShoppingGives app

Cart_Checkout_Embed_Code.png Note: The widget 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 round up their purchase 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 your widget 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"); }

} 

 

 

Related articles