Shopify with Standard NFC Tags
Last updated
Last updated
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
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.
First step is to set up CodeLink on Shopify and ixkio.
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).
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 :
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 :
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.
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 :
This will redirect all scans on all tags within this Tag Group to this page.
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
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.
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'.
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.
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.
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' :
Within Shopify, open your product page for editing. Add some additional text to indicate the Product ID, perhaps something like :
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 :
So the result looks like this :
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.
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 :
Where the 'ID123457' is now being dynamically taken from the Tag Code and placed into the page.
And you are done !
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).
