Shopify Integration

This document will guide you to Shopify Integration with Zinrelo.

Introduction

If you have a Shopify store, you can integrate the loyalty program by using Zinrelo's Shopify app, which is available on the Shopify app store. Installing the app will handle both the basic website integration and purchase tracking.

Plugin-integrated features

plugin-integrated features

The detailed view is mentioned here.

Installation steps

To install the Zinrelo app on your Shopify store, please follow the steps given below:

  1. Search for "Zinrelo Loyalty Program" in the Shopify app store.
Shopify app store
  1. Click on the "Install" button and complete the app installation.
  2. Select the store with which you want Shopify to integrate.
Shopify integration
  1. A setup wizard will guide you through the account setup process.

a. Add the necessary details and then click on the "Next" button.

setup wizard

b. Keep clicking on the "Next" button.

setup wizard setup wizard

c. Select the theme for your store and click on the "Next" button.

setup wizard

d. Enter the 8-digit enterprise activation code. To obtain the activation code, please contact your account manager at [email protected]. Then, click on the "Submit" button.

setup wizard

e. You will be redirected to the Zinrelo app store.

setup wizard

Note: If you already have the Zinrelo app, simply click on "apps," and select your Zinrelo app store.

apps
  1. Click on the "arrow" to enable the Shopify app extension.
shopify app extension
  1. Click on the hyperlinked text that says "Go to Shopify."
zinrelo shopify integration
  1. Enable the "Loyalty app extension" toggle button, and remember to save your changes.
Loyalty app extension
  1. Return to the Zinrelo admin app and click on the "Mark as complete" button.
Zinrelo admin app
  1. This action will activate the "Launch and Preview" button. Preview your website, and when you're ready, click on the "Launch" button.

The integration of Shopify and Zinrelo is now complete.

Display Product Points in the Product Page

You can show product points that a customer can earn, such as opportunities to earn points, the chance to earn double or triple points on Mother’s Day weekend, and more. This will entice customers to make purchases and earn points.

To enable this feature, you need to add the section called "Product Listing & In-Cart" in the product listing page. To do so, follow these steps:

  1. Access your Shopify admin console.
  2. Navigate to Sales channels >> Online Stores >> Themes.
select the theme
  1. After selecting the theme for your store, click on the "Customize" button for your current theme.
  2. From the dropdown menu, select “Product Page.”
dropdown
  1. In the header section, click on the “Add Section” button, and choose the “Product Listing & In-cart” app.
product listing and in-cart app

This will showcase the product points on the product listing page.

product details

Display Potential Points in the cart page

You can display the potential points a member can earn through products in the cart page. To enable this feature, please follow the provided steps:

You need to add the section called "Points on cart-page" in the cart page.

  1. Access your Shopify admin console.
  2. Navigate to Sales channels >> Online Stores >> Themes.
theme
  1. After selecting the theme for your store, click on the "Customize" button for your current theme.
  2. From the dropdown menu, select “Cart Page.”
cart page dropdown
  1. In the header section, click on the “Add Section” button, and choose the “Points on cart-page” app.
Points on cart-page

This will showcase the potential points a member can earn through product prices in the cart page.

potential points

Show In-cart Redemption

You can display the available rewards of the members in their shopping cart without requiring them to leave the purchase flow. The in-cart redemption of rewards is integrated into the payment page during the checkout process. To enable this feature, please follow the provided steps:

You need to add the section called "Product Listing & In-Cart" in the cart page.

  1. Access your Shopify admin console.
  2. Navigate to Sales channels >> Online Stores >> Themes.
theme
  1. After selecting the theme for your store, click on the "Customize" button for your current theme.
  2. From the dropdown menu, select “Cart Page.”
cart page dropdown
  1. In the header section, click on the “Add Section” button, and choose the “Product Listing & In-cart” app.
product listing and in-cart app

This will showcase the available rewards of the members in the cart page.

redemption text

Embed Dashboard

To embed the dashboard on your website, you need to add the section called "Embedded Dashboard" in the account page. To do so, follow these steps:

  1. Access your Shopify admin console.
  2. Navigate to Sales channels >> Online Stores >> Themes.
theme
  1. After selecting the theme for your store, click on the "Customize" button for your current theme.
  2. From the dropdown menu, select “Account.”
account dropdown
  1. In the header section, click on the “Add Section” button, and choose the “Embedded Dashboard” app.
embedded dashboard

