diff --git a/package-lock.json b/package-lock.json
index fd1a39be..d9e4c58e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@casl/ability": "^6.0.0",
         "@hotwax/app-version-info": "^1.0.0",
         "@hotwax/apps-theme": "^1.2.3",
-        "@hotwax/dxp-components": "1.7.5",
+        "@hotwax/dxp-components": "1.8.0",
         "@hotwax/oms-api": "^1.10.0",
         "@ionic/core": "6.7.5",
         "@ionic/vue": "6.7.5",
@@ -58,6 +58,38 @@
         "vue-cli-plugin-i18n": "^1.0.1"
       }
     },
+    "../dxp-components": {
+      "name": "@hotwax/dxp-components",
+      "version": "1.7.5",
+      "extraneous": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@hotwax/oms-api": "^1.8.1",
+        "@ionic/core": "^6.7.5",
+        "@ionic/vue": "^6.7.5",
+        "firebase": "^10.3.1",
+        "luxon": "^3.3.0",
+        "pinia": "2.0.36",
+        "pinia-plugin-persistedstate": "^3.1.0",
+        "vue": "^3.3.4",
+        "vue-i18n": "^9.2.2"
+      },
+      "devDependencies": {
+        "@babel/types": "^7.22.11",
+        "@types/luxon": "^3.3.0",
+        "@types/node": "^20.5.7",
+        "@vitejs/plugin-vue": "^4.3.4",
+        "@vue/eslint-config-prettier": "^8.0.0",
+        "@vue/eslint-config-typescript": "^11.0.3",
+        "@vue/tsconfig": "^0.1.3",
+        "eslint": "^8.48.0",
+        "eslint-plugin-vue": "^9.17.0",
+        "rollup-plugin-typescript2": "^0.35.0",
+        "typescript": "~4.7.4",
+        "vite": "^4.4.9",
+        "vue-tsc": "^1.8.8"
+      }
+    },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
@@ -3194,18 +3226,20 @@
       "integrity": "sha512-s/NbdmIbzRTWcOhCBJz6TN7vlNfO8wcjJYiQx7aNAzWB2O+eLlIhTIJMI/rMgGeXV5q3d2HMBVlkly3MlQBcww=="
     },
     "node_modules/@hotwax/dxp-components": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/@hotwax/dxp-components/-/dxp-components-1.7.5.tgz",
-      "integrity": "sha512-1mkomu1JzEck7fwZwb8TxzUSdooWIfNj+uuDFhxrBPnrZWwUbjKQqr2mIv8unV4HA7qoqDIyoAKFDSeEaX1HNA==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@hotwax/dxp-components/-/dxp-components-1.8.0.tgz",
+      "integrity": "sha512-391++6B7oNxKqaWVGwpDhf1vRACdObfu5K7zxy60ZGknQ1bY11da+RSVk9/90IDkCg32mLbBP2I+GQ29hlG10g==",
       "dependencies": {
         "@hotwax/oms-api": "^1.8.1",
         "@ionic/core": "^6.7.5",
         "@ionic/vue": "^6.7.5",
+        "@types/vue-barcode-reader": "^0.0.0",
         "firebase": "^10.3.1",
         "luxon": "^3.3.0",
         "pinia": "2.0.36",
         "pinia-plugin-persistedstate": "^3.1.0",
         "vue": "^3.3.4",
+        "vue-barcode-reader": "^1.0.3",
         "vue-i18n": "^9.2.2"
       }
     },
@@ -4946,6 +4980,65 @@
         "source-map": "^0.6.1"
       }
     },
