Capillary Shopify Integration

Navigate to Capillary Shopify integration to integrate the Capillary plugin into Shopify.

Introduction – Project overview

Purpose of this document

The purpose of this document is to give a detailed overview of all Shopify user flows and how to navigate the application.

Scope of this document

The scope of this document is to cover the Shopify user flows relating to Phase 1.1.

Plugin installation steps

To install the Shopify app publicly, you must publish the app in the Shopify App Marketplace. Alternatively, you can install the app in development stores from the Shopify Partner account.

Create a public app in Shopify Partner

Log in to the Shopify Partner account.
Go to Apps from the left sidebar.
Click Create app.
Choose Public app.
Add the following details:
- App name
- App URL (Server domain URL)
- Allowed redirection URL (app_url/authenticate)
Create the app.

After creation, you receive:

API key
API secret key

Add these values to the .env file of the Laravel application.

Install the app in a Shopify store

Go to Apps in the Partner dashboard.
Select the created app.
Click Select store.
Choose a development store from the list.
Install the app.

Shopify user flows

Authentication

Go to Apps → Capillary CRM Integration.
Click General Authenticate.
Provide authentication details:
- Client ID
- Client secret key
- Base URL of the API (contact Capillary team)
Submit the configuration.

To view the store frontend:

Go to Online Store.
Click View your store.

Theme configuration

Turn on app embeds

Go to Online Store → Customize.
Select Theme settings → App embeds.
Enable:
- Capillary – Setting
- Capillary – Includes
Enable Capillary – jQuery Files if jQuery is not already used.

Cart page with blocks

Go to Online Store → Customize.
Search for Cart.
Click Add block.
Add required Capillary app blocks and checkout button.

Cart page without blocks

Add the following div elements to the cart page:

Redeem points
```
<div id="cap-cart-point"></div>
```
Coupon
```
<div id="cap-cart-coupon"></div>
```

Redeem points discount value

<div id="cap-redeem-point-discount-value"></div>

Coupon discount
```
<div id="cap-coupon-discount"></div>
```
Checkout button
```
<div id="cap-check-out-btn"></div>
```

Notes

Redeem points and coupons require the Capillary checkout button.
These settings apply only to the cart page.

OTP fields on registration page

Mobile OTP

Go to Apps → Capillary CRM Integration → Config Capillary Settings.
Open OTP verification.
Enable Mobile OTP Enable.
Enter the phone input field ID.
Save the configuration.
Add the following classes in the registration page:
- Send OTP button: send-mobile-otp-btn
- OTP input and verify block: mobile-otp-box

Email OTP

Enable Email OTP Enabled.
Enter the email input field ID.
Save the configuration.
Add the following classes:
- Send OTP button: send-email-otp-btn
- OTP input and verify block: email-otp-box

Display blocks

Point history

<div id="point-history-div"></div>

Coupon history

<div id="cap-coupon-div"></div>

Transaction history

<div id="cap-trans"></div>

Available points

<div id="cap-point-id"></div>

Slab name

<div id="cap-tier-id"></div>

Attribute mapping

Create attributes in Shopify

Go to Apps → Capillary CRM Integration.
Click Capillary Tech → Assign Attributes.
Click Assign Attribute.
Set:
- Status: Enabled
- Attribute type: Custom field or Extended field
- Attribute code
- Capillary attribute code
Save.

Ensure the attribute exists on the Capillary side.

Customer creation configuration

Enable customer creation

Go to Config Capillary Settings → Customer.
Set Enabled Customer Creation to Yes.
Save the configuration.
Register a user on the storefront.

Customer appears in:

Shopify → Customers
Capillary dashboard

Disable customer creation

Set Enabled Customer Creation to No.
Save the configuration.
Register a user.

Customer appears only in Shopify.

Customer updation

Enable customer updation

Set Enabled Customer Updation to Yes.
Edit a customer from Shopify admin.

Customer updates reflect in Capillary.

Disable customer updation

Set Enabled Customer Updation to No.
Edit customer details in Shopify.

Updates do not reflect in Capillary.

Loyalty points and slab

Enable

Go to Stores → Configuration → Capillary Tech → CMI Integration.
Set Enabled Customer Fetch to Yes.
Save.

Add:

<div id="cap-point-id"></div>
<div id="cap-tier-id"></div>

Disable

Set Enabled Customer Fetch to No.
Save.

Loyalty points and slab are not displayed.

Transactions

Enable success transactions

Go to Config Capillary Settings → CRM Integration.
Set:
- Enabled Add Transactions: Yes
- Enable Customer grouping: Yes
Save.
Add:
```
<div id="cap-trans"></div>
```

Disable success transactions

Set Enabled Add Transactions to No.
Save.

Transaction history is not shown.

Cancel transactions

Enable

Enable Cancel Transactions.
Place and cancel an order.

Both success and cancel transactions appear.

Disable

Disable Cancel Transactions.
Cancel an order.

Cancel transaction does not appear.

Transaction attribute mapping

Go to Capillary Tech → Assign Transaction Attributes.
Create transaction attributes.
Map them to Capillary custom or extended fields.
Place an order.

Transaction data reflects in Capillary Member Care.

Tracker API

Configure Progress Tracker Data under CRM Integration:

Minimum value
Maximum value
Total tiers
Tier data (JSON/array)

Save the configuration.

OTP validation during registration

Enable OTP validation

Enable:
- Mobile OTP
- Email OTP
- Country code (optional)
Provide input field IDs.
Save.

OTP validation applies during registration.

Disable OTP validation

Disable Mobile and Email OTP.
Save.

Users can register without OTP.

Group coupon redemption

Enable

Set Group Redemption enabled to Yes.
Save.

Primary and group users share coupon history.

Disable

Set Group Redemption enabled to No.
Save.

Group users cannot redeem primary user coupons.

Redeem coupons at SKU level

Place an order for a specific SKU.
Receive coupon.
Apply coupon only for the same SKU.

Applying it to other SKUs fails.

Pilot program

Enable

Enable Pilot program.
Set:
- Custom field: pilot
- Value: yes
Save.

Only pilot users can access loyalty features.

Disable

Disable Pilot program.
Save.

No users can access loyalty features.

Points redemption

Enable

Enable Points redemption.
Set:
- Minimum points
- Maximum points
- Multiples
Save.

Points field appears on the cart.

Disable

Disable Points redemption.
Save.

Points field does not appear.

Status messages

Home
General Authenticate
Config Capillary Settings
Capillary Tech
Success! Configured!
Failed! Something went wrong!