diff --git a/assets/base.css b/assets/base.css
index 05e086a3403..a9840e9bf5f 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -2352,6 +2352,7 @@ input[type='checkbox'] {
 .header__icon--cart .icon {
   height: 4.4rem;
   width: 4.4rem;
+  padding: 0;
 }
 
 .header__icon--cart {
diff --git a/assets/cart-drawer.js b/assets/cart-drawer.js
new file mode 100644
index 00000000000..0a4b61b227b
--- /dev/null
+++ b/assets/cart-drawer.js
@@ -0,0 +1,126 @@
+class CartDrawer extends HTMLElement {
+  constructor() {
+    super();
+
+    this.addEventListener('keyup', (evt) => evt.code === 'Escape' && this.close());
+    this.querySelector('#CartDrawer-Overlay').addEventListener('click', this.close.bind(this));
+    this.setHeaderCartIconAccessibility();
+  }
+
+  setHeaderCartIconAccessibility() {
+    const cartLink = document.querySelector('#cart-icon-bubble');
+    cartLink.setAttribute('role', 'button');
+    cartLink.setAttribute('aria-haspopup', 'dialog');
+    cartLink.addEventListener('click', (event) => {
+      event.preventDefault();
+      this.open(cartLink)
+    });
+    cartLink.addEventListener('keydown', (event) => {
+      if (event.code.toUpperCase() === 'SPACE') {
+        event.preventDefault();
+        this.open(cartLink);
+      }
+    });
+  }
+
+  open(triggeredBy) {
+    if (triggeredBy) this.setActiveElement(triggeredBy);
+    const cartDrawerNote = this.querySelector('[id^="Details-"] summary');
+    if (cartDrawerNote && !cartDrawerNote.hasAttribute('role')) this.setSummaryAccessibility(cartDrawerNote);
+    // here the animation doesn't seem to always get triggered. A timeout seem to help
+    setTimeout(() => {this.classList.add('animate', 'active')});
+
+    this.addEventListener('transitionend', () => {
+      const containerToTrapFocusOn = this.classList.contains('is-empty') ? this.querySelector('.drawer__inner-empty') : document.getElementById('CartDrawer');
+      const focusElement = this.querySelector('.drawer__inner') || this.querySelector('.drawer__close');
+      trapFocus(containerToTrapFocusOn, focusElement);
+    }, { once: true });
+
+    document.body.classList.add('overflow-hidden');
+  }
+
+  close() {
+    this.classList.remove('active');
+    removeTrapFocus(this.activeElement);
+    document.body.classList.remove('overflow-hidden');
+  }
+
+  setSummaryAccessibility(cartDrawerNote) {
+    cartDrawerNote.setAttribute('role', 'button');
+    cartDrawerNote.setAttribute('aria-expanded', 'false');
+
+    if(cartDrawerNote.nextElementSibling.getAttribute('id')) {
+      cartDrawerNote.setAttribute('aria-controls', cartDrawerNote.nextElementSibling.id);
+    }
+
+    cartDrawerNote.addEventListener('click', (event) => {
+      event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
+    });
+
+    cartDrawerNote.parentElement.addEventListener('keyup', onKeyUpEscape);
+  }
+
+  renderContents(parsedState) {
+    this.querySelector('.drawer__inner').classList.contains('is-empty') && this.querySelector('.drawer__inner').classList.remove('is-empty');
+    this.productId = parsedState.id;
+    this.getSectionsToRender().forEach((section => {
+      const sectionElement = section.selector ? document.querySelector(section.selector) : document.getElementById(section.id);
+      sectionElement.innerHTML =
+          this.getSectionInnerHTML(parsedState.sections[section.id], section.selector);
+    }));
+
+    setTimeout(() => {
+      this.querySelector('#CartDrawer-Overlay').addEventListener('click', this.close.bind(this));
+      this.open();
+    });
+  }
+
+  getSectionInnerHTML(html, selector = '.shopify-section') {
+    return new DOMParser()
+      .parseFromString(html, 'text/html')
+      .querySelector(selector).innerHTML;
+  }
+
+  getSectionsToRender() {
+    return [
+      {
+        id: 'cart-drawer',
+        selector: '#CartDrawer'
+      },
+      {
+        id: 'cart-icon-bubble'
+      }
+    ];
+  }
+
+  getSectionDOM(html, selector = '.shopify-section') {
+    return new DOMParser()
+      .parseFromString(html, 'text/html')
+      .querySelector(selector);
+  }
+
+  setActiveElement(element) {
+    this.activeElement = element;
+  }
+}
+
+customElements.define('cart-drawer', CartDrawer);
+
+class CartDrawerItems extends CartItems {
+  getSectionsToRender() {
+    return [
+      {
+        id: 'CartDrawer',
+        section: 'cart-drawer',
+        selector: '.drawer__inner'
+      },
+      {
+        id: 'cart-icon-bubble',
+        section: 'cart-icon-bubble',
+        selector: '.shopify-section'
+      }
+    ];
+  }
+}
+
+customElements.define('cart-drawer-items', CartDrawerItems);
diff --git a/assets/cart-notification.js b/assets/cart-notification.js
index a4837788601..d3b0502be17 100644
--- a/assets/cart-notification.js
+++ b/assets/cart-notification.js
@@ -5,7 +5,7 @@ class CartNotification extends HTMLElement {
     this.notification = document.getElementById('cart-notification');
     this.header = document.querySelector('sticky-header');
     this.onBodyClick = this.handleBodyClick.bind(this);
-    
+
     this.notification.addEventListener('keyup', (evt) => evt.code === 'Escape' && this.close());
     this.querySelectorAll('button[type="button"]').forEach((closeButton) =>
       closeButton.addEventListener('click', this.close.bind(this))
diff --git a/assets/cart.js b/assets/cart.js
index 6ff51b99f8d..d13cdd32855 100644
--- a/assets/cart.js
+++ b/assets/cart.js
@@ -3,7 +3,8 @@ class CartRemoveButton extends HTMLElement {
     super();
     this.addEventListener('click', (event) => {
       event.preventDefault();
-      this.closest('cart-items').updateQuantity(this.dataset.index, 0);
+      const cartItems = this.closest('cart-items') || this.closest('cart-drawer-items');
+      cartItems.updateQuantity(this.dataset.index, 0);
     });
   }
 }
@@ -14,7 +15,7 @@ class CartItems extends HTMLElement {
   constructor() {
     super();
 
-    this.lineItemStatusElement = document.getElementById('shopping-cart-line-item-status');
+    this.lineItemStatusElement = document.getElementById('shopping-cart-line-item-status') || document.getElementById('CartDrawer-LineItemStatus');
 
     this.currentItemCount = Array.from(this.querySelectorAll('[name="updates[]"]'))
       .reduce((total, quantityInput) => total + parseInt(quantityInput.value), 0);
@@ -72,43 +73,54 @@ class CartItems extends HTMLElement {
       .then((state) => {
         const parsedState = JSON.parse(state);
         this.classList.toggle('is-empty', parsedState.item_count === 0);
+        const cartDrawerWrapper = document.querySelector('cart-drawer');
         const cartFooter = document.getElementById('main-cart-footer');
 
         if (cartFooter) cartFooter.classList.toggle('is-empty', parsedState.item_count === 0);
+        if (cartDrawerWrapper) cartDrawerWrapper.classList.toggle('is-empty', parsedState.item_count === 0);
 
         this.getSectionsToRender().forEach((section => {
           const elementToReplace =
             document.getElementById(section.id).querySelector(section.selector) || document.getElementById(section.id);
-
           elementToReplace.innerHTML =
             this.getSectionInnerHTML(parsedState.sections[section.section], section.selector);
         }));
 
         this.updateLiveRegions(line, parsedState.item_count);
-        const lineItem =  document.getElementById(`CartItem-${line}`);
-        if (lineItem && lineItem.querySelector(`[name="${name}"]`)) lineItem.querySelector(`[name="${name}"]`).focus();
+        const lineItem =  document.getElementById(`CartItem-${line}`) || document.getElementById(`CartDrawer-Item-${line}`);
+        if (lineItem && lineItem.querySelector(`[name="${name}"]`)) {
+          cartDrawerWrapper ? trapFocus(cartDrawerWrapper, lineItem.querySelector(`[name="${name}"]`)) : lineItem.querySelector(`[name="${name}"]`).focus();
+        } else if (parsedState.item_count === 0 && cartDrawerWrapper) {
+          trapFocus(cartDrawerWrapper.querySelector('.drawer__inner-empty'), cartDrawerWrapper.querySelector('a'))
+        } else if (document.querySelector('.cart-item') && cartDrawerWrapper) {
+          trapFocus(cartDrawerWrapper, document.querySelector('.cart-item__name'))
+        }
         this.disableLoading();
       }).catch(() => {
         this.querySelectorAll('.loading-overlay').forEach((overlay) => overlay.classList.add('hidden'));
-        document.getElementById('cart-errors').textContent = window.cartStrings.error;
+        const errors = document.getElementById('cart-errors') || document.getElementById('CartDrawer-CartErrors');
+        errors.textContent = window.cartStrings.error;
         this.disableLoading();
       });
   }
 
   updateLiveRegions(line, itemCount) {
     if (this.currentItemCount === itemCount) {
-      document.getElementById(`Line-item-error-${line}`)
+      const lineItemError = document.getElementById(`Line-item-error-${line}`) || document.getElementById(`CartDrawer-LineItemError-${line}`);
+      const quantityElement = document.getElementById(`Quantity-${line}`) || document.getElementById(`Drawer-quantity-${line}`);
+
+      lineItemError
         .querySelector('.cart-item__error-text')
         .innerHTML = window.cartStrings.quantityError.replace(
           '[quantity]',
-          document.getElementById(`Quantity-${line}`).value
+          quantityElement.value
         );
     }
 
     this.currentItemCount = itemCount;
     this.lineItemStatusElement.setAttribute('aria-hidden', true);
 
-    const cartStatus = document.getElementById('cart-live-region-text');
+    const cartStatus = document.getElementById('cart-live-region-text') || document.getElementById('CartDrawer-LiveRegionText');
     cartStatus.setAttribute('aria-hidden', false);
 
     setTimeout(() => {
@@ -123,15 +135,35 @@ class CartItems extends HTMLElement {
   }
 
   enableLoading(line) {
-    document.getElementById('main-cart-items').classList.add('cart__items--disabled');
-    this.querySelectorAll(`#CartItem-${line} .loading-overlay`).forEach((overlay) => overlay.classList.remove('hidden'));
+    const mainCartItems = document.getElementById('main-cart-items') || document.getElementById('CartDrawer-CartItems');
+    mainCartItems.classList.add('cart__items--disabled');
+
+    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading-overlay`);
+    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading-overlay`);
+
+    [...cartItemElements, ...cartDrawerItemElements].forEach((overlay) => overlay.classList.remove('hidden'));
+
     document.activeElement.blur();
     this.lineItemStatusElement.setAttribute('aria-hidden', false);
   }
 
   disableLoading() {
-    document.getElementById('main-cart-items').classList.remove('cart__items--disabled');
+    const mainCartItems = document.getElementById('main-cart-items') || document.getElementById('CartDrawer-CartItems');
+    mainCartItems.classList.remove('cart__items--disabled');
   }
 }
 
 customElements.define('cart-items', CartItems);
+
+if (!customElements.get('cart-note')) {
+  customElements.define('cart-note', class CartNote extends HTMLElement {
+    constructor() {
+      super();
+
+      this.addEventListener('change', debounce((event) => {
+        const body = JSON.stringify({ note: event.target.value });
+        fetch(`${routes.cart_update_url}`, {...fetchConfig(), ...{ body }});
+      }, 300))
+    }
+  });
+};
diff --git a/assets/component-cart-drawer.css b/assets/component-cart-drawer.css
new file mode 100644
index 00000000000..2cea86354e5
--- /dev/null
+++ b/assets/component-cart-drawer.css
@@ -0,0 +1,385 @@
+.drawer {
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  background-color: rgba(var(--color-foreground), 0.5);
+  transition: visibility var(--duration-default) ease;
+}
+
+.drawer.active {
+  visibility: visible;
+}
+
+.drawer__inner {
+  height: 100%;
+  width: 40rem;
+  max-width: calc(100vw - 3rem);
+  padding: 0 1.5rem;
+  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
+  border-right: 0;
+  background-color: rgb(var(--color-background));
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform var(--duration-default) ease;
+}
+
+.drawer__inner-empty {
+  height: 100%;
+  padding: 0 1.5rem;
+  background-color: rgb(var(--color-background));
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cart-drawer__warnings {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+}
+
+cart-drawer.is-empty .drawer__inner {
+  display: grid;
+  grid-template-rows: 1fr;
+  align-items: center;
+  padding: 0;
+}
+
+cart-drawer.is-empty .drawer__header {
+  display: none;
+}
+
+cart-drawer:not(.is-empty) .cart-drawer__warnings,
+cart-drawer:not(.is-empty) .cart-drawer__collection {
+  display: none;
+}
+
+.cart-drawer__warnings--has-collection .cart__login-title {
+  margin-top: 2.5rem;
+}
+
+.drawer.active .drawer__inner {
+  transform: translateX(0);
+}
+
+.drawer__header {
+  position: relative;
+  background-color: rgb(var(--color-background));
+  padding: 1.5rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.drawer__heading {
+  margin: 0 0 1rem;
+}
+
+.drawer__close {
+  display: inline-block;
+  padding: 0;
+  min-width: 4.4rem;
+  min-height: 4.4rem;
+  box-shadow: 0 0 0 0.2rem rgba(var(--color-button), 0);
+  position: absolute;
+  top: 10px;
+  right: -10px;
+  color: rgb(var(--color-foreground));
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.cart-drawer__warnings .drawer__close {
+  right: 5px;
+}
+
+.drawer__close svg {
+  height: 2.4rem;
+  width: 2.4rem;
+}
+
+.drawer__contents {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.drawer__footer {
+  background-color: rgb(var(--color-background));
+  border-top: 0.1rem solid rgba(var(--color-foreground), 0.2);
+  padding: 1.5rem 0;
+}
+
+cart-drawer-items.is-empty + .drawer__footer {
+  display: none;
+}
+
+.drawer__footer > details {
+  margin-top: -1.5rem;
+  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.2);
+}
+
+.drawer__footer > details[open] {
+  padding-bottom: 1.5rem;
+}
+
+.drawer__footer summary {
+  display: flex;
+  position: relative;
+  line-height: 1;
+  padding: 1.5rem 0;
+}
+
+.drawer__footer > details + .cart-drawer__footer {
+  padding-top: 1.5rem;
+}
+
+cart-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+}
+
+.cart-drawer__overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.cart-drawer__overlay:empty {
+  display: block;
+}
+
+.cart-drawer__form {
+  flex-grow: 1;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.cart-drawer__collection {
+  margin: 0 2.5rem 1.5rem;
+}
+
+.cart-drawer .drawer__cart-items-wrapper {
+  flex-grow: 1;
+}
+
+.cart-drawer .cart-items, .cart-drawer tbody {
+  display: block;
+  width: 100%;
+}
+
+.cart-drawer thead {
+  display: inline-table;
+  width: 100%;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: rgb(var(--color-base-background-1));
+}
+
+cart-drawer-items {
+  overflow: auto;
+  flex: 1;
+}
+
+@media screen and (max-height: 650px) {
+  cart-drawer-items {
+    overflow: visible;
+  }
+
+  .drawer__inner {
+    overflow: scroll;
+  }
+}
+
+.cart-drawer .cart-item {
+  display: grid;
+  grid-template: repeat(2,auto) / repeat(4,1fr);
+  gap: 1.5rem;
+  margin-bottom: 0;
+}
+
+.cart-drawer .cart-item:last-child {
+  margin-bottom: 1rem;
+}
+
+.cart-drawer .cart-item__media {
+  grid-row: 1 / 3;
+}
+
+.cart-drawer .cart-item__image {
+  max-width: 100%;
+}
+
+.cart-drawer .cart-items thead {
+  margin-bottom: 0.5rem;
+}
+
+.cart-drawer .cart-items thead th:first-child,
+.cart-drawer .cart-items thead th:last-child {
+  width: 0;
+  padding: 0;
+}
+
+.cart-drawer .cart-items thead th:nth-child(2) {
+  width: 50%;
+  padding-left: 0;
+}
+
+.cart-drawer .cart-items thead tr {
+  display: table-row;
+  margin-bottom: 0;
+}
+
+.cart-drawer .cart-items th {
+  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+}
+
+.cart-drawer .cart-item:last-child {
+  margin-bottom: 1.5rem;
+}
+
+.cart-drawer .cart-item .loading-overlay {
+  right: 5px;
+  padding-top: 2.5rem;
+}
+
+.cart-drawer .cart-items td {
+  padding-top: 2rem;
+}
+
+.cart-drawer .cart-item > td + td {
+  padding-left: 1rem;
+}
+
+.cart-drawer .cart-item__details {
+  width: auto;
+  grid-column: 2 / 4;
+}
+
+.cart-drawer .cart-item__totals {
+  pointer-events: none;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.cart-drawer.cart-drawer .cart-item__price-wrapper > *:only-child {
+  margin-top: 0;
+}
+
+.cart-drawer .cart-item__price-wrapper .cart-item__discounted-prices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.cart-drawer .unit-price {
+  margin-top: 0.6rem;
+}
+
+.cart-drawer .cart-items .cart-item__quantity {
+  padding-top: 0;
+  grid-column: 2 / 5;
+}
+
+@media screen and (max-width: 749px) {
+  .cart-drawer .cart-item cart-remove-button {
+    margin-left: 0;
+  }
+}
+
+.cart-drawer__footer > * + * {
+  margin-top: 1rem;
+}
+
+.cart-drawer .totals {
+  justify-content: space-between;
+}
+
+.cart-drawer .price {
+  line-height: 1;
+}
+
+.cart-drawer .tax-note {
+  margin: 1.2rem 0 1rem auto;
+  text-align: left;
+}
+
+.cart-drawer .product-option dd {
+  word-break: break-word;
+}
+
+.cart-drawer details[open]>summary .icon-caret {
+  transform: rotate(180deg);
+}
+
+.cart-drawer .cart__checkout-button {
+  max-width: none;
+}
+
+.drawer__footer .cart__dynamic-checkout-buttons {
+  max-width: 100%;
+}
+
+.drawer__footer #dynamic-checkout-cart ul {
+  flex-wrap: wrap !important;
+  flex-direction: row !important;
+  margin: 0.5rem -0.5rem 0 0 !important;
+  gap: 0.5rem;
+}
+
+.drawer__footer [data-shopify-buttoncontainer] {
+  justify-content: flex-start;
+}
+
+.drawer__footer #dynamic-checkout-cart ul > li {
+	flex-basis: calc(50% - 0.5rem) !important;
+  margin: 0 !important;
+}
+
+.drawer__footer #dynamic-checkout-cart ul > li:only-child {
+  flex-basis: 100% !important;
+  margin-right: 0.5rem !important;
+}
+
+@media screen and (min-width: 750px) {
+  .drawer__footer #dynamic-checkout-cart ul > li {
+    flex-basis: calc(100% / 3 - 0.5rem) !important;
+    margin: 0 !important;
+  }
+
+  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(2),
+  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(2) ~ li,
+  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(4),
+  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(4) ~ li {
+	  flex-basis: calc(50% - 0.5rem) !important;
+  }
+}
+
+cart-drawer-items::-webkit-scrollbar {
+  width: 3px;
+}
+
+cart-drawer-items::-webkit-scrollbar-thumb {
+  background-color: rgba(var(--color-foreground), 0.7);
+  border-radius: 100px;
+}
+
+cart-drawer-items::-webkit-scrollbar-track-piece {
+  margin-top: 31px;
+}
diff --git a/assets/product-form.js b/assets/product-form.js
index a9c57df7323..974920ad890 100644
--- a/assets/product-form.js
+++ b/assets/product-form.js
@@ -6,8 +6,9 @@ if (!customElements.get('product-form')) {
       this.form = this.querySelector('form');
       this.form.querySelector('[name=id]').disabled = false;
       this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
-      this.cartNotification = document.querySelector('cart-notification');
+      this.cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer');
       this.submitButton = this.querySelector('[type="submit"]');
+      if (document.querySelector('cart-drawer')) this.submitButton.setAttribute('aria-haspopup', 'dialog');
     }
 
     onSubmitHandler(evt) {
@@ -15,7 +16,6 @@ if (!customElements.get('product-form')) {
       if (this.submitButton.getAttribute('aria-disabled') === 'true') return;
 
       this.handleErrorMessage();
-      this.cartNotification.setActiveElement(document.activeElement);
 
       this.submitButton.setAttribute('aria-disabled', true);
       this.submitButton.classList.add('loading');
@@ -26,8 +26,11 @@ if (!customElements.get('product-form')) {
       delete config.headers['Content-Type'];
 
       const formData = new FormData(this.form);
-      formData.append('sections', this.cartNotification.getSectionsToRender().map((section) => section.id));
-      formData.append('sections_url', window.location.pathname);
+      if (this.dataset.cartType != 'page') {
+        formData.append('sections', this.cart.getSectionsToRender().map((section) => section.id));
+        formData.append('sections_url', window.location.pathname);
+        this.cart.setActiveElement(document.activeElement);
+      }
       config.body = formData;
 
       fetch(`${routes.cart_add_url}`, config)
@@ -43,17 +46,20 @@ if (!customElements.get('product-form')) {
             soldOutMessage.classList.remove('hidden');
             this.error = true;
             return;
+          } else if (this.dataset.cartType == 'page') {
+            window.location = window.routes.cart_url;
+            return;
           }
 
           this.error = false;
           const quickAddModal = this.closest('quick-add-modal');
           if (quickAddModal) {
             document.body.addEventListener('modalClosed', () => {
-              setTimeout(() => { this.cartNotification.renderContents(response) });
+              setTimeout(() => { this.cart.renderContents(response) });
             }, { once: true });
             quickAddModal.hide(true);
           } else {
-            this.cartNotification.renderContents(response);
+            this.cart.renderContents(response);
           }
         })
         .catch((e) => {
@@ -61,6 +67,7 @@ if (!customElements.get('product-form')) {
         })
         .finally(() => {
           this.submitButton.classList.remove('loading');
+          if (this.cart && this.cart.classList.contains('is-empty')) this.cart.classList.remove('is-empty');
           if (!this.error) this.submitButton.removeAttribute('aria-disabled');
           this.querySelector('.loading-overlay__spinner').classList.add('hidden');
         });
diff --git a/assets/quick-add.js b/assets/quick-add.js
index 8fc7190451d..25d58911f82 100644
--- a/assets/quick-add.js
+++ b/assets/quick-add.js
@@ -6,10 +6,10 @@ if (!customElements.get('quick-add-modal')) {
     }
 
     hide(preventFocus = false) {
-      const cartNotification = document.querySelector('cart-notification');
+      const cartNotification = document.querySelector('cart-notification') || document.querySelector('cart-drawer');
       if (cartNotification) cartNotification.setActiveElement(this.openedBy);
       this.modalContent.innerHTML = '';
-      
+
       if (preventFocus) this.openedBy = null;
       super.hide();
     }
@@ -27,7 +27,7 @@ if (!customElements.get('quick-add-modal')) {
           this.preventDuplicatedIDs();
           this.removeDOMElements();
           this.setInnerHTML(this.modalContent, this.productElement.innerHTML);
-          
+
           if (window.Shopify && Shopify.PaymentButton) {
             Shopify.PaymentButton.init();
           }
@@ -62,7 +62,7 @@ if (!customElements.get('quick-add-modal')) {
     preventVariantURLSwitching() {
       this.modalContent.querySelector('variant-radios,variant-selects').setAttribute('data-update-url', 'false');
     }
-    
+
     removeDOMElements() {
       const pickupAvailability = this.productElement.querySelector('pickup-availability');
       if (pickupAvailability) pickupAvailability.remove();
diff --git a/config/settings_schema.json b/config/settings_schema.json
index 702b4e066c1..a4de5f68894 100644
--- a/config/settings_schema.json
+++ b/config/settings_schema.json
@@ -1143,5 +1143,52 @@
         "default": true
       }
     ]
+  },
+  {
+    "name": "t:settings_schema.cart.name",
+    "settings": [
+      {
+        "type": "select",
+        "id": "cart_type",
+        "options": [
+          {
+            "value": "drawer",
+            "label": "t:settings_schema.cart.settings.cart_type.drawer.label"
+          },
+          {
+            "value": "page",
+            "label": "t:settings_schema.cart.settings.cart_type.page.label"
+          },
+          {
+            "value": "notification",
+            "label": "t:settings_schema.cart.settings.cart_type.notification.label"
+          }
+        ],
+        "default": "notification",
+        "label": "t:settings_schema.cart.settings.cart_type.label"
+      },
+      {
+        "type": "checkbox",
+        "id": "show_vendor",
+        "label": "t:settings_schema.cart.settings.show_vendor.label",
+        "default": false
+      },
+      {
+        "type": "checkbox",
+        "id": "show_cart_note",
+        "label": "t:settings_schema.cart.settings.show_cart_note.label",
+        "default": false
+      },
+      {
+        "type": "header",
+        "content": "t:settings_schema.cart.settings.cart_drawer.header"
+      },
+      {
+        "type": "collection",
+        "id": "cart_drawer_collection",
+        "label": "t:settings_schema.cart.settings.cart_drawer.collection.label",
+        "info": "t:settings_schema.cart.settings.cart_drawer.collection.info"
+      }
+    ]
   }
 ]
diff --git a/layout/theme.liquid b/layout/theme.liquid
index 6d1f69abe97..088b81acf20 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -215,6 +215,10 @@
       {{ "accessibility.skip_to_text" | t }}
     </a>
 
+    {%- if settings.cart_type == 'drawer' -%}
+      {%- render 'cart-drawer' -%}
+    {%- endif -%}
+
     {% section 'announcement-bar' %}
     {% section 'header' %}
     <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
@@ -225,6 +229,7 @@
 
     <ul hidden>
       <li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
+      <li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
     </ul>
 
     <script>
@@ -233,6 +238,7 @@
         cart_add_url: '{{ routes.cart_add_url }}',
         cart_change_url: '{{ routes.cart_change_url }}',
         cart_update_url: '{{ routes.cart_update_url }}',
+        cart_url: '{{ routes.cart_url }}',
         predictive_search_url: '{{ routes.predictive_search_url }}'
       };
 
diff --git a/locales/bg-BG.json b/locales/bg-BG.json
index 7a8e0c9c28c..6a7d9c2232b 100644
--- a/locales/bg-BG.json
+++ b/locales/bg-BG.json
@@ -243,7 +243,8 @@
         "product": "Продукт",
         "price": "Цена",
         "total": "Обща сума",
-        "quantity": "Количество"
+        "quantity": "Количество",
+        "image": "Изображение на продукта"
       },
       "update": "Актуализиране",
       "note": "Специални инструкции за поръчката",
diff --git a/locales/cs.json b/locales/cs.json
index 9994f4bce5e..9f116692490 100644
--- a/locales/cs.json
+++ b/locales/cs.json
@@ -259,7 +259,8 @@
         "product": "Produkt",
         "price": "Cena",
         "total": "Celkem",
-        "quantity": "Množství"
+        "quantity": "Množství",
+        "image": "Obrázek produktu"
       },
       "login": {
         "title": "Máte účet?",
diff --git a/locales/cs.schema.json b/locales/cs.schema.json
index b6d3c6565c3..1a4d8d82213 100644
--- a/locales/cs.schema.json
+++ b/locales/cs.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Zásuvky"
+    },
+    "cart": {
+      "name": "Košík",
+      "settings": {
+        "cart_type": {
+          "label": "Typ košíku",
+          "drawer": {
+            "label": "Výsuvný panel"
+          },
+          "page": {
+            "label": "Stránka"
+          },
+          "notification": {
+            "label": "Notifikace ve vyskakovacím okně"
+          }
+        },
+        "show_vendor": {
+          "label": "Zobrazit dodavatele"
+        },
+        "show_cart_note": {
+          "label": "Povolit poznámku ke košíku"
+        },
+        "cart_drawer": {
+          "header": "Výsuvný košík",
+          "collection": {
+            "label": "Kolekce",
+            "info": "Zobrazí se v případě, že výsuvný košík je prázdný"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Mezisoučet",
-      "settings": {
-        "show_cart_note": {
-          "label": "Povolit poznámku ke košíku"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Mezisoučet ceny"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Položky",
-      "settings": {
-        "show_vendor": {
-          "label": "Zobrazit dodavatele"
-        }
-      }
+      "name": "Položky"
     },
     "main-collection-banner": {
       "name": "Banner kolekce",
diff --git a/locales/da.json b/locales/da.json
index a7fdbd3ffe6..62d039263c2 100644
--- a/locales/da.json
+++ b/locales/da.json
@@ -244,7 +244,8 @@
         "product": "Produkt",
         "price": "Pris",
         "total": "I alt",
-        "quantity": "Antal"
+        "quantity": "Antal",
+        "image": "Produktbillede"
       },
       "update": "Opdater",
       "login": {
diff --git a/locales/da.schema.json b/locales/da.schema.json
index 646697d2199..3564308fa3e 100644
--- a/locales/da.schema.json
+++ b/locales/da.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Skuffer"
+    },
+    "cart": {
+      "name": "Indkøbskurv",
+      "settings": {
+        "cart_type": {
+          "label": "Indkøbskurvtype",
+          "drawer": {
+            "label": "Skuffe"
+          },
+          "page": {
+            "label": "Side"
+          },
+          "notification": {
+            "label": "Pop op-meddelelse"
+          }
+        },
+        "show_vendor": {
+          "label": "Vis forhandler"
+        },
+        "show_cart_note": {
+          "label": "Aktivér bemærkning til indkøbskurv"
+        },
+        "cart_drawer": {
+          "header": "Indkøbskurvskuffe",
+          "collection": {
+            "label": "Kollektion",
+            "info": "Synlig, når indkøbskurvskuffen er tom"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Subtotal",
-      "settings": {
-        "show_cart_note": {
-          "label": "Aktivér bemærkning til indkøbskurv"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Subtotal"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Varer",
-      "settings": {
-        "show_vendor": {
-          "label": "Vis forhandler"
-        }
-      }
+      "name": "Varer"
     },
     "main-collection-banner": {
       "name": "Kollektionsbanner",
diff --git a/locales/de.json b/locales/de.json
index c7a38b9f044..31b006a735e 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -244,7 +244,8 @@
         "product": "Produkt",
         "price": "Preis",
         "total": "Gesamtsumme",
-        "quantity": "Anzahl"
+        "quantity": "Anzahl",
+        "image": "Produktbild"
       },
       "update": "Aktualisieren",
       "login": {
diff --git a/locales/de.schema.json b/locales/de.schema.json
index 4850eaed518..7a0f7679505 100644
--- a/locales/de.schema.json
+++ b/locales/de.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Einschübe"
+    },
+    "cart": {
+      "name": "Warenkorb",
+      "settings": {
+        "cart_type": {
+          "label": "Warenkorbstil",
+          "drawer": {
+            "label": "Einschub"
+          },
+          "page": {
+            "label": "Seite"
+          },
+          "notification": {
+            "label": "Pop-up-Benachrichtigung"
+          }
+        },
+        "show_vendor": {
+          "label": "Anbieter anzeigen"
+        },
+        "show_cart_note": {
+          "label": "Warenkorbanmerkung aktivieren"
+        },
+        "cart_drawer": {
+          "header": "Warenkorbeinschub",
+          "collection": {
+            "label": "Kategorie",
+            "info": "Sichtbar, wenn der Warenkorbeinschub leer ist"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Zwischensumme",
-      "settings": {
-        "show_cart_note": {
-          "label": "Warenkorbanmerkung aktivieren"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Zwischensumme"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Artikel",
-      "settings": {
-        "show_vendor": {
-          "label": "Anbieter anzeigen"
-        }
-      }
+      "name": "Artikel"
     },
     "main-collection-banner": {
       "name": "Kategoriebanner",
diff --git a/locales/el.json b/locales/el.json
index edf53c5bad5..fdc8c2bffbc 100644
--- a/locales/el.json
+++ b/locales/el.json
@@ -244,7 +244,8 @@
         "product": "Προϊόν",
         "price": "Τιμή",
         "total": "Σύνολο",
-        "quantity": "Ποσότητα"
+        "quantity": "Ποσότητα",
+        "image": "Εικόνα προϊόντος"
       },
       "update": "Ενημέρωση",
       "login": {
diff --git a/locales/en.default.json b/locales/en.default.json
index 67938167bcb..7108ecf41ec 100644
--- a/locales/en.default.json
+++ b/locales/en.default.json
@@ -244,7 +244,8 @@
         "product": "Product",
         "price": "Price",
         "total": "Total",
-        "quantity": "Quantity"
+        "quantity": "Quantity",
+        "image": "Product image"
       },
       "update": "Update",
       "login": {
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index 037e4361866..86e7ba04183 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -277,6 +277,36 @@
         }
       }
     },
+    "cart": {
+      "name": "Cart",
+      "settings": {
+        "cart_type": {
+          "label": "Cart type",
+          "drawer": {
+            "label": "Drawer"
+          },
+          "page": {
+            "label": "Page"
+          },
+          "notification": {
+            "label": "Popup notification"
+          }
+        },
+        "show_vendor": {
+          "label": "Show vendor"
+        },
+        "show_cart_note": {
+          "label": "Enable cart note"
+        },
+        "cart_drawer": {
+          "header": "Cart drawer",
+          "collection": {
+            "label": "Collection",
+            "info": "Visible when cart drawer is empty"
+          }
+        }
+      }
+    },
     "layout": {
       "name": "Layout",
       "settings": {
@@ -1316,11 +1346,6 @@
     },
     "main-cart-footer": {
       "name": "Subtotal",
-      "settings": {
-        "show_cart_note": {
-          "label": "Enable cart note"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Subtotal price"
@@ -1331,12 +1356,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Items",
-      "settings": {
-        "show_vendor": {
-          "label": "Show vendor"
-        }
-      }
+      "name": "Items"
     },
     "main-collection-banner": {
       "name": "Collection banner",
@@ -2640,4 +2660,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/locales/es.json b/locales/es.json
index 502e8678ac6..ed06e8a5204 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -244,7 +244,8 @@
         "product": "Producto",
         "price": "Precio",
         "total": "Total",
-        "quantity": "Cantidad"
+        "quantity": "Cantidad",
+        "image": "Imagen del producto"
       },
       "update": "Actualizar",
       "login": {
diff --git a/locales/es.schema.json b/locales/es.schema.json
index 67a3c25b685..5c9a4d688a9 100644
--- a/locales/es.schema.json
+++ b/locales/es.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Cajones"
+    },
+    "cart": {
+      "name": "Carrito",
+      "settings": {
+        "cart_type": {
+          "label": "Tipo de carrito",
+          "drawer": {
+            "label": "Lateral"
+          },
+          "page": {
+            "label": "Página"
+          },
+          "notification": {
+            "label": "Notificación emergente"
+          }
+        },
+        "show_vendor": {
+          "label": "Mostrar proveedor"
+        },
+        "show_cart_note": {
+          "label": "Habilitar nota del carrito"
+        },
+        "cart_drawer": {
+          "header": "Carrito lateral",
+          "collection": {
+            "label": "Colección",
+            "info": "Visible cuando el carrito lateral está vacío"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Subtotal",
-      "settings": {
-        "show_cart_note": {
-          "label": "Habilitar nota del carrito"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Precio subtotal"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Artículos",
-      "settings": {
-        "show_vendor": {
-          "label": "Mostrar proveedor"
-        }
-      }
+      "name": "Artículos"
     },
     "main-collection-banner": {
       "name": "Banner de colección",
diff --git a/locales/fi.json b/locales/fi.json
index 4e7a1362bc3..3d37d22d051 100644
--- a/locales/fi.json
+++ b/locales/fi.json
@@ -244,7 +244,8 @@
         "product": "Tuote",
         "price": "Hinta",
         "total": "Yhteensä",
-        "quantity": "Määrä"
+        "quantity": "Määrä",
+        "image": "Tuotekuva"
       },
       "update": "Päivitä",
       "login": {
diff --git a/locales/fi.schema.json b/locales/fi.schema.json
index b3aa454b64e..4ccb42fc134 100644
--- a/locales/fi.schema.json
+++ b/locales/fi.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Vetolaatikot"
+    },
+    "cart": {
+      "name": "Ostoskori",
+      "settings": {
+        "cart_type": {
+          "label": "Ostoskorin tyyppi",
+          "drawer": {
+            "label": "Laatikko"
+          },
+          "page": {
+            "label": "Sivu"
+          },
+          "notification": {
+            "label": "Ponnahdusikkunailmoitukset"
+          }
+        },
+        "show_vendor": {
+          "label": "Näytä myyjä"
+        },
+        "show_cart_note": {
+          "label": "Ota tilauskommentit käyttöön"
+        },
+        "cart_drawer": {
+          "header": "Veto-ostoskori",
+          "collection": {
+            "label": "Kokoelma",
+            "info": "Näkyy, kun veto-ostoskori on tyhjä"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Välisumma",
-      "settings": {
-        "show_cart_note": {
-          "label": "Ota tilauskommentit käyttöön"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Välisumma yhteensä"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Tuotteet",
-      "settings": {
-        "show_vendor": {
-          "label": "Näytä myyjä"
-        }
-      }
+      "name": "Tuotteet"
     },
     "main-collection-banner": {
       "name": "Kokoelmabanneri",
diff --git a/locales/fr.json b/locales/fr.json
index e286553a9a0..a05b9bf62fa 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -244,7 +244,8 @@
         "product": "Produit",
         "price": "Prix",
         "total": "Total",
-        "quantity": "Quantité"
+        "quantity": "Quantité",
+        "image": "Image de produit"
       },
       "update": "Mettre à jour",
       "login": {
diff --git a/locales/fr.schema.json b/locales/fr.schema.json
index 3bfb17efdca..677225eca14 100644
--- a/locales/fr.schema.json
+++ b/locales/fr.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Tiroirs"
+    },
+    "cart": {
+      "name": "Panier",
+      "settings": {
+        "cart_type": {
+          "label": "Type de panier",
+          "drawer": {
+            "label": "Tiroir"
+          },
+          "page": {
+            "label": "Page"
+          },
+          "notification": {
+            "label": "Notification contextuelle"
+          }
+        },
+        "show_vendor": {
+          "label": "Afficher le distributeur"
+        },
+        "show_cart_note": {
+          "label": "Activer la note de panier"
+        },
+        "cart_drawer": {
+          "header": "Panier coulissant",
+          "collection": {
+            "label": "Collection",
+            "info": "Visible lorsque le panier coulissant est vide"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Sous-total",
-      "settings": {
-        "show_cart_note": {
-          "label": "Activer la note de panier"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Sous-total du prix"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Articles",
-      "settings": {
-        "show_vendor": {
-          "label": "Afficher le distributeur"
-        }
-      }
+      "name": "Articles"
     },
     "main-collection-banner": {
       "name": "Bannière de collection",
diff --git a/locales/hr-HR.json b/locales/hr-HR.json
index bdf2df6ed3c..329cf208e2f 100644
--- a/locales/hr-HR.json
+++ b/locales/hr-HR.json
@@ -252,7 +252,8 @@
         "product": "Proizvod",
         "price": "Cijena",
         "total": "Ukupno",
-        "quantity": "Količina"
+        "quantity": "Količina",
+        "image": "Slika proizvoda"
       },
       "login": {
         "title": "Imate li račun?",
diff --git a/locales/hu.json b/locales/hu.json
index 2b7db288f21..264f222fd05 100644
--- a/locales/hu.json
+++ b/locales/hu.json
@@ -244,7 +244,8 @@
         "product": "Termék",
         "price": "Ár",
         "total": "Végösszeg",
-        "quantity": "Mennyiség"
+        "quantity": "Mennyiség",
+        "image": "Termék képe"
       },
       "update": "Frissítés",
       "login": {
diff --git a/locales/id.json b/locales/id.json
index bf35d615623..4ea156e23ea 100644
--- a/locales/id.json
+++ b/locales/id.json
@@ -244,7 +244,8 @@
         "product": "Produk",
         "price": "Harga",
         "total": "Total",
-        "quantity": "Jumlah"
+        "quantity": "Jumlah",
+        "image": "Gambar produk"
       },
       "update": "Perbarui",
       "login": {
diff --git a/locales/it.json b/locales/it.json
index 8115b9b3ca5..d7ac5e63117 100644
--- a/locales/it.json
+++ b/locales/it.json
@@ -244,7 +244,8 @@
         "product": "Prodotto",
         "price": "Prezzo",
         "total": "Totale",
-        "quantity": "Quantità"
+        "quantity": "Quantità",
+        "image": "Immagine del prodotto"
       },
       "update": "Aggiorna",
       "login": {
diff --git a/locales/it.schema.json b/locales/it.schema.json
index 3f5f955260a..453fbbff478 100644
--- a/locales/it.schema.json
+++ b/locales/it.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Finestre"
+    },
+    "cart": {
+      "name": "Carrello",
+      "settings": {
+        "cart_type": {
+          "label": "Tipo di carrello",
+          "drawer": {
+            "label": "Finestra"
+          },
+          "page": {
+            "label": "Pagina"
+          },
+          "notification": {
+            "label": "Notifica pop up"
+          }
+        },
+        "show_vendor": {
+          "label": "Mostra fornitore"
+        },
+        "show_cart_note": {
+          "label": "Abilita nota carrello"
+        },
+        "cart_drawer": {
+          "header": "Finestra del carrello",
+          "collection": {
+            "label": "Collezione",
+            "info": "Visibile quando la finestra del carrello è vuota"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Subtotale",
-      "settings": {
-        "show_cart_note": {
-          "label": "Abilita nota carrello"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Prezzo subtotale"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Articoli",
-      "settings": {
-        "show_vendor": {
-          "label": "Mostra fornitore"
-        }
-      }
+      "name": "Articoli"
     },
     "main-collection-banner": {
       "name": "Banner collezione",
diff --git a/locales/ja.json b/locales/ja.json
index 2aa510fef59..4b5959b6d57 100644
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -244,7 +244,8 @@
         "product": "商品",
         "price": "価格",
         "total": "合計",
-        "quantity": "数量"
+        "quantity": "数量",
+        "image": "商品画像"
       },
       "update": "アップデート",
       "login": {
diff --git a/locales/ja.schema.json b/locales/ja.schema.json
index 48770078dbc..e2fd52f2ba1 100644
--- a/locales/ja.schema.json
+++ b/locales/ja.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "ドロワー"
+    },
+    "cart": {
+      "name": "カート",
+      "settings": {
+        "cart_type": {
+          "label": "カートタイプ",
+          "drawer": {
+            "label": "ドロワー"
+          },
+          "page": {
+            "label": "ページ"
+          },
+          "notification": {
+            "label": "ポップアップ通知"
+          }
+        },
+        "show_vendor": {
+          "label": "販売元を表示"
+        },
+        "show_cart_note": {
+          "label": "カートメモを有効にする"
+        },
+        "cart_drawer": {
+          "header": "カートドロワー",
+          "collection": {
+            "label": "コレクション",
+            "info": "カートドロワーが空の場合に表示"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "小計",
-      "settings": {
-        "show_cart_note": {
-          "label": "カートメモを有効にする"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "小計金額"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "アイテム",
-      "settings": {
-        "show_vendor": {
-          "label": "販売元を表示する"
-        }
-      }
+      "name": "アイテム"
     },
     "main-collection-banner": {
       "name": "コレクションバナー",
diff --git a/locales/ko.json b/locales/ko.json
index e3fc98817f9..f5f411a0842 100644
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -244,7 +244,8 @@
         "product": "제품",
         "price": "가격",
         "total": "총계",
-        "quantity": "수량"
+        "quantity": "수량",
+        "image": "제품 이미지"
       },
       "update": "업데이트",
       "login": {
diff --git a/locales/ko.schema.json b/locales/ko.schema.json
index 9ad29c99bc0..1e5630cb33f 100644
--- a/locales/ko.schema.json
+++ b/locales/ko.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "등록기"
+    },
+    "cart": {
+      "name": "카트",
+      "settings": {
+        "cart_type": {
+          "label": "카트 유형",
+          "drawer": {
+            "label": "펼침 메뉴"
+          },
+          "page": {
+            "label": "페이지"
+          },
+          "notification": {
+            "label": "팝업 알림"
+          }
+        },
+        "show_vendor": {
+          "label": "공급업체 표시"
+        },
+        "show_cart_note": {
+          "label": "카트 참고 사항 사용"
+        },
+        "cart_drawer": {
+          "header": "카트 서랍",
+          "collection": {
+            "label": "컬렉션",
+            "info": "카트 서랍이 비어있으면 표시"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "소계",
-      "settings": {
-        "show_cart_note": {
-          "label": "카트 참고 사항 사용"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "소계 가격"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "품목",
-      "settings": {
-        "show_vendor": {
-          "label": "공급업체 표시"
-        }
-      }
+      "name": "품목"
     },
     "main-collection-banner": {
       "name": "컬렉션 배너",
diff --git a/locales/lt-LT.json b/locales/lt-LT.json
index 629cff799b7..d4cfc420f9a 100644
--- a/locales/lt-LT.json
+++ b/locales/lt-LT.json
@@ -259,7 +259,8 @@
         "product": "Gaminys",
         "price": "Kaina",
         "total": "Visa suma",
-        "quantity": "Kiekis"
+        "quantity": "Kiekis",
+        "image": "Gaminio nuotrauka"
       },
       "login": {
         "title": "Turite paskyrą?",
diff --git a/locales/nb.json b/locales/nb.json
index c533f85321f..eec8c7562bd 100644
--- a/locales/nb.json
+++ b/locales/nb.json
@@ -244,7 +244,8 @@
         "product": "Produkt",
         "price": "Pris",
         "total": "Totalt",
-        "quantity": "Antall"
+        "quantity": "Antall",
+        "image": "Produktbilde"
       },
       "update": "Oppdater",
       "login": {
diff --git a/locales/nb.schema.json b/locales/nb.schema.json
index 3106354c147..a22366be47b 100644
--- a/locales/nb.schema.json
+++ b/locales/nb.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Skuffer"
+    },
+    "cart": {
+      "name": "Handlekurv",
+      "settings": {
+        "cart_type": {
+          "label": "Handlekurvtype",
+          "drawer": {
+            "label": "Skuff"
+          },
+          "page": {
+            "label": "Side"
+          },
+          "notification": {
+            "label": "Popup-varsel"
+          }
+        },
+        "show_vendor": {
+          "label": "Vis selger"
+        },
+        "show_cart_note": {
+          "label": "Aktiver handlekurvnotat"
+        },
+        "cart_drawer": {
+          "header": "Handlekurvskuff",
+          "collection": {
+            "label": "Samling",
+            "info": "Synlig når handlekurvskuffen er tom"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Delsum",
-      "settings": {
-        "show_cart_note": {
-          "label": "Aktiver handlekurvnotat"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Delsumpris"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Varer",
-      "settings": {
-        "show_vendor": {
-          "label": "Vis selger"
-        }
-      }
+      "name": "Varer"
     },
     "main-collection-banner": {
       "name": "Samlingsbanner",
diff --git a/locales/nl.json b/locales/nl.json
index 59540fc40a1..ec2f58d8a1e 100644
--- a/locales/nl.json
+++ b/locales/nl.json
@@ -244,7 +244,8 @@
         "product": "Product",
         "price": "Prijs",
         "total": "Totaal",
-        "quantity": "Aantal"
+        "quantity": "Aantal",
+        "image": "Productafbeelding"
       },
       "update": "Bijwerken",
       "login": {
diff --git a/locales/nl.schema.json b/locales/nl.schema.json
index 2f16bdd68a4..5995a04bfe9 100644
--- a/locales/nl.schema.json
+++ b/locales/nl.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Lades"
+    },
+    "cart": {
+      "name": "Winkelwagen",
+      "settings": {
+        "cart_type": {
+          "label": "Type winkelwagen",
+          "drawer": {
+            "label": "Optie"
+          },
+          "page": {
+            "label": "Pagina"
+          },
+          "notification": {
+            "label": "Pop-upmelding"
+          }
+        },
+        "show_vendor": {
+          "label": "Verkoper weergeven"
+        },
+        "show_cart_note": {
+          "label": "Notitie voor winkelwagen inschakelen"
+        },
+        "cart_drawer": {
+          "header": "Winkelwagenoptie",
+          "collection": {
+            "label": "Collectie",
+            "info": "Zichtbaar wanneer winkelwagenoptie leeg is"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Subtotaal",
-      "settings": {
-        "show_cart_note": {
-          "label": "Opmerking voor winkelwagen inschakelen"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Subtotaalprijs"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Artikelen",
-      "settings": {
-        "show_vendor": {
-          "label": "Verkoper weergeven"
-        }
-      }
+      "name": "Artikelen"
     },
     "main-collection-banner": {
       "name": "Collectiebanner",
diff --git a/locales/pl.json b/locales/pl.json
index 7133c971f02..3fcd43abf22 100644
--- a/locales/pl.json
+++ b/locales/pl.json
@@ -259,7 +259,8 @@
         "product": "Produkt",
         "price": "Cena",
         "total": "Suma",
-        "quantity": "Ilość"
+        "quantity": "Ilość",
+        "image": "Obraz produktu"
       },
       "login": {
         "title": "Masz już konto?",
diff --git a/locales/pl.schema.json b/locales/pl.schema.json
index 2d203247937..4566272617b 100644
--- a/locales/pl.schema.json
+++ b/locales/pl.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Szuflady"
+    },
+    "cart": {
+      "name": "Koszyk",
+      "settings": {
+        "cart_type": {
+          "label": "Typ koszyka",
+          "drawer": {
+            "label": "Szuflada"
+          },
+          "page": {
+            "label": "Strona"
+          },
+          "notification": {
+            "label": "Powiadomienie w wyskakującym okienku"
+          }
+        },
+        "show_vendor": {
+          "label": "Pokaż dostawcę"
+        },
+        "show_cart_note": {
+          "label": "Włącz uwagę dotyczącą koszyka"
+        },
+        "cart_drawer": {
+          "header": "Szuflada koszyka",
+          "collection": {
+            "label": "Kolekcja",
+            "info": "Widoczny, gdy szuflada koszyka jest pusta"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Suma częściowa",
-      "settings": {
-        "show_cart_note": {
-          "label": "Włącz uwagę dotyczącą koszyka"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Cena cząstkowa"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Pozycje",
-      "settings": {
-        "show_vendor": {
-          "label": "Pokaż dostawcę"
-        }
-      }
+      "name": "Pozycje"
     },
     "main-collection-banner": {
       "name": "Baner kolekcji",
diff --git a/locales/pt-BR.json b/locales/pt-BR.json
index d6584f2952c..b5ec9d5cb7f 100644
--- a/locales/pt-BR.json
+++ b/locales/pt-BR.json
@@ -244,7 +244,8 @@
         "product": "Produto",
         "price": "Preço",
         "total": "Total",
-        "quantity": "Quantidade"
+        "quantity": "Quantidade",
+        "image": "Imagem do produto"
       },
       "update": "Atualizar",
       "login": {
diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json
index 701a433f417..5f047e5aa03 100644
--- a/locales/pt-BR.schema.json
+++ b/locales/pt-BR.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Menus deslizantes"
+    },
+    "cart": {
+      "name": "Carrinho",
+      "settings": {
+        "cart_type": {
+          "label": "Tipo de carrinho",
+          "drawer": {
+            "label": "Deslizante"
+          },
+          "page": {
+            "label": "Página"
+          },
+          "notification": {
+            "label": "Notificação pop-up"
+          }
+        },
+        "show_vendor": {
+          "label": "Exibir fabricante"
+        },
+        "show_cart_note": {
+          "label": "Habilitar observação do carrinho"
+        },
+        "cart_drawer": {
+          "header": "Carrinho de compras deslizante",
+          "collection": {
+            "label": "Coleção",
+            "info": "Visível quando o carrinho de compras deslizante está vazio"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Subtotal",
-      "settings": {
-        "show_cart_note": {
-          "label": "Habilitar observação do carrinho"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Preço subtotal"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Itens",
-      "settings": {
-        "show_vendor": {
-          "label": "Exibir fabricante"
-        }
-      }
+      "name": "Itens"
     },
     "main-collection-banner": {
       "name": "Banner da coleção",
diff --git a/locales/pt-PT.json b/locales/pt-PT.json
index 7c3a7b8ec04..497168f1436 100644
--- a/locales/pt-PT.json
+++ b/locales/pt-PT.json
@@ -244,7 +244,8 @@
         "product": "Produto",
         "price": "Preço",
         "total": "Total",
-        "quantity": "Quantidade"
+        "quantity": "Quantidade",
+        "image": "Imagem de produto"
       },
       "update": "Atualizar",
       "login": {
diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json
index 5f38a0c53ee..f91aeec481d 100644
--- a/locales/pt-PT.schema.json
+++ b/locales/pt-PT.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Gavetas"
+    },
+    "cart": {
+      "name": "Carrinho",
+      "settings": {
+        "cart_type": {
+          "label": "Tipo de carrinho",
+          "drawer": {
+            "label": "Gaveta"
+          },
+          "page": {
+            "label": "Página"
+          },
+          "notification": {
+            "label": "Notificação pop-up"
+          }
+        },
+        "show_vendor": {
+          "label": "Mostrar fornecedor"
+        },
+        "show_cart_note": {
+          "label": "Ativar nota do carrinho"
+        },
+        "cart_drawer": {
+          "header": "Painel deslizante do carrinho",
+          "collection": {
+            "label": "Coleção",
+            "info": "Visível quando o painel deslizante do carrinho está vazio"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Subtotal",
-      "settings": {
-        "show_cart_note": {
-          "label": "Ativar nota do carrinho"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Subtotal"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Itens",
-      "settings": {
-        "show_vendor": {
-          "label": "Mostrar fornecedor"
-        }
-      }
+      "name": "Itens"
     },
     "main-collection-banner": {
       "name": "Faixa de coleção",
diff --git a/locales/ro-RO.json b/locales/ro-RO.json
index 0a3ea2d302a..88ecad5b6d2 100644
--- a/locales/ro-RO.json
+++ b/locales/ro-RO.json
@@ -252,7 +252,8 @@
         "product": "Produs",
         "price": "Preț",
         "total": "Total",
-        "quantity": "Cantitate"
+        "quantity": "Cantitate",
+        "image": "Imagine produs"
       },
       "login": {
         "title": "Ai un cont?",
diff --git a/locales/ru.json b/locales/ru.json
index c92ef7ea250..c2a6e007810 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -259,7 +259,8 @@
         "product": "Товар",
         "price": "Цена",
         "total": "Всего",
-        "quantity": "Количество"
+        "quantity": "Количество",
+        "image": "Изображение продукта"
       },
       "login": {
         "title": "Уже есть учетная запись?",
diff --git a/locales/sk-SK.json b/locales/sk-SK.json
index 35d7aa22c62..f71b9949625 100644
--- a/locales/sk-SK.json
+++ b/locales/sk-SK.json
@@ -259,7 +259,8 @@
         "product": "Produkt",
         "price": "Cena",
         "total": "Celkove",
-        "quantity": "Množstvo"
+        "quantity": "Množstvo",
+        "image": "Obrázok produktu"
       },
       "login": {
         "title": "Máte konto?",
diff --git a/locales/sl-SI.json b/locales/sl-SI.json
index 6be9bf32b5c..5e80b7c0ab6 100644
--- a/locales/sl-SI.json
+++ b/locales/sl-SI.json
@@ -259,7 +259,8 @@
         "product": "Izdelek",
         "price": "Cena",
         "total": "Skupaj",
-        "quantity": "Količina"
+        "quantity": "Količina",
+        "image": "Slika izdelka"
       },
       "login": {
         "title": "Ali imate račun?",
diff --git a/locales/sv.json b/locales/sv.json
index 56501c63a6a..714dbfcb150 100644
--- a/locales/sv.json
+++ b/locales/sv.json
@@ -244,7 +244,8 @@
         "product": "Produkt",
         "price": "Pris",
         "total": "Totalt",
-        "quantity": "Kvantitet"
+        "quantity": "Kvantitet",
+        "image": "Produktbild"
       },
       "update": "Uppdatera",
       "login": {
diff --git a/locales/sv.schema.json b/locales/sv.schema.json
index d511b5cbda7..dacbc61c71d 100644
--- a/locales/sv.schema.json
+++ b/locales/sv.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Lådor"
+    },
+    "cart": {
+      "name": "Varukorg",
+      "settings": {
+        "cart_type": {
+          "label": "Varukorgstyp",
+          "drawer": {
+            "label": "Låda"
+          },
+          "page": {
+            "label": "Sida"
+          },
+          "notification": {
+            "label": "Popup-avisering"
+          }
+        },
+        "show_vendor": {
+          "label": "Visa säljare"
+        },
+        "show_cart_note": {
+          "label": "Aktivera varukorgsanteckning"
+        },
+        "cart_drawer": {
+          "header": "Varukorgspanel",
+          "collection": {
+            "label": "Produktserie",
+            "info": "Synlig när varukorgspanelen är tom"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Delsumma",
-      "settings": {
-        "show_cart_note": {
-          "label": "Aktivera varukorgsmeddelande"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Delsumma"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Artiklar",
-      "settings": {
-        "show_vendor": {
-          "label": "Visa säljare"
-        }
-      }
+      "name": "Artiklar"
     },
     "main-collection-banner": {
       "name": "Banner för produktserie",
diff --git a/locales/th.json b/locales/th.json
index 2457d0d6d92..af5507df425 100644
--- a/locales/th.json
+++ b/locales/th.json
@@ -244,7 +244,8 @@
         "product": "สินค้า",
         "price": "ราคา",
         "total": "ยอดรวม",
-        "quantity": "ปริมาณ"
+        "quantity": "ปริมาณ",
+        "image": "รูปภาพสินค้า"
       },
       "update": "อัปเดต",
       "login": {
diff --git a/locales/th.schema.json b/locales/th.schema.json
index 09a06601ca4..e08d4c56726 100644
--- a/locales/th.schema.json
+++ b/locales/th.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "ลิ้นชัก"
+    },
+    "cart": {
+      "name": "ตะกร้าสินค้า",
+      "settings": {
+        "cart_type": {
+          "label": "ประเภทตะกร้าสินค้า",
+          "drawer": {
+            "label": "ลิ้นชัก"
+          },
+          "page": {
+            "label": "หน้า"
+          },
+          "notification": {
+            "label": "การแจ้งเตือนแบบป๊อปอัพ"
+          }
+        },
+        "show_vendor": {
+          "label": "แสดงผู้ขาย"
+        },
+        "show_cart_note": {
+          "label": "เปิดใช้หมายเหตุสำหรับตะกร้าสินค้า"
+        },
+        "cart_drawer": {
+          "header": "ลิ้นชักตะกร้าสินค้า",
+          "collection": {
+            "label": "คอลเลกชัน",
+            "info": "ปรากฏขึ้นเมื่อลิ้นชักตะกร้าสินค้าว่างเปล่า"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "ยอดรวม",
-      "settings": {
-        "show_cart_note": {
-          "label": "เปิดใช้งานหมายเหตุสำหรับตะกร้าสินค้า"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "ราคารวมย่อย"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "รายการ",
-      "settings": {
-        "show_vendor": {
-          "label": "แสดงผู้ขาย"
-        }
-      }
+      "name": "รายการ"
     },
     "main-collection-banner": {
       "name": "แบนเนอร์คอลเลกชัน",
diff --git a/locales/tr.json b/locales/tr.json
index 16f51e93e39..3cb6d3a90ce 100644
--- a/locales/tr.json
+++ b/locales/tr.json
@@ -244,7 +244,8 @@
         "product": "Ürün",
         "price": "Fiyat",
         "total": "Toplam",
-        "quantity": "Adet"
+        "quantity": "Adet",
+        "image": "Ürün görseli"
       },
       "update": "Güncelle",
       "login": {
diff --git a/locales/tr.schema.json b/locales/tr.schema.json
index 9fd475242c0..eaec33de688 100644
--- a/locales/tr.schema.json
+++ b/locales/tr.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Çekmeceler"
+    },
+    "cart": {
+      "name": "Sepet",
+      "settings": {
+        "cart_type": {
+          "label": "Sepet türü",
+          "drawer": {
+            "label": "Çekmece"
+          },
+          "page": {
+            "label": "Sayfa"
+          },
+          "notification": {
+            "label": "Açılır pencere bildirimi"
+          }
+        },
+        "show_vendor": {
+          "label": "Satıcıyı göster"
+        },
+        "show_cart_note": {
+          "label": "Sepet notunu etkinleştir"
+        },
+        "cart_drawer": {
+          "header": "Sepet çekmecesi",
+          "collection": {
+            "label": "Koleksiyon",
+            "info": "Sepet çekmecesi boşken görünür"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Alt toplam",
-      "settings": {
-        "show_cart_note": {
-          "label": "Sepet notunu etkinleştir"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Alt toplam fiyatı"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Ürünler",
-      "settings": {
-        "show_vendor": {
-          "label": "Satıcıyı göster"
-        }
-      }
+      "name": "Ürünler"
     },
     "main-collection-banner": {
       "name": "Koleksiyon banner'ı",
diff --git a/locales/vi.json b/locales/vi.json
index b80dea0bcf9..f8e70dee17e 100644
--- a/locales/vi.json
+++ b/locales/vi.json
@@ -244,7 +244,8 @@
         "product": "Sản phẩm",
         "price": "Giá",
         "total": "Tổng",
-        "quantity": "Số lượng"
+        "quantity": "Số lượng",
+        "image": "Hình ảnh sản phẩm"
       },
       "update": "Cập nhật",
       "login": {
diff --git a/locales/vi.schema.json b/locales/vi.schema.json
index d42d61a125a..75a8d800808 100644
--- a/locales/vi.schema.json
+++ b/locales/vi.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "Ngăn"
+    },
+    "cart": {
+      "name": "Giỏ hàng",
+      "settings": {
+        "cart_type": {
+          "label": "Loại giỏ hàng",
+          "drawer": {
+            "label": "Ngăn"
+          },
+          "page": {
+            "label": "Trang"
+          },
+          "notification": {
+            "label": "Thông báo cửa sổ bật lên"
+          }
+        },
+        "show_vendor": {
+          "label": "Hiển thị nhà cung cấp"
+        },
+        "show_cart_note": {
+          "label": "Bật ghi chú trong giỏ hàng"
+        },
+        "cart_drawer": {
+          "header": "Ngăn giỏ hàng",
+          "collection": {
+            "label": "Bộ sưu tập",
+            "info": "Hiển thị khi ngăn giỏ hàng trống"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "Tổng phụ",
-      "settings": {
-        "show_cart_note": {
-          "label": "Bật ghi chú trong giỏ hàng"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "Giá tổng phụ"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "Mặt hàng",
-      "settings": {
-        "show_vendor": {
-          "label": "Hiển thị nhà cung cấp"
-        }
-      }
+      "name": "Mặt hàng"
     },
     "main-collection-banner": {
       "name": "Biểu ngữ bộ sưu tập",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 5defd107581..1320015fb1d 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -244,7 +244,8 @@
         "product": "产品",
         "price": "价格",
         "total": "总计",
-        "quantity": "数量"
+        "quantity": "数量",
+        "image": "产品图片"
       },
       "update": "更新",
       "login": {
diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json
index ac664647807..a20288e1d76 100644
--- a/locales/zh-CN.schema.json
+++ b/locales/zh-CN.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "抽屉"
+    },
+    "cart": {
+      "name": "购物车",
+      "settings": {
+        "cart_type": {
+          "label": "购物车类型",
+          "drawer": {
+            "label": "抽屉"
+          },
+          "page": {
+            "label": "页面"
+          },
+          "notification": {
+            "label": "弹出窗口通知"
+          }
+        },
+        "show_vendor": {
+          "label": "显示厂商"
+        },
+        "show_cart_note": {
+          "label": "启用购物车备注"
+        },
+        "cart_drawer": {
+          "header": "购物车抽屉",
+          "collection": {
+            "label": "产品系列",
+            "info": "在购物车抽屉为空时可见"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "小计",
-      "settings": {
-        "show_cart_note": {
-          "label": "启用购物车备注"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "小计价格"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "商品",
-      "settings": {
-        "show_vendor": {
-          "label": "显示厂商"
-        }
-      }
+      "name": "商品"
     },
     "main-collection-banner": {
       "name": "产品系列横幅",
diff --git a/locales/zh-TW.json b/locales/zh-TW.json
index de0f50ff9de..3c7de4135ff 100644
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -244,7 +244,8 @@
         "product": "產品",
         "price": "價格",
         "total": "總計",
-        "quantity": "數量"
+        "quantity": "數量",
+        "image": "商品圖片"
       },
       "update": "更新",
       "login": {
diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json
index 03de4ee8e12..5d528ffcb22 100644
--- a/locales/zh-TW.schema.json
+++ b/locales/zh-TW.schema.json
@@ -299,6 +299,36 @@
     },
     "drawers": {
       "name": "收銀機"
+    },
+    "cart": {
+      "name": "購物車",
+      "settings": {
+        "cart_type": {
+          "label": "購物車類型",
+          "drawer": {
+            "label": "導覽匣"
+          },
+          "page": {
+            "label": "頁面"
+          },
+          "notification": {
+            "label": "彈出式視窗通知"
+          }
+        },
+        "show_vendor": {
+          "label": "顯示廠商"
+        },
+        "show_cart_note": {
+          "label": "啟用購物車備註"
+        },
+        "cart_drawer": {
+          "header": "購物車導覽匣",
+          "collection": {
+            "label": "商品系列",
+            "info": "在購物車導覽匣沒有商品時顯示"
+          }
+        }
+      }
     }
   },
   "sections": {
@@ -1194,11 +1224,6 @@
     },
     "main-cart-footer": {
       "name": "小計",
-      "settings": {
-        "show_cart_note": {
-          "label": "啟用購物車備註"
-        }
-      },
       "blocks": {
         "subtotal": {
           "name": "小計價格"
@@ -1209,12 +1234,7 @@
       }
     },
     "main-cart-items": {
-      "name": "商品",
-      "settings": {
-        "show_vendor": {
-          "label": "顯示廠商"
-        }
-      }
+      "name": "商品"
     },
     "main-collection-banner": {
       "name": "商品系列橫幅",
diff --git a/sections/cart-drawer.liquid b/sections/cart-drawer.liquid
new file mode 100644
index 00000000000..88fd2ab5289
--- /dev/null
+++ b/sections/cart-drawer.liquid
@@ -0,0 +1,334 @@
+<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
+
+<style>
+  .drawer {
+    visibility: hidden;
+  }
+</style>
+
+<cart-drawer class="drawer{% if cart == empty %} is-empty{% endif %}">
+  <div id="CartDrawer" class="cart-drawer">
+    <div id="CartDrawer-Overlay"class="cart-drawer__overlay"></div>
+    <div class="drawer__inner" role="dialog" aria-modal="true" aria-label="{{ 'sections.cart.title' | t }}" tabindex="-1">
+       {%- if cart == empty -%}
+        <div class="drawer__inner-empty">
+          <div class="cart-drawer__warnings center{% if settings.cart_drawer_collection != blank %} cart-drawer__warnings--has-collection{% endif %}">
+            <div class="cart-drawer__empty-content">
+              <h2 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h2>
+              <button class="drawer__close" type="button" onclick="this.closest('cart-drawer').close()" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
+              <a href="{{ routes.all_products_collection_url }}" class="button">
+                {{ 'general.continue_shopping' | t }}
+              </a>
+
+              {%- if shop.customer_accounts_enabled and customer == nil -%}
+                <p class="cart__login-title h3">{{ 'sections.cart.login.title' | t }}</p>
+                <p class="cart__login-paragraph">
+                  {{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
+                </p>
+              {%- endif -%}
+            </div>
+          </div>
+          {%- if settings.cart_drawer_collection != blank -%}
+            <div class="cart-drawer__collection">
+              {% render 'card-collection',
+                card_collection: settings.cart_drawer_collection,
+                columns: 1
+              %}
+            </div>
+          {%- endif -%}
+        </div>
+      {%- endif -%}
+      <div class="drawer__header">
+        <h2 class="drawer__heading">{{ 'sections.cart.title' | t }}</h2>
+        <button class="drawer__close" type="button" onclick="this.closest('cart-drawer').close()" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
+      </div>
+      <cart-drawer-items {% if cart == empty %}class=" is-empty"{% endif %}>
+        <form action="{{ routes.cart_url }}" id="CartDrawer-Form" class="cart__contents cart-drawer__form" method="post">
+          <div id="CartDrawer-CartItems" class="drawer__contents js-contents">
+            {%- if cart != empty -%}
+              <div class="drawer__cart-items-wrapper">
+                <table class="cart-items" role="table">
+                  <thead role="rowgroup">
+                    <tr role="row">
+                      <th id="CartDrawer-ColumnProductImage" role="columnheader"><span class="visually-hidden">{{ 'sections.cart.headings.image' | t }}</span></th>
+                      <th id="CartDrawer-ColumnProduct" class="caption-with-letter-spacing" scope="col" role="columnheader">{{ 'sections.cart.headings.product' | t }}</th>
+                      <th id="CartDrawer-ColumnTotal" class="right caption-with-letter-spacing" scope="col" role="columnheader">{{ 'sections.cart.headings.total' | t }}</th>
+                      <th id="CartDrawer-ColumnQuantity" role="columnheader"><span class="visually-hidden">{{ 'sections.cart.headings.quantity' | t }}</span></th>
+                    </tr>
+                  </thead>
+
+                  <tbody role="rowgroup">
+                    {%- for item in cart.items -%}
+                      <tr id="CartDrawer-Item-{{ item.index | plus: 1 }}" class="cart-item" role="row">
+                        <td class="cart-item__media" role="cell" headers="CartDrawer-ColumnProductImage">
+                          {% if item.image %}
+                            {% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
+                            <a href="{{ item.url }}" class="cart-item__link" tabindex="-1" aria-hidden="true"> </a>
+                            <img class="cart-item__image"
+                              src="{{ item.image | image_url: width: 300 }}"
+                              alt="{{ item.image.alt | escape }}"
+                              loading="lazy"
+                              width="150"
+                              height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
+                            >
+                          {% endif %}
+                        </td>
+
+                        <td class="cart-item__details" role="cell" headers="CartDrawer-ColumnProduct">
+                          {%- if settings.show_vendor -%}
+                            <p class="caption-with-letter-spacing light">{{ item.product.vendor }}</p>
+                          {%- endif -%}
+
+                          <a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>
+
+                          {%- if item.original_price != item.final_price -%}
+                            <div class="cart-item__discounted-prices">
+                              <span class="visually-hidden">
+                                {{ 'products.product.price.regular_price' | t }}
+                              </span>
+                              <s class="cart-item__old-price product-option">
+                                {{- item.original_price | money -}}
+                              </s>
+                              <span class="visually-hidden">
+                                {{ 'products.product.price.sale_price' | t }}
+                              </span>
+                              <strong class="cart-item__final-price product-option">
+                                {{ item.final_price | money }}
+                              </strong>
+                            </div>
+                          {%- else -%}
+                            <div class="product-option">
+                              {{ item.original_price | money }}
+                            </div>
+                          {%- endif -%}
+
+                          {%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
+                            <dl>
+                              {%- if item.product.has_only_default_variant == false -%}
+                                {%- for option in item.options_with_values -%}
+                                  <div class="product-option">
+                                    <dt>{{ option.name }}: </dt>
+                                    <dd>{{ option.value }}{% unless forloop.last %}, {% endunless %}</dd>
+                                  </div>
+                                {%- endfor -%}
+                              {%- endif -%}
+
+                              {%- for property in item.properties -%}
+                                {%- assign property_first_char = property.first | slice: 0 -%}
+                                {%- if property.last != blank and property_first_char != '_' -%}
+                                  <div class="product-option">
+                                    <dt>{{ property.first }}: </dt>
+                                    <dd>
+                                      {%- if property.last contains '/uploads/' -%}
+                                        <a href="{{ property.last }}" class="link" target="_blank" aria-describedby="a11y-new-window-message">
+                                          {{ property.last | split: '/' | last }}
+                                        </a>
+                                      {%- else -%}
+                                        {{ property.last }}
+                                      {%- endif -%}
+                                    </dd>
+                                  </div>
+                                {%- endif -%}
+                              {%- endfor -%}
+                            </dl>
+
+                            <p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
+                          {%- endif -%}
+
+                          <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
+                            {%- for discount in item.discounts -%}
+                              <li class="discounts__discount">
+                                {%- render 'icon-discount' -%}
+                                {{ discount.title }}
+                              </li>
+                            {%- endfor -%}
+                          </ul>
+                        </td>
+
+                        <td class="cart-item__totals right" role="cell" headers="CartDrawer-ColumnTotal">
+                          <div class="loading-overlay hidden">
+                            <div class="loading-overlay__spinner">
+                              <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+                                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
+                              </svg>
+                            </div>
+                          </div>
+
+                          <div class="cart-item__price-wrapper">
+                            {%- if item.original_line_price != item.final_line_price -%}
+                              <div class="cart-item__discounted-prices">
+                                <span class="visually-hidden">
+                                  {{ 'products.product.price.regular_price' | t }}
+                                </span>
+                                <s class="cart-item__old-price price price--end">
+                                  {{ item.original_line_price | money }}
+                                </s>
+                                <span class="visually-hidden">
+                                  {{ 'products.product.price.sale_price' | t }}
+                                </span>
+                                <span class="price price--end">
+                                  {{ item.final_line_price | money }}
+                                </span>
+                              </div>
+                            {%- else -%}
+                              <span class="price price--end">
+                                {{ item.original_line_price | money }}
+                              </span>
+                            {%- endif -%}
+
+                            {%- if item.variant.available and item.unit_price_measurement -%}
+                              <div class="unit-price caption">
+                                <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
+                                {{ item.variant.unit_price | money }}
+                                <span aria-hidden="true">/</span>
+                                <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
+                                {%- if item.variant.unit_price_measurement.reference_value != 1 -%}
+                                  {{- item.variant.unit_price_measurement.reference_value -}}
+                                {%- endif -%}
+                                {{ item.variant.unit_price_measurement.reference_unit }}
+                              </div>
+                            {%- endif -%}
+                          </div>
+                        </td>
+
+                        <td class="cart-item__quantity" role="cell" headers="CartDrawer-ColumnQuantity">
+                          <div class="cart-item__quantity-wrapper">
+                            <quantity-input class="quantity">
+                              <button class="quantity__button no-js-hidden" name="minus" type="button">
+                                <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}</span>
+                                {% render 'icon-minus' %}
+                              </button>
+                              <input class="quantity__input"
+                                type="number"
+                                name="updates[]"
+                                value="{{ item.quantity }}"
+                                min="0"
+                                aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
+                                id="Drawer-quantity-{{ item.index | plus: 1 }}"
+                                data-index="{{ item.index | plus: 1 }}"
+                              >
+                              <button class="quantity__button no-js-hidden" name="plus" type="button">
+                                <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: item.product.title | escape }}</span>
+                                {% render 'icon-plus' %}
+                              </button>
+                            </quantity-input>
+
+                            <cart-remove-button id="CartDrawer-Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
+                              <button class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
+                                {% render 'icon-remove' %}
+                              </button>
+                            </cart-remove-button>
+                          </div>
+
+                          <div id="CartDrawer-LineItemError-{{ item.index | plus: 1 }}" class="cart-item__error" role="alert">
+                            <small class="cart-item__error-text"></small>
+                            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
+                              <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
+                              <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
+                              <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
+                              <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
+                            </svg>
+                          </div>
+                        </td>
+                      </tr>
+                    {%- endfor -%}
+                  </tbody>
+                </table>
+              </div>
+            {%- endif -%}
+            <p id="CartDrawer-LiveRegionText" class="visually-hidden" role="status"></p>
+            <p id="CartDrawer-LineItemStatus" class="visually-hidden" aria-hidden="true" role="status">{{ 'accessibility.loading' | t }}</p>
+          </div>
+          <div id="CartDrawer-CartErrors" role="alert"></div>
+        </form>
+      </cart-drawer-items>
+      <div class="drawer__footer">
+        {%- if settings.show_cart_note -%}
+          <details id="Details-CartDrawer">
+            <summary>
+              <span class="summary__title">
+                {{ 'sections.cart.note' | t }}
+                {% render 'icon-caret' %}
+              </span>
+            </summary>
+            <cart-note class="cart__note field">
+              <label class="visually-hidden" for="CartDrawer-Note">{{ 'sections.cart.note' | t }}</label>
+              <textarea id="CartDrawer-Note" class="text-area text-area--resize-vertical field__input" name="note" placeholder="{{ 'sections.cart.note' | t }}">{{ cart.note }}</textarea>
+            </cart-note>
+          </details>
+        {%- endif -%}
+
+        <!-- Start blocks-->
+        <!-- Subtotals-->
+
+        <div class="cart-drawer__footer" {{ block.shopify_attributes }}>
+          <div class="totals" role="status">
+            <h3 class="totals__subtotal">{{ 'sections.cart.subtotal' | t }}</h3>
+            <p class="totals__subtotal-value">{{ cart.total_price | money_with_currency }}</p>
+          </div>
+
+          <div>
+            {%- if cart.cart_level_discount_applications.size > 0 -%}
+              <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
+                {%- for discount in cart.cart_level_discount_applications -%}
+                  <li class="discounts__discount discounts__discount--end">
+                    {%- render 'icon-discount' -%}
+                    {{ discount.title }}
+                    (-{{ discount.total_allocated_amount | money }})
+                  </li>
+                {%- endfor -%}
+              </ul>
+            {%- endif -%}
+          </div>
+
+          <small class="tax-note caption-large rte">
+            {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
+              {{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
+            {%- elsif cart.taxes_included -%}
+              {{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
+            {%- elsif shop.shipping_policy.body != blank -%}
+              {{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
+            {%- else -%}
+              {{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
+            {%- endif -%}
+          </small>
+        </div>
+
+        <!-- CTAs -->
+
+        <div class="cart__ctas" {{ block.shopify_attributes }}>
+          <noscript>
+            <button type="submit" class="cart__update-button button button--secondary" form="CartDrawer-Form">
+              {{ 'sections.cart.update' | t }}
+            </button>
+          </noscript>
+
+          <button type="submit" id="CartDrawer-Checkout" class="cart__checkout-button button" name="checkout" form="CartDrawer-Form"{% if cart == empty %} disabled{% endif %}>
+            {{ 'sections.cart.checkout' | t }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</cart-drawer>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    function isIE() {
+      const ua = window.navigator.userAgent;
+      const msie = ua.indexOf('MSIE ');
+      const trident = ua.indexOf('Trident/');
+
+      return (msie > 0 || trident > 0);
+    }
+
+    if (!isIE()) return;
+    const cartSubmitInput = document.createElement('input');
+    cartSubmitInput.setAttribute('name', 'checkout');
+    cartSubmitInput.setAttribute('type', 'hidden');
+    document.querySelector('#cart').appendChild(cartSubmitInput);
+    document.querySelector('#checkout').addEventListener('click', function(event) {
+      document.querySelector('#cart').submit();
+    });
+  });
+</script>
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 0a5edc4404e..835f6c29909 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -257,7 +257,7 @@
             {%- when 'buy_buttons' -%}
               <div {{ block.shopify_attributes }}>
                 {%- if product != blank -%}
-                  <product-form class="product-form">
+                  <product-form class="product-form" data-cart-type="{{ settings.cart_type }}">
                     <div class="product-form__error-message-wrapper" role="alert" hidden>
                       <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
                         <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
@@ -275,7 +275,7 @@
                           type="submit"
                           name="add"
                           class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
-                        {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
+                          {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                         >
                             <span>
                               {%- if product.selected_or_first_available_variant.available -%}
diff --git a/sections/header.liquid b/sections/header.liquid
index fffa9483b9f..b4056ddd71f 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -11,6 +11,14 @@
   <link rel="stylesheet" href="{{ 'component-mega-menu.css' | asset_url }}" media="print" onload="this.media='all'">
   <noscript>{{ 'component-mega-menu.css' | asset_url | stylesheet_tag }}</noscript>
 {%- endif -%}
+{%- if settings.cart_type == "drawer" -%}
+  {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
+  {{ 'component-cart.css' | asset_url | stylesheet_tag }}
+  {{ 'component-totals.css' | asset_url | stylesheet_tag }}
+  {{ 'component-price.css' | asset_url | stylesheet_tag }}
+  {{ 'component-discounts.css' | asset_url | stylesheet_tag }}
+  {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
+{%- endif -%}
 
 <noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
 <noscript>{{ 'component-search.css' | asset_url | stylesheet_tag }}</noscript>
@@ -85,6 +93,9 @@
 <script src="{{ 'details-disclosure.js' | asset_url }}" defer="defer"></script>
 <script src="{{ 'details-modal.js' | asset_url }}" defer="defer"></script>
 <script src="{{ 'cart-notification.js' | asset_url }}" defer="defer"></script>
+{%- if settings.cart_type == "drawer" -%}
+  <script src="{{ 'cart-drawer.js' | asset_url }}" defer="defer"></script>
+{%- endif -%}
 
 <svg xmlns="http://www.w3.org/2000/svg" class="hidden">
   <symbol id="icon-search" viewbox="0 0 18 19" fill="none">
@@ -574,7 +585,9 @@
   </header>
 </{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %}>
 
-{%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
+{%- if settings.cart_type == "notification" -%}
+  {%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
+{%- endif -%}
 
 {% javascript %}
   class StickyHeader extends HTMLElement {
diff --git a/sections/main-cart-footer.liquid b/sections/main-cart-footer.liquid
index c5ccf5e64b2..69a66d73b58 100644
--- a/sections/main-cart-footer.liquid
+++ b/sections/main-cart-footer.liquid
@@ -6,7 +6,7 @@
 <div class="page-width{% if cart == empty %} is-empty{% endif %}" id="main-cart-footer" data-id="{{ section.id }}">
   <div>
     <div class="cart__footer">
-      {%- if section.settings.show_cart_note -%}
+      {%- if settings.show_cart_note -%}
         <cart-note class="cart__note field">
           <label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
           <textarea class="text-area field__input" name="note" form="cart" id="Cart-note" placeholder="{{ 'sections.cart.note' | t }}">{{ cart.note }}</textarea>
@@ -78,21 +78,6 @@
   </div>
 </div>
 
-{% javascript %}
-  class CartNote extends HTMLElement {
-    constructor() {
-      super();
-
-      this.addEventListener('change', debounce((event) => {
-        const body = JSON.stringify({ note: event.target.value });
-        fetch(`${routes.cart_update_url}`, {...fetchConfig(), ...{ body }});
-      }, 300))
-    }
-  }
-
-  customElements.define('cart-note', CartNote);
-{% endjavascript %}
-
 <script>
   document.addEventListener('DOMContentLoaded', function() {
     function isIE() {
@@ -118,14 +103,6 @@
 {
   "name": "t:sections.main-cart-footer.name",
   "class": "cart__footer-wrapper",
-  "settings": [
-    {
-      "type": "checkbox",
-      "id": "show_cart_note",
-      "default": false,
-      "label": "t:sections.main-cart-footer.settings.show_cart_note.label"
-    }
-  ],
   "blocks": [
     {
       "type": "subtotal",
@@ -142,4 +119,4 @@
     }
   ]
 }
-{% endschema %}
\ No newline at end of file
+{% endschema %}
diff --git a/sections/main-cart-items.liquid b/sections/main-cart-items.liquid
index b27b6e9ab6e..061c00e2d66 100644
--- a/sections/main-cart-items.liquid
+++ b/sections/main-cart-items.liquid
@@ -19,7 +19,9 @@
   }
 {%- endstyle -%}
 
-<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
+{%- unless settings.cart_type == 'drawer' -%}
+  <script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
+{%- endunless -%}
 
 <cart-items class="page-width{% if cart == empty %} is-empty{% else %} section-{{ section.id }}-padding{% endif %}">
   <div class="title-wrapper-with-link">
@@ -75,7 +77,7 @@
                   </td>
 
                   <td class="cart-item__details">
-                    {%- if section.settings.show_vendor -%}
+                    {%- if settings.show_vendor -%}
                       <p class="caption-with-letter-spacing">{{ item.product.vendor }}</p>
                     {%- endif -%}
 
@@ -298,12 +300,6 @@
 {
   "name": "t:sections.main-cart-items.name",
   "settings": [
-    {
-      "type": "checkbox",
-      "id": "show_vendor",
-      "default": false,
-      "label": "t:sections.main-cart-items.settings.show_vendor.label"
-    },
     {
       "type": "header",
       "content": "t:sections.all.padding.section_padding_heading"
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index ac443712e66..d0b2654f69c 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -405,7 +405,7 @@
             </noscript>
           {%- when 'buy_buttons' -%}
             <div {{ block.shopify_attributes }}>
-              <product-form class="product-form">
+              <product-form class="product-form" data-cart-type="{{ settings.cart_type }}">
                 <div class="product-form__error-message-wrapper" role="alert" hidden>
                   <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
                     <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
@@ -423,7 +423,7 @@
                       type="submit"
                       name="add"
                       class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
-                    {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
+                      {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                     >
                         <span>
                           {%- if product.selected_or_first_available_variant.available -%}
diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
index da79784925b..a1af5b2c2f6 100644
--- a/snippets/card-product.liquid
+++ b/snippets/card-product.liquid
@@ -144,7 +144,7 @@
           <div class="quick-add">
             {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
             {%- if card_product.has_only_default_variant -%}
-              <product-form>
+              <product-form data-cart-type="{{ settings.cart_type }}">
                 {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                   <input type="hidden" name="id" value="{{ card_product.selected_or_first_available_variant.id }}" disabled>
                   <button
@@ -200,7 +200,7 @@
                   <button id="ModalClose-{{ card_product.id }}" type="button" class="quick-add-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
                   <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info">
                   </div>
-                </div>          
+                </div>
               </quick-add-modal>
             {%- endif -%}
           </div>
diff --git a/snippets/cart-drawer.liquid b/snippets/cart-drawer.liquid
new file mode 100644
index 00000000000..4b74e1e101b
--- /dev/null
+++ b/snippets/cart-drawer.liquid
@@ -0,0 +1,8 @@
+{% comment %}
+    Renders cart drawer
+
+    Usage:
+    {% render 'cart-drawer' %}
+{% endcomment %}
+
+{% section 'cart-drawer' %}
diff --git a/templates/cart.json b/templates/cart.json
index 4268b6e230c..00ff37e5833 100644
--- a/templates/cart.json
+++ b/templates/cart.json
@@ -3,7 +3,6 @@
     "cart-items": {
       "type": "main-cart-items",
       "settings": {
-        "show_vendor": false,
         "padding_top": 36,
         "padding_bottom": 36
       }
@@ -25,10 +24,7 @@
       "block_order": [
         "subtotal",
         "buttons"
-      ],
-      "settings": {
-        "show_cart_note": false
-      }
+      ]
     },
     "featured-collection": {
       "type": "featured-collection",