Shopify Plus Integration Document

Written By Devin O'Neill ()

Updated at April 15th, 2025

Purpose of Integration Specification Document:

The purpose of this document is to provide guidelines to the client for integrating the Annex Cloud application at the Shopify Plus platform. The Annex Cloud application includes different modules such as Customer Loyalty, Questions and Answers, Visual Commerce, Ratings and Reviews, and Refer a Friend (RAF).
This document also contains the steps required for creating the application and the installation process.

Steps to Create an Application:

Follow the below steps to create a Shopify Plus application.

https://www.shopify.com/partners

Click on the Log in button as shown in the following image using a red box.
It will open the login window of the Shopify Plus partner account. Enter your login credentials.
The following page displays. Select your partner account.
The following window displays. Click on the Apps tab as shown in the following image.

Steps to Install an Application:

Note: You need to install an Online Store 2.0 theme, such as Dwan, which uses JSON template and supports app blocks.

Follow the steps below to install the created app.

You can see the created application in the Apps section as shown in the following image. Click on the Annex Cloud Multi Modules.
The following window displays. Navigate to More Actions ➔ Test on development store as shown in the following image.
You can see the created application in the Apps section as shown in the following image. Click on the Annex Cloud Multi Modules.
The following window displays. Select the applicable store from the menu as shown below.
The following window displays. Click on the Install button as shown below.
The following window displays.
Select the checkboxes in front of the respective applications and enter the required parameters such as site ID or create an account action ID, as per the requirement.

Create Custom Page Template:

By default, all pages share the default template. You can totally create different templates for different pages and then assign your pages to a specific template with the page editor.

From your Shopify admin, go to Online Store > Themes > Customize.
Select Pages > Default Page from the page selector, then click on Create template.

Customer Loyalty:

Click on the checkbox for customer loyalty. The following window displays.
Enter the site ID, account creation action ID, and newsletter action ID provided by Annex Cloud in the given fields and click on the Submit button.
After submitting it, you will see the following screenshot:
Edit the template, then save it.

Next, you'll need to assign the newly created template to the existing required page.

From your Shopify admin, go to Online Store > Pages.
Please find the required page, click on it, and assign the template to the Theme template field.

For example:

Click on the Save button.

Loyalty Dashboard Page Block:

To load Loyalty Dashboard, navigate to Online Store Themes ➔ Customize as shown in the following image.
Click the Home page dropdown and select the Pages option, as shown in the following image.
After selecting the Pages option, another dropdown list appears. Select the Loyalty_dashboard option as shown in the following image.
After selecting the loyalty_dashboard template, the following screen displays:
Click the highlighted Add Section option. The following screen displays:
In the Apps tab, select the Loyalty Dashboard option and save the changes.

Refer a Friend:

Click on the checkbox of Refer a Friend. A popup displays.
Enter the site ID provided by Annex Cloud in the Site ID field.
Click on the Submit button.

Add Sales Track script:

Navigate to Online Store ➔ Settings ➔ Checkout ➔ Additional scripts ->Add below script into that and replace site id which Annex cloud has provided as shown in the following image.

<script type="text/javascript">

var Base64={

_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz012345678 9+/=",

encode:function(e){

var t="";var n,r,i,s,o,u,a;

var f=0;e=Base64._utf8_encode(e); while(f<e.length){ n=e.charCodeAt(f++); r=e.charCodeAt(f++); i=e.charCodeAt(f++);

s=n>>2;

o=(n&3)<<4|r>>4; u=(r&15)<<2|i>>6;

a=i&63; if(isNaN(r)){

u=a=64

}

else if(isNaN(i)){ a=64

}

t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.char At(a)

}

return t

},

decode:function(e){

var t="";

var n,r,i;

var s,o,u,a;

var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,""); while(f<e.length){

s=this._keyStr.indexOf(e.charAt(f++)); o=this._keyStr.indexOf(e.charAt(f++)); u=this._keyStr.indexOf(e.charAt(f++)); a=this._keyStr.indexOf(e.charAt(f++)); n=s<<2|o>>4;

r=(o&15)<<4|u>>2;

i=(u&3)<<6|a; t=t+String.fromCharCode(n); if(u!=64){

t=t+String.fromCharCode(r)

} if(a!=64){

t=t+String.fromCharCode(i)

}

}

t=Base64._utf8_decode(t); return t

},

_utf8_encode:function(e){ e=e.replace(/rn/g,"n"); var t="";for(var n=0; n<e.length;n++){

var r=e.charCodeAt(n); if(r<128){

t+=String.fromCharCode(r)

}

else if(r>127&&r<2048){ t+=String.fromCharCode(r>>6|192); t+=String.fromCharCode(r&63|128)

}

else{

t+=String.fromCharCode(r>>12|224); t+=String.fromCharCode(r>>6&63|128); t+=String.fromCharCode(r&63|128)

}

}

return t},

