diff --git a/source/_assets/js/app.js b/source/_assets/js/app.js
index 42aecbc..87f1287 100644
--- a/source/_assets/js/app.js
+++ b/source/_assets/js/app.js
@@ -1,4 +1,5 @@
 import Alpine from 'alpinejs';
-
+import morph from '@alpinejs/morph';
 
 window.Alpine = Alpine;
+Alpine.plugin(morph);
diff --git a/source/_assets/scss/_ecwid.scss b/source/_assets/scss/_ecwid.scss
new file mode 100644
index 0000000..6372529
--- /dev/null
+++ b/source/_assets/scss/_ecwid.scss
@@ -0,0 +1,230 @@
+
+
+.ecwid {
+  font-weight: var(--body-font-weight)!important;
+}
+
+.ec-footer {
+  display: none!important;
+}
+
+.ec-cart {
+  display: block!important;
+  //
+  > * {
+    padding: 0!important;
+    width: 100%!important;
+  }
+  //
+  //&__sidebar {
+  //
+  //}
+  //
+  &__body {
+    margin: 0 auto!important;
+    max-width: 600px!important;
+  }
+  //
+  &__summary {
+    width: auto!important;
+    margin-left: auto!important;
+  }
+  .page-title__name {
+    display: none;
+  }
+}
+
+.ec-cart-summary {
+  &__body:nth-child(2) {
+    display: none!important;
+  }
+  &__title {
+    text-transform: lowercase!important;
+  }
+  &__price {
+    color: var(--bs-primary)!important;
+  }
+}
+
+.ec-cart-item {
+  &__image {
+    display: flex;
+    align-items: center;
+  }
+  &__title {
+    font-weight: var(--body-font-weight) !important;
+    color: var(--bs-primary)!important;
+  }
+  &__price {
+    color: var(--bs-primary)!important;
+  }
+  &__wrap {
+    display: flex!important;
+    flex-direction: row!important;
+    align-items: center!important;
+  }
+  &__wrap-primary {
+    flex: 1 0 0!important;
+  }
+  &__wrap-secondary {
+    width:auto!important;
+    flex: 1 0 0!important;
+  }
+  &__control {
+    margin-right: .5rem!important;
+  }
+  &__control-inner {
+    color: red!important;
+  }
+}
+
+.ec-cart-shopping {
+  &__wrap {
+    display: none;
+  }
+}
+
+.form-control__button {
+  padding: .25rem .375rem!important;
+  min-height: auto!important;
+  border: 3px solid var(--bs-primary)!important;
+  background-color: white!important;
+  border-radius: 0!important;
+  color: var(--bs-primary)!important;
+  font-size: 1rem!important;
+  font-weight: 700!important;
+  text-transform: uppercase!important;
+}
+
+.grid-product {
+
+  &__wrap-inner {
+    height: 100%!important;
+  }
+
+  &__image {
+    order: 1!important;
+  }
+
+  &__sku {
+    order: 2!important;
+    color: var(--body-color)!important;
+    margin: .25rem 0!important;
+  }
+
+  &__title {
+    order: 3!important;
+    margin-top: 0!important;
+    margin-bottom: auto!important;
+  }
+
+  &__title-inner {
+    color: var(--bs-primary)!important;
+    font-weight: var(--headings-font-weight)!important;
+    font-size: var(--product-item-title-font-size)!important;
+    line-height: var(--headings-line-height);
+  }
+
+  &__price {
+    order: 4!important;
+  }
+
+  &__price-amount {
+    margin-top: 1rem!important;
+    padding: .25rem 0!important;
+    color: var(--bs-primary)!important;
+    font-size: .875rem!important;
+    font-weight: var(--body-font-weight)!important;
+    border-top: 1px solid var(--bs-primary)!important;
+    border-bottom: 1px solid var(--bs-primary)!important;
+  }
+}
+
+.product-details {
+  &__product-price-taxes {
+    display: none!important;
+  }
+  &__sidebar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  &__product-title {
+    width: 100%;
+    text-align: center!important;
+  }
+  &__product-price-row {
+    width: 33.33333%;
+    margin: 0!important;
+  }
+  &__product-price {
+    margin: 0!important;
+  }
+  &__product-options {
+    display: none;
+  }
+  &__action-panel {
+    width: 66.6666%;
+    margin: 0!important;
+    .product-details-module__content {
+      display: flex;
+      align-items: center;
+    }
+    .details-product-purchase__qty {
+      flex: 0 0 auto;
+      margin: 0!important;
+    }
+    .details-product-purchase__controls {
+      flex: 1 0 0;
+      margin: 0!important;
+    }
+  }
+  &__general-info {
+    width: 100%;
+    margin-top: 1.5rem!important;
+
+    .product-details-module__title {
+      display: none;
+    }
+  }
+}
+.details-product-price {
+  &__value {
+    color: var(--bs-primary)!important;
+    font-weight: var(--body-font-weight)!important;
+  }
+}
+
+.details-product-purchase {
+  &__place {
+    display: none!important;
+  }
+  &__qty-label {
+    display: none;
+  }
+  &__controls {
+    min-height: auto!important;
+    height: auto!important;
+  }
+  &__add-buttons button {
+    background-color: transparent!important;
+    color: var(--bs-primary)!important;
+    font-weight: var(--body-font-weight)!important;
+    font-size: 1.25rem!important;
+    text-transform: none!important;
+    border: 0!important;
+  }
+  &__checkout-controls {
+    display: none;
+  }
+}
+
+.details-gallery {
+  &__images-spacer {
+    height: 500px;
+  }
+  &__images{
+    background-color: #000!important;
+    padding: 3rem!important;
+  }
+}
diff --git a/source/_assets/scss/_root.scss b/source/_assets/scss/_root.scss
new file mode 100644
index 0000000..9834f82
--- /dev/null
+++ b/source/_assets/scss/_root.scss
@@ -0,0 +1,10 @@
+
+
+:root {
+  --body-color: #222;
+  --body-font-weight: 700;
+  --headings-font-weight: 600;
+  --headings-line-height: 1.1;
+
+  --product-item-title-font-size: 2.5rem;
+}
diff --git a/source/_assets/scss/_variables.scss b/source/_assets/scss/_variables.scss
new file mode 100644
index 0000000..1939cae
--- /dev/null
+++ b/source/_assets/scss/_variables.scss
@@ -0,0 +1,9 @@
+
+$primary: #0000fe;
+
+$container-max-widths: (
+  sm: 540px,
+  md: 684px,
+  lg: 924px,
+  xl: 1164px
+);
diff --git a/source/_assets/scss/app.scss b/source/_assets/scss/app.scss
index 1921156..07e2e5d 100644
--- a/source/_assets/scss/app.scss
+++ b/source/_assets/scss/app.scss
@@ -1,14 +1,21 @@
+@import "variables";
+@import "root";
 @import '~bootstrap/scss/bootstrap';