Even when you embed the dashboard on one page, you can still use the pop-up dashboard on other pages of your site. However, on one page, you can have either the embedded dashboard or the pop-up, not both. To know more, click here.

To conditionally render the Zinrelo Dashboard based on customer tags, follow these steps:

  1. Add liquid code in the "Enter Liquid Code" section.
  2. Here is the liquid code:
{% if customer.tags contains "opted_in" %}
 _zrl.push( [ 'init' , init_data ] );
{% endif %}

This code will make the End User Dashboard (EUD) visible to members with the "opted_in" tags assigned. Simply replace the tag "opted_in" with the actual tag to render the EUD conditionally based on your specific tag criteria.

Adjust the size of the dashboard

To make your dashboard responsive, click on the “Embedded Dashboard” section that has been added to the page.

embedded dashboard

Add custom CSS here to make your dashboard responsive. Also, make sure you enable the embed settings in the Zinrelo admin console. To know more, click here.

custom CSS

Text Configuration

You have the flexibility to customize the product information and details displayed on both the product and in-cart pages. To achieve this, please follow the steps provided below for a smooth configuration:

Before we start, you have to click on the “Product Listing & In-cart” section that has been added to the product and in-cart page.

Product Listing & In-cart

You will be redirected to a page where you can customize the text on the page.

Edit potential points and product details:

Go to “Product Points Display Text” to edit the product information in the product page.

product details

Edit Confirm Redemption text box:

To edit the text of the redemption confirmation pop-up, you can edit the following fields:

  1. Cancel Redemption Time Interval: Takes time input in seconds for the validity period of a redeemed coupon.
  2. Redemption Pop-up Header Text: Takes input for the heading text on confirming redemption of a coupon modal pop up.
  3. Redemption Pop-up Info Text: Takes input for the body text on confirming redemption of a coupon modal pop up.
  4. Cancel Redemption Button text: Takes input for the button text to cancel redemption of the selected coupon on modal pop up.
  5. Continue Redemption Button Text: Takes input for the button to continue with the redemption of the selected coupon on modal pop up.
Confirm Redemption text

Enter store currency:

To specify the currency, enter the store currency into the "Store Currency" field.

store currency

Edit in-cart redemption text box:

To edit the in-cart redemption text, you can edit the following fields:

  1. Available User Points Info Text: Takes input for the text client wants to display for users to redeem rewards with their available points.
  2. In-cart Redemption Note Text: Takes input for the text client wishes to display as a note for the users regarding redeeming a reward.
  3. Redeem Button Text: Takes input for the button which is displayed next to the rewards dropdown used to redeem rewards selected by the user.
in-cart redemption text box

Edit in-cart insufficient text box:

This text box becomes visible when members are earning points for a purchase but do not have enough points to redeem any rewards. If you wish to make changes to the text, you can do so by modifying the fields provided below:

  1. Product Points Display Text: Takes input for the text that client wants to display when the user is earning points for that purchase.
  2. In-cart Insufficient Points Txt: Takes input of the text client wishes to display when users do not have enough points to redeem any rewards.
  3. Earn More Points Button Text: Takes input for the button text which is displayed when users do not have enough points. The button when clicked opens Zinrelo EUD.
in-cart insufficient text box

Add tags to members:

To add tags to members, click on “App embeds.”

app embeds

You can pass Shopify tags to Zinrelo by adding comma-separated tags to “Enter Shopify Tags.”

Add tags

After making your changes, ensure that the “Loyalty app extension” toggle is activated.

app extension

📘

Please note: Every time you customize the new theme, you must activate the “Loyalty app extension” toggle button.

Checkout Page Extension

The additional features, such as displaying Product Points and Redemptions on the checkout page, are exclusively available for Shopify Plus users. For this, we need to enable CORS settings in your Zinrelo admin console. To activate these features, kindly reach out to your account manager at [email protected].

Display Product Points

You can show product points that a customer can earn on the checkout page. This will entice customers to make purchases and earn points.

To enable this feature, you need to add the section called "Checkout Extension" in the product listing page. To do so, follow these steps:

  1. Access your Shopify plus admin console.
  2. Navigate to Sales channels >> Online Stores >> Themes.
select the theme
  1. After selecting the theme for your store, click on the "Customize" button for your current theme.
  2. From the dropdown menu, select “Checkout.”
checkout
  1. Click on the “Add app block.” And select “Checkout Potential Points.”