+    "node_modules/@types/vue-barcode-reader": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@types/vue-barcode-reader/-/vue-barcode-reader-0.0.0.tgz",
+      "integrity": "sha512-yngQhd35qGjCxMXWIqsAtF7qmxe0qUYRVd9qW5I/CcRPWDdBpqVkHnQSh6ro5BIBl3NQ3ppky7kMKS4pr+XwCQ==",
+      "dependencies": {
+        "vue": "^2.0.0"
+      }
+    },
+    "node_modules/@types/vue-barcode-reader/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+      "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+      "dependencies": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@types/vue-barcode-reader/node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/@types/vue-barcode-reader/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/@types/vue-barcode-reader/node_modules/vue": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
+      "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.14",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/@types/webpack": {
       "version": "4.41.33",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.33.tgz",
@@ -9722,6 +9815,26 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "node_modules/@zxing/library": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.19.3.tgz",
+      "integrity": "sha512-RUv5svewpDoD0ymXleOP8yVTO5BLkR0zn5coGC/Vs1671u0OBJ4xdtR8WVWf08OcvrieEMHdSfQY3ZKtqII/hg==",
+      "dependencies": {
+        "ts-custom-error": "^3.2.1"
+      },
+      "engines": {
+        "node": ">= 10.4.0"
+      },
+      "optionalDependencies": {
+        "@zxing/text-encoding": "~0.9.0"
+      }
+    },
+    "node_modules/@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "optional": true
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -17312,9 +17425,9 @@
       }
     },
     "node_modules/http-status-codes": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.2.0.tgz",
-      "integrity": "sha512-feERVo9iWxvnejp3SEfm/+oNG517npqL2/PIA8ORjyOZjGC7TwCRQsZylciLS64i6pJ0wRYz3rkXLRwbtFa8Ng=="
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.3.0.tgz",
+      "integrity": "sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA=="
     },
     "node_modules/https-browserify": {
       "version": "1.0.0",
@@ -31161,6 +31274,14 @@
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
       "dev": true
     },
+    "node_modules/ts-custom-error": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
+      "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/ts-jest": {
       "version": "28.0.8",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-28.0.8.tgz",
@@ -32051,6 +32172,14 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/vue-barcode-reader": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vue-barcode-reader/-/vue-barcode-reader-1.0.3.tgz",
+      "integrity": "sha512-z4mv7+ai/8vECppBTb00tHnyFMMx6W1rAaQe+v214ihoaWK9iGrn8ZZsmgSxf3lwnrtGaibLdkonTtMrGsO+dA==",
+      "dependencies": {
+        "@zxing/library": "^0.19.1"
+      }
+    },
     "node_modules/vue-cli-plugin-i18n": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz",
@@ -37281,18 +37410,20 @@
       "integrity": "sha512-s/NbdmIbzRTWcOhCBJz6TN7vlNfO8wcjJYiQx7aNAzWB2O+eLlIhTIJMI/rMgGeXV5q3d2HMBVlkly3MlQBcww=="
     },
     "@hotwax/dxp-components": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/@hotwax/dxp-components/-/dxp-components-1.7.5.tgz",
-      "integrity": "sha512-1mkomu1JzEck7fwZwb8TxzUSdooWIfNj+uuDFhxrBPnrZWwUbjKQqr2mIv8unV4HA7qoqDIyoAKFDSeEaX1HNA==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@hotwax/dxp-components/-/dxp-components-1.8.0.tgz",
+      "integrity": "sha512-391++6B7oNxKqaWVGwpDhf1vRACdObfu5K7zxy60ZGknQ1bY11da+RSVk9/90IDkCg32mLbBP2I+GQ29hlG10g==",
       "requires": {
         "@hotwax/oms-api": "^1.8.1",
         "@ionic/core": "^6.7.5",
         "@ionic/vue": "^6.7.5",
+        "@types/vue-barcode-reader": "^0.0.0",
         "firebase": "^10.3.1",
         "luxon": "^3.3.0",
         "pinia": "2.0.36",
         "pinia-plugin-persistedstate": "^3.1.0",
         "vue": "^3.3.4",
+        "vue-barcode-reader": "^1.0.3",
         "vue-i18n": "^9.2.2"
       },
       "dependencies": {
@@ -38718,6 +38849,50 @@
         "source-map": "^0.6.1"
       }
     },
