Can I add the Round-Up campaign to my checkout page?

Created by Shop for Good Support, Modified on Wed, 23 Oct at 12:03 PM by Shop for Good Support

Follow the instructions below to integrate the Round-Up campaign with your checkout page (this works for stores on the Shopify Plus plan only due to a Shopify limitation).

Add the Shop for Good app to your Shopify store
Configure your Round-Up campaign (select at least 1 nonprofit, your credit card, etc.)
Switch to Manual Installation mode and hit SAVE
Follow the steps below

Please Note:

There are 3 placement options for Round-Up at checkout.

On the right:

On the LEFT: Before the credit card field

On the left: before Shipping Selection

Important notes:

- Sometimes server-side scripts, require a mandatory page refresh for your store after round-up.

- Occasionally credit card information gets cleared if it's input before selecting a donation

- As a solution, you could move the round-up campaign to the left side before the CC fields or place it on the shipping page.

- You can display this at any step of the checkout process but not multiple steps.

- If discounts are applied at checkout to Round Up, the checkmark will be removed.

This is the code snippet you'll want to use for Round-Up when integrated at checkout:

<div class="dk-round-up-static" shipping="{{checkout.shipping_price}}" taxes = "{{checkout.tax_price}}" discounts = "{{checkout.discounts_amount}}" requires_shipping="{{checkout.requires_shipping}}"></div>

Copy and paste this code to checkout.liquid above the </head> tag:

<script type="text/javascript" async="" src="https://assets.dailykarma.io/prod/init-checkout.js?shop=[YOUR_STORE].myshopify.com"></script>

Make sure your .myshopify.com store URL is in there. For example, if your URL is mystore.myshopify.com, then the code should look like this:

<script type="text/javascript" async="" src="https://assets.dailykarma.io/prod/init-checkout.js?shop=mystore.myshopify.com"></script>

Next, insert the following code into the checkout.liquid file instead of {{ content_for_order_summary }}:

   {% assign roundupQuantity = 0 %}
                  {% assign roundupCost = 0 %}
                  {% assign roundupCostFmt = '' %}
                  {% for item in checkout.line_items %}
                      {% if item.product.type == 'roundup-donation' %}
                          {% assign roundupQuantity = item.quantity %}
                          {% assign roundupCost = item.final_line_price %}
                          {% assign roundupCostFmt = roundupCost | money %}
                          {% break %}
                      {% endif %}
                  {% endfor %}
                  {% capture CFOS %}{{ content_for_order_summary  }}{% endcapture %}
                  {% assign parts = CFOS | split: 'data-product-id=' %}
                  {% for part in parts %}
                {% assign nPart = '' %}
                    {% if forloop.last == true %}
                  {% assign nPart = part %}
                {% else %}
                  {% assign nPart = part | append: 'data-product-id=' %}
                {% endif %}
                      {% if nPart contains 'roundup-donation' %}
                          {% assign src = '>' | append: roundupQuantity | append: '</span>'  %}
                          {% assign nPart = nPart | replace_first: src, '>1</span>' %}
                      {% endif %}
                {{ nPart }}
                  {% endfor %}

For example:

After these are done, hit CONNECT from the Shop for Good Dashboard.

Please Note

This integration only works with our updated widgets (as of March 2021). If you added Shop for Good to your Shopify store prior to March 2021, you'll need to update your widgets before you can complete this integration.
The Round-Up widget will appear on the final payment screen in the checkout process, so go through the entire customer flow up until payment to see and test the Round-Up widget at checkout.
To add a custom donation product image for Round-up at checkout, please follow these simple instructions.

Email us at support@dailykarma.com with questions.