Add app block
  1. Edit the text in the Potential Points Display text box (if required) and click on the save button. Make sure you mention "[[ data-zrl-potential-earning-point ]]" with the text. As it will fetch and show the potential points to be earned on that purchase.

At any point of time, you wish to replace the potential point text, click on “remove app from checkout.”

Show Checkout Redemption

You can display the available rewards of the members in their checkout page without necessitating them to leave the purchase flow. To enable this feature, please follow the provided steps:

You need to add the section called "Checkout Extension" in the cart page.

  1. Access your Shopify plus admin console.
  2. Navigate to Sales channels >> Online Stores >> Themes.
select the theme
  1. After selecting the theme for your store, click on the "Customize" button for your current theme.
  2. From the dropdown menu, select “Checkout.”
checkout
  1. Click on the “Add app block.” And select the “Checkout Extension” app block.
Add app block

This will showcase the available rewards of the members in the cart page.

Text Configuration

To configure text in the "Checkout Extension," click on the app block.

Before we begin, it's crucial to note that each text box already has default text configured.

Potential points text box:

Checkout Redemption Info Text: Takes input for the text on showing potential points of the member.

Potential points

Edit in-cart redemption text box:

To edit the in-cart redemption text, you can edit the following fields:

Available User Points Info Text: Takes input for the text client wants to display for the member to redeem rewards with their available points.

Note: Make sure you mention "[[ data-zrl-points ]]" with the text. As it will fetch and show the available points of the member.

Redemption Note Text: Takes input for the text the client wishes to display as a note for the member regarding redeeming a reward.

Redeem Button Text: Takes input for the button which is displayed next to the rewards dropdown used to redeem rewards selected by the member.

in-cart redemption

Edit in-cart insufficient text box:

This text box becomes visible when members are earning points for a purchase but do not have enough points to redeem any rewards. If you wish to make changes to the text, you can do so by modifying the fields provided below:

Insufficient Points Text: Takes input of the text client wishes to display when members do not have enough points to redeem any rewards.

Note: Make sure you mention "[[ data-zrl-points ]]" with the text. As it will fetch and show the available points of the member.

Earn More Points Button Text: Takes input for the button text which is displayed when members do not have enough points. The button when clicked opens Zinrelo EUD.

in-cart insufficient text box

Edit Confirm Redemption text box:

To edit the text of the redemption confirmation pop-up, you can edit the following fields:

Coupon Expiry Time (Seconds): Takes time input in seconds for the validity period of a redeemed coupon.

Redemption Pop-up Header Text: Takes input for the heading text on confirming redemption of a coupon modal pop up.

Cancel Redemption Button text: Takes input for the button text to cancel redemption of the selected coupon on modal pop up.

Continue Redemption Button Text: Takes input for the button to continue with the redemption of the selected coupon on modal pop up.

Redemption Pop-up Info Text: Takes input for the body text on confirming redemption of a coupon modal pop up.

Note: Make sure you mention "[[ zrl-redemption-points ]]" with the text. As it will fetch and show the points to be deducted on the redemption.

confirm redemption

Integrated plugin features

RequirementDescriptionAvailability
Member identifier customizationIs it possible to customize a member's email address with another member identifier, such as 'Customer ID,' 'GUID,' 'Phone Number,' or similar options?No
Purchase TrackingThe Purchase tracking passes the data for each purchase to Zinrelo. This enables Zinrelo to award points for purchases. Yes
Purchase Tracking on -
Shipped/Order/Fulfilled (only completed/paid orders are tracked)
This is when points are awarded to members—when the product is ordered, shipped, or fulfilled.Yes
Return TrackingThe Return tracking passes the data for each return to Zinrelo. These returns are correlated against an earlier corresponding purchase. This Returns Tracking enables Zinrelo to deduct points for returned purchases.Yes
Checkout Page Rewards/In cart RewardThe member available rewards shown in the cart page. Yes
Coupon codes for rewardsThe coupon codes are auto-generated for redeeming the rewards.Yes

📘

Please Note:

These features are integrated through plugins. If you want to incorporate additional features into your cart beyond these, please reach out to your account manager.

What steps do I need to take as an existing customer with Zinrelo to switch to the Shopify Theme Extension?

For existing customers, if you wish to switch to the Shopify Theme Extension, please follow the instructions outlined in the document to reinstall the Shopify app. If you encounter any difficulties or obstacles, do not hesitate to contact us at [email protected].