Checkout On-site Module

The Checkout Module is a highly customizable way to let customers redeem their points at checkout. You can deploy a new module in minutes, with no development required. 

In this article, you'll learn how to access, customize, and deploy the Checkout module on your site.

Accessing the Checkout module

1. From the main menu, go to Display On-Site > Checkout.
2. Click Edit on the instance you wish to edit or click "+ Create new"

Types of Checkout modules

There are two types of Checkout Modules. See a guide to which one you should use.

If you offer fixed-amount/percentage coupons:

If you are using fixed-amount/percentage coupons, you will implement a Dropdown menu module at checkout.

A fixed-amount coupon means you only offer coupons in pre-set amounts such as $10 off, $20 off, or $25 off. Percentage coupons offer a pre-determined discount percentage value, for example, a 15% discount coupon for 100 points, or a 10% discount coupon after completing a campaign.

If you use variable coupons:

If you are using a variable coupon system, you will implement a Slider bar module at checkout.

A variable coupon means you let customers redeem points on a sliding scale defined by a points-to-dollars ratio. For example, if your ratio is $1= 10 points, then 1234 points = $123. Shoppers can redeem dynamic discount amounts depending on how many points they have.

Dropdown Menu module (Fixed-Amount/Percentage Coupons)

To prevent customers from losing points, they cannot apply a coupon that is greater than the cart amount+1. For example, if the cart is $29.95 the customer can apply a coupon for up to $30.95.

Dropdown menu: Select redemptions

Select redemptions to display in the drop-down menu. You can choose from the rewards that you already created.

Dropdown menu: Appearance & text

Settings

Fonts

The primary and secondary fonts are two fonts that will apply in several places throughout your module. 

Primary font

The font you choose here will apply to Point balance message, and Button text

Secondary font

The font you choose here will apply to Menu items in the dropdown.

Point balance message

You can include one of the following variables:

{{point_balance}} - This shows how many points the customer currently has. For example 500 points.

{{Points_as_credit}} - This shows how many points the customer has in terms of store credit. For example $5.00.

Button style 

• Button color 
• Button text color 

Advanced

• CSS editor
  If you'd like to make further customizations to the module, use our embedded CSS editor. Learn more about the Advanced CSS editor.

If you are using the CSS Editor, you may see a notification asking you to update your Module version from time to time. Read more about module versions.

Dropdown menu: Display messages

Not enough points
This message will be displayed if the customer doesn't have the minimum number of points to make a redemption. 

Slider Bar module (Variable Coupons)

To prevent customers from losing points, they cannot apply a coupon that is greater than the cart amount + 1. For example, if the cart is $29.95 the customer can only apply a coupon for up to $30.95.

Setting up a variable coupon

If you already have an existing variable coupon set up, you can skip the following steps.

1. From the main menu go to Rewards > Redeeming Points.
2. Click Create a New Coupon
3. Set Coupon Type to Variable.
4. Customize the other setting, and click save.

To learn more about variable cash discounts, refer to this article

Slider bar: Appearance and text

Fonts

The primary and secondary fonts are two fonts that will apply in several places throughout your module. 

Primary font

The font you choose here will apply to Point balance message, and Button text.

Secondary font

The font you choose here will apply to confirmation message text.

Point balance message 

• Message font size 
• Message color 

Slider bar

• Slider bar color 
• Progress color 

Confirmation message 

• Text 

Button style 

• Button color 
• Button text color 

Advanced

• CSS editor
  If you'd like to make further customizations to the module, use our embedded CSS editor. Learn more about the Advanced CSS editor.

Slider bar: Display messages

Not enough points

This message will be displayed if the customer doesn't have the minimum number of points to make a redemption. You can adjust this with the Minimum Points Required to Redeem setting to on your variable coupon in the Loyalty admin.

1. Open your Loyalty admin.
2. Click the Rewards tab.
3. Create a new coupon or click Customize on your existing variable coupon.
4. Scroll down to the Minimum Points Required to Redeem setting.
5. Click Save.
   

Advanced CSS editor

If you'd like to make further customizations to the module, use our embedded CSS editor. If need to make any overriding changes to the Checkout Module CSS, use this class name before the class you want to override:

For Slider Module

.yotpo-checkout-variable-widget.yotpo-widget-override-css {
}

For Dropdown Module

.yotpo-widget-checkout-redemptions-widget.yotpo-widget-override-css {
}

Publishing the module

1. Copy & paste this snippet once to show all the Modules you may want to embed on your checkout page. Make sure to replace the  <YOUR GUID HERE> section with your account's GUID.

<script src="https://cdn-
widgetsrepository.yotpo.com/v1/loader/<YOUR GUID HERE>" async></script>

2. Click the Publish button.
3. Embed the second snippet on your checkout page.
4. Click Publish changes.

Additional resources for Shopify Plus users

Read more on Shopify's website about editing the Checkout page.

No matter where the code is placed, the module will always populate in the side panel above the price summary. If you would like the module to appear below the price summary instead, do so with advanced customizations. If you would like the module to appear elsewhere in the checkout flow, front-end development is required.

Free product at checkout

To do so:

1. Create a Free Product Redemption module.
2. Follow the steps to deploy your Free Product module at checkout.

Activate Module

Active

If your module is active (green dot), this means that any changes you publish will be reflected on your store if the module snippet is embedded.

Inactive

If your module is inactive (yellow dot), this means that any changes you publish/save will not be reflected on your store. This also means if you had the module snippet embedded and active on your store before, it will not be visible when inactive.

You're all set! 

Advanced customizations

Some additional customizations can be made to the module if you are savvy with code. See below the advanced options.

The following attributes can be added to your module's code snippet, just after your instance ID. For example, if your module's code snippet looks like this:
<div class="yotpo-widget-instance" data-yotpo-instance-id="0000"></div>

Then add the attribute here:
<div class="yotpo-widget-instance" data-yotpo-instance-id="0000" add-attribute-name=value> </div>

If you want to add multiple attributes, add them one after the other, separated by spaces.