Create notification for cart

src/style/molecules/_notification-cart.scss

@@ -0,0 +1,60 @@
+.notification-cart {
+    display: flex;
+    background-color: #fff;
+    color: $color-gray;
+    border-radius: 6px;
+    align-items: center;
+    overflow: hidden;
+    cursor: pointer;
+
+    // Left Image
+    &__left {
+        margin-right: 20px;
+        width: 100px;
+        height: 150px;
+
+        @include bp (sm) {
+            margin-right: 24px;
+            width: 58px;
+            height: 88px;
+        }
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    // Details
+    &__right {
+        display: flex;
+        flex-direction: column;
+        margin-right: 24px;
+        justify-content: center;
+
+        // Poster Title
+        h3 {
+            font-family: $font-serif;
+            color: $color-secondary;
+            font-size: rem(20px);
+
+            @include bp (sm) {
+                font-size: rem(18px);
+            }
+        }
+        // Text
+        p {
+            font-size: rem(12px);
+            line-height: 1.4;
+            max-width: 124px;
+            margin: 4px 0;
+
+            @include bp (sm) {
+                font-size: rem(13px);
+                max-width: none;
+            }
+        }
+    }
+}

src/style/pages/_shop.scss

@@ -105,6 +105,19 @@
                 border-radius: 100%;
             }
         }
+
+        .notifications {
+            position: absolute;
+            z-index: 100;
+            top: 72px;
+            right: 0;
+
+            & > * {
+                &:not(:last-child) {
+                    margin-bottom: 8px;
+                }
+            }
+        }
     }
 
     // Intro

src/style/style.scss

@@ -52,6 +52,7 @@
 @import "molecules/issue";
 @import "molecules/newsletter-form";
 @import "molecules/poster";
+@import "molecules/notification-cart";
 
 // Organisms
 @import "organisms/locations";