Storefront > Themes > Pages > One Page Checkout > Widgets
How to Add the Donation Widget
Customizing the Donation Upsell Widget
Overview
The Donation Upsell Widget is a highly customizable widget that allows you to ask your customers if they’d like to add a donation to their order. This widget can be placed on the One Page Checkout and displays as a pop-up whenever a customer places an order, as shown in the example below.
How to Add the Donation Widget
To add the Donation Upsell Widget to your checkout page navigate to One Page Checkout widgets options through Storefront > Themes > Pages > One Page Checkout and click Widgets.
Click the Add Widget button for either the top or bottom of the page to open the Add Theme Widget panel. Since this widget is a pop-up it works in either location.
The Add Theme Widget panel will show all available widgets that can be added to the page. To quickly find the Donation Upsell widget, type “Donation” in the search bar and click Search. This will filter out all other widgets. To add the widget click the Add button.
Customizing the Donation Upsell Widget
After you add the widget you will see it listed on the page. To customize the widget click the Edit Icon.
This will bring up the Donation Upsell Settings page and this is where you can change all related settings to customize messaging or images related to the Donation Upsell Widget.
Image Settings
The Image Settings is the first section of the Donation Upsell Settings page and allows you to set what donation amounts are on the pop-up, the image used, and other related settings.
|
Setting |
Description |
|
Donation Button Text |
This is set to “Continue” by default and is the button displayed at the bottom of the Payment Section of One Page Checkout. |
|
Donation Form Title |
Text entered in this one-line textbox will be displayed at the top of the popup in all caps. |
|
Donation Items |
The list of available donation amounts. They must be entered in the following format: Displays: $10.00, $20.00, and $50.00 options. |
|
Image Path |
The image to be used on the donation form. |
|
Decline Button Text |
Text used for the Decline Button. |
|
Add to Cart Button Text |
Text used to Add Donation to cart. |
Display & Layout Options
The Display & Layout options on the Donation Upsell Settings page allow you to customize how the Donation pop-up is positioned on the One Page Checkout page.
|
Setting |
Description |
|
Widget Identifier |
A one-line textbox to give the widget an identifier in the system and HTML of the widget. |
|
Widget Name |
A one-line text box to give the widget an identifier within the One Page Checkout page. |
|
Hide Widget |
Checkbox to hide the Widget. You can use this to keep the settings in your admin console without having the donation widget active. |
|
Control Width |
Can enter a percentage or pixel amount of the screen the pop-up will cover. |
|
Header Text |
A one-line text box to enter in text for the Header. |
|
Header Text Bullet Image |
An image upload to have an image instead of text in the Header. |
|
Header Image |
An image upload to have an image instead of text for the entire Header. |
|
Enable Merge Code |
Checkbox to enable the Merge Code to be used in custom HTML. |
HTML Settings
To change the HTML directly click on the Layout option on the left and it will bring up the HTML Editor for the widget.
Note: This is where you can change the Donation Description text that is above the donation amount options.
CSS Settings
To change the CSS Settings for the Widget click on the CSS option on the left and it will take you to the CSS Editor.
Saving and Applying Changes
Once you have selected your settings be sure to click the Save button to save all your changes. The widget will automatically be applied to your One Page Checkout page.