+@import "ecwid";
 
 
 body {
-  background: #0000fe;
-  color:#fff;
-  font-family: Helvetica, Arial, sans-serif;
+  color:  var(--body-color);
+  //font-family: Arial, sans-serif;
+  font-weight: var(--body-font-weight);
+}
+
+h1 {
+  font-size: 2.5rem!important;
+  color: var(--bs-primary)!important;
 }
 
 a {
-  color: #fff;
   text-decoration: underline;
 }
 
diff --git a/source/_components/cart-button.blade.php b/source/_components/cart-button.blade.php
new file mode 100644
index 0000000..a42f3be
--- /dev/null
+++ b/source/_components/cart-button.blade.php
@@ -0,0 +1,23 @@
+
+
+<div x-data="cartButton()">
+    <span x-show="count" x-text="count"></span>
+    <a href="#!/~/cart">
+        <img src="/assets/images/cart.png" alt="">
+    </a>
+</div>
+
+@push('script')
+    <script>
+        function cartButton() {
+            return {
+                count: 0,
+                init() {
+                    Ecwid.OnCartChanged.add(cart => {
+                        this.count = cart.productsQuantity;
+                    });
+                }
+            }
+        }
+    </script>
+@endpush
diff --git a/source/_components/header.blade.php b/source/_components/header.blade.php
index e5ad8fe..df48895 100644
--- a/source/_components/header.blade.php
+++ b/source/_components/header.blade.php
@@ -1,16 +1,12 @@
 <header class="mt-3 pt-4">
     <div class="row">
-        <div class="col-md-3 col-6">
-            <h1><strong>TCPC</strong></h1>
+        <div class="col">
+            <a href="/">
+                T C P C
+            </a>
         </div>
-        <div class="col-md-3 col-6">
-            <h4 class="text-right text-md-center">éditions</h4>
-        </div>
-        <div class="col-md-3 d-none d-md-block">
-            <h4 class="text-center"><em>bientôt</em></h4>
-        </div>
-        <div class="col-md-3 d-none d-md-block">
-            <h4 class="text-right"><a href="mailto:contact@tcpc.fr">contact</a></h4>
+        <div class="col-auto">
+            <x-cart-button />
         </div>
     </div>
 </header>
diff --git a/source/_layouts/default.blade.php b/source/_layouts/default.blade.php
index e8821e3..f807d4f 100644
--- a/source/_layouts/default.blade.php
+++ b/source/_layouts/default.blade.php
@@ -3,7 +3,7 @@
 @section('body')
     <div class="container d-flex flex-column min-vh-100">
         <x-header />
