Redeem Coins at Checkout
This article is applicable only for Shopify Plus Merchants
This article teaches how to allow your customers to redeem coupons using their coins directly on the checkout page.
Go to your Loyalty Program page,click on Features in the side-bar and then in the On Site Redemption section you can find the Redeem Coins at Checkout.
As first step enable coin redemption at checkout feature by toggling the status button on that page. After enabling you will see the below view.
if the buyer is logged-in on the shopify checkout page, they will see the below view. They can use the slider to adjust how many coins they want to redeem and click on button to redeem coins for discount. A discount code will be generated and applied automatically.
Now on Nector dashboard, scroll to the Offer section and define the offer based on which the coins to $ conversion will happen. To define the offer click on the Add button, and choose an offer as per your business needs.
For ex: Based on the business logic, a business can create an offer, where 1 point = $1, or 100 coins = $10 etc.
After the offer has been setup you will need to add the Points Redemption at Checkout widget to your checkout page. There are two ways of doing this based on whether you have checkout extensibility enabled or if you using the checkout.liquid file to customize your checkout.
Go to API Keys and click on any Read Only API Key from the list. API key details page will open, scroll till the Integration Snippets section and and copy the content of Points redemption at checkout
The script needs to pasted into checkout.liquid file
Now, visit your shopify admin dashboard and click on online store
Click on the 3 dots, and select Edit Code and paste the code inside the checkout.liquid file.
Go to your shopify admin dashboard. Click on Online Store under Sales Channels on the left side menu.
Click on Customize button on your current live theme. See below image for reference.
Open your checkout page customization by clicking on the dropdown at the top and clicking on Checkout as shown in the image below.
On this page, click on the Add app block button at the bottom as shown in the image below.
Next, select the Checkout coin redemption app block. And move the app block by holding the cursor on the 6 dots button and move it to an appropriate position. It is recommended you place the app block above the discount section. Refer to the image below
Now, click on the app block to find the app block's settings. You can choose the type of view to show to the customers. There are two views:
Regular view, which has a button to apply the maximum discount possible.
Slider view, where the customer can choose the number of points to redeem.
After making the necessary changes, click on the Save button in the top right to save the changes.
This article teaches how to allow your customers to redeem coupons using their coins directly on the checkout page.
Go to your Loyalty Program page,click on Features in the side-bar and then in the On Site Redemption section you can find the Redeem Coins at Checkout.
As first step enable coin redemption at checkout feature by toggling the status button on that page. After enabling you will see the below view.
How it works?
if the buyer is logged-in on the shopify checkout page, they will see the below view. They can use the slider to adjust how many coins they want to redeem and click on button to redeem coins for discount. A discount code will be generated and applied automatically.
Setting the offer
Now on Nector dashboard, scroll to the Offer section and define the offer based on which the coins to $ conversion will happen. To define the offer click on the Add button, and choose an offer as per your business needs.
For ex: Based on the business logic, a business can create an offer, where 1 point = $1, or 100 coins = $10 etc.
Adding The Widget To Your Checkout
After the offer has been setup you will need to add the Points Redemption at Checkout widget to your checkout page. There are two ways of doing this based on whether you have checkout extensibility enabled or if you using the checkout.liquid file to customize your checkout.
Adding it via checkout.liquid file
Getting the code snippet on Nector dashboard
Go to API Keys and click on any Read Only API Key from the list. API key details page will open, scroll till the Integration Snippets section and and copy the content of Points redemption at checkout
The script needs to pasted into checkout.liquid file
Adding points redemption at checkout script to your theme
Now, visit your shopify admin dashboard and click on online store
Click on the 3 dots, and select Edit Code and paste the code inside the checkout.liquid file.
Adding it via checkout extensibility
Go to your shopify admin dashboard. Click on Online Store under Sales Channels on the left side menu.
Click on Customize button on your current live theme. See below image for reference.
Open your checkout page customization by clicking on the dropdown at the top and clicking on Checkout as shown in the image below.
On this page, click on the Add app block button at the bottom as shown in the image below.
Next, select the Checkout coin redemption app block. And move the app block by holding the cursor on the 6 dots button and move it to an appropriate position. It is recommended you place the app block above the discount section. Refer to the image below
Now, click on the app block to find the app block's settings. You can choose the type of view to show to the customers. There are two views:
Regular view, which has a button to apply the maximum discount possible.
Slider view, where the customer can choose the number of points to redeem.
This is the regular view:
This is the slider view:
After making the necessary changes, click on the Save button in the top right to save the changes.
Updated on: 25/06/2024