diff --git a/header.css b/header.css
index ee6f8e7..6f6e5bb 100644
--- a/header.css
+++ b/header.css
@@ -56,7 +56,7 @@ header a {
    align-items:center;
    background:transparent;
    font-size:0.8em;
-   margin-left:auto;
+   /*margin-left:auto;*/
    margin-right:5px;
    white-space: nowrap;
 }
diff --git a/index.html b/index.html
index fe714f6..b4bfd59 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,16 @@
                 <img src='https://www.tipser.com/523e894dc43c43f278bb4211a4430285.png' alt="Tipser" />
             </a>
             <ul class="horizontal-menu">
+                <li class="horizontal-item">
+                    <a class="link" href="/">
+                        Home
+                    </a>
+                </li>
+                <li class="horizontal-item">
+                    <a class="link" href="/product?productId=5c6ff65d75afb80001816edc">
+                        Product
+                    </a>
+                </li>
                 <li class="horizontal-item">
                     <a class="link" href="https://tipser.github.io/docs/#tipser-elements" target="_blank"
                         rel="noopener noreferrer">
@@ -33,6 +43,7 @@
                 </li>
 
             </ul>
+            <div id="cart"></div>
             <a class="side-note" href="https://www.tipser.com/tipser-elements">Tipser &#128640;
             </a>
         </nav>
@@ -40,37 +51,38 @@
     </header>
 
     <!-- This is the element where we want to put Tipser cart icon (referred to with CSS selector in mountCart function) -->
-    <div id="cart"></div>
 
-    <div class="content-root"></div>
 
-    <h2 class="heading">Product</h2>
-    <!-- This is a marker element for tipser product, given tipser product id -->
-    <div data-tipser-pid="5c6ff65d75afb80001816edc"></div>
+    <section id="root">
 
-    <h2 class="heading">Product compact</h2>
-    <!-- This is a marker element for tipser product with compact mode enabled, given tipser product id -->
-    <div data-tipser-pid="59083a8f60689325d8727ad9" data-tipser-view="compact"></div>
+        <h2 class="heading">Product</h2>
+        <!-- This is a marker element for tipser product, given tipser product id -->
+        <div data-tipser-pid="5c6ff65d75afb80001816edc"></div>
 
-    <h2 class='heading'>Collection</h2>
-    <!-- This is a marker element for tipser Collection, given tipser collection id -->
+        <h2 class="heading">Product compact</h2>
+        <!-- This is a marker element for tipser product with compact mode enabled, given tipser product id -->
+        <div data-tipser-pid="59083a8f60689325d8727ad9" data-tipser-view="compact"></div>
 
-    <div data-tipser-cid="5cf51fec561f17000129fcb7"><a
-            href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>
+        <h2 class='heading'>Collection</h2>
+        <!-- This is a marker element for tipser Collection, given tipser collection id -->
 
+        <div data-tipser-cid="5cf51fec561f17000129fcb7"><a
+                href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>
 
-    <!-- This is a marker element for tipser Collection with carousel -->
-    <h2 class="heading">Collection with carousel</h2>
-    <div data-tipser-cid="5b9665929d25800a1c9b6b34" data-tipser-carousel><a
-            href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>
 
-    <h2 class="heading">Store</h2>
-    <!-- This is a marker element for tipser shop -->
-    <div id="tipser_shop"></div>
+        <!-- This is a marker element for tipser Collection with carousel -->
+        <h2 class="heading">Collection with carousel</h2>
+        <div data-tipser-cid="5b9665929d25800a1c9b6b34" data-tipser-carousel><a
+                href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>
+
+        <h2 class="heading">Store</h2>
+        <!-- This is a marker element for tipser shop -->
+        <div id="tipser_shop"></div>
+    </section>
 
     <script>
         var scriptTag = document.createElement('script');
-        scriptTag.src = "https://cdn.tipser.com/tipser-script/latest.js";
+        scriptTag.src = "https://cdn.tipser.com/tipser-script/dev.js";
         // in case you want to load local dev version of script
         // scriptTag.src = "http://127.0.0.1:5001/Script-tipser-elements.js";
 
