Shopify with Standard NFC Tags

If you are using Shopify with standard NFC tags (such as NTAG213 or iCODE SLIX) then the process is similar to authentication NFC tags. You can still :

• Dynamically pass and display data from ixkio to Shopify

• Protect the page so that it can only be viewed from ixkio

A note on Page Protection

CodeLink can help protect the page from views that haven't come from ixkio. This can be useful to prevent a view of the landing page if someone hasn't scanned your NFC tag. However, the page protection wouldn't stop someone sharing the link from the NFC tag itself. If you need full tag > page protection then you need to use authentication NFC tags.

Setting up CodeLink

First step is to set up CodeLink on Shopify and ixkio.

Install the Shopify CodeLink App

Search on shopify for the ixkio codelink App and install. Make sure you enable the theme extension on your page headers (follow the link in the blue setup box on the app).

Create a CodeLink code within ixkio

Navigate to Main Menu > Control > CodeLink.

Click 'Create New CodeLink Code'. For this example, we will just use CodeLink to transfer data from ixkio to Shopify. So, give the CodeLink a name (just used internally for your reference), change 'Default Display HTML' to 'Do Not Include' and leave everything else. Then click Add.

Now copy the new CodeLink Code (six alphanumeric digits) and paste this into the ixkio App on Shopify :

Shopify ixkio App CodeLink Code

Adding CodeLink to Shopify Pages

Create the landing page

The next step is to add CodeLink to your Shopify Page. For this example, let's create a product landing page called 'product-page'. To start with, just add some simple text, perhaps like this :

Demo Shopify Product Page

Add CodeLink to the page

Now navigate to to the CodeLink app on Shopify and add this page. This will then add the CodeLink code specifically to that page. Note that CodeLink is only added to the pages you specify. Don't add CodeLink to your whole website - just the landing page from the tag scan.

Add CodeLink to landing page

Add the Redirect Link to your Tag Codes

Now we need to redirect our tags through to this page. In our example, our landing page is 'https://demo-ixkio-codelink.myshopify.com/pages/product-page'.

Within ixkio, we have created a Shopify Folder, a Shopify Tag Group, Batch and a Tag Code. Navigate to the Tag Group level and add the destination URL into the Rule Set Default URL and Save Changes :

Adding the Destination URL

This will redirect all scans on all tags within this Tag Group to this page.

Enable CodeLink for this Tag Group

CodeLink can be enabled and disabled for each Tag Group. In this same Tag Group, we want to enable CodeLink so navigate to Tag Group Function Panel > CodeLink Tab

CodeLink Settings

Change Status to Enabled, Data Link to Core & Extended and leave NFT Data as off (if you are on Alpha plan).

The Data Link part is allowing Tag Code Core data (Tag Name, UID, CUID) and Extended Data (that you create) to be dynamically passed through to your Shopify landing page.

Test the Link

At this stage, we recommend testing the link. Dynamic data will not yet be displayed on your Shopify page but it's worth testing the link now. Navigate down to your Tag Code level (or create a Batch and Tag Code now under this Tag Group if you haven't already).

You can copy the link from the NFC Encoding URL and paste this directly into a Browser. This should automatically redirect through to your Shopify Product Page.

In the example below, we've got a Tag Code URL of 'https://t.ixkio.com/kerf5dda'.

Tag Code Test

Testing links in this way only works for Standard NFC tags not Authentication NFC tags. Auth tags generated a unique link on each scan and while you can test the link, you won't be testing authentication.

To test auth tags, you can use the 'virtual tag' generator to create the unique links for testing in this way.

Adding Dynamic Data to your Landing Page

Now we need to add dynamic data to your landing page. This will enable data stored in ixkio to be dynamically displayed on your Shopify Product Page.

Add Data to ixkio

In this simple example, we will use a 'CUID' (Customer Unique ID). Add an ID into your Tag Code for testing. We've used 'ID123457' :

CUID Data

Add Field onto your Shopify Page

Within Shopify, open your product page for editing. Add some additional text to indicate the Product ID, perhaps something like :

Product ID reference

Now we need to edit the HTML code for this page to allow the dynamic entry of the data. Click on the <> button on the Content menu and add the code :

<span id="ixkdd-cuid">&nbsp;</span>

So the result looks like this :

Dynamic CodeLink Data HTML Code

And save.

What you are doing here is telling Shopify to add the 'CUID' from ixkio between the 'span'. This can be formatted however you like and you can also dynamically add links, images and more. For the moment, we'll just do simple text.

Test Link again

Now copy the Tag Code URL again into a browser and check that the data is being passed through correctly. If it's all working, then you should see :

Product Landing Page

Where the 'ID123457' is now being dynamically taken from the Tag Code and placed into the page.

And you are done !

Advanced Features

CodeLink is a powerful system and all Tag Code related data can be dynamically transferred via Core and Extended data fields (including Digital Product Passport Data, Scan Counts, Assignment Dates, System Data, Action Data, etc, etc).