Integrate Virtue widgets using the Shopify Theme Editor.
If you have added any widgets via the Shopify Theme Editor, any changes you make to the widget via your Virtue admin will not have an effect. You will need to change them directly in the Theme Editor by editing the corresponding App Block.
Depending on what App Block you're editing, different options will be available to you. This article summarises the different types of options that you'll be preFew readersAfter checkout - Customer giving widget
Platforms this feature is available for: Shopify, Shopify Plus
The video below explains the After checkout Customer giving widget and how to set it up. Prefer reading? Just scroll down.
This widget allows customers to add a donation of their own to their order after they have already checked out.
If multiple causes are available they can also choose which cause to support and then add the amount they are giving.
Example of the AfterFew readersVirtue Widgets - Shopify 2.0 Theme Editor
There are several widgets available to you:
1. Donation Banner - typically placed on product pages. Show customers information about your campaign.
Customer Donations Banner - allows customers to donate. Can we set up for fixed giving, roundups or donation matching. Typically added to the cart and side-cart drawer. Shopify Plus stores on the Unlimited Virtue plan can add this widget to the checkout.
Post-purchase confirmation - shows customers how much went to a cause post-pFew readersCan I change the colours?
You have full control over the style of the widgets. In this guide I will mostly focus on the Product Page Banner, but these settings are applicable for all our widgets.
Appearance settings
Widget theme
Creating your own theme
Advanced settings
Please Note. If you have added a widget using the Shopify Theme Editor, changes made to your widgets appearance in the Virtue admin will have no effect. You will need to change them directly in your Theme EdFew readersWhy are the widgets not showing on my site?
There could be a few reasons why the widget is not showing on your shop.
Activate the app.
Before the widget will be displayed you need to make sure you have activated the app. This should happen automatically once you choose a plan, but if not it is very easy to do.
At the top of the right side navigation menu you will find the Activate toggle
Click on the toggle so that it becomes green and the text reads Deactivate.
Check your shop again to see if the widget has now appFew readersCart page - Customer giving widget
The video below explains the Cart page Customer giving widget and how to set it up. Prefer reading? Just scroll down.
The Cart page Customer giving widget allows your customers to add a donation to their cart from the cart page. It can be placed anywhere on your store. By default it appears under the checkout button of your cart page.
(https://storage.crisp.chat/users/helpdesk/website/-/2/c/d/1/2cd1f680087b7400/a61b58ed-cdda-416f-81a8-Few readersImpact calculator
The Impact calculator displays the total impact of all giving broken down by your your store currently active cause.
The video below explains the Impact calculator and how to add the Impact calculator to your store. Prefer reading? Just scroll down.
We recommend setting up a separate page to tell your shoppers about the impact your store is making as well as embedding the Virtue Impact calculator into key content pages such as theFew readersWidgets Not Showing? - Most Common Causes & How to Resolve:
There are a few reasons why the Virtue widgets might not be showing on your Shopify Page.
Please note that there are different reasons for the widgets not appearing depending whether you are using Shopify 1.0 or 2.0. If you are unsure of which one you are using, check out this article.
Not applied via the Shopify Theme Editor for Shopify 2.0 customers
The most common reason why the Virtue widget is not appeariFew readersStorewide Floating Button
Storewide floating button is a great way to engage customers in your giving campaign. You can customize colors, text, icon and position of this button via the Shopify Theme editor. When clicked, Learn More pop up opens letting your customers know more about your giving campaign.
This widget is an embed on your theme and can be modified via the Theme Editor in Shopify. It will appear on all pages on their side before the Checkout.
Floating button is available to Shopify merchants on Virtue ImpaFew readersCustomer giving widget - Shopify 2.0
Add the Cart page Customer giving widget via the Shopify theme editor.
Automatically add to your shop’s cart page.
While on the Widgets Cart Page locate the blue link just above the Cart page Customer giving widget text. Clicking this link will redirect you to your theme editor where the Cart page Customer giving widget will be automatically added to your cart page.
Will not see the widget on appear in theme editor as the cart is empty. You will know the app has been added byFew readersAdvanced configuration of Giving Widgets
Our widgets integrate themselves into your store for a seamless experience for your customers, but some stores are unique enough to require extra configuration before they sit perfectly with your other store elements.
Here are some common symptoms that indicate that you might need advanced configuration:
you've already made sure that your widget has been added via the theme editor
your widget is on the page, but it's overlapping or obscured by other elements
your widget is in completelyFew readersProduct page - Giving widget
The Product Page giving widget is used to promote your giving campaigns within your store.
The video below explains how to setup the Product page Giving widget. Prefer reading? Just scroll down.
By default you can setup this widget on your product page. By adding it to your product page it will calculate the giving amount dynamically based on the price of the product or selected variant/variation.
When turning on this widget by defaulFew readersCan you edit text in the widgets for my store?
There are a few options when it comes to editing text on the widgets. Some widgets allow you to edit the tagline. You may also want to update a translation
Please note. If you have have added a widget via your Shopify Theme Editor you can find out how to edit text here.
Adding a custom tagline.
The Cart page Customer giving widFew readersCan I move the placement of the widgets?
Yes
Users with a Shopify 2.0 theme can add the widgets via the Theme Editor. Find out how here. You can also use the custom embedded code found in the widgets page of the app.
(https://downloads.intercomcdn.com/i/o/867505768/91335b26bc270ee58c1dd1a9/SFew readersCustomizing widgets CSS
From your Shopify admin go to your Theme Customize Theme settings Custom CSS.
In the Custom CSS fiFew readersCheckout - Customer giving widget (Shopify plus)
Merchants on Shopify+ Plan can modify their Checkout page via theme editor and add Virtue Checkout Donations to it.
Please note, if your store is not on Shopify+ you are still able to offer Customer Donations before and after the checkout. However, at this point, Shopify only allows it's Shopify+ customers to edit the Checkout page.
The Checkout Page Widget enabled customers to add a donation at checkout.
(https://storage.crisp.chat/users/helpdesk/website/-/5/a/f/1/5af18d0186b91c0Few readers