_utf8_decode:function(e){ var t="";

var n=0;

var r=c1=c2=0; while(n<e.length){

r=e.charCodeAt(n); if(r<128){

t+=String.fromCharCode(r); n++

}

else if(r>191&&r<224){ c2=e.charCodeAt(n+1);

t+=String.fromCharCode((r&31)<<6|c2&63);

n+=2

}

else{

c2=e.charCodeAt(n+1); c3=e.charCodeAt(n+2);

t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3

}

}

return t

}

}

var excludeProductArray ={}; var i =1;

{% for line_item in line_items %} excludeProductArray[i] = {

"product_url":"{{ shop.secure_url | append: line_item.product.url | url_encode }}", "category_name":"{{ line_item.product.type}}",

"category_id":"{{ line_item.product.category_id}}",

"price":"{{ line_item.original_price | money_without_currency }}", "qty":"{{ line_item.quantity }}",

"id":"{{ line_item.product_id }}",

"product_image_url":"{{ line_item.image | img_url: 'small'| url_encode }}",

"product_name":"{{ line_item.title| url_encode }}"};

// finalArray[i] = i; i++;

{% endfor %}

var options = {};

options["site_id"]="27425640";

options["order_id"]="{{ order_id }}";

options["sale_amount"] = "{{ total_price | money_without_currency }}";

options["email_id"] = "{{ customer.email }}";

options["name"] = "{{ customer.name }}";

{% for discount_application in checkout.discount_applications %} options["coupon"] ="{{ discount_application.title }}";

{% endfor %}

options["exclude_products"] = excludeProductArray;

//console.log(excludeProductArray);

var encodedParameter = Base64.encode(JSON.stringify(options));

//console.log(encodedParameter);

var sa_url = "https://c1.socialannex.com/sale-track/?parameter="+encodedParameter;

var sa = document.createElement('script'); sa.type = 'text/javascript';

sa.async = true; sa.src = sa_url;

var sax = document.getElementsByTagName('script')[0]; sax.parentNode.insertBefore(sa,sax);

</script>

RAF Landing Page Block:
- To load the RAF Landing Page and RAF unlock Coupon Code page, navigate to Online Store ➔ Themes ➔ Customize as shown in the following image.
Click the Home Page dropdown and select Pages option, as shown in the following image.
After selecting Pages option, another dropdown list appears. If you are adding a block for the RAF landing page, select the raf-landing option. If you are adding a block for the RAF Coupon Code, select the raf-unlock-coupon-code option.
After selecting the raf-landing template, click on the Apps tab.
Multiple blocks display in a list. Select the RAF Landing option and save the changes.
Do the same when you are creating RAF coupon code Page, select the RAF unlock Coupon code from the Apps tab and save the changes.

Block for Display RAF Module on PDP:

From the Theme Customize window, click the Home Page dropdown and select the Products option, as shown in the following image.
Click on Default product as shown in the below image.
After clicking on default product, click on the Add block button.
Click on the Apps tab and select the RAF PDP Popup option as shown in the image below and save the changes
You can drag the block anywhere you’d like to set it.

Ratings and Reviews:

Block for Display RAR Module on PDP:

From the Theme Customize window, click the Home Page dropdown and select Products option, as shown in the following image.
Click on the Default product option as shown in the below image.
After clicking on default product, click on the Add block button.
A popup will display. Click on Apps and select AC Ratings as shown in the below image.
You can drag the block anywhere you’d like to set it.
After that, click on AC Ratings block and insert the RAR Template ID value provided by Annex Cloud and Save the changes.

Deactivate Module:

To deactivate any module, navigate to the Dashboard as shown in the following image.
Click on the Deactivate button in front of that module as shown in the following image.
A deactivate confirmation popup displays. Click on the OK button to deactivate the module.

Checkout Extension

Notes:

To install the checkout App extension, the Shopify store requires a ShopifyPlus plan.
To show all checkout use cases, customers need to login into the site. Otherwise, the use cases will not be visible to the customer.

Displays the dropdown box with the options of reward code points and reward discount as shown in below image.
Displays Available Points.
When selecting reward points from the options, coupons are generated randomly in the backend and are applied automatically.
When the coupon code is applied after clicking on the Submit button, the discount is applied to the order.

Redeem with Custom Points:

Displays the number of available points.
When adding custom points into the textbox and submitting it, coupons are generated randomly in the backend and are applied automatically.
When the coupon code is applied after clicking on the Submit button, the discount is applied to the order.