Skip to main content

Shopify Plus: How do I add a Rewards Block to my checkout?

Embed your loyalty rewards into your online checkout for Shopify Plus. Allowing customers to use their loyalty rewards during checkout.

Updated today

For Shopify Plus merchants

🛒 This extension is available 2.0 online themes only.

Elevate customer loyalty by seamlessly embedding your loyalty rewards into the online checkout process. With this extension, customers can effortlessly use their loyalty rewards during checkout, enhancing their shopping journey.

Adding the 'Rewards block' extension to your Shopify Plus admin checkout editor is easy – it only takes a few steps. Best of all, it automatically adopts your online store theme branding, so there’s no extra customization needed.

How do I set up a Rewards Block in my Shopify Plus checkout?

1. From your Shopify admin, go to Settings > Checkout and go to Checkout editor

2. Select Add app and then Marsello-checkout-ui-extension

In the Shopify admin, the user navigates to Settings > Checkout, then opens the Checkout editor. They click "Add app" and select "Marsello-checkout-ui-extension" to add it.

3. Drag and drop the extension into your Order Summary > Discounts section. Make sure to place it below your discount or gift card widget so the reward block is easy to see.

Instruction showing how to drag and drop the extension into the Order Summary > Discounts section, placed below the discount or gift card widget so the reward block is visible.

4. Click Save. When you next publish your online store, your new rewards block will display during the customers' checkout process.

Drag and drop the extension into Order Summary > Discounts, below the discount or gift card widget so the reward block shows.

⚠️ Important: To let customers redeem in Shop Pay and other express checkouts, turn on the Include app block in Shop Pay toggle under Checkout behavior.

Optional Step: How do I customize the Rewards Block text?

1 Click Marsello-checkout-ui-extension to open the text settings

2. Enter your preferred text into the text blocks

  • Rewards title
    Purpose: To introduce your rewards block at the checkout.

  • Points balance
    Purpose: To remind the customer how many loyalty points they have available.

In the Shopify Checkout editor, the user clicks the Marsello-checkout-ui-extension to access text settings. They customize text fields such as the "Rewards title" to introduce the rewards block, and "Points balance" to show the customer's available loyalty points, aligning the language with their brand voice.

  • Discount code
    Purpose: To identify the customer's unique discount code

  • Points cost
    Purpose: To indicate to the customer how many loyalty points they will have to spend/use to apply this loyalty reward discount.

In the Marsello-checkout-ui-extension text settings, the user customizes the "Discount code" label to indicate it's the customer’s unique code, and the "Points cost" label to show how many loyalty points are required to redeem the reward.

  • Log in link text
    Purpose: To encourage customers who aren't logged in to create an account or sign in to view available rewards.

In the Marsello-checkout-ui-extension text settings, the user customizes the "Log in link text" to encourage customers to sign in or create an account to view their available rewards.

  • No available rewards yet
    Purpose: To inform customers when they don't have sufficient loyalty points to unlock rewards at the moment. Simultaneously, we also let them know that this is the section where rewards will be available for future reference. Our goal is to keep customers informed while encouraging them to continue earning points for rewards in the future!

In the Marsello-checkout-ui-extension text settings, the user customizes the "No available rewards yet" message to inform customers they don’t have enough loyalty points to unlock rewards. It also encourages customers to keep earning points for future rewards by showing that this section will display rewards when available.

  • Apply reward/discount button text

    Purpose: To generate excitement among customers, encouraging them to click-to-add their reward discount to their current cart.

In the Marsello-checkout-ui-extension text settings, the user customizes the "Apply reward/discount button text" to encourage customers to click and apply their reward discount to their current cart, generating excitement and enhancing the shopping experience.

  • Reward or discount could not be applied to the sale
    Purpose: To indicate to the customer that the discount code is not able to be applied to the current cart.

Your customers experience

For customers not signed in

Under the discount bar, a text prompt will encourage them to sign in or create an account to view available loyalty rewards and email discounts.

For signed-in customers – with no available rewards

After signing in, they'll have a clear view of their loyalty points balance. Additionally, they will see a message to indicate that they don't have enough loyalty points to unlock a reward – yet.

After signing in, the customer sees their loyalty points balance. A message is displayed indicating they don’t have enough points to unlock a reward yet, encouraging them to keep earning points. Would you like to adjust any details for a more specific design layout?

For signed-in customers – with available rewards

After signing in, they'll have a clear view of their loyalty points balance, rewards, and email discounts. A simple click on 'Apply' deducts their loyalty points and adds the discount to the sale.

After signing in, the customer sees their loyalty points balance, available rewards, and email discounts. By clicking 'Apply,' their loyalty points are deducted, and the discount is applied to their sale.

The customer can then complete the sale.
​
If enabled, customers will receive a points-earned email, notifying them of any points earned for their order and their new points balance.

With the 'Rewards Block' extension, improving customer experience and building loyalty has never been easier 😊

FAQs

Q. Does the rewards block show all discounts generated by Marsello?


​A. Yes, the rewards block displays all loyalty rewards and email discounts available to the customer.

Q. Are all reward types available through the rewards block?

A. Yes, the rewards block supports all reward types. Whether it's percentage off or dollar off storewide rewards, or rewards with a specific product, collection, minimum spend, or VIP tier conditions, customers can access and use their rewards seamlessly through the embedded rewards block during checkout.

Q. What happens if the customer adds a reward to the sale and then removes it?

A. If a customer adds a reward to their order during checkout but decides to remove it before completing the purchase, the discount associated with the reward will be automatically removed from the order total. Please note, that the points used to claim the reward will not be added back to the customer's points balance. Instead the claimed reward will be listed under their available rewards section.

Q. If a Shopify store is using the Rewards block and the customer has a product discount, can they add the product to the cart without leaving checkout?

A. No, not right now. Customers must leave the checkout page to add a discounted product to their cart. 💡 A helpful workaround is to encourage customers to claim their product reward through the Rewards block before they reach checkout.
If this is something you'd like to see added, feel free to vote for this feature.

Brands also searched for: rreward, rrew, Shpify, Shpi, simultaneous, blco, blcoks

Related Articles
Enable Shopify sites in Marsello
Shopify eCommerce: How do customers interact with my loyalty program online?
Shopify eCommerce common questions
Shopify eCommerce: How do I allow discount stacking in Shopify?
Loyalty program training: Shopify POS - How do my customers redeem rewards during the sale?
Did this answer your question?