diff --git a/src/components/AddShippingMethodsModal.vue b/src/components/AddShippingMethodsModal.vue
new file mode 100644
index 0000000..e104ed3
--- /dev/null
+++ b/src/components/AddShippingMethodsModal.vue
@@ -0,0 +1,63 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="close" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Add shipping method") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <ion-item lines="none">
+        <ion-label>{{ translate("Shopify Shipping method") }}</ion-label>
+        <ion-label slot="end">{{ "<shippingMethodName>" }}</ion-label>
+      </ion-item>
+
+      <ion-item-divider color="light">
+        <ion-label>{{ translate("OMS Carrier and Shipping methods") }}</ion-label>
+      </ion-item-divider>
+
+      <ion-item>
+        <ion-select :placeholder="translate('Select')" :label="translate('Carrier')" value="">
+          <ion-select-option value="">{{ "<carrierName>" }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item>
+        <ion-select :placeholder="translate('Select')" :label="translate('Shipping method')" value="">
+          <ion-select-option value="">{{ "<carrierShippingMethod>" }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item lines="none">
+        <ion-toggle>{{ translate("Ship without tracking ID") }}</ion-toggle>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon :icon="saveOutline" />
+    </ion-fab-button>
+  </ion-fab>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonButtons, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar, modalController } from "@ionic/vue";
+import { close, saveOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+
+function closeModal() {
+  modalController.dismiss();
+}
+</script>
+
+<style scoped>
+ion-content {
+  --padding-bottom: 80px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/DataMappingLinkActionsPopover.vue b/src/components/DataMappingLinkActionsPopover.vue
new file mode 100644
index 0000000..6692ee7
--- /dev/null
+++ b/src/components/DataMappingLinkActionsPopover.vue
@@ -0,0 +1,30 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>
+        {{ "<Payment methods>" }}
+      </ion-list-header>
+      
+      <ion-radio-group>
+        <ion-item>
+          <ion-radio>{{ "<hotwaxPaymentMethod>" }}</ion-radio>
+        </ion-item>
+
+        <ion-item>
+          <ion-radio>{{ "<hotwaxPaymentMethod>" }}</ion-radio>
+        </ion-item>
+      </ion-radio-group>
+
+      <ion-item lines="none">
+        <ion-label color="primary">{{ translate("Create new") }}</ion-label>
+        <ion-icon :icon="addCircleOutline" slot="end" color="primary" />
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+  
+<script setup lang="ts">
+import { IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonRadio, IonRadioGroup } from "@ionic/vue";
+import { addCircleOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+</script>
\ No newline at end of file
diff --git a/src/components/ImportShippingMethodsModal.vue b/src/components/ImportShippingMethodsModal.vue
new file mode 100644
index 0000000..9dc6be8
--- /dev/null
+++ b/src/components/ImportShippingMethodsModal.vue
@@ -0,0 +1,52 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="close" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Import shipping methods") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-searchbar :placeholder="translate('Search shipping method')"/>
+
+    <ion-item-divider color="light">
+      <ion-label>{{ translate("Select all") }}</ion-label>
+      <ion-checkbox />
+    </ion-item-divider>
+
+    <ion-list>
+      <ion-item>
+        <ion-checkbox>{{ "<shopifyShippingMethodName>" }}</ion-checkbox>
+      </ion-item>
+      <ion-item>
+        <ion-checkbox>{{ "<shopifyShippingMethodName>" }}</ion-checkbox>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon :icon="downloadOutline" />
+    </ion-fab-button>
+  </ion-fab>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonButtons, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonSearchbar, IonTitle, IonToolbar, modalController } from "@ionic/vue";
+import { close, downloadOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+
+function closeModal() {
+  modalController.dismiss();
+}
+</script>
+
+<style scoped>
+ion-content {
+  --padding-bottom: 80px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ImportShopifyLocationsModal.vue b/src/components/ImportShopifyLocationsModal.vue
new file mode 100644
index 0000000..6d82cdc
--- /dev/null
+++ b/src/components/ImportShopifyLocationsModal.vue
@@ -0,0 +1,64 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="close" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Import facility") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-searchbar :placeholder="translate('Search facility')" />
+
+    <ion-item-divider color="light">
+      <ion-label>{{ translate("Select all") }}</ion-label>
+      <ion-checkbox />
+    </ion-item-divider>
+
+    <ion-list>
+      <ion-item>
+        <ion-checkbox>
+          <ion-label>
+            <p class="overline">{{ "<SHOPIFY LOCATION ID>" }}</p>
+            {{ "<locationName>" }}
+          </ion-label>
+        </ion-checkbox>
+      </ion-item>
+
+      <ion-item>
+        <ion-checkbox>
+          <ion-label>
+            <p class="overline">{{ "<SHOPIFY LOCATION ID>" }}</p>
+            {{ "<locationName>" }}
+          </ion-label>
+        </ion-checkbox>
+      </ion-item>
+    </ion-list>
+
+  </ion-content>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon :icon="downloadOutline" />
+    </ion-fab-button>
+  </ion-fab>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonButtons, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonSearchbar, IonTitle, IonToolbar, modalController } from "@ionic/vue";
+import { close, downloadOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+
+function closeModal() {
+  modalController.dismiss();
+}
+</script>
+
+<style scoped>
+ion-content {
+  --padding-bottom: 80px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ShippingMethodActionsPopover.vue b/src/components/ShippingMethodActionsPopover.vue
new file mode 100644
index 0000000..0ffbd9e
--- /dev/null
+++ b/src/components/ShippingMethodActionsPopover.vue
@@ -0,0 +1,25 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>
+        {{ translate("Shipping methods") }}
+      </ion-list-header>
+
+      <ion-item button>
+        <ion-label>{{ translate("Change mapping") }}</ion-label>
+        <ion-icon :icon="repeatOutline" slot="end" />
+      </ion-item>
+
+      <ion-item button lines="none">
+        <ion-label color="danger">{{ translate("Remove") }}</ion-label>
+        <ion-icon :icon="removeCircleOutline" color="danger" slot="end" />
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+  
+<script setup lang="ts">
+import { IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader } from "@ionic/vue";
+import { translate } from '@/i18n';
+import { removeCircleOutline, repeatOutline } from 'ionicons/icons';
+</script>
\ No newline at end of file
diff --git a/src/components/ShopifyConnectionActionsPopover.vue b/src/components/ShopifyConnectionActionsPopover.vue
new file mode 100644
index 0000000..3b6ddf2
--- /dev/null
+++ b/src/components/ShopifyConnectionActionsPopover.vue
@@ -0,0 +1,27 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>
+        {{ "<shopifyShopName>" }}
+      </ion-list-header>
+      <ion-item button>
+        <ion-label>{{ translate("Copy credentials") }}</ion-label>
+        <ion-icon :icon="copyOutline" slot="end" />
+      </ion-item>
+      <ion-item button>
+        <ion-label>{{ translate("Favorite") }}</ion-label>
+        <ion-icon :icon="star" slot="end" />
+      </ion-item>
+      <ion-item button lines="none">
+        <ion-label color="danger">{{ translate("Deactivate shop") }}</ion-label>
+        <ion-icon :icon="unlinkOutline" color="danger" slot="end" />
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+  
+<script setup lang="ts">
+import { IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader } from "@ionic/vue";
+import { translate } from '@/i18n';
+import { copyOutline, star, unlinkOutline } from 'ionicons/icons';
+</script>
\ No newline at end of file
diff --git a/src/components/ShopifyConnectionFilters.vue b/src/components/ShopifyConnectionFilters.vue
new file mode 100644
index 0000000..09ea03b
--- /dev/null
+++ b/src/components/ShopifyConnectionFilters.vue
@@ -0,0 +1,24 @@
+<template>
+  <ion-menu type="overlay" side="end">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>{{ translate("Filters") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item lines="none">
+          <ion-icon :icon="flashOutline" slot="start" />
+          <ion-toggle>{{ translate("Show active shops") }}</ion-toggle>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+</template>
+
+<script setup lang="ts">
+import { IonContent, IonHeader, IonIcon, IonItem, IonList, IonMenu, IonTitle, IonToggle, IonToolbar } from '@ionic/vue'
+import { flashOutline } from 'ionicons/icons'
+import { translate } from "@/i18n"
+</script>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index c757e2e..2454647 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2,6 +2,7 @@
   "Add": "Add",
   "Add a custom prefix to HotWax order IDs: <inputValue>10001": "Add a custom prefix to HotWax order IDs: <inputValue>10001",
   "Add configurations": "Add configurations",
+  "Add shipping method": "Add shipping method",
   "App": "App",
   "Approval": "Approval",
   "Approve on import": "Approve on import",
@@ -13,7 +14,9 @@
   "Cancel": "Cancel",
   "Cancel order before fulfillment": "Cancel order before fulfillment",
   "Cancellations": "Cancellations",
+  "Carrier": "Carrier",
   "Change": "Change",
+  "Change mapping": "Change mapping",
   "Choosing a product identifier allows you to view products with your preferred identifiers.": "Choosing a product identifier allows you to view products with your preferred identifiers.",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Company name": "Company name",
@@ -23,25 +26,36 @@
   "Configure when no further order information is needed prior to order approval.": "Configure when no further order information is needed prior to order approval.",
   "Confirm": "Confirm",
   "Control what your customers are allowed to edit on their own when they are editing their order on Re-route Fulfillment.": "Control what your customers are allowed to edit on their own when they are editing their order on Re-route Fulfillment.",
+  "Copy credentials": "Copy credentials",
   "Country": "{count} country",
   "countries": "{count} countries",
   "Create a new product store": "Create a new product store",
   "Create deadline days": "Create deadline days",
+  "Create new": "Create new",
   "Create new product store": "Create new product store",
   "Create new tag": "Create new tag",
   "Create product store": "Create product store",
   "days count": "days count",
+  "Data mappings": "Data mappings",
+  "Deactivate shop": "Deactivate shop",
+  "Default location": "Default location",
   "Delivery address": "Delivery address",
   "Delivery method": "Delivery method",
+  "Disable": "Disable",
   "Display current physical quantity expected at locations while inventory counting.": "Display current physical quantity expected at locations while inventory counting.",
+  "Download orders": "Download orders",
+  "Download products": "Download products",
   "Edit": "Edit",
+  "Facilities": "Facilities",
   "facilities": "{count} facilities",
   "facility": "{count} facility",
   "Failed to create product store.": "Failed to create product store.",
   "Failed to remove tag.": "Failed to remove tag.",
   "Failed to update product store name.": "Failed to update product store name.",
   "Failed to update product store settings.": "Failed to update product store settings.",
+  "Favorite": "Favorite",
   "Fetching time zones": "Fetching time zones",
+  "Filters": "Filters",
   "Fulfillment": "Fulfillment",
   "Global identifier": "Global identifier",
   "Go to OMS": "Go to OMS",
@@ -51,29 +65,53 @@
   "ID prefix": "ID prefix",
   "Identifier": "Identifier",
   "Import": "Import",
+  "Import facility": "Import facility",
+  "Import new shipping methods": "Import new shipping methods",
+  "Import payments": "Import payments",
+  "Import product types": "Import product types",
+  "Import sales channel": "Import sales channel",
+  "Import shipping methods": "Import shipping methods",
+  "Import shopify locations in hotwax": "Import shopify locations in hotwax",
+  "Import shopify shipping methods in hotwax": "Import shopify shipping methods in hotwax",
+  "Internal Shopify ID": "Internal Shopify ID",
   "Inventory": "Inventory",
   "Inventory reservation": "Inventory reservation",
   "Inventory view": "Inventory view",
+  "Kg/USD": "Kg/USD",
+  "Last Shopify Order": "Last Shopify Order",
+  "Last sync on Shopify": "Last sync on Shopify",
   "Login": "Login",
   "Logging in...": "Logging in...",
   "Logout": "Logout",
   "Manage configurations": "Manage configurations",
+  "Map location": "Map location",
+  "map location with Hotwax facility": "map location with Hotwax facility",
+  "Map the default Shopify location as the inventory location in OMS, ensures that unified inventory across facilities is updated to a single location in Shopify.": "Map the default Shopify location as the inventory location in OMS, ensures that unified inventory across facilities is updated to a single location in Shopify.",
+  "Map the payment method from Shopify with OMS to make sure the orders in OMS reflects actual payment method.": "Map the payment method from Shopify with OMS to make sure the orders in OMS reflects actual payment method.",
+  "Map the product types from Shopify with OMS to make sure the orders in OMS reflects actual product types.": "Map the product types from Shopify with OMS to make sure the orders in OMS reflects actual product types.",
+  "Map the sales channel from Shopify with OMS to make sure the orders in OMS reflects actual sales channel.": "Map the sales channel from Shopify with OMS to make sure the orders in OMS reflects actual sales channel.",
+  "Map with Hotwax": "Map with Hotwax",
   "Minimum shipment threshold": "Minimum shipment threshold",
   "Name": "Name",
   "No product store found.": "No product store found.",
   "No time zone found": "No time zone found",
   "Notifications": "Nofifications",
   "OMS": "OMS",
+  "OMS Carrier and Shipping methods": "OMS Carrier and Shipping methods",
   "OMS instance": "OMS instance",
+  "Only open and unfulfilled orders will be downloaded": "Only open and unfulfilled orders will be downloaded",
   "Operating countries": "Operating countries",
   "Operating in": "Operating in",
   "Order": "Order",
+  "Order downloads": "Order downloads",
   "Order brokering": "Order brokering",
   "Order edit permissions": "Order edit permissions",
   "Order splitting": "Order splitting",
+  "Orders downloaded in last 24 hours": "Orders downloaded in last 24 hours",
   "Orders tagged with this tag will undergo line item check for fulfillment facility selection.": "Orders tagged with this tag will undergo line item check for fulfillment facility selection.",
   "Partial order rejection": "Partial order rejection",
   "Password": "Password",
+  "Payment methods": "Payment methods",
   "Pick up location": "Pick up location",
   "Pre-order computation": "Pre-order computation",
   "Pre-order group": "Pre-order group",
@@ -82,6 +120,7 @@
   "Preselected facility tag": "Preselected facility tag",
   "Primary identifier": "Primary identifier",
   "Product": "Product",
+  "Product downloads": "Product downloads",
   "Product Identifier": "Product Identifier",
   "Product store": "Product store",
   "Product store created successfully.": "Product store created successfully.",
@@ -93,14 +132,23 @@
   "Product store name updated successfully.": "Product store name updated successfully.",
   "Product store represents a brand in OMS": "Product store represents a brand in OMS",
   "Product store setting updated successfully.": "Product store setting updated successfully.",
+  "Product types": "Product types",
+  "Products downloaded in last 24 hours": "Products downloaded in last 24 hours",
+  "Quick sync": "Quick sync",
+  "Remove": "Remove",
   "Returns": "Returns",
   "Re-route fulfillment": "Re-route fulfillment",
   "Routing": "Routing",
+  "Sales channel": "Sales channel",
   "Sales order ID prefix": "Sales order ID prefix",
   "Save billing information": "Save billing information",
   "Search country": "Search country",
+  "Search facility": "Search facility",
+  "Search shipping method": "Search shipping method",
   "Search time zones": "Search time zones",
+  "Select all": "Select all",
   "Soft Allocation": "Soft Allocation",
+  "Search keys": "Search keys",
   "Secondary identifier": "Secondary identifier",
   "Select": "Select",
   "Select operating countries": "Select operating countries",
@@ -108,10 +156,21 @@
   "Send notification to Shopify": "Send notification to Shopify",
   "Settings": "Settings",
   "Setup product store": "Setup product store",
+  "Ship without tracking ID": "Ship without tracking ID",
   "shipping method": "{count} shipping method",
   "shipping methods": "{count} shipping methods",
   "Shipment method": "Shipment method",
   "Shipping facility tag": "Shipping facility tag",
+  "Shipping method": "Shipping method",
+  "Shipping methods": "Shipping methods",
+  "Shipping method types": "Shipping method types",
+  "Shopify": "Shopify",
+  "Shopify access": "Shopify access",
+  "Shopify connections": "Shopify connections",
+  "Shopify link": "Shopify link",
+  "Shopify location where the ATP numbers are consolidated for all stores in OMS.": "Shopify location where the ATP numbers are consolidated for all stores in OMS.",
+  "Shopify Shipping method": "Shopify Shipping method",
+  "Show active shops": "Show active shops",
   "Show systemic inventory": "Show systemic inventory",
   "Specify any preferred prefix to be added to internal order IDs.": "Specify any preferred prefix to be added to internal order IDs.",
   "Specify the number of days permitted for creating returns for in-store.": "Specify the number of days permitted for creating returns for in-store.",
@@ -119,6 +178,8 @@
   "Split orders into multiple groups and fulfill them from different fulfillment centers.": "Split orders into multiple groups and fulfill them from different fulfillment centers.",
   "Store billing information associated with orders in OMS.": "Store billing information associated with orders in OMS.",
   "Store pickup": "Store pickup",
+  "Sync again": "Sync again",
+  "Sync new locations from shopify": "Sync new locations from shopify",
   "Tags can't be empty.": "Tags can't be empty.",
   "Tag removed successfully.": "Tag removed successfully.",
   "Tag will hold the preselected fulfillment facility value.": "Tag will hold the preselected fulfillment facility value.",
@@ -131,6 +192,8 @@
   "Timezone": "Timezone",
   "Update": "Update",
   "Update tracking information upon order shipment in Shopify.": "Update tracking information upon order shipment in Shopify.",
+  "Upload refunds to Shopify": "Upload refunds to Shopify",
   "Username": "Username",
-  "Version:": "Version: {appVersion}"  
+  "Version:": "Version: {appVersion}",
+  "Weight/Currency": "Weight/Currency"
 }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 98830d4..9138937 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,6 +7,7 @@ import AddConfigurations from "@/views/AddConfigurations.vue";
 import ProductStoreDetails from "@/views/ProductStoreDetails.vue";
 import { DxpLogin, useAuthStore } from "@hotwax/dxp-components";
 import { loader } from '@/user-utils';
+import ShopifyConnectionDetails from "@/views/ShopifyConnectionDetails.vue";
 
 const authGuard = async (to: any, from: any, next: any) => {
   const authStore = useAuthStore()
@@ -46,6 +47,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "ProductStore",
         component: () => import("@/views/ProductStore.vue")
       },
+      {
+        path: "shopify-connections",
+        name: "ShopifyConnections",
+        component: () => import("@/views/ShopifyConnections.vue")
+      },
       {
         path: "settings",
         name: "Settings",
@@ -75,6 +81,11 @@ const routes: Array<RouteRecordRaw> = [
     component: ProductStoreDetails,
     props: true
   },
+  {
+    path: "/shopify-connection-details",
+    name: "ShopifyConnectionDetails",
+    component: ShopifyConnectionDetails
+  },
   {
     path: "/login",
     name: "Login",
diff --git a/src/theme/variables.css b/src/theme/variables.css
index 3a60b78..c2e7cab 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -317,6 +317,10 @@ ion-input.name {
   .find > .filters{
     display: unset;
   }
+
+  .mobile-only {
+    display: none;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/src/views/ShopifyConnectionDetails.vue b/src/views/ShopifyConnectionDetails.vue
new file mode 100644
index 0000000..e0d0b5d
--- /dev/null
+++ b/src/views/ShopifyConnectionDetails.vue
@@ -0,0 +1,580 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/tabs/shopify-connections"/>
+        <ion-title>{{ "<shopifyShopName>" }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <main>
+        <div class="connection-info">
+          <ion-card class="connection-info connection-details">
+            <ion-item lines="none" class="ion-margin-top">
+              <ion-label>
+                <p class="overline">{{ "SHOP ID" }}</p>
+                {{ "Shopify connection name" }}
+                <p>{{ "The <country> based <subscription> instance, operating in the <timezone> timezone, owned by <ownerName>." }}</p>
+              </ion-label>
+
+              <ion-button fill="clear" slot="end">
+                <ion-icon :icon="openOutline" slot="icon-only" />
+              </ion-button>
+            </ion-item>
+
+            <div class="ion-margin-top">
+              <ion-item>
+                <ion-icon :icon="shapesOutline" slot="start"/>
+                <ion-select :label="translate('Shopify access')" interface="popover" value="">
+                  <ion-select-option value="">{{ "Read only" }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+              <ion-item>
+                <ion-icon :icon="mapOutline" slot="start"/>
+                <ion-select :label="translate('Product store')" interface="popover" value="">
+                  <ion-select-option value="">{{ "<storeName>" }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+              <ion-item>
+                <ion-icon :icon="cloudUploadOutline" slot="start"/>
+                <ion-toggle color="danger">{{ translate("Upload refunds to Shopify") }}</ion-toggle>
+              </ion-item>
+              <ion-item>
+                <ion-icon :icon="cashOutline" slot="start"/>
+                <ion-input :label="translate('Weight/Currency')" :placeholder="translate('Kg/USD')" />
+              </ion-item>
+            </div>
+          </ion-card>
+        </div>
+
+        <section>
+          <ion-card v-if="firstSelected">
+            <ion-card-header>
+              <div>
+                <ion-card-subtitle class="overline">{{ translate("Products downloaded in last 24 hours") }}</ion-card-subtitle>
+                <ion-card-title>{{ "<count>" }}</ion-card-title>
+              </div>
+              <ion-badge>{{ "<status>" }}</ion-badge>
+            </ion-card-header>
+
+            <ion-item lines="none">
+              <ion-label>
+                <p>{{ "<percent> complete" }}</p>
+              </ion-label>
+            </ion-item>
+
+            <ion-button fill="outline" expand="block">{{ translate("Download products") }}</ion-button>
+          </ion-card>
+
+          <ion-card v-else>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Product downloads") }}</ion-card-title>
+            </ion-card-header>
+
+            <ion-item>
+              <ion-label>{{ "<count> in last 24hrs" }}</ion-label>
+              <ion-badge slot="end">{{ "5 mins ago" }}</ion-badge>
+            </ion-item>
+
+            <ion-item lines="full">
+              <ion-label>{{ "Total <count> products" }}</ion-label>
+            </ion-item>
+
+            <div class="actions">
+              <ion-button color="danger" fill="clear">{{ translate("Disable") }}</ion-button>
+              <ion-button fill="clear">{{ translate("Quick sync") }}</ion-button>
+            </div>
+          </ion-card>
+
+          <ion-card v-if="firstSelected">
+            <ion-card-header>
+              <div>
+                <ion-card-subtitle class="overline">{{ translate("Orders downloaded in last 24 hours") }}</ion-card-subtitle>
+                <ion-card-title>{{ "<count>" }}</ion-card-title>
+              </div>
+              <ion-badge>{{ "<status>" }}</ion-badge>
+            </ion-card-header>
+
+            <ion-item lines="none">
+              <ion-label>
+                <p>{{ translate("Only open and unfulfilled orders will be downloaded") }}</p>
+              </ion-label>
+            </ion-item>
+
+            <ion-item lines="none">
+              <ion-input :label="translate('Last Shopify Order')" :placeholder="translate('Internal Shopify ID')" />
+            </ion-item>
+
+            <ion-button fill="outline" expand="block">{{ translate("Download orders") }}</ion-button>
+          </ion-card>
+
+          <ion-card v-else>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Order downloads") }}</ion-card-title>
+            </ion-card-header>
+
+            <ion-item>
+              <ion-label>{{ "<count> in last 1hr" }}</ion-label>
+              <ion-badge slot="end">{{ "5 mins ago" }}</ion-badge>
+            </ion-item>
+
+            <ion-item lines="full">
+              <ion-label>{{ "Total <count> products" }}</ion-label>
+              <ion-badge>{{ "from <start>" }}</ion-badge>
+            </ion-item>
+
+            <div class="actions">
+              <ion-button color="danger" fill="clear">{{ translate("Disable") }}</ion-button>
+              <ion-button fill="clear">{{ translate("Quick sync") }}</ion-button>
+            </div>
+          </ion-card>
+
+          <ion-card v-if="firstSelected">
+            <ion-card-header>
+              <div>
+                <ion-card-subtitle class="overline">{{ "Location ID" }}</ion-card-subtitle>
+                <ion-card-title>{{ "<Inventory location>" }}</ion-card-title>
+              </div>
+              <ion-badge color="success">{{ translate("Default location") }}</ion-badge>
+            </ion-card-header>
+
+            <ion-item lines="none">
+              <ion-label>
+                <p>{{ translate("Map the default Shopify location as the inventory location in OMS, ensures that unified inventory across facilities is updated to a single location in Shopify.") }}</p>
+              </ion-label>
+            </ion-item>
+
+            <ion-button fill="outline" expand="block">{{ translate("Map location") }}</ion-button>
+          </ion-card>
+
+          <ion-card v-else>
+            <ion-card-header>
+              <div>
+                <ion-card-subtitle class="overline">{{ "<LOCATION ID>" }}</ion-card-subtitle>
+                <ion-card-title>{{ "<storeName>" }}</ion-card-title>
+              </div>
+            </ion-card-header>
+
+            <ion-item lines="none">
+              <ion-label>
+                <p>{{ translate("Shopify location where the ATP numbers are consolidated for all stores in OMS.") }}</p>
+              </ion-label>
+            </ion-item>
+
+            <ion-item lines="full">
+              <ion-label>{{ translate("Last sync on Shopify") }}</ion-label>
+              <ion-badge>{{ "5 mins ago" }}</ion-badge>
+            </ion-item>
+
+            <ion-item class="ion-no-padding">
+              <div>
+                <ion-button size="default" color="danger" fill="clear">{{ translate("Disable") }}</ion-button>
+                <ion-button size="default" fill="clear">{{ translate("Quick sync") }}</ion-button>
+              </div>
+
+              <ion-button size="default" slot="end" fill="clear" color="medium">
+                <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only" />
+              </ion-button>
+            </ion-item>
+          </ion-card>
+        </section>
+
+        <ion-segment scrollable v-model="selectedSegment">
+          <ion-segment-button value="facilities">
+            <ion-label>{{ translate("Facilities") }}</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="data-mappings">
+            <ion-label>{{ translate("Data mappings") }}</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="shipping-method-types">
+            <ion-label>{{ translate("Shipping method types") }}</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <template v-if="selectedSegment === 'facilities'">
+          <div v-if="firstSelected" class="ion-text-center">
+            <ion-button fill="outline" @click="openImportShopifyLocationsModal()">
+              <ion-icon :icon="downloadOutline" slot="start" />
+              {{ translate("Import shopify locations in hotwax") }}
+            </ion-button>
+          </div>
+          <template v-else>
+            <ion-button fill="outline">
+              <ion-icon :icon="syncOutline" slot="start" />
+              {{ translate("Sync new locations from shopify") }}
+            </ion-button>
+
+            <div class="list-item locations">
+              <ion-item lines="none">
+                <ion-icon :icon="storefrontOutline" slot="start" />
+                <ion-label>
+                  {{ "<storeName>" }}
+                  <p>{{ "<city>" }}</p>
+                </ion-label>
+              </ion-item>
+
+              <div class="tablet">
+                <ion-chip outline>{{ "<status>" }}</ion-chip>
+              </div>
+
+              <div class="tablet">
+                <ion-chip outline>
+                  <ion-icon :icon="addCircleOutline" />
+                  <ion-label>{{ translate("map location with Hotwax facility") }}</ion-label>
+                </ion-chip>
+              </div>
+
+              <ion-chip outline>
+                <ion-icon :icon="openOutline" />
+                <ion-label>{{ "Shopify location ID" }}</ion-label>
+              </ion-chip>
+            </div>
+          </template>
+        </template>
+
+        <template v-else-if="selectedSegment === 'data-mappings'">
+          <div class="data-mappings">
+            <ion-card v-if="firstSelected">
+              <ion-card-header>
+                <ion-card-title>{{ translate("Payment methods") }}</ion-card-title>
+              </ion-card-header>
+
+              <ion-item lines="full">
+                <ion-label>
+                  <p>{{ translate("Map the payment method from Shopify with OMS to make sure the orders in OMS reflects actual payment method.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <div class="actions">
+                <ion-button fill="clear">
+                  <ion-icon :icon="downloadOutline" slot="start" />
+                  <ion-label>{{ translate("Import payments") }}</ion-label>
+                </ion-button>
+              </div>
+            </ion-card>
+            
+            <ion-card v-else>
+              <ion-card-header>
+                <ion-card-title>{{ translate("Payment methods") }}</ion-card-title>
+              </ion-card-header>
+
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Map the payment method from Shopify with OMS to make sure the orders in OMS reflects actual payment method.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>{{ "<paymentMethodName>" }}</ion-label>
+                <ion-note slot="end">{{ "<hotWaxMeth>" }}</ion-note>
+                <ion-button slot="end" fill="clear" color="medium">
+                  <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only" />
+                </ion-button>
+              </ion-item>
+
+              <ion-item lines="full">
+                <ion-label>{{ "<paymentMethodName>" }}</ion-label>
+                <ion-note slot="end">{{ "<hotWaxMeth>" }}</ion-note>
+                <ion-button slot="end" fill="clear" color="medium">
+                  <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only" />
+                </ion-button>
+              </ion-item>
+
+              <div class="actions">
+                <ion-button fill="clear">{{ translate("Sync again") }}</ion-button>
+              </div>
+            </ion-card>
+
+            <ion-card v-if="firstSelected">
+              <ion-card-header>
+                <ion-card-title>{{ translate("Sales channel") }}</ion-card-title>
+              </ion-card-header>
+
+              <ion-item lines="full">
+                <ion-label>
+                  <p>{{ translate("Map the sales channel from Shopify with OMS to make sure the orders in OMS reflects actual sales channel.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <div class="actions">
+                <ion-button fill="clear">
+                  <ion-icon :icon="downloadOutline" slot="start" />
+                  <ion-label>{{ translate("Import sales channel") }}</ion-label>
+                </ion-button>
+              </div>
+            </ion-card>
+
+            <ion-card v-else>
+              <ion-card-header>
+                <ion-card-title>{{ translate("Sales channel") }}</ion-card-title>
+              </ion-card-header>
+
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Map the sales channel from Shopify with OMS to make sure the orders in OMS reflects actual sales channel.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>{{ "<salesChannel>" }}</ion-label>
+                <ion-button slot="end" fill="clear">
+                  <ion-icon :icon="linkOutline" slot="icon-only" />
+                </ion-button>
+              </ion-item>
+
+              <ion-item lines="full">
+                <ion-label>{{ "<salesChannel>" }}</ion-label>
+                <ion-button slot="end" fill="clear">
+                  <ion-icon :icon="linkOutline" slot="icon-only" />
+                </ion-button>
+              </ion-item>
+
+              <div class="actions">
+                <ion-button fill="clear">{{ translate("Sync again") }}</ion-button>
+              </div>
+            </ion-card>
+
+            <ion-card v-if="firstSelected">
+              <ion-card-header>
+                <ion-card-title>{{ translate("Product types") }}</ion-card-title>
+              </ion-card-header>
+
+              <ion-item lines="full">
+                <ion-label>
+                  <p>{{ translate("Map the product types from Shopify with OMS to make sure the orders in OMS reflects actual product types.") }}</p>
+                </ion-label>
+              </ion-item>
+              
+              <ion-item>
+                <ion-button size="default" fill="clear">
+                  <ion-icon :icon="downloadOutline" slot="start" />
+                  <ion-label>{{ translate("Import product types") }}</ion-label>
+                </ion-button>
+              </ion-item>
+            </ion-card>
+
+            <ion-card v-else>
+              <ion-card-header>
+                <ion-card-title>{{ translate("Product types") }}</ion-card-title>
+              </ion-card-header>
+
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Map the product types from Shopify with OMS to make sure the orders in OMS reflects actual product types.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>{{ "<productType>" }}</ion-label>
+                <ion-note slot="end">{{ "<hotWaxMeth>" }}</ion-note>
+                <ion-button slot="end" fill="clear" color="medium">
+                  <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only" />
+                </ion-button>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>{{ "<productType>" }}</ion-label>
+                <ion-note slot="end">{{ "<hotWaxMeth>" }}</ion-note>
+                <ion-button slot="end" fill="clear" color="medium">
+                  <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only" />
+                </ion-button>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>{{ "<productType>" }}</ion-label>
+                <ion-button slot="end" fill="clear">
+                  <ion-icon :icon="linkOutline" slot="icon-only" />
+                </ion-button>
+              </ion-item>
+
+              <ion-item lines="full">
+                <ion-label>{{ "<productType>" }}</ion-label>
+                <ion-button slot="end" fill="clear" @Click="openDataMappingLinkActionsPopover($event)">
+                  <ion-icon :icon="linkOutline" slot="icon-only" />
+                </ion-button>
+              </ion-item>
+
+              <div class="actions">
+                <ion-button fill="clear">{{ translate("Sync again") }}</ion-button>
+              </div>
+            </ion-card>
+          </div>
+        </template>
+
+        <template v-else>
+          <div v-if="firstSelected" class="ion-text-center">
+            <ion-button fill="outline" @click="openImportShippingMethodsModal()">
+              <ion-icon :icon="downloadOutline" slot="start" />
+              {{ translate("Import shopify shipping methods in hotwax") }}
+            </ion-button>
+          </div>
+          <template v-else>
+            <ion-button fill="outline" @click="openImportShippingMethodsModal()">
+              <ion-icon :icon="downloadOutline" slot="start" />
+              {{ translate("Import new shipping methods") }}
+            </ion-button>
+
+            <div class="list-item shipping-method">
+              <ion-item lines="none">
+                <ion-icon :icon="boatOutline" slot="start" />
+                <ion-label>{{ "Shopify shipping method" }}</ion-label>
+              </ion-item>
+
+              <div class="tablet">
+                <ion-chip outline>
+                  <ion-label>{{ "<Carrier>" }}</ion-label>
+                  <ion-icon :icon="shareOutline" color="primary" />
+                </ion-chip>
+              </div>
+
+              <div class="tablet">
+                <ion-chip outline @click="openAddShippingMethodsModal()">
+                  <ion-icon :icon="addCircleOutline" />
+                  <ion-label>{{ translate("Map with Hotwax") }}</ion-label>
+                </ion-chip>
+              </div>
+
+              <div class="tablet">
+                <ion-chip outline>
+                  <ion-label>{{ "Tracking required" }}</ion-label>
+                </ion-chip>
+              </div>
+
+              <ion-button fill="clear" color="medium" @click="openShippingMethodActionsPopover($event)">
+                <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+              </ion-button>
+            </div>
+          </template>
+        </template>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+
+<script setup lang="ts">
+import { IonBackButton, IonBadge, IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonNote, IonPage, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar, modalController, popoverController } from "@ionic/vue";
+import { addCircleOutline, boatOutline, cashOutline, cloudUploadOutline, downloadOutline, ellipsisVerticalOutline, linkOutline, mapOutline, openOutline, shapesOutline, shareOutline, storefrontOutline, syncOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+import { ref } from "vue";
+import ImportShopifyLocationsModal from "@/components/ImportShopifyLocationsModal.vue";
+import ImportShippingMethodsModal from "@/components/ImportShippingMethodsModal.vue";
+import ShippingMethodActionsPopover from "@/components/ShippingMethodActionsPopover.vue";
+import AddShippingMethodsModal from "@/components/AddShippingMethodsModal.vue";
+import DataMappingLinkActionsPopover from "@/components/DataMappingLinkActionsPopover.vue";
+
+const selectedSegment = ref("facilities")
+
+// Added this for UI implementation to show both screen, will remove on implementation.
+const firstSelected = ref(true);
+
+async function openImportShopifyLocationsModal() {
+  const importShopifyLocationsModal = await modalController.create({
+    component: ImportShopifyLocationsModal
+  })
+
+  importShopifyLocationsModal.present();
+}
+
+async function openImportShippingMethodsModal() {
+  const importShippingMethodsModal = await modalController.create({
+    component: ImportShippingMethodsModal
+  })
+
+  importShippingMethodsModal.present();
+}
+
+async function openAddShippingMethodsModal() {
+  const addShippingMethodsModal = await modalController.create({
+    component: AddShippingMethodsModal
+  })
+
+  addShippingMethodsModal.present();
+}
+
+async function openShippingMethodActionsPopover(event: any) {
+  const shippingMethodActionsPopover = await popoverController.create({
+    component: ShippingMethodActionsPopover,
+    event,
+    showBackdrop: false
+  });
+
+  shippingMethodActionsPopover.present()
+}
+
+async function openDataMappingLinkActionsPopover(event: any) {
+  const dataMappingLinkActionsPopover = await popoverController.create({
+    component: DataMappingLinkActionsPopover,
+    event,
+    showBackdrop: false
+  });
+
+  dataMappingLinkActionsPopover.present()
+}
+</script>
+
+<style scoped>
+section {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  align-items: start;
+}
+
+.connection-details {
+  grid-column: span 2;
+}
+
+ion-card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+ion-segment {
+  margin-top: var(--spacer-2xl);
+  justify-content: start;
+  margin-bottom: var(--spacer-lg)
+}
+
+.locations {
+  --columns-desktop: 5;
+  padding-block: var(--spacer-xs);
+}
+
+.shipping-method {
+  --columns-desktop: 6;
+}
+
+.data-mappings, .connection-info {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  align-items: start; 
+}
+
+ion-card > ion-button[expand="block"] {
+  margin-inline: var(--spacer-sm);
+  margin-bottom: var(--spacer-sm);
+}
+
+ion-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.actions {
+  display: flex;
+}
+
+.list-item > ion-item {
+  width: 100%;
+}
+
+@media screen and (min-width: 700px) {
+  ion-content > main {
+    margin: var(--spacer-lg)
+  }
+}
+</style>
diff --git a/src/views/ShopifyConnections.vue b/src/views/ShopifyConnections.vue
new file mode 100644
index 0000000..1eaeb89
--- /dev/null
+++ b/src/views/ShopifyConnections.vue
@@ -0,0 +1,130 @@
+<template>
+  <ion-page>
+    <ShopifyConnectionFilters content-id="filter-content" />
+
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>{{ translate("Shopify connections") }}</ion-title>
+        <ion-buttons slot="end">
+          <ion-button slot="icon-only">
+            <ion-icon :icon="informationCircleOutline" />
+          </ion-button>
+          <ion-menu-button menu="end" class="mobile-only">
+            <ion-icon :icon="filterOutline" />
+          </ion-menu-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="filter-content">
+      <div class="find">
+        <section class="search">
+          <ion-searchbar :placeholder="translate('Search keys')" />
+        </section>
+
+        <aside class="filters">
+          <ion-list>
+            <ion-item lines="none">
+              <ion-icon :icon="flashOutline" slot="start" />
+              <ion-toggle>{{ translate("Show active shops") }}</ion-toggle>
+            </ion-item>
+          </ion-list>
+        </aside>
+
+        <main>
+          <div class="list-item" @click="openShopifyConnectionDetails()">
+            <ion-item lines="none">
+              <ion-icon slot="start" :icon="storefrontOutline" />
+              <ion-label class="ion-text-wrap">
+                {{ "Shop ID" }}
+                <p>{{ "Shop connection name" }}</p>
+              </ion-label>
+            </ion-item>
+
+            <div class="tablet" @click.stop="">
+              <ion-chip outline>
+                <ion-label>{{ translate("Shopify link") }}</ion-label>
+                <ion-icon :icon="openOutline" color="primary" />
+              </ion-chip>
+            </div>
+
+            <div class="tablet">
+              <ion-label class="ion-text-center">
+                {{ "<product store name>" }}
+                <p>{{ "product store" }}</p>
+              </ion-label>
+            </div>
+
+            <ion-button fill="clear" color="medium" @click="openShopifyConnectionActionsPopover($event)">
+              <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+            </ion-button>
+          </div>
+
+          <div class="list-item" @click="openShopifyConnectionDetails()">
+            <ion-item lines="none">
+              <ion-icon slot="start" :icon="storefrontOutline" />
+              <ion-label class="ion-text-wrap">
+                {{ "Shop ID" }}
+                <p>{{ "Shop connection name" }}</p>
+              </ion-label>
+            </ion-item>
+
+            <div class="tablet" @click.stop="">
+              <ion-chip outline>
+                <ion-label>{{ translate("Shopify link") }}</ion-label>
+                <ion-icon :icon="openOutline" color="primary" />
+              </ion-chip>
+            </div>
+
+            <div class="tablet">
+              <ion-label class="ion-text-center">
+                {{ "<product store name>" }}
+                <p>{{ "product store" }}</p>
+              </ion-label>
+            </div>
+
+            <ion-button fill="clear" color="medium" @click="openShopifyConnectionActionsPopover($event)">
+              <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+            </ion-button>
+          </div>
+        </main>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonButtons, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonMenuButton, IonPage, IonSearchbar, IonTitle, IonToggle, IonToolbar, popoverController } from "@ionic/vue";
+import { ellipsisVerticalOutline, filterOutline, flashOutline, informationCircleOutline, openOutline, storefrontOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+import { useRouter } from "vue-router";
+import ShopifyConnectionActionsPopover from "@/components/ShopifyConnectionActionsPopover.vue";
+import ShopifyConnectionFilters from "@/components/ShopifyConnectionFilters.vue";
+
+const router = useRouter();
+
+async function openShopifyConnectionActionsPopover(event: Event) {
+  const shopifyConnectionActionsPopover = await popoverController.create({
+    component: ShopifyConnectionActionsPopover,
+    event,
+    showBackdrop: false
+  });
+
+  shopifyConnectionActionsPopover.present()
+}
+
+function openShopifyConnectionDetails() {
+  router.push({ path: "/shopify-connection-details" })
+}
+</script>
+
+<style scoped>
+.list-item {
+  --columns-desktop: 5;
+  border-bottom: var(--border-medium);
+}
+
+.list-item > ion-item {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Tabs.vue b/src/views/Tabs.vue
index cbbdb82..437cbf2 100644
--- a/src/views/Tabs.vue
+++ b/src/views/Tabs.vue
@@ -7,6 +7,10 @@
           <ion-icon :icon="storefrontOutline" />
           <ion-label>{{ translate("Product store") }}</ion-label>
         </ion-tab-button>
+        <ion-tab-button tab="shopify" href="/tabs/shopify-connections">
+          <ion-icon :icon="gitBranchOutline" />
+          <ion-label>{{ translate("Shopify") }}</ion-label>
+        </ion-tab-button>
         <ion-tab-button tab="more" href="/tabs/settings">
           <ion-icon :icon="settingsOutline" />
           <ion-label>{{ translate("Settings") }}</ion-label>
@@ -19,13 +23,13 @@
 <script setup lang="ts">
 import { translate } from "@/i18n";
 import { IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/vue";
-import { settingsOutline, storefrontOutline } from "ionicons/icons";
+import { gitBranchOutline, settingsOutline, storefrontOutline } from "ionicons/icons";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
 
 function showFooter() {
-  if (['/tabs/product-store', '/tabs/settings'].includes(router.currentRoute.value.path)) return true
+  if (['/tabs/product-store', '/tabs/settings', "/tabs/shopify-connections"].includes(router.currentRoute.value.path)) return true
   return false
 }
 </script>