diff --git a/404.html b/404.html
index 94288e04da..159f44a7ee 100644
--- a/404.html
+++ b/404.html
@@ -18,6 +18,42 @@
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:title" content="Page not found">
+  <script type="module">
+    await fetch('/metadata.json')
+      .then((res) => res.json())
+      .then(({ data = [] }) => {
+        const currentUrl = window.location.pathname;
+        const match = data.find(entry => {
+          const { URL, root, placeholders } = entry;
+          const pattern = URL.replace("**", "(.*)");
+          const regex = new RegExp(`^${pattern}$`);
+          if (regex.test(currentUrl)) {
+            return { root, placeholders };
+          }
+        });
+
+        if (!match) return;
+
+        const { root, placeholders } = match;
+        
+        if (root) {
+          const rootMeta = document.createElement('meta');
+          rootMeta.name = 'root';
+          rootMeta.content = root;
+          document.head.appendChild(rootMeta);
+        }
+
+        if (placeholders) {
+          const placeholdersMeta = document.createElement('meta');
+          placeholdersMeta.name = 'placeholders';
+          placeholdersMeta.content = placeholders;
+          document.head.appendChild(placeholdersMeta);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  </script>
   <script src="/scripts/scripts.js" type="module"></script>
   <script type="module">
     window.addEventListener('load', () => {
diff --git a/blocks/commerce-account-sidebar/commerce-account-sidebar.js b/blocks/commerce-account-sidebar/commerce-account-sidebar.js
index b953ec49e2..bd2f5a519f 100644
--- a/blocks/commerce-account-sidebar/commerce-account-sidebar.js
+++ b/blocks/commerce-account-sidebar/commerce-account-sidebar.js
@@ -2,6 +2,7 @@ import { Icon, provider as uiProvider } from '@dropins/tools/components.js';
 import { render as accountRenderer } from '@dropins/storefront-account/render.js';
 import { loadFragment } from '../fragment/fragment.js';
 import { CUSTOMER_ORDERS_PATH } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   const fragment = await loadFragment('/customer/sidebar-fragment');
@@ -11,13 +12,13 @@ export default async function decorate(block) {
     const itemConfig = {
       itemTitle: item.childNodes[0]?.textContent.trim() || 'Default Title',
       itemSubtitle: itemParams[0]?.innerText || '',
-      itemLink: itemParams[1]?.innerText || '#',
+      itemLink: itemParams[1]?.innerText || rootLink('#'),
       itemIcon: itemParams[2]?.innerText || 'Placeholder',
     };
 
     const menuItemEl = document.createElement('a');
     menuItemEl.classList.add('commerce-account-sidebar-item');
-    menuItemEl.href = itemConfig.itemLink;
+    menuItemEl.href = rootLink(itemConfig.itemLink);
 
     const isItemActive = (
       itemConfig.itemLink === CUSTOMER_ORDERS_PATH
diff --git a/blocks/commerce-addresses/commerce-addresses.js b/blocks/commerce-addresses/commerce-addresses.js
index 97e2cb7584..dd6cd3a345 100644
--- a/blocks/commerce-addresses/commerce-addresses.js
+++ b/blocks/commerce-addresses/commerce-addresses.js
@@ -5,6 +5,7 @@ import { render as accountRenderer } from '@dropins/storefront-account/render.js
 import { readBlockConfig } from '../../scripts/aem.js';
 import { checkIsAuthenticated } from '../../scripts/configs.js';
 import { CUSTOMER_ADDRESS_PATH, CUSTOMER_LOGIN_PATH } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 // Initialize
 import '../../scripts/initializers/account.js';
@@ -15,13 +16,13 @@ export default async function decorate(block) {
   } = readBlockConfig(block);
 
   if (!checkIsAuthenticated()) {
-    window.location.href = CUSTOMER_LOGIN_PATH;
+    window.location.href = rootLink(CUSTOMER_LOGIN_PATH);
   } else {
     await accountRenderer.render(Addresses, {
       minifiedView: minifiedViewConfig === 'true',
       withActionsInMinifiedView: false,
       withActionsInFullSizeView: true,
-      routeAddressesPage: () => CUSTOMER_ADDRESS_PATH,
+      routeAddressesPage: () => rootLink(CUSTOMER_ADDRESS_PATH),
     })(block);
   }
 }
diff --git a/blocks/commerce-cart/commerce-cart.js b/blocks/commerce-cart/commerce-cart.js
index bc1daf387e..65ba0fff02 100644
--- a/blocks/commerce-cart/commerce-cart.js
+++ b/blocks/commerce-cart/commerce-cart.js
@@ -16,6 +16,7 @@ import { publishShoppingCartViewEvent } from '@dropins/storefront-cart/api.js';
 import '../../scripts/initializers/cart.js';
 
 import { readBlockConfig } from '../../scripts/aem.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   // Configuration
@@ -74,8 +75,8 @@ export default async function decorate(block) {
     // Cart List
     provider.render(CartSummaryList, {
       hideHeading: hideHeading === 'true',
-      routeProduct: (product) => `/products/${product.url.urlKey}/${product.topLevelSku}`,
-      routeEmptyCartCTA: startShoppingURL ? () => startShoppingURL : undefined,
+      routeProduct: (product) => rootLink(`/products/${product.url.urlKey}/${product.topLevelSku}`),
+      routeEmptyCartCTA: startShoppingURL ? () => rootLink(startShoppingURL) : undefined,
       maxItems: parseInt(maxItems, 10) || undefined,
       attributesToHide: hideAttributes.split(',').map((attr) => attr.trim().toLowerCase()),
       enableUpdateItemQuantity: enableUpdateItemQuantity === 'true',
@@ -84,8 +85,8 @@ export default async function decorate(block) {
 
     // Order Summary
     provider.render(OrderSummary, {
-      routeProduct: (product) => `/products/${product.url.urlKey}/${product.topLevelSku}`,
-      routeCheckout: checkoutURL ? () => checkoutURL : undefined,
+      routeProduct: (product) => rootLink(`/products/${product.url.urlKey}/${product.topLevelSku}`),
+      routeCheckout: checkoutURL ? () => rootLink(checkoutURL) : undefined,
       slots: {
         EstimateShipping: async (ctx) => {
           if (enableEstimateShipping === 'true') {
@@ -106,7 +107,7 @@ export default async function decorate(block) {
 
     // Empty Cart
     provider.render(EmptyCart, {
-      routeCTA: startShoppingURL ? () => startShoppingURL : undefined,
+      routeCTA: startShoppingURL ? () => rootLink(startShoppingURL) : undefined,
     })($emptyCart),
   ]);
 
diff --git a/blocks/commerce-checkout/commerce-checkout.js b/blocks/commerce-checkout/commerce-checkout.js
index 7c6405e869..03c8176be4 100644
--- a/blocks/commerce-checkout/commerce-checkout.js
+++ b/blocks/commerce-checkout/commerce-checkout.js
@@ -78,7 +78,8 @@ import {
   scrollToElement,
   setAddressOnCart,
 } from '../../scripts/checkout.js';
-import { authPrivacyPolicyConsentSlot } from '../../scripts/constants.js';
+import { authPrivacyPolicyConsentSlot, SUPPORT_PATH } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 function createMetaTag(property, content, type) {
   if (!property || !type) {
@@ -249,7 +250,7 @@ export default async function decorate(block) {
     })($serverError),
 
     CheckoutProvider.render(OutOfStock, {
-      routeCart: () => '/cart',
+      routeCart: () => rootLink('/cart'),
       onCartProductsUpdate: (items) => {
         cartApi.updateProductsFromCart(items).catch(console.error);
       },
@@ -383,7 +384,7 @@ export default async function decorate(block) {
           );
           const editCartLink = document.createElement('a');
           editCartLink.classList.add('cart-summary-list__edit');
-          editCartLink.href = '/cart';
+          editCartLink.href = rootLink('/cart');
           editCartLink.rel = 'noreferrer';
           editCartLink.innerText = 'Edit';
 
@@ -481,7 +482,7 @@ export default async function decorate(block) {
     if (emptyCart) return;
 
     emptyCart = await CartProvider.render(EmptyCart, {
-      routeCTA: () => '/',
+      routeCTA: () => rootLink('/'),
     })($emptyCart);
 
     $content.classList.add('checkout__content--empty');
@@ -798,8 +799,8 @@ export default async function decorate(block) {
     }) => {
       const signUpForm = document.createElement('div');
       AuthProvider.render(SignUp, {
-        routeSignIn: () => '/customer/login',
-        routeRedirectOnEmailConfirmationClose: () => '/customer/account',
+        routeSignIn: () => rootLink('/customer/login'),
+        routeRedirectOnEmailConfirmationClose: () => rootLink('/customer/account'),
         inputsDefaultValueSet,
         addressesData,
         slots: {
@@ -830,7 +831,7 @@ export default async function decorate(block) {
         <p>
           Need help?
           <a
-            href="/support"
+            href="${rootLink(SUPPORT_PATH)}"
             rel="noreferrer"
             class="order-confirmation-footer__contact-support-link"
             data-testid="order-confirmation-footer__contact-support-link"
@@ -852,7 +853,7 @@ export default async function decorate(block) {
       size: 'medium',
       variant: 'primary',
       type: 'submit',
-      href: '/',
+      href: rootLink('/'),
     })($orderConfirmationFooterContinueBtn);
   };
 
@@ -891,8 +892,8 @@ export default async function decorate(block) {
     const encodedOrderNumber = encodeURIComponent(orderNumber);
 
     const url = token
-      ? `/order-details?orderRef=${encodedOrderRef}`
-      : `/order-details?orderRef=${encodedOrderRef}&orderNumber=${encodedOrderNumber}`;
+      ? rootLink(`/order-details?orderRef=${encodedOrderRef}`)
+      : rootLink(`/order-details?orderRef=${encodedOrderRef}&orderNumber=${encodedOrderNumber}`);
 
     window.history.pushState({}, '', url);
 
diff --git a/blocks/commerce-confirm-account/commerce-confirm-account.js b/blocks/commerce-confirm-account/commerce-confirm-account.js
index 0de8fa2b13..a820e57f63 100644
--- a/blocks/commerce-confirm-account/commerce-confirm-account.js
+++ b/blocks/commerce-confirm-account/commerce-confirm-account.js
@@ -7,17 +7,18 @@ import { render as authRenderer } from '@dropins/storefront-auth/render.js';
 import { Button, provider as UI } from '@dropins/tools/components.js';
 import { checkIsAuthenticated } from '../../scripts/configs.js';
 import { CUSTOMER_ACCOUNT_PATH, CUSTOMER_FORGOTPASSWORD_PATH } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 // Initialize
 import '../../scripts/initializers/auth.js';
 
 export default async function decorate(block) {
   if (checkIsAuthenticated()) {
-    window.location.href = CUSTOMER_ACCOUNT_PATH;
+    window.location.href = rootLink(CUSTOMER_ACCOUNT_PATH);
   } else {
     await authRenderer.render(SignIn, {
       enableEmailConfirmation: true,
-      routeForgotPassword: () => CUSTOMER_FORGOTPASSWORD_PATH,
+      routeForgotPassword: () => rootLink(CUSTOMER_FORGOTPASSWORD_PATH),
       slots: {
         SuccessNotification: (ctx) => {
           const userName = ctx?.isSuccessful?.userName || '';
@@ -37,7 +38,7 @@ export default async function decorate(block) {
                   children: 'My Account',
 
                   onClick: () => {
-                    window.location.href = CUSTOMER_ACCOUNT_PATH;
+                    window.location.href = rootLink(CUSTOMER_ACCOUNT_PATH);
                   },
                 })(primaryBtn);
 
@@ -53,7 +54,7 @@ export default async function decorate(block) {
                   variant: 'tertiary',
                   onClick: async () => {
                     await authApi.revokeCustomerToken();
-                    window.location.href = '/';
+                    window.location.href = rootLink('/');
                   },
                 })(secondaryButton);
 
diff --git a/blocks/commerce-create-account/commerce-create-account.js b/blocks/commerce-create-account/commerce-create-account.js
index 21af0163e1..f9a905f74a 100644
--- a/blocks/commerce-create-account/commerce-create-account.js
+++ b/blocks/commerce-create-account/commerce-create-account.js
@@ -8,18 +8,19 @@ import {
   CUSTOMER_ACCOUNT_PATH,
   CUSTOMER_LOGIN_PATH,
 } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 // Initialize
 import '../../scripts/initializers/auth.js';
 
 export default async function decorate(block) {
   if (checkIsAuthenticated()) {
-    window.location.href = CUSTOMER_ACCOUNT_PATH;
+    window.location.href = rootLink(CUSTOMER_ACCOUNT_PATH);
   } else {
     await authRenderer.render(SignUp, {
       hideCloseBtnOnEmailConfirmation: true,
-      routeSignIn: () => CUSTOMER_LOGIN_PATH,
-      routeRedirectOnSignIn: () => CUSTOMER_ACCOUNT_PATH,
+      routeSignIn: () => rootLink(CUSTOMER_LOGIN_PATH),
+      routeRedirectOnSignIn: () => rootLink(CUSTOMER_ACCOUNT_PATH),
       slots: {
         ...authPrivacyPolicyConsentSlot,
       },
diff --git a/blocks/commerce-create-password/commerce-create-password.js b/blocks/commerce-create-password/commerce-create-password.js
index 93dac6530d..020b3462ea 100644
--- a/blocks/commerce-create-password/commerce-create-password.js
+++ b/blocks/commerce-create-password/commerce-create-password.js
@@ -7,17 +7,18 @@ import { Button, provider as UI } from '@dropins/tools/components.js';
 import * as authApi from '@dropins/storefront-auth/api.js';
 import { checkIsAuthenticated } from '../../scripts/configs.js';
 import { CUSTOMER_LOGIN_PATH, CUSTOMER_ACCOUNT_PATH } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 // Initialize
 import '../../scripts/initializers/auth.js';
 
 export default async function decorate(block) {
   if (checkIsAuthenticated()) {
-    window.location.href = CUSTOMER_ACCOUNT_PATH;
+    window.location.href = rootLink(CUSTOMER_ACCOUNT_PATH);
   } else {
     await authRenderer.render(UpdatePassword, {
-      routeWrongUrlRedirect: () => CUSTOMER_LOGIN_PATH,
-      routeSignInPage: () => CUSTOMER_LOGIN_PATH,
+      routeWrongUrlRedirect: () => rootLink(CUSTOMER_LOGIN_PATH),
+      routeSignInPage: () => rootLink(CUSTOMER_LOGIN_PATH),
       slots: {
         SuccessNotification: (ctx) => {
           const userName = ctx?.isSuccessful?.userName || '';
@@ -37,7 +38,7 @@ export default async function decorate(block) {
                   children: 'My Account',
 
                   onClick: () => {
-                    window.location.href = CUSTOMER_ACCOUNT_PATH;
+                    window.location.href = rootLink(CUSTOMER_ACCOUNT_PATH);
                   },
                 })(primaryBtn);
 
@@ -53,7 +54,7 @@ export default async function decorate(block) {
                   variant: 'tertiary',
                   onClick: async () => {
                     await authApi.revokeCustomerToken();
-                    window.location.href = '/';
+                    window.location.href = rootLink('/');
                   },
                 })(secondaryButton);
 
diff --git a/blocks/commerce-create-return/commerce-create-return.js b/blocks/commerce-create-return/commerce-create-return.js
index 9b4c30994e..b6e8d889e2 100644
--- a/blocks/commerce-create-return/commerce-create-return.js
+++ b/blocks/commerce-create-return/commerce-create-return.js
@@ -4,6 +4,7 @@ import { render as orderRenderer } from '@dropins/storefront-order/render.js';
 import { CreateReturn } from '@dropins/storefront-order/containers/CreateReturn.js';
 import { checkIsAuthenticated } from '../../scripts/configs.js';
 import { ORDER_DETAILS_PATH, CUSTOMER_ORDER_DETAILS_PATH } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 // Initialize
 import '../../scripts/initializers/order.js';
@@ -15,7 +16,7 @@ export default async function decorate(block) {
       const encodedOrderRef = encodeURIComponent(orderRef);
       const path = checkIsAuthenticated() ? CUSTOMER_ORDER_DETAILS_PATH : ORDER_DETAILS_PATH;
 
-      return `${path}?orderRef=${encodedOrderRef}`;
+      return rootLink(`${path}?orderRef=${encodedOrderRef}`);
     },
   })(block);
 }
diff --git a/blocks/commerce-customer-information/commerce-customer-information.js b/blocks/commerce-customer-information/commerce-customer-information.js
index f8c434b62d..0b1330c7cb 100644
--- a/blocks/commerce-customer-information/commerce-customer-information.js
+++ b/blocks/commerce-customer-information/commerce-customer-information.js
@@ -4,13 +4,14 @@ import CustomerInformation from '@dropins/storefront-account/containers/Customer
 import { render as accountRenderer } from '@dropins/storefront-account/render.js';
 import { checkIsAuthenticated } from '../../scripts/configs.js';
 import { CUSTOMER_LOGIN_PATH } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 // Initialize
 import '../../scripts/initializers/account.js';
 
 export default async function decorate(block) {
   if (!checkIsAuthenticated()) {
-    window.location.href = CUSTOMER_LOGIN_PATH;
+    window.location.href = rootLink(CUSTOMER_LOGIN_PATH);
   } else {
     await accountRenderer.render(CustomerInformation, {})(block);
   }
diff --git a/blocks/commerce-forgot-password/commerce-forgot-password.js b/blocks/commerce-forgot-password/commerce-forgot-password.js
index 2adce6cec8..fb2075bf0e 100644
--- a/blocks/commerce-forgot-password/commerce-forgot-password.js
+++ b/blocks/commerce-forgot-password/commerce-forgot-password.js
@@ -5,20 +5,21 @@ import { render as authRenderer } from '@dropins/storefront-auth/render.js';
 import { events } from '@dropins/tools/event-bus.js';
 import { checkIsAuthenticated } from '../../scripts/configs.js';
 import { CUSTOMER_LOGIN_PATH, CUSTOMER_ACCOUNT_PATH } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 // Initialize
 import '../../scripts/initializers/auth.js';
 
 export default async function decorate(block) {
   if (checkIsAuthenticated()) {
-    window.location.href = CUSTOMER_ACCOUNT_PATH;
+    window.location.href = rootLink(CUSTOMER_ACCOUNT_PATH);
   } else {
     await authRenderer.render(ResetPassword, {
-      routeSignIn: () => CUSTOMER_LOGIN_PATH,
+      routeSignIn: () => rootLink(CUSTOMER_LOGIN_PATH),
     })(block);
   }
 
   events.on('authenticated', (authenticated) => {
-    if (authenticated) window.location.href = CUSTOMER_ACCOUNT_PATH;
+    if (authenticated) window.location.href = rootLink(CUSTOMER_ACCOUNT_PATH);
   });
 }
diff --git a/blocks/commerce-login/commerce-login.js b/blocks/commerce-login/commerce-login.js
index 691264024a..6d7ea3147a 100644
--- a/blocks/commerce-login/commerce-login.js
+++ b/blocks/commerce-login/commerce-login.js
@@ -4,17 +4,18 @@ import { SignIn } from '@dropins/storefront-auth/containers/SignIn.js';
 import { render as authRenderer } from '@dropins/storefront-auth/render.js';
 import { checkIsAuthenticated } from '../../scripts/configs.js';
 import { CUSTOMER_FORGOTPASSWORD_PATH, CUSTOMER_ACCOUNT_PATH } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 // Initialize
 import '../../scripts/initializers/auth.js';
 
 export default async function decorate(block) {
   if (checkIsAuthenticated()) {
-    window.location.href = CUSTOMER_ACCOUNT_PATH;
+    window.location.href = rootLink(CUSTOMER_ACCOUNT_PATH);
   } else {
     await authRenderer.render(SignIn, {
-      routeForgotPassword: () => CUSTOMER_FORGOTPASSWORD_PATH,
-      routeRedirectOnSignIn: () => CUSTOMER_ACCOUNT_PATH,
+      routeForgotPassword: () => rootLink(CUSTOMER_FORGOTPASSWORD_PATH),
+      routeRedirectOnSignIn: () => rootLink(CUSTOMER_ACCOUNT_PATH),
     })(block);
   }
 }
diff --git a/blocks/commerce-mini-cart/commerce-mini-cart.js b/blocks/commerce-mini-cart/commerce-mini-cart.js
index 11c05b094f..cb51d1f4f3 100644
--- a/blocks/commerce-mini-cart/commerce-mini-cart.js
+++ b/blocks/commerce-mini-cart/commerce-mini-cart.js
@@ -5,6 +5,7 @@ import MiniCart from '@dropins/storefront-cart/containers/MiniCart.js';
 import '../../scripts/initializers/cart.js';
 
 import { readBlockConfig } from '../../scripts/aem.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   const {
@@ -16,9 +17,9 @@ export default async function decorate(block) {
   block.innerHTML = '';
 
   return provider.render(MiniCart, {
-    routeEmptyCartCTA: startShoppingURL ? () => startShoppingURL : undefined,
-    routeCart: cartURL ? () => cartURL : undefined,
-    routeCheckout: checkoutURL ? () => checkoutURL : undefined,
-    routeProduct: (product) => `/products/${product.url.urlKey}/${product.topLevelSku}`,
+    routeEmptyCartCTA: startShoppingURL ? () => rootLink(startShoppingURL) : undefined,
+    routeCart: cartURL ? () => rootLink(cartURL) : undefined,
+    routeCheckout: checkoutURL ? () => rootLink(checkoutURL) : undefined,
+    routeProduct: (product) => rootLink(`/products/${product.url.urlKey}/${product.topLevelSku}`),
   })(block);
 }
diff --git a/blocks/commerce-order-header/commerce-order-header.js b/blocks/commerce-order-header/commerce-order-header.js
index 843eb6e0fe..c96e6e83b5 100644
--- a/blocks/commerce-order-header/commerce-order-header.js
+++ b/blocks/commerce-order-header/commerce-order-header.js
@@ -4,6 +4,7 @@ import { events } from '@dropins/tools/event-bus.js';
 import { Header, provider as uiProvider } from '@dropins/tools/components.js';
 import { CUSTOMER_ORDER_DETAILS_PATH, CUSTOMER_ORDERS_PATH } from '../../scripts/constants.js';
 import { fetchPlaceholders } from '../../scripts/aem.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   block.innerHTML = '';
@@ -17,7 +18,7 @@ export default async function decorate(block) {
     const link = document.createElement('a');
 
     link.innerText = placeholders?.Custom?.CommerceOrderHeader?.backToAllOrders;
-    link.href = CUSTOMER_ORDERS_PATH;
+    link.href = rootLink(CUSTOMER_ORDERS_PATH);
     link.classList.add('orders-list-link');
 
     block.appendChild(link);
diff --git a/blocks/commerce-order-product-list/commerce-order-product-list.js b/blocks/commerce-order-product-list/commerce-order-product-list.js
index 20e641d248..1bd78982bd 100644
--- a/blocks/commerce-order-product-list/commerce-order-product-list.js
+++ b/blocks/commerce-order-product-list/commerce-order-product-list.js
@@ -5,9 +5,10 @@ import { OrderProductList } from '@dropins/storefront-order/containers/OrderProd
 
 // Initialize
 import '../../scripts/initializers/order.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   await orderRenderer.render(OrderProductList, {
-    routeProductDetails: (product) => `/products/${product.productUrlKey}/${product.product.sku}`,
+    routeProductDetails: (product) => rootLink(`/products/${product.productUrlKey}/${product.product.sku}`),
   })(block);
 }
diff --git a/blocks/commerce-order-returns/commerce-order-returns.js b/blocks/commerce-order-returns/commerce-order-returns.js
index 1f2658f469..326a31e5c9 100644
--- a/blocks/commerce-order-returns/commerce-order-returns.js
+++ b/blocks/commerce-order-returns/commerce-order-returns.js
@@ -11,6 +11,7 @@ import {
 
 // Initialize
 import '../../scripts/initializers/order.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   const isAuthenticated = checkIsAuthenticated();
@@ -32,8 +33,8 @@ export default async function decorate(block) {
 
       const encodedOrderRef = encodeURIComponent(orderRefFromUrl || newOrderRef);
 
-      return `${returnDetailsPath}?orderRef=${encodedOrderRef}&returnRef=${returnNumber}`;
+      return rootLink(`${returnDetailsPath}?orderRef=${encodedOrderRef}&returnRef=${returnNumber}`);
     },
-    routeProductDetails: (productData) => (productData?.product ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
+    routeProductDetails: (productData) => (productData?.product ? rootLink(`/products/${productData.product.urlKey}/${productData.product.sku}`) : rootLink('#')),
   })(block);
 }
diff --git a/blocks/commerce-order-status/commerce-order-status.js b/blocks/commerce-order-status/commerce-order-status.js
index 313f56686e..d6852d7137 100644
--- a/blocks/commerce-order-status/commerce-order-status.js
+++ b/blocks/commerce-order-status/commerce-order-status.js
@@ -7,6 +7,7 @@ import { CREATE_RETURN_PATH, CUSTOMER_CREATE_RETURN_PATH } from '../../scripts/c
 
 // Initialize
 import '../../scripts/initializers/order.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   await orderRenderer.render(OrderStatus, {
@@ -19,8 +20,8 @@ export default async function decorate(block) {
 
       const encodedOrderRef = encodeURIComponent(orderRefFromUrl || newOrderRef);
 
-      return checkIsAuthenticated() ? `${CUSTOMER_CREATE_RETURN_PATH}?orderRef=${encodedOrderRef}` : `${CREATE_RETURN_PATH}?orderRef=${encodedOrderRef}`;
+      return checkIsAuthenticated() ? rootLink(`${CUSTOMER_CREATE_RETURN_PATH}?orderRef=${encodedOrderRef}`) : rootLink(`${CREATE_RETURN_PATH}?orderRef=${encodedOrderRef}`);
     },
-    routeOnSuccess: () => '/cart',
+    routeOnSuccess: () => rootLink('/cart'),
   })(block);
 }
diff --git a/blocks/commerce-orders-list/commerce-orders-list.js b/blocks/commerce-orders-list/commerce-orders-list.js
index f84066106c..ad4a552a9f 100644
--- a/blocks/commerce-orders-list/commerce-orders-list.js
+++ b/blocks/commerce-orders-list/commerce-orders-list.js
@@ -14,12 +14,13 @@ import {
 
 // Initialize
 import '../../scripts/initializers/account.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   const { 'minified-view': minifiedViewConfig = 'false' } = readBlockConfig(block);
 
   if (!checkIsAuthenticated()) {
-    window.location.href = CUSTOMER_LOGIN_PATH;
+    window.location.href = rootLink(CUSTOMER_LOGIN_PATH);
   } else {
     await accountRenderer.render(OrdersList, {
       minifiedView: minifiedViewConfig === 'true',
@@ -29,10 +30,10 @@ export default async function decorate(block) {
         }
         return '';
       },
-      routeOrdersList: () => CUSTOMER_ORDERS_PATH,
-      routeOrderDetails: (orderNumber) => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
-      routeReturnDetails: ({ orderNumber, returnNumber }) => `${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`,
-      routeOrderProduct: (productData) => (productData?.product ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
+      routeOrdersList: () => rootLink(CUSTOMER_ORDERS_PATH),
+      routeOrderDetails: (orderNumber) => rootLink(`${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`),
+      routeReturnDetails: ({ orderNumber, returnNumber }) => rootLink(`${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`),
+      routeOrderProduct: (productData) => (productData?.product ? rootLink(`/products/${productData.product.urlKey}/${productData.product.sku}`) : '#'),
     })(block);
   }
 }
diff --git a/blocks/commerce-return-header/commerce-return-header.js b/blocks/commerce-return-header/commerce-return-header.js
index 47bf19ea4f..1b81dae4bf 100644
--- a/blocks/commerce-return-header/commerce-return-header.js
+++ b/blocks/commerce-return-header/commerce-return-header.js
@@ -4,6 +4,7 @@ import { events } from '@dropins/tools/event-bus.js';
 import { Header, provider as uiProvider } from '@dropins/tools/components.js';
 import { CUSTOMER_RETURN_DETAILS_PATH, CUSTOMER_RETURNS_PATH } from '../../scripts/constants.js';
 import { fetchPlaceholders } from '../../scripts/aem.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   block.innerHTML = '';
@@ -17,7 +18,7 @@ export default async function decorate(block) {
     const link = document.createElement('a');
 
     link.innerText = placeholders?.Custom?.CommerceReturnHeader?.backToAllReturns;
-    link.href = CUSTOMER_RETURNS_PATH;
+    link.href = rootLink(CUSTOMER_RETURNS_PATH);
     link.classList.add('returns-list-header');
 
     block.appendChild(link);
diff --git a/blocks/commerce-returns-list/commerce-returns-list.js b/blocks/commerce-returns-list/commerce-returns-list.js
index 3a18d05424..231a238651 100644
--- a/blocks/commerce-returns-list/commerce-returns-list.js
+++ b/blocks/commerce-returns-list/commerce-returns-list.js
@@ -4,6 +4,7 @@ import { render as orderRenderer } from '@dropins/storefront-order/render.js';
 import ReturnsList from '@dropins/storefront-order/containers/ReturnsList.js';
 import { readBlockConfig } from '../../scripts/aem.js';
 import { checkIsAuthenticated } from '../../scripts/configs.js';
+import { rootLink } from '../../scripts/scripts.js';
 import {
   CUSTOMER_LOGIN_PATH,
   CUSTOMER_RETURN_DETAILS_PATH,
@@ -21,7 +22,7 @@ export default async function decorate(block) {
   } = readBlockConfig(block);
 
   if (!checkIsAuthenticated()) {
-    window.location.href = CUSTOMER_LOGIN_PATH;
+    window.location.href = rootLink(CUSTOMER_LOGIN_PATH);
   } else {
     await orderRenderer.render(ReturnsList, {
       minifiedView: minifiedViewConfig === 'true',
@@ -31,10 +32,10 @@ export default async function decorate(block) {
         }
         return '';
       },
-      routeReturnDetails: ({ orderNumber, returnNumber }) => `${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`,
-      routeOrderDetails: ({ orderNumber }) => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
-      routeReturnsList: () => CUSTOMER_RETURNS_PATH,
-      routeProductDetails: (productData) => (productData?.product ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
+      routeReturnDetails: ({ orderNumber, returnNumber }) => rootLink(`${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`),
+      routeOrderDetails: ({ orderNumber }) => rootLink(`${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`),
+      routeReturnsList: () => rootLink(CUSTOMER_RETURNS_PATH),
+      routeProductDetails: (productData) => (productData?.product ? rootLink(`/products/${productData.product.urlKey}/${productData.product.sku}`) : '#'),
     })(block);
   }
 }
diff --git a/blocks/commerce-search-order/commerce-search-order.js b/blocks/commerce-search-order/commerce-search-order.js
index 059207de7e..72301d3731 100644
--- a/blocks/commerce-search-order/commerce-search-order.js
+++ b/blocks/commerce-search-order/commerce-search-order.js
@@ -11,6 +11,7 @@ import { CUSTOMER_ORDER_DETAILS_PATH, ORDER_DETAILS_PATH } from '../../scripts/c
 // Initialize
 import '../../scripts/initializers/auth.js';
 import '../../scripts/initializers/order.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 const renderSignIn = async (element, email, orderNumber) => authRenderer.render(SignIn, {
   initialEmailValue: email,
@@ -22,7 +23,7 @@ const renderSignIn = async (element, email, orderNumber) => authRenderer.render(
     primaryButtonText: 'View order',
   },
   routeForgotPassword: () => 'reset-password.html',
-  routeRedirectOnSignIn: () => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
+  routeRedirectOnSignIn: () => rootLink(`${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`),
 })(element);
 
 export default async function decorate(block) {
@@ -48,8 +49,8 @@ export default async function decorate(block) {
 
         return true;
       },
-      routeCustomerOrder: () => CUSTOMER_ORDER_DETAILS_PATH,
-      routeGuestOrder: () => ORDER_DETAILS_PATH,
+      routeCustomerOrder: () => rootLink(CUSTOMER_ORDER_DETAILS_PATH),
+      routeGuestOrder: () => rootLink(ORDER_DETAILS_PATH),
       onError: async (errorInformation) => {
         console.info('errorInformation', errorInformation);
       },
@@ -67,8 +68,8 @@ export default async function decorate(block) {
 
       return true;
     },
-    routeCustomerOrder: () => CUSTOMER_ORDER_DETAILS_PATH,
-    routeGuestOrder: () => ORDER_DETAILS_PATH,
+    routeCustomerOrder: () => rootLink(CUSTOMER_ORDER_DETAILS_PATH),
+    routeGuestOrder: () => rootLink(ORDER_DETAILS_PATH),
     onError: async (errorInformation) => {
       console.info('errorInformation', errorInformation);
     },
diff --git a/blocks/commerce-shipping-status/commerce-shipping-status.js b/blocks/commerce-shipping-status/commerce-shipping-status.js
index 14ae426af1..a221ab7cc9 100644
--- a/blocks/commerce-shipping-status/commerce-shipping-status.js
+++ b/blocks/commerce-shipping-status/commerce-shipping-status.js
@@ -3,6 +3,7 @@
 import { render as orderRenderer } from '@dropins/storefront-order/render.js';
 import { ShippingStatus } from '@dropins/storefront-order/containers/ShippingStatus.js';
 import { UPS_TRACKING_URL } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 // Initialize
 import '../../scripts/initializers/order.js';
@@ -17,10 +18,10 @@ export default async function decorate(block) {
     },
     routeProductDetails: (data) => {
       if (data?.orderItem) {
-        return `/products/${data?.orderItem?.productUrlKey}/${data?.orderItem?.product?.sku}`;
+        return rootLink(`/products/${data?.orderItem?.productUrlKey}/${data?.orderItem?.product?.sku}`);
       }
       if (data?.product) {
-        return `/products/${data?.product?.urlKey}/${data?.product?.sku}`;
+        return rootLink(`/products/${data?.product?.urlKey}/${data?.product?.sku}`);
       }
       return '#';
     },
diff --git a/blocks/fragment/fragment.js b/blocks/fragment/fragment.js
index ed8ba22f6d..c86061cd83 100644
--- a/blocks/fragment/fragment.js
+++ b/blocks/fragment/fragment.js
@@ -7,6 +7,7 @@
 
 import {
   decorateMain,
+  getRootPath,
 } from '../../scripts/scripts.js';
 
 import {
@@ -20,7 +21,9 @@ import {
  */
 export async function loadFragment(path) {
   if (path && path.startsWith('/')) {
-    const resp = await fetch(`${path}.plain.html`);
+    const root = getRootPath().replace(/\/$/, '');
+    const url = `${root}${path}.plain.html`;
+    const resp = await fetch(url);
     if (resp.ok) {
       const main = document.createElement('main');
       main.innerHTML = await resp.text();
diff --git a/blocks/header/renderAuthCombine.js b/blocks/header/renderAuthCombine.js
index 1fc645ab74..c425530577 100644
--- a/blocks/header/renderAuthCombine.js
+++ b/blocks/header/renderAuthCombine.js
@@ -13,10 +13,11 @@ import {
   CUSTOMER_FORGOTPASSWORD_PATH,
   CUSTOMER_LOGIN_PATH,
 } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 const signInFormConfig = {
   renderSignUpLink: true,
-  routeForgotPassword: () => CUSTOMER_FORGOTPASSWORD_PATH,
+  routeForgotPassword: () => rootLink(CUSTOMER_FORGOTPASSWORD_PATH),
   slots: {
     SuccessNotification: (ctx) => {
       const userName = ctx?.isSuccessful?.userName || '';
@@ -36,7 +37,7 @@ const signInFormConfig = {
               children: 'My Account',
 
               onClick: () => {
-                window.location.href = CUSTOMER_ACCOUNT_PATH;
+                window.location.href = rootLink(CUSTOMER_ACCOUNT_PATH);
               },
             })(primaryBtn);
 
@@ -52,7 +53,7 @@ const signInFormConfig = {
               variant: 'tertiary',
               onClick: async () => {
                 await authApi.revokeCustomerToken();
-                window.location.href = '/';
+                window.location.href = rootLink('/');
               },
             })(secondaryButton);
 
@@ -67,8 +68,8 @@ const signInFormConfig = {
 };
 
 const signUpFormConfig = {
-  routeSignIn: () => CUSTOMER_LOGIN_PATH,
-  routeRedirectOnSignIn: () => CUSTOMER_ACCOUNT_PATH,
+  routeSignIn: () => rootLink(CUSTOMER_LOGIN_PATH),
+  routeRedirectOnSignIn: () => rootLink(CUSTOMER_ACCOUNT_PATH),
   isAutoSignInEnabled: false,
   slots: {
     SuccessNotification: (ctx) => {
@@ -87,7 +88,7 @@ const signUpFormConfig = {
               children: 'Sign in',
 
               onClick: () => {
-                window.location.href = CUSTOMER_LOGIN_PATH;
+                window.location.href = rootLink(CUSTOMER_LOGIN_PATH);
               },
             })(primaryBtn);
 
@@ -102,7 +103,7 @@ const signUpFormConfig = {
               children: 'Home',
               variant: 'tertiary',
               onClick: () => {
-                window.location.href = '/';
+                window.location.href = rootLink('/');
               },
             })(secondaryButton);
 
@@ -117,7 +118,7 @@ const signUpFormConfig = {
 };
 
 const resetPasswordFormConfig = {
-  routeSignIn: () => CUSTOMER_LOGIN_PATH,
+  routeSignIn: () => rootLink(CUSTOMER_LOGIN_PATH),
 };
 
 const onHeaderLinkClick = (element) => {
@@ -125,7 +126,7 @@ const onHeaderLinkClick = (element) => {
   const originalViewportContent = viewportMeta.getAttribute('content');
 
   if (getCookie('auth_dropin_firstname')) {
-    window.location.href = CUSTOMER_ACCOUNT_PATH;
+    window.location.href = rootLink(CUSTOMER_ACCOUNT_PATH);
     return;
   }
   const signInModal = document.createElement('div');
@@ -268,8 +269,8 @@ const renderAuthCombine = (navSections, toggleMenu) => {
         popupMenuContainer.insertAdjacentHTML(
           'afterend',
           `<ul class="popupMenuUrlList">
-              <li><a href={CUSTOMER_ACCOUNT_PATH}>My Account</a></li>
-              <li><a href="/products/hollister-backyard-sweatshirt/MH05">Product page</a></li>
+              <li><a href="${rootLink(CUSTOMER_ACCOUNT_PATH)}">My Account</a></li>
+              <li><a href="${rootLink('/products/hollister-backyard-sweatshirt/MH05')}">Product page</a></li>
               <li><button class="logoutButton">Logout</button></li>
             </ul>`,
         );
diff --git a/blocks/header/renderAuthDropdown.js b/blocks/header/renderAuthDropdown.js
index 24fee542ac..e1e057f340 100644
--- a/blocks/header/renderAuthDropdown.js
+++ b/blocks/header/renderAuthDropdown.js
@@ -5,6 +5,7 @@ import { SignIn } from '@dropins/storefront-auth/containers/SignIn.js';
 import { events } from '@dropins/tools/event-bus.js';
 import { getCookie } from '../../scripts/configs.js';
 import { CUSTOMER_FORGOTPASSWORD_PATH } from '../../scripts/constants.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 function checkAndRedirect(redirections) {
   Object.entries(redirections).some(([currentPath, redirectPath]) => {
@@ -20,7 +21,7 @@ function renderSignIn(element) {
   authRenderer.render(SignIn, {
     onSuccessCallback: () => {},
     formSize: 'small',
-    routeForgotPassword: () => CUSTOMER_FORGOTPASSWORD_PATH,
+    routeForgotPassword: () => rootLink(CUSTOMER_FORGOTPASSWORD_PATH),
   })(element);
 }
 
@@ -31,7 +32,7 @@ export function renderAuthDropdown(navTools) {
     <div class="nav-auth-menu-panel nav-tools-panel">
       <div id="auth-dropin-container"></div>
       <ul class="authenticated-user-menu">
-         <li><a href="/customer/account">My Account</a></li>
+         <li><a href="${rootLink('/customer/account')}">My Account</a></li>
           <li><button>Logout</button></li>
       </ul>
     </div>
@@ -75,8 +76,8 @@ export function renderAuthDropdown(navTools) {
   logoutButtonElement.addEventListener('click', async () => {
     await authApi.revokeCustomerToken();
     checkAndRedirect({
-      '/customer': '/customer/login',
-      '/order-details': '/',
+      '/customer': rootLink('/customer/login'),
+      '/order-details': rootLink('/'),
     });
   });
 
diff --git a/blocks/header/searchbar.js b/blocks/header/searchbar.js
index fe0a67a023..af6a09a5ac 100644
--- a/blocks/header/searchbar.js
+++ b/blocks/header/searchbar.js
@@ -1,4 +1,5 @@
 import { loadScript } from '../../scripts/aem.js';
+import { rootLink } from '../../scripts/scripts.js';
 import { getConfigValue } from '../../scripts/configs.js';
 
 (async () => {
@@ -28,9 +29,9 @@ import { getConfigValue } from '../../scripts/configs.js';
     context: {
       customerGroup: await getConfigValue('commerce.headers.cs.Magento-Customer-Group'),
     },
-    route: ({ sku, urlKey }) => `/products/${urlKey}/${sku}`,
+    route: ({ sku, urlKey }) => rootLink(`/products/${urlKey}/${sku}`),
     searchRoute: {
-      route: '/search',
+      route: rootLink('/search'),
       query: 'q',
     },
   };
diff --git a/blocks/modal/modal.js b/blocks/modal/modal.js
index 2941ac27b2..8003155198 100644
--- a/blocks/modal/modal.js
+++ b/blocks/modal/modal.js
@@ -1,7 +1,7 @@
 import { loadCSS, buildBlock } from '../../scripts/aem.js';
 
 export default async function createModal(contentNodes) {
-  await loadCSS('./blocks/modal/modal.css');
+  await loadCSS(`${window.hlx.codeBasePath}/blocks/modal/modal.css`);
   const dialog = document.createElement('dialog');
   dialog.setAttribute('tabindex', 1);
   dialog.setAttribute('role', 'dialog');
diff --git a/blocks/product-details/product-details.js b/blocks/product-details/product-details.js
index 4125f0e999..ead9e63b52 100644
--- a/blocks/product-details/product-details.js
+++ b/blocks/product-details/product-details.js
@@ -27,6 +27,7 @@ import { fetchPlaceholders } from '../../scripts/aem.js';
 // Initializers
 import { IMAGES_SIZES } from '../../scripts/initializers/pdp.js';
 import '../../scripts/initializers/cart.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   // eslint-disable-next-line no-underscore-dangle
@@ -297,9 +298,9 @@ async function setJsonLdProduct(product) {
       '@type': 'Brand',
       name: brand?.value,
     },
-    url: new URL(`/products/${urlKey}/${sku}`, window.location),
+    url: new URL(rootLink(`/products/${urlKey}/${sku}`), window.location),
     sku,
-    '@id': new URL(`/products/${urlKey}/${sku}`, window.location),
+    '@id': new URL(rootLink(`/products/${urlKey}/${sku}`), window.location),
   };
 
   if (variants.length > 1) {
diff --git a/blocks/product-list-page-custom/ProductList.js b/blocks/product-list-page-custom/ProductList.js
index 0d27e1d3ba..4328fd6db9 100644
--- a/blocks/product-list-page-custom/ProductList.js
+++ b/blocks/product-list-page-custom/ProductList.js
@@ -6,6 +6,7 @@ import htm from '../../scripts/htm.js';
 import {
   renderPrice,
 } from '../../scripts/commerce.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 const html = htm.bind(h);
 const searchUnitId = 'livesearch-plp';
@@ -79,12 +80,12 @@ class ProductCard extends Component {
     return html`
       <li index=${index} ref=${secondLastProduct}>
         <div class="picture">
-          <a onClick=${() => this.onProductClick(product)} href="/products/${product.urlKey}/${product.sku}">
+          <a onClick=${() => this.onProductClick(product)} href="${rootLink(`/products/${product.urlKey}/${product.sku}`)}">
             ${this.renderImage(index < numberOfEagerImages ? 'eager' : 'lazy')}
           </a>
         </div>
         <div class="name">
-          <a onClick=${() => this.onProductClick(product)} href="/products/${product.urlKey}/${product.sku}" dangerouslySetInnerHTML=${{__html: product.name}} />
+          <a onClick=${() => this.onProductClick(product)} href="${rootLink(`/products/${product.urlKey}/${product.sku}`)}" dangerouslySetInnerHTML=${{__html: product.name}} />
         </div>
         <div class="price">${renderPrice(product, this.formatter.format, html, Fragment)}</div>
       </li>`;
diff --git a/blocks/product-list-page-custom/product-list-page-custom.js b/blocks/product-list-page-custom/product-list-page-custom.js
index 81c7018a06..2543265e6b 100644
--- a/blocks/product-list-page-custom/product-list-page-custom.js
+++ b/blocks/product-list-page-custom/product-list-page-custom.js
@@ -6,6 +6,7 @@ import ProductList from './ProductList.js';
 import FacetList from './FacetList.js';
 import { readBlockConfig, sampleRUM } from '../../scripts/aem.js';
 import { priceFieldsFragment, performCatalogServiceQuery } from '../../scripts/commerce.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 const html = htm.bind(h);
 
@@ -411,7 +412,7 @@ class ProductListPage extends Component {
           products: this.state.products.items.map((p, index) => ({
             name: p.name,
             sku: p.sku,
-            url: new URL(`/products/${p.urlKey}/${p.sku}`, window.location).toString(),
+            url: new URL(rootLink(`/products/${p.urlKey}/${p.sku}`), window.location).toString(),
             imageUrl: p.images?.length ? p.images[0].url : '',
             price: p.price?.final?.amount?.value ?? p.priceRange?.minimum?.final?.amount?.value,
             rank: index,
diff --git a/blocks/product-list-page/product-list-page.js b/blocks/product-list-page/product-list-page.js
index aeea894fd0..7ff2a94e7e 100644
--- a/blocks/product-list-page/product-list-page.js
+++ b/blocks/product-list-page/product-list-page.js
@@ -1,5 +1,6 @@
 import { readBlockConfig } from '../../scripts/aem.js';
 import { getConfigValue } from '../../scripts/configs.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   // eslint-disable-next-line import/no-absolute-path, import/no-unresolved
@@ -46,7 +47,7 @@ export default async function decorate(block) {
     },
     route: ({ sku, urlKey }) => {
       const a = new URL(window.location.origin);
-      a.pathname = `/products/${urlKey}/${sku}`;
+      a.pathname = rootLink(`/products/${urlKey}/${sku}`);
       return a.toString();
     },
   };
diff --git a/blocks/product-recommendations/product-recommendations.js b/blocks/product-recommendations/product-recommendations.js
index 334b3860ce..e00ccb22c2 100644
--- a/blocks/product-recommendations/product-recommendations.js
+++ b/blocks/product-recommendations/product-recommendations.js
@@ -7,6 +7,7 @@ import { getConfigValue } from '../../scripts/configs.js';
 
 // initialize dropins
 import '../../scripts/initializers/cart.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 const isMobile = window.matchMedia('only screen and (max-width: 900px)').matches;
 
@@ -93,13 +94,13 @@ function renderItem(unitId, product) {
       }
     } else {
       // Navigate to page for non-simple products
-      window.location.href = `/products/${product.urlKey}/${product.sku}`;
+      window.location.href = rootLink(`/products/${product.urlKey}/${product.sku}`);
     }
   };
 
   const ctaText = product.__typename === 'SimpleProductView' ? 'Add to Cart' : 'Select Options';
   const item = document.createRange().createContextualFragment(`<div class="product-grid-item">
-    <a href="/products/${product.urlKey}/${product.sku}">
+    <a href="${rootLink(`/products/${product.urlKey}/${product.sku}`)}">
       <picture>
         <source type="image/webp" srcset="${image}?width=300&format=webply&optimize=medium" />
         <img loading="lazy" alt="Image of ${product.name}" width="300" height="375" src="${image}?width=300&format=jpg&optimize=medium" />
@@ -164,7 +165,7 @@ const mapProduct = (product, index) => ({
   categories: [],
   weight: 0,
   image: product.images.length > 0 ? product.images[0].url : undefined,
-  url: new URL(`/products/${product.urlKey}/${product.sku}`, window.location.origin).toString(),
+  url: new URL(rootLink(`/products/${product.urlKey}/${product.sku}`), window.location.origin).toString(),
   queryType: 'primary',
 });
 
diff --git a/blocks/product-teaser/product-teaser.js b/blocks/product-teaser/product-teaser.js
index a74dba0bc7..5ffe8265a5 100644
--- a/blocks/product-teaser/product-teaser.js
+++ b/blocks/product-teaser/product-teaser.js
@@ -1,5 +1,6 @@
 import { readBlockConfig } from '../../scripts/aem.js';
 import { performCatalogServiceQuery, renderPrice, mapProductAcdl } from '../../scripts/commerce.js';
+import { rootLink } from '../../scripts/scripts.js';
 
 const productTeaserQuery = `query productTeaser($sku: String!) {
   products(skus: [$sku]) {
@@ -111,7 +112,7 @@ function renderProduct(product, config, block) {
       <h1>${name}</h1>
       <div class="price">${renderPrice(product, priceFormatter.format)}</div>
       <div class="actions">
-        ${config['details-button'] ? `<a href="/products/${urlKey}/${sku}" class="button primary">Details</a>` : ''}
+        ${config['details-button'] ? `<a href="${rootLink(`/products/${urlKey}/${sku}`)}" class="button primary">Details</a>` : ''}
         ${config['cart-button'] && addToCartAllowed && __typename === 'SimpleProductView' ? '<button class="add-to-cart secondary">Add to Cart</button>' : ''}
       </div>
     </div>
diff --git a/head.html b/head.html
index ef86860419..9e691dca19 100644
--- a/head.html
+++ b/head.html
@@ -31,7 +31,6 @@
 <script src="/scripts/configs.js" type="module"></script>
 <script src="/scripts/commerce.js" type="module"></script>
 
-<link rel="preload" href="/placeholders.json" as="fetch" crossorigin="anonymous" />
 <link rel="modulepreload" href="/scripts/initializers/index.js" />
 <link rel="modulepreload" href="/scripts/initializers/auth.js" />
 <link rel="modulepreload" href="/scripts/initializers/cart.js" />
diff --git a/scripts/aem.js b/scripts/aem.js
index ec275180fb..825d2e680e 100644
--- a/scripts/aem.js
+++ b/scripts/aem.js
@@ -503,20 +503,35 @@ function decorateSections(main) {
  */
 // eslint-disable-next-line import/prefer-default-export
 async function fetchPlaceholders(prefix = 'default') {
+  const overrides = getMetadata('placeholders') || '';
+  const [fallback, override] = overrides.split('\n');
   window.placeholders = window.placeholders || {};
   if (!window.placeholders[prefix]) {
     window.placeholders[prefix] = new Promise((resolve) => {
-      const url = getMetadata('placeholders') || `${prefix === 'default' ? '' : prefix}/placeholders.json`;
-      fetch(url)
-        .then((resp) => {
+      const url = fallback || `${prefix === 'default' ? '' : prefix}/placeholders.json`;
+      Promise.all([fetch(url), override ? fetch(override) : Promise.resolve()])
+        .then(async ([resp, oResp]) => {
           if (resp.ok) {
-            return resp.json();
+            if (oResp?.ok) {
+              return Promise.all([resp.json(), await oResp.json()]);
+            }
+            return Promise.all([resp.json(), {}]);
           }
           return {};
         })
-        .then((json) => {
+
+        .then(([json, oJson]) => {
           const placeholders = {};
+          // build placeholders object
           json.data.forEach(({ Key, Value }) => {
+            // check for overrides
+            if (oJson?.data) {
+              const overrideItem = oJson.data.find((item) => item.Key === Key);
+              if (overrideItem) {
+                // eslint-disable-next-line no-param-reassign
+                Value = overrideItem.Value;
+              }
+            }
             if (Key) {
               const keys = Key.split('.');
               const lastKey = keys.pop();
@@ -527,10 +542,13 @@ async function fetchPlaceholders(prefix = 'default') {
               target[lastKey] = Value;
             }
           });
+          // cache placeholders
           window.placeholders[prefix] = placeholders;
+          // return placeholders
           resolve(window.placeholders[prefix]);
         })
-        .catch(() => {
+        .catch((error) => {
+          console.error('error loading placeholders', error);
           // error loading placeholders
           window.placeholders[prefix] = {};
           resolve(window.placeholders[prefix]);
diff --git a/scripts/configs.js b/scripts/configs.js
index 93e69e2cbe..95dd232739 100644
--- a/scripts/configs.js
+++ b/scripts/configs.js
@@ -1,3 +1,7 @@
+/* eslint-disable import/no-cycle */
+
+import { getRootPath } from './scripts.js';
+
 const ALLOWED_CONFIGS = ['prod', 'stage', 'dev'];
 
 /**
@@ -29,21 +33,22 @@ export const calcEnvironment = () => {
   return environment;
 };
 
-function buildConfigURL(environment) {
+function buildConfigURL(environment, root = '/') {
   const env = environment || calcEnvironment();
   let fileName = 'configs.json';
   if (env !== 'prod') {
     fileName = `configs-${env}.json`;
   }
-  const configURL = new URL(`${window.location.origin}/${fileName}`);
+  const configURL = new URL(`${window.location.origin}${root}${fileName}`);
   return configURL;
 }
 
 const getConfigForEnvironment = async (environment) => {
   const env = environment || calcEnvironment();
+  const root = getRootPath() || '/';
 
   try {
-    const configJSON = window.sessionStorage.getItem(`config:${env}`);
+    const configJSON = window.sessionStorage.getItem(`config:${env}:${root}`);
     if (!configJSON) {
       throw new Error('No config in session storage');
     }
@@ -55,13 +60,13 @@ const getConfigForEnvironment = async (environment) => {
 
     return parsedConfig;
   } catch (e) {
-    let configJSON = await fetch(buildConfigURL(env));
+    let configJSON = await fetch(buildConfigURL(env, root));
     if (!configJSON.ok) {
       throw new Error(`Failed to fetch config for ${env}`);
     }
     configJSON = await configJSON.json();
     configJSON[':expiry'] = Math.round(Date.now() / 1000) + 7200;
-    window.sessionStorage.setItem(`config:${env}`, JSON.stringify(configJSON));
+    window.sessionStorage.setItem(`config:${env}:${root}`, JSON.stringify(configJSON));
     return configJSON;
   }
 };
@@ -87,13 +92,21 @@ export const getConfigValue = async (configParam, environment) => {
 export const getHeaders = async (scope, environment) => {
   const env = environment || calcEnvironment();
   const config = await getConfigForEnvironment(env);
-  const configElements = config.data.filter((el) => el?.key.includes(`headers.${scope}`));
+  const configElements = config.data.filter((el) => el?.key.includes('headers.all') || el?.key.includes(`headers.${scope}`));
 
   return configElements.reduce((obj, item) => {
     let { key } = item;
+
+    // global values
+    if (key.includes('commerce.headers.all.')) {
+      key = key.replace('commerce.headers.all.', '');
+    }
+
+    // scoped values
     if (key.includes(`commerce.headers.${scope}.`)) {
       key = key.replace(`commerce.headers.${scope}.`, '');
     }
+
     return { ...obj, [key]: item.value };
   }, {});
 };
diff --git a/scripts/initializers/order.js b/scripts/initializers/order.js
index 6a10da04df..8cfc58439d 100644
--- a/scripts/initializers/order.js
+++ b/scripts/initializers/order.js
@@ -16,6 +16,7 @@ import {
   ORDER_STATUS_PATH,
   CUSTOMER_PATH, SALES_GUEST_VIEW_PATH, SALES_ORDER_VIEW_PATH,
 } from '../constants.js';
+import { rootLink } from '../scripts.js';
 
 await initializeDropin(async () => {
   const { pathname, searchParams } = new URL(window.location.href);
@@ -81,11 +82,11 @@ async function handleUserOrdersRedirects(
 
   events.on('order/error', () => {
     if (checkIsAuthenticated()) {
-      window.location.href = CUSTOMER_ORDERS_PATH;
+      window.location.href = rootLink(CUSTOMER_ORDERS_PATH);
     } else if (isTokenProvided) {
-      window.location.href = orderNumber ? `${ORDER_STATUS_PATH}?orderRef=${orderNumber}` : ORDER_STATUS_PATH;
+      window.location.href = orderNumber ? rootLink(`${ORDER_STATUS_PATH}?orderRef=${orderNumber}`) : rootLink(ORDER_STATUS_PATH);
     } else {
-      window.location.href = `${ORDER_STATUS_PATH}?orderRef=${orderRef}`;
+      window.location.href = rootLink(`${ORDER_STATUS_PATH}?orderRef=${orderRef}`);
     }
   });
 
@@ -106,7 +107,7 @@ async function handleUserOrdersRedirects(
   }
 
   if (targetPath) {
-    window.location.href = targetPath;
+    window.location.href = rootLink(targetPath);
   } else {
     await initializers.mountImmediately(initialize, {
       langDefinitions,
diff --git a/scripts/initializers/pdp.js b/scripts/initializers/pdp.js
index 2b5223e26f..8871141599 100644
--- a/scripts/initializers/pdp.js
+++ b/scripts/initializers/pdp.js
@@ -1,5 +1,5 @@
+/* eslint-disable import/no-cycle */
 /* eslint-disable import/prefer-default-export */
-/* eslint import/no-cycle: [2, { maxDepth: 1 }] */
 
 import { initializers } from '@dropins/tools/initializer.js';
 import { Image, provider as UI } from '@dropins/tools/components.js';
diff --git a/scripts/scripts.js b/scripts/scripts.js
index d2edf055ec..3fb82727df 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -150,6 +150,7 @@ export function decorateMain(main) {
   buildAutoBlocks(main);
   decorateSections(main);
   decorateBlocks(main);
+  // decorateLinks(main); // author can decide when to localize links
 }
 
 function preloadFile(href, as) {
@@ -356,6 +357,51 @@ export async function fetchIndex(indexFile, pageSize = 500) {
   return newIndex;
 }
 
+/**
+ * Get root path
+ */
+export function getRootPath() {
+  window.ROOT_PATH = window.ROOT_PATH || getMetadata('root') || '/';
+  return window.ROOT_PATH;
+}
+
+/**
+ * Decorates links.
+ * @param {Element} main The main element
+ */
+export function decorateLinks(main) {
+  const root = getRootPath();
+  if (root === '/') return;
+  const links = main.querySelectorAll('a');
+
+  links.forEach((link) => {
+    const url = new URL(link.href, window.location.origin);
+    const { pathname } = url;
+
+    // If the link is already localized, do nothing
+    if (pathname.startsWith('//') || pathname.startsWith(root)) return;
+
+    if (
+      link.href.startsWith('/')
+      || link.href.startsWith(window.location.origin)
+    ) {
+      link.href = `${root}${url.pathname.substring(1)}${url.search}${url.hash}`;
+    }
+  });
+}
+
+/**
+ * Decorates links.
+ * @param {string} [url] url to be localized
+ */
+export function rootLink(link) {
+  const root = getRootPath().replace(/\/$/, '');
+
+  // If the link is already localized, do nothing
+  if (link.startsWith(root)) return link;
+  return `${root}${link}`;
+}
+
 /**
  * Check if consent was given for a specific topic.
  * @param {*} topic Topic identifier
diff --git a/scripts/wishlist/api.js b/scripts/wishlist/api.js
index cf7f807d3b..731728ccbe 100644
--- a/scripts/wishlist/api.js
+++ b/scripts/wishlist/api.js
@@ -1,8 +1,9 @@
 import { getSignInToken, performMonolithGraphQLQuery } from '../commerce.js';
 import { CUSTOMER_LOGIN_PATH } from '../constants.js';
+import { rootLink } from '../scripts.js';
 
 const redirectToSignin = () => {
-  window.location = CUSTOMER_LOGIN_PATH;
+  window.location = rootLink(CUSTOMER_LOGIN_PATH);
 };
 
 const getWishlistsQuery = `