@@ -79,8 +91,10 @@ <h2 class="heading">Store</h2>
                 //The configuration of tipser widget comes here
                 env: "prod",
                 lang: "sv-SE",
-                openOldDialog: true,
-
+                openOldDialog: false,
+                customUrls: {
+                    productBaseUrl: (productId) => `/product?productId=${productId}`,
+                },
                 eventsHandlers: {
                     onError: function (error) {
                         console.error(error)
@@ -113,4 +127,4 @@ <h2 class="heading">Store</h2>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..abef477
--- /dev/null
+++ b/index.js
@@ -0,0 +1,73 @@
+// Components
+const HomePage = {
+    render: () => {
+        return `
+            <h2 class="heading">Product</h2>
+            <!-- This is a marker element for tipser product, given tipser product id -->
+            <div data-tipser-pid="5c6ff65d75afb80001816edc"></div>
+
+            <h2 class="heading">Product compact</h2>
+            <!-- This is a marker element for tipser product with compact mode enabled, given tipser product id -->
+            <div data-tipser-pid="59083a8f60689325d8727ad9" data-tipser-view="compact"></div>
+
+            <h2 class='heading'>Collection</h2>
+            <!-- This is a marker element for tipser Collection, given tipser collection id -->
+
+            <div data-tipser-cid="5cf51fec561f17000129fcb7"><a
+            href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>
+
+
+            <!-- This is a marker element for tipser Collection with carousel -->
+            <h2 class="heading">Collection with carousel</h2>
+            <div data-tipser-cid="5b9665929d25800a1c9b6b34" data-tipser-carousel><a
+            href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>
+
+            <h2 class="heading">Store</h2>
+            <!-- This is a marker element for tipser shop -->
+            <div id="tipser_shop"></div>
+        `;
+    }
+}
+const ProductPage = {
+    render: () => {
+        return `
+        <h2>Product Page</h2>
+        <div data-tipser-product-page="5bc6e1c7df2ac60001158814"></div>
+    `;
+    }
+};
+
+const ErrorComponent = {
+    render: () => {
+        return `
+      <section>
+        <h1>Error</h1>
+      </section>
+    `;
+    }
+};
+
+// Routes
+const routes = [
+    { path: '/', component: HomePage, },
+    { path: '/product', component: ProductPage, },
+];
+
+const parseLocation = () => location.hash.slice(1).toLowerCase() || '/';
+const findComponentByPath = (path, routes) => routes.find(r => r.path.match(new RegExp(`^\\${path}$`, 'gm'))) || undefined;
+
+const router = () => {
+    //  Find the component based on the current path
+    const path = parseLocation();
+    console.log({path});
+    // If there's no matching route, get the "Error" component
+    const { component = ErrorComponent } = findComponentByPath(path, routes) || {};
+    // Render the component in the "app" placeholder
+    document.getElementById('root').innerHTML = component.render();
+};
+
+const log = () => {
+    console.log('hash')
+}
+window.addEventListener('hashchange', router);
+window.addEventListener('load', router);
\ No newline at end of file
diff --git a/product/index.html b/product/index.html
new file mode 100644
index 0000000..270230c
--- /dev/null
+++ b/product/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="../header.css">
+    <link rel="stylesheet" href="../index.css">
+    <link rel="stylesheet" href="../tipser-elements-adjustments.css">
+    <link rel="stylesheet" href="../footer.css">
+
+</head>
+
+<body>
+
+    <header class="header">
+        <nav class="navigation">
+            <a class="te-logo" href="https://www.tipser.com/">
+                <img src='https://www.tipser.com/523e894dc43c43f278bb4211a4430285.png' alt="Tipser" />
+            </a>
+            <ul class="horizontal-menu">
+                <li class="horizontal-item">
+                    <a class="link" href="/">
+                        Home
+                    </a>
+                </li>
+                <li class="horizontal-item">
+                    <a class="link" href="/product?productId=5c6ff65d75afb80001816edc">
+                        Product
+                    </a>
+                </li>
+                <li class="horizontal-item">
+                    <a class="link" href="https://tipser.github.io/docs/#tipser-elements" target="_blank"
+                       rel="noopener noreferrer">
+                        Documentation
+                    </a>
+                </li>
+                <li class="horizontal-item">
+                    <a class="link" href="https://github.com/Tipser/tipser-widget-bootstrap" target="_blank"
+                       rel="noopener noreferrer">
+                        GitHub repo
+                    </a>
+                </li>
+
+            </ul>
+            <div id="cart"></div>
+            <a class="side-note" href="https://www.tipser.com/tipser-elements">Tipser &#128640;
+            </a>
+        </nav>
+
+    </header>
+
+    <div id="content-root">
+        <h2 class="heading">Product Page</h2>
+    </div>
+
+    <script>
+        var scriptTag = document.createElement('script');
+        scriptTag.src = "https://cdn.tipser.com/tipser-script/latest.js";
+        // in case you want to load local dev version of script
+        // scriptTag.src = "http://127.0.0.1:5001/Script-tipser-elements.js";
+
+        scriptTag.onload = scriptTag.onreadystatechange = function () {
+            tipser.elements('59e86b79b8f3f60a94ecd26a', { //pos id (Tipser user id)
+                //The configuration of tipser widget comes here
+                env: "prod",
+                lang: "sv-SE",
+                openOldDialog: false,
+                customUrls: {
+                    productBaseUrl: (productId) => `/product?productId=${productId}`,
+                },
+                eventsHandlers: {
+                    onError: function (error) {
+                        console.error(error)
+                    },
+                    onAddToCart: function (options) {
+                        console.log('Hurray, you have added item to cart. ', options.product);
+                        console.log('Your cart size is now. ', options.cartSize);
+                    }
+                }
+            })
+
+                .mountCart('#cart') //inserting Tipser cart to the HTML
+        };
+        document.body.appendChild(scriptTag);
+    </script>
+    <script>
+    // Reading productId from query string
+        const productId = window.location.search.substring(1).split("=")[1];
+        const productElement = document.createElement('div');
+        productElement.setAttribute('data-tipser-product-page', productId);
+        document.getElementById('content-root').appendChild(productElement);
+    </script>
+
+    <div class="footer-terms">
+        <div class="footer-logo"><a href="/" class="tipser-logo">
+            <img src="https://www.tipser.com/523e894dc43c43f278bb4211a4430285.png" alt="">
+        </a>
+        </div>
+        <div class="footer-links ">
+            <a href="https://www.tipser.com/terms" target="_blank" class="footer-link">Conditions of Use and Sale</a>
+            <a href="https://www.tipser.com/terms-privacy" target="_blank" class="footer-link">Privacy notice</a>
+            <a href="https://www.tipser.com/imprint" target="_blank" class="footer-link">Imprint</a>
+            <a href="https://www.tipser.com/terms-cookies" target="_blank" class="footer-link">Cookies &amp; Analytics</a>
+        </div>
+        <div class="footer-copyrights">© 2011 - 2019, Tipser AB</div>
+    </div>
+
+</body>
+
+</html>
diff --git a/tipser-elements-adjustments.css b/tipser-elements-adjustments.css
index 1b87ff2..a759dfc 100644
--- a/tipser-elements-adjustments.css
+++ b/tipser-elements-adjustments.css
@@ -1,10 +1,5 @@
 #cart {
-    position: fixed;
-    top: 121px;
-    background: #fff;
-    padding: 10px;
-    box-shadow: -2px 2px 7px rgba(0,0,0,0.3);
-    z-index: 10;
+    margin: 0 20px 0 auto;
 }
 
 .cart-icon .tipser-icon.tipser-icon-cart {
@@ -12,8 +7,8 @@
 }
 
 #cart .cart-icon .tipser-icon .tipser-cart-size-indicator {
-    width: 25px;
-    height: 25px;
+    width: 20px;
+    height: 20px;
     top: 50%;
     border: 2px solid #cacaca;
     border-radius: 50%;