-        <main class="flex-fill">
+        <main class="flex-fill py-5">
             @yield('main')
         </main>
         <x-footer />
diff --git a/source/assets/images/cart.png b/source/assets/images/cart.png
new file mode 100644
index 0000000..6368d9a
Binary files /dev/null and b/source/assets/images/cart.png differ
diff --git a/source/index.blade.php b/source/index.blade.php
index 5f6607d..caadafb 100644
--- a/source/index.blade.php
+++ b/source/index.blade.php
@@ -1,7 +1,93 @@
 @extends('_layouts.default')
 
 @section('main')
-    <div class="text-center my-4">
-        <img class="tcpc mw-100" src="assets/images/tcpc.gif" alt="TCPC">
-    </div>
+    <div id="my-store-71383778"></div>
+
+    {{-- product list --}}
+    <template x-data="shopElement">
+        <div class="grid-product__sku-inner" x-data="{ ref: $el.innerText.match(/\d+/)[0] }">
+            TCPC#<span x-data x-text="ref"></span> / Édition
+        </div>
+    </template>
+
+    <template x-data="shopElement">
+        <div class="grid-product__title-inner" x-data="{ matches: $el.innerText.match(/([^/]+)\/?(.+)?/) }">
+            <div x-data x-text="matches[1]"></div>
+            <div x-data x-text="matches[2]" style="font-size: .5em"></div>
+        </div>
+    </template>
+
+    {{-- product page --}}
+    <template x-data="shopElement">
+        <h1 class="product-details__product-title" x-data="{ matches: $el.innerText.match(/([^/]+)\/?(.+)?/) }">
+            <div x-data x-text="matches[1]"></div>
+            <div x-data x-text="matches[2]" style="font-size: .5em"></div>
+        </h1>
+    </template>
+
+    <template x-data="shopElement">
+        <div class="details-product-purchase__add-to-bag form-control form-control--button form-control--large form-control--secondary form-control--flexible form-control--animated form-control__button--icon-center form-control--done">
+            <button class="form-control__button" type="button">
+                <span class="form-control__button-text">add to cart</span>
+                <span class="form-control__button-svg"><span class="svg-icon"><svg width="27" height="23" viewBox="0 0 27 23" xmlns="http://www.w3.org/2000/svg"><path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" stroke-linecap="round"></path></svg></span></span>
+            </button>
+        </div>
+    </template>
+
+    <template x-data="shopElement">
+        <div class="details-product-purchase__add-more form-control form-control--button form-control--large form-control--secondary form-control--flexible form-control--animated form-control__button--icon-center form-control--done">
+            <button class="form-control__button" type="button">
+                <span class="form-control__button-text">add to cart</span>
+                <span class="form-control__button-svg"><span class="svg-icon"><svg width="27" height="23" viewBox="0 0 27 23" xmlns="http://www.w3.org/2000/svg"><path class="svg-line-check" d="M1.97 11.94L10.03 20 25.217 2" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" stroke-linecap="round"></path></svg></span></span>
+            </button>
+        </div>
+    </template>
+
+    {{-- cart --}}
+    <template x-data="shopElement">
+        <a class="ec-cart-item__title" x-data="{ matches: $el.innerText.match(/([^/]+)\/?(.+)?/) }">
+            <div x-data x-text="matches[1]"></div>
+        </a>
+    </template>
+
+    <template x-data="shopElement">
+        <div class="ec-cart__shopping ec-cart-shopping">
+            <slot></slot>
+            <div class="text-end">
+                <a class="form-control__button ec-link d-inline-block w-auto" href="/">
+                    Mettre à jour le panier
+                </a>
+            </div>
+        </div>
+    </template>
 @endsection
+
+@push('script')
+    <script>
+        window.ec = {
+            storefront: {
+                product_details_cut_product_description_in_sidebar: false,
+            },
+        }
+    </script>
+    <script data-cfasync="false" src="https://app.ecwid.com/script.js?71383778&data_platform=code&data_date=2022-03-01"></script>
+    <script> xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list","id=my-store-71383778");</script>
+    <script>
+        function shopElement() {
+            return {
+                init() {
+                    const root = this.$el.content.firstElementChild;
+                    Ecwid.OnPageLoaded.add(() => {
+                        setTimeout(() => {
+                            const elements = [...document.querySelectorAll(`.${root.classList.item(0)}`)];
+                            elements.forEach(el => {
+                                const html = this.$el.innerHTML.replace(/\s*<slot><\/slot>\s*/, el.innerHTML);
+                                Alpine.morph(el, html);
+                            });
+                        }, 50);
+                    });
+                }
+            }
+        }
+    </script>
+@endpush