+    "@types/vue-barcode-reader": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@types/vue-barcode-reader/-/vue-barcode-reader-0.0.0.tgz",
+      "integrity": "sha512-yngQhd35qGjCxMXWIqsAtF7qmxe0qUYRVd9qW5I/CcRPWDdBpqVkHnQSh6ro5BIBl3NQ3ppky7kMKS4pr+XwCQ==",
+      "requires": {
+        "vue": "^2.0.0"
+      },
+      "dependencies": {
+        "@vue/compiler-sfc": {
+          "version": "2.7.14",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+          "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+          "requires": {
+            "@babel/parser": "^7.18.4",
+            "postcss": "^8.4.14",
+            "source-map": "^0.6.1"
+          }
+        },
+        "picocolors": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+        },
+        "postcss": {
+          "version": "8.4.31",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+          "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        },
+        "vue": {
+          "version": "2.7.14",
+          "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
+          "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
+          "requires": {
+            "@vue/compiler-sfc": "2.7.14",
+            "csstype": "^3.1.0"
+          }
+        }
+      }
+    },
     "@types/webpack": {
       "version": "4.41.33",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.33.tgz",
@@ -42527,6 +42702,21 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "@zxing/library": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.19.3.tgz",
+      "integrity": "sha512-RUv5svewpDoD0ymXleOP8yVTO5BLkR0zn5coGC/Vs1671u0OBJ4xdtR8WVWf08OcvrieEMHdSfQY3ZKtqII/hg==",
+      "requires": {
+        "@zxing/text-encoding": "~0.9.0",
+        "ts-custom-error": "^3.2.1"
+      }
+    },
+    "@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "optional": true
+    },
     "abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -48511,9 +48701,9 @@
       }
     },
     "http-status-codes": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.2.0.tgz",
-      "integrity": "sha512-feERVo9iWxvnejp3SEfm/+oNG517npqL2/PIA8ORjyOZjGC7TwCRQsZylciLS64i6pJ0wRYz3rkXLRwbtFa8Ng=="
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.3.0.tgz",
+      "integrity": "sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA=="
     },
     "https-browserify": {
       "version": "1.0.0",
@@ -59427,6 +59617,11 @@
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
       "dev": true
     },
+    "ts-custom-error": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
+      "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A=="
+    },
     "ts-jest": {
       "version": "28.0.8",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-28.0.8.tgz",
@@ -60108,6 +60303,14 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "vue-barcode-reader": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vue-barcode-reader/-/vue-barcode-reader-1.0.3.tgz",
+      "integrity": "sha512-z4mv7+ai/8vECppBTb00tHnyFMMx6W1rAaQe+v214ihoaWK9iGrn8ZZsmgSxf3lwnrtGaibLdkonTtMrGsO+dA==",
+      "requires": {
+        "@zxing/library": "^0.19.1"
+      }
+    },
     "vue-cli-plugin-i18n": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz",
diff --git a/package.json b/package.json
index 6eca8af9..f167c25b 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.3",
-    "@hotwax/dxp-components": "1.7.5",
+    "@hotwax/dxp-components": "1.8.0",
     "@hotwax/oms-api": "^1.10.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",
diff --git a/src/App.vue b/src/App.vue
index 5a592701..75f4f873 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,6 +24,7 @@ import { mapGetters, useStore } from 'vuex';
 import { Settings } from 'luxon'
 import { initialise, resetConfig } from '@/adapter'
 import { useRouter } from 'vue-router';
+import { useProductIdentificationStore } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "App",
@@ -43,7 +44,8 @@ export default defineComponent({
     ...mapGetters({
       userProfile: 'user/getUserProfile',
       userToken: 'user/getUserToken',
-      instanceUrl: 'user/getInstanceUrl'
+      instanceUrl: 'user/getInstanceUrl',
+      currentEComStore: 'user/getCurrentEComStore'
     })
   },
   methods: {
@@ -101,6 +103,10 @@ export default defineComponent({
     if (this.userProfile && this.userProfile.userTimeZone) {
       Settings.defaultZone = this.userProfile.userTimeZone;
     }
+
+    // Get product identification from api using dxp-component
+    await useProductIdentificationStore().getIdentificationPref(this.currentEComStore?.productStoreId)
+      .catch((error) => console.error(error));
   },
   unmounted() {
     emitter.off('presentLoader', this.presentLoader);
diff --git a/src/adapter/index.ts b/src/adapter/index.ts
index 0fea6aab..e0813ad2 100644
--- a/src/adapter/index.ts
+++ b/src/adapter/index.ts
@@ -1,12 +1,14 @@
-import { api, client, getConfig, initialise, logout, resetConfig, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
+import { api, client, getConfig, getProductIdentificationPref, initialise, logout, resetConfig, setProductIdentificationPref, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
 
 export {
   api,
   client,
   getConfig,
+  getProductIdentificationPref,
   initialise,
   logout,
   resetConfig,
+  setProductIdentificationPref,
   updateInstanceUrl,
   updateToken
 }
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 8d04647d..b25d6702 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -33,7 +33,7 @@ import { login, logout, loader } from './user-utils';
 import permissionPlugin from '@/authorization';
 import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
-import { getConfig, initialise } from '@/adapter'
+import { getConfig, getProductIdentificationPref, initialise, setProductIdentificationPref } from '@/adapter'
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -52,8 +52,10 @@ const app = createApp(App)
     logout,
     loader,
     appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
-    getConfig: getConfig,
-    initialise: initialise
+    getConfig,
+    getProductIdentificationPref,
+    initialise,
+    setProductIdentificationPref
   });
  
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index 02f2eb0d..2699bba1 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -7,7 +7,7 @@ import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
 import { Settings } from 'luxon'
 import { updateInstanceUrl, updateToken, resetConfig, logout } from '@/adapter'
-import { useAuthStore } from '@hotwax/dxp-components';
+import { useAuthStore, useProductIdentificationStore } from '@hotwax/dxp-components';
 import { getServerPermissionsFromRules, prepareAppPermissions, resetPermissions, setPermissions } from '@/authorization'
 import emitter from '@/event-bus'
 
@@ -21,58 +21,62 @@ const actions: ActionTree<UserState, RootState> = {
     const { token, oms } = payload;
     dispatch("setUserInstanceUrl", oms);
     try {
-        if (token) {
-          // Getting the permissions list from server
-          const permissionId = process.env.VUE_APP_PERMISSION_ID;
-
-          // Prepare permissions list
-          const serverPermissionsFromRules = getServerPermissionsFromRules();
-          if (permissionId) serverPermissionsFromRules.push(permissionId);
-
-          const serverPermissions = await UserService.getUserPermissions({
-            permissionIds: serverPermissionsFromRules
-          }, token);
-          const appPermissions = prepareAppPermissions(serverPermissions);
-
-          // Checking if the user has permission to access the app
-          // If there is no configuration, the permission check is not enabled
-          if (permissionId) {
-            // As the token is not yet set in the state passing token headers explicitly
-            // TODO Abstract this out, how token is handled should be part of the method not the callee
-            const hasPermission = appPermissions.some((appPermissionId: any) => appPermissionId === permissionId );
-            // If there are any errors or permission check fails do not allow user to login
-            if (hasPermission) {
-              const permissionError = 'You do not have permission to access the app.';
-              showToast(translate(permissionError));
-              console.error("error", permissionError);
-              return Promise.reject(new Error(permissionError));
-            }
+      if (token) {
+        // Getting the permissions list from server
+        const permissionId = process.env.VUE_APP_PERMISSION_ID;
+
+        // Prepare permissions list
+        const serverPermissionsFromRules = getServerPermissionsFromRules();
+        if (permissionId) serverPermissionsFromRules.push(permissionId);
+
+        const serverPermissions = await UserService.getUserPermissions({
+          permissionIds: serverPermissionsFromRules
+        }, token);
+        const appPermissions = prepareAppPermissions(serverPermissions);
+
+        // Checking if the user has permission to access the app
+        // If there is no configuration, the permission check is not enabled
+        if (permissionId) {
+          // As the token is not yet set in the state passing token headers explicitly
+          // TODO Abstract this out, how token is handled should be part of the method not the callee
+          const hasPermission = appPermissions.some((appPermissionId: any) => appPermissionId === permissionId );
+          // If there are any errors or permission check fails do not allow user to login
+          if (hasPermission) {
+            const permissionError = 'You do not have permission to access the app.';
+            showToast(translate(permissionError));
+            console.error("error", permissionError);
+            return Promise.reject(new Error(permissionError));
           }
+        }
 
-          // Getting user profile
-          const userProfile = await UserService.getUserProfile(token);
-          userProfile.stores = await UserService.getEComStores(token, userProfile.partyId);
-          
-          // Getting user preferred store
-          let preferredStore = userProfile.stores[0];
-          const preferredStoreId =  await UserService.getPreferredStore(token);
-          if (preferredStoreId) {
-            const store = userProfile.stores.find((store: any) => store.productStoreId === preferredStoreId);
-            store && (preferredStore = store)
-          }
+        // Getting user profile
+        const userProfile = await UserService.getUserProfile(token);
+        userProfile.stores = await UserService.getEComStores(token, userProfile.partyId);
+        
+        // Getting user preferred store
+        let preferredStore = userProfile.stores[0];
+        const preferredStoreId =  await UserService.getPreferredStore(token);
+        if (preferredStoreId) {
+          const store = userProfile.stores.find((store: any) => store.productStoreId === preferredStoreId);
+          store && (preferredStore = store)
+        }
 
-          setPermissions(appPermissions);
-          if (userProfile.userTimeZone) {
-            Settings.defaultZone = userProfile.userTimeZone;
-          }
+        // Get product identification from api using dxp-component
+        await useProductIdentificationStore().getIdentificationPref(preferredStoreId)
+          .catch((error) => console.error(error));
 
-          // TODO user single mutation
-          commit(types.USER_CURRENT_ECOM_STORE_UPDATED,  preferredStore);
-          commit(types.USER_INFO_UPDATED, userProfile);
-          commit(types.USER_TOKEN_CHANGED, { newToken: token });
-          commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
-          updateToken(token);
+        setPermissions(appPermissions);
+        if (userProfile.userTimeZone) {
+          Settings.defaultZone = userProfile.userTimeZone;
         }
+
+        // TODO user single mutation
+        commit(types.USER_CURRENT_ECOM_STORE_UPDATED, preferredStore);
+        commit(types.USER_INFO_UPDATED, userProfile);
+        commit(types.USER_TOKEN_CHANGED, { newToken: token });
+        commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
+        updateToken(token);
+      }
     } catch (err: any) {
       showToast(translate('Something went wrong'));
       console.error("error", err);
@@ -159,6 +163,10 @@ const actions: ActionTree<UserState, RootState> = {
         'userPrefTypeId': 'SELECTED_BRAND',
         'userPrefValue': payload.eComStore.productStoreId
       });
+    
+      // Get product identification from api using dxp-component
+      await useProductIdentificationStore().getIdentificationPref(payload.eComStore.productStoreId)
+        .catch((error) => console.error(error));
     },
 
   /**
diff --git a/src/views/catalog-product-details.vue b/src/views/catalog-product-details.vue
index eb5ee242..be9021d7 100644
--- a/src/views/catalog-product-details.vue
+++ b/src/views/catalog-product-details.vue
@@ -17,8 +17,8 @@
 
         <div class="product-info" v-if="Object.keys(currentVariant).length">
           <div class="ion-padding">
-            <h4>{{ currentVariant.parentProductName }}</h4>
-            <p>{{ currentVariant.sku }}</p>
+            <h4>{{ getProductIdentificationValue(productIdentificationPref.primaryId, currentVariant) ? getProductIdentificationValue(productIdentificationPref.primaryId, currentVariant) : currentVariant.productName }}</h4>
+            <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, currentVariant) }}</p>
           </div>
 
           <div class="product-features">
@@ -388,7 +388,7 @@ import {
   IonRow,
   popoverController,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import {
   alertCircleOutline,
   checkmarkCircleOutline,
@@ -397,7 +397,7 @@ import {
   shirtOutline
 } from "ionicons/icons";
 import { useStore } from "@/store";
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from "@hotwax/dxp-components";
 import { mapGetters } from "vuex";
 import { showToast, getFeature, hasError } from "@/utils";
 import { translate } from "@/i18n";
@@ -436,7 +436,7 @@ export default defineComponent({
     IonToggle,
     IonToolbar,
     IonTitle,
-    IonRow,
+    IonRow
   },
   data() {
     return {
@@ -1122,13 +1122,18 @@ export default defineComponent({
   setup() {
     const store = useStore();
     const router = useRouter();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+    
     return {
       alertCircleOutline,
       Actions,
       checkmarkCircleOutline,
       chevronForwardOutline,
       copyOutline,
+      getProductIdentificationValue,
       hasPermission,
+      productIdentificationPref,
       router,
       shirtOutline,
       store
diff --git a/src/views/catalog.vue b/src/views/catalog.vue
index f487850b..516193e6 100644
--- a/src/views/catalog.vue
+++ b/src/views/catalog.vue
@@ -52,8 +52,8 @@
               <ShopifyImg :src="product.mainImageUrl" size="small"/>
             </ion-thumbnail>
             <ion-label class="ion-text-wrap">
-              <h5>{{ product.parentProductName }}</h5>
-              <p>{{ product.sku }}</p>
+              <h5>{{ getProductIdentificationValue(productIdentificationPref.primaryId, product) ? getProductIdentificationValue(productIdentificationPref.primaryId, product) : product.productName }}</h5>
+              <p>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, product) }}</p>
             </ion-label>
           </ion-item>
 
@@ -106,10 +106,10 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/vue';
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { useRouter } from "vue-router";
 import { useStore } from "@/store";
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from '@hotwax/dxp-components';
 import { mapGetters } from 'vuex';
 import { DateTime } from 'luxon';
 import { JobService } from '@/services/JobService';
@@ -269,8 +269,12 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
 
     return {
+      getProductIdentificationValue,
+      productIdentificationPref,
       router,
       store,
     };
diff --git a/src/views/orders.vue b/src/views/orders.vue
index 4ca5f023..ce53cd50 100644
--- a/src/views/orders.vue
+++ b/src/views/orders.vue
@@ -120,7 +120,7 @@
                   <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"></ShopifyImg>
                 </ion-thumbnail>
                 <ion-label>
-                  <h2>{{ item.parentProductName ? item.parentProductName :item.productName }}</h2>
+                  <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, item) ? getProductIdentificationValue(productIdentificationPref.primaryId, item) : item.productName }}</h2>
                   <p v-if="$filters.getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/')">{{ $t("Color") }} : {{ $filters.getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/') }}</p>
                   <p v-if="$filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/')">{{ $t("Size") }} : {{ $filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/') }}</p>
                 </ion-label>
@@ -202,7 +202,7 @@ import {
   modalController,
   popoverController,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import WarehouseModal from "./warehouse-modal.vue";
 import BackgroundJobModal from "./background-job-modal.vue";
 import PromiseDateModal from "./promise-date-modal.vue";
@@ -222,7 +222,7 @@ import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { showToast } from '@/utils'
 import { Plugins } from '@capacitor/core';
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from "@hotwax/dxp-components";
 import emitter from "@/event-bus";
 
 const { Clipboard } = Plugins;
@@ -475,17 +475,22 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+
     return {
-      store,
-      pricetag,
-      ribbon,
-      ellipsisVertical,
-      send,
       business,
       calendar,
+      close,
       closeCircle,
+      ellipsisVertical,
+      getProductIdentificationValue,
       hourglass,
-      close,
+      pricetag,
+      productIdentificationPref,
+      ribbon,
+      send,
+      store
     };
   },
 });
diff --git a/src/views/product-details.vue b/src/views/product-details.vue
index e37f4965..04c5fd65 100644
--- a/src/views/product-details.vue
+++ b/src/views/product-details.vue
@@ -26,7 +26,7 @@
 
         <div class="product-info">
           <ion-item lines="none" class="product-title">
-            <h1>{{ current.product.productName }}</h1>
+            <h1>{{ getProductIdentificationValue(productIdentificationPref.primaryId, current.product) ? getProductIdentificationValue(productIdentificationPref.primaryId, current.product) : current.product.productName }}</h1>
           </ion-item>
           <div class="product-features">
             <ion-list v-if="$filters.getFeaturesList(current.product.featureHierarchy, '1/COLOR/').length">
@@ -195,7 +195,7 @@ import {
   alertController,
   modalController,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import {
   informationCircle,
   send,
@@ -213,7 +213,7 @@ import BackgroundJobModal from "./background-job-modal.vue";
 import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { ProductService } from '@/services/ProductService'
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from "@hotwax/dxp-components";
 import { sizeIndex } from "@/apparel-sorter"
 import { DateTime } from 'luxon';
 import emitter from "@/event-bus";
@@ -576,15 +576,19 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
     return {
       informationCircle,
       send,
       business,
       closeCircle,
+      getProductIdentificationValue,
       hourglass,
       calendar,
       close,
       list,
+      productIdentificationPref,
       ribbon,
       refresh,
       store
diff --git a/src/views/products.vue b/src/views/products.vue
index d45fb701..e0f5c8dd 100644
--- a/src/views/products.vue
+++ b/src/views/products.vue
@@ -32,7 +32,7 @@
             <ShopifyImg :src="getProduct(product.groupValue).mainImageUrl" size="small"></ShopifyImg>
           </ion-thumbnail>
           <ion-label>
-            <h2>{{ getProduct(product.groupValue).productName}}</h2>
+            <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(product.groupValue)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(product.groupValue)) : getProduct(product.groupValue).productName }}</h2>
             <p v-for="(attribute, feature) in ($filters.groupFeatures(getProduct(product.groupValue).featureHierarchy))" :key="attribute" ><span class="sentence-case">{{ feature }}</span>: {{ attribute }}</p>
           </ion-label>
           <ion-badge slot="end" color="success">{{ product.doclist.numFound }} {{ $t("pieces preordered") }}</ion-badge>
@@ -66,13 +66,13 @@ import {
   IonToolbar,
   modalController,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import { hourglass } from "ionicons/icons";
 import { useRouter } from "vue-router";
 import BackgroundJobModal from "./background-job-modal.vue";
 import { useStore } from "@/store";
 import { mapGetters } from "vuex";
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { getProductIdentificationValue, ShopifyImg, useProductIdentificationStore } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "settings",
@@ -159,10 +159,14 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
     return {
-      router,
-      store,
+      getProductIdentificationValue,
       hourglass,
+      productIdentificationPref,
+      router,
+      store
     };
   },
 });
diff --git a/src/views/settings.vue b/src/views/settings.vue
index d46d39cd..c2feab2d 100644
--- a/src/views/settings.vue
+++ b/src/views/settings.vue
@@ -71,6 +71,8 @@
       </div>
 
       <section>
+        <ProductIdentifier />
+
         <ion-card>
           <ion-card-header>
             <ion-card-title>