diff --git a/assets/base.css b/assets/base.css
index dbefe2f3416..694a36536b9 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -2384,7 +2384,7 @@ details-disclosure > details {
 
 .badge {
   border: 1px solid transparent;
-  border-radius: 4rem;
+  border-radius: var(--badge-corner-radius);
   display: inline-block;
   font-size: 1.2rem;
   letter-spacing: 0.1rem;
@@ -2414,3 +2414,15 @@ details-disclosure > details {
   }
 }
 
+.ratio {
+  display: flex;
+  position: relative;
+  align-items: stretch;
+}
+
+.ratio::before {
+  content: '';
+  width: 0;
+  height: 0;
+  padding-bottom: var(--ratio-percent);
+}
diff --git a/assets/collage.css b/assets/collage.css
index 0fd675eb256..e488463e31a 100644
--- a/assets/collage.css
+++ b/assets/collage.css
@@ -98,12 +98,6 @@
     grid-column: 1 / span 3;
     max-width: 100%;
   }
-
-  .collage-card:not(.collage-card--left):not(.collage-card--right) > * {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .collage-card .card,
@@ -161,7 +155,6 @@
 
 .collage-content {
   justify-content: center;
-  overflow: hidden;
 }
 
 .collage-content h3 {
diff --git a/assets/component-card.css b/assets/component-card.css
index 65a66a6530f..2ec5ef46ee2 100644
--- a/assets/component-card.css
+++ b/assets/component-card.css
@@ -1,290 +1,149 @@
-.card {
-  display: block;
-  overflow: hidden;
+.card-wrapper {
+  color: inherit;
+  height: 100%;
+  position: relative;
   text-decoration: none;
 }
 
-.card-information + .card {
-  margin-bottom: 1.3rem;
-}
-
-@media screen and (min-width: 750px) {
-  .card-information + .card {
-    margin-bottom: 1.7rem;
-  }
-}
-
-.card.card--soft {
-  background-color: rgba(var(--color-foreground), 0.04);
-  color: rgb(var(--color-foreground));
-}
-
-.card .icon-wrap {
-  margin-left: 0.8rem;
-  white-space: nowrap;
-  transition: transform var(--duration-short) ease;
-  overflow: hidden;
-}
-
-.card--media {
-  display: block;
+.card {
+  text-align: var(--card-text-alignment);
   text-decoration: none;
 }
 
-.card--text-only {
-  display: flex;
-  justify-content: center;
-}
-
-.card--text-only.card--product {
-  position: static;
-}
-
-.card--text-only::before {
-  content: '';
-  display: block;
-  padding-bottom: 100%;
-}
-
-.card--product {
+.card--card,
+.card--standard .card__inner { 
+  background-clip: padding-box;
+  border-radius: var(--card-corner-radius);
+  border: var(--card-border-width) solid rgba(var(--color-foreground), var(--card-border-opacity));
+  box-shadow: var(--card-shadow-horizontal-offset) var(--card-shadow-vertical-offset) var(--card-shadow-blur-radius) rgba(var(--color-foreground), var(--card-shadow-opacity));
+  overflow: hidden;
   position: relative;
 }
 
-.card--stretch {
-  height: 100%;
-}
-
-.card--outline:not(.card--soft) {
-  border: calc(0.1rem / var(--font-body-scale)) solid rgba(var(--color-foreground), 0.04);
+.card--standard.card--text {
+  background-color: transparent;
 }
 
-.card--light-border {
-  border: 0.1rem solid rgba(var(--color-foreground), 0.04);
+.card-information {
+  text-align: var(--card-text-alignment);
 }
 
-.card--light-border:hover {
-  border: 0.1rem solid rgba(var(--color-foreground), 0.3);
-  box-shadow: none;
+.card__media,
+.card .media {
+  bottom: 0;
+  position: absolute;
+  top: 0;
 }
 
-.card__text-spacing {
-  padding: 3rem;
+.card .media {
+  width: 100%;
 }
 
-.card-colored.color-background-1 {
-  background-color: rgba(var(--color-foreground), 0.04);
+.card__media {
+  margin: var(--card-image-padding);
+  width: calc(100% - 2 * var(--card-image-padding));
 }
 
-.card--media .card__text-spacing {
-  padding: 2rem;
+.card--standard .card__media {
+  margin: var(--card-image-padding);
 }
 
-@media screen and (min-width: 750px) {
-  .card--media .card__text-spacing {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
+.card__inner {
+  width: 100%;
 }
 
-.card-information > * + * {
-  margin-top: 0.5rem;
+.card--media .card__inner .card__content {
+  padding: calc(var(--card-image-padding) + 1rem);
+  position: relative;
 }
 
-.card--text-only .card__inner {
+.card__content {
   display: grid;
-  grid-template-rows: 1fr auto 1fr;
+  grid-template-rows: minmax(0,1fr) max-content minmax(0,1fr);
+  padding: 1rem;
   width: 100%;
 }
 
-.card__content {
-  margin-left: 2.5rem;
-  margin-right: 2.5rem;
-}
-
-.card__content > * {
-  margin: 0;
+.card__content--auto-margins {
+  grid-template-rows: minmax(0,auto) max-content minmax(0,auto);
 }
 
-.card--text-only .card__content {
-  grid-row: 2;
-  justify-self: flex-start;
-  margin-bottom: 6rem;
-  margin-top: 5rem;
-}
-
-.card--text-only .card__badge {
-  align-self: flex-end;
-  grid-row: 3;
-}
-
-.card--search .card__badge > *,
-.card--text-only .card__badge > * {
-  margin: 0 1.2rem 1.2rem;
-}
-
-.card--search .card__badge,
-.card--text-only .card__badge {
-  position: initial;
-}
-
-.card--text-only .card__content + .card__badge {
-  margin-top: -5rem;
-}
-
-.media + .card__content {
-  margin-top: 2rem;
-  margin-bottom: 1.5rem;
+.card__information {
+  grid-row-start: 2;
+  padding: 1.3rem 1rem;
 }
 
 @media screen and (min-width: 750px) {
-  .card--text-only .card__content {
-    margin-top: 7rem;
-    margin-bottom: 7rem;
+  .card__information {
+    padding-bottom: 1.7rem;
+    padding-top: 1.7rem;
   }
-
-  .card--text-only .card__content + .card__badge {
-    margin-top: -7rem;
-  }
-}
-
-.card__text-spacing > * {
-  margin: 0;
 }
 
-.card__text-spacing > *:not(.overlay-card) + * {
-  margin-top: 1.5rem;
+.card__badge {
+  align-self: flex-end;
+  grid-row-start: 3;
+  justify-self: flex-start;
 }
 
-.card__text {
-  margin: 0;
-  word-break: break-word;
+.card__badge.top {
+  align-self: flex-start;
+  grid-row-start: 1;
 }
 
-.card-information__text {
-  display: block;
-  margin: 0;
-  padding-right: 1.2rem;
+.card__badge.right {
+  justify-self: flex-end;
 }
 
-.card-information__wrapper {
+.card__media .media img {
+  height: 100%;
+  object-fit: cover;
+  object-position: center center;
   width: 100%;
 }
 
-.card-information__wrapper > * {
-  line-height: calc(1 + 0.4 / var(--font-body-scale));
-  color: rgb(var(--color-foreground));
-}
-
-.card-information__wrapper > .price {
-  color: rgb(var(--color-foreground));
-}
-
-.card-information__wrapper > .rating {
-  margin-top: 0.4rem;
-}
-
-.card-information__wrapper
-  > *:not(.visually-hidden:first-child)
-  + *:not(.rating) {
-  margin-top: 0.7rem;
+.card__inner:not(.ratio) > .card__content {
+  height: 100%;
 }
 
-.card-information__wrapper .caption {
-  letter-spacing: 0.07rem;
+.card__heading {
+  margin-top: 0;
 }
 
-.card-wrapper {
-  color: inherit;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  text-decoration: none;
-  padding-bottom: 0.5rem;
+.card__heading:last-child {
+  margin-bottom: 0;
 }
 
-.card-wrapper .card-information {
-  order: 1;
+.card--card.card--media > .card__content {
+  margin-top: calc(0rem - var(--card-image-padding));
 }
 
-.card-wrapper .full-unstyled-link::after {
+.card__heading a::after {
+  bottom: 0;
   content: "";
+  height: 100%;
+  left: 0;
   position: absolute;
-  top: 0;
   right: 0;
-  bottom: 0;
-  left: 0;
+  top: 0;
   width: 100%;
-  height: 100%;
   z-index: 1;
 }
 
-.card-wrapper .full-unstyled-link:focus-visible {
-  outline: 0;
-  box-shadow: none;
-}
-
-.card-wrapper .full-unstyled-link:focus-visible::after {
-  outline: .2rem solid rgba(var(--color-foreground),.5);
-  outline-offset: 0.3rem;
+.card-wrapper:focus-within .card {
   box-shadow: 0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3);
+  outline-offset: 0.3rem;
+  outline: .2rem solid rgba(var(--color-foreground),.5);
 }
 
-.card-wrapper:focus-within .card {
+.card-wrapper:focus-within .card__heading a {
   box-shadow: none;
-}
-
-.card__media-spacer {
-  padding: 2rem 2rem 0;
-}
-
-@media screen and (min-width: 750px) {
-  .card__media-spacer {
-    padding: 3rem 3rem 0;
-  }
-}
-
-.card__media-full-spacer {
-  padding: 2rem;
-}
-
-.card-article-info {
-  margin-top: 1rem;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.card__badge {
-  bottom: 1rem;
-  display: flex;
-  flex-wrap: wrap;
-  left: 1rem;
-  position: absolute;
-}
-
-.card__badge > * {
-  margin-right: 1rem;
-  margin-top: 0.5rem;
-}
-
-.overlay-card {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  background: transparent;
-  transition: background-color var(--duration-long) ease;
-}
-
-.card:hover .card-colored .overlay-card {
-  background-color: rgba(var(--color-card-hover), 0.06);
+  outline: 0;
 }
 
 @media screen and (min-width: 990px) {
   .card .media.media--hover-effect > img:only-child,
-  .card-wrapper .media.media--hover-effect > img:only-child,
-  .card--search img {
+  .card-wrapper .media.media--hover-effect > img:only-child {
     transition: transform var(--duration-long) ease;
   }
 
@@ -305,22 +164,90 @@
     transform: scale(1.03);
   }
 
-  .card-wrapper:hover .card-information__text {
+  .underline-links-hover:hover a {
     text-decoration: underline;
     text-underline-offset: 0.3rem;
   }
+}
 
-  .card-wrapper:hover .card--search img {
-    transform: scale(1.05);
-  }
+.card--standard.card--media .card__inner .card__information,
+.card--standard.card--text > .card__content .card__heading,
+.card--standard > .card__content .card__badge,
+.card--standard.card--text > .card__content .card-article-info,
+.card--standard > .card__content .card__caption {
+  display: none;
+}
 
-  .card-wrapper:hover .card__text {
-    text-decoration: underline;
-    text-underline-offset: 0.3rem;
-  }
+.card--standard > .card__content {
+  padding: 0;
+}
 
-  .card-wrapper:hover .card--soft {
-    background-color: rgba(var(--color-card-hover), 0.06);
-    transition: background-color var(--duration-long) ease;
-  }
+.card--standard > .card__content .card__information {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.card--card.card--media .card__inner .card__information,
+.card--card.card--text .card__inner,
+.card--card.card--media > .card__content .card__badge {
+  display: none;
+}
+
+.card--height-auto .card__inner:before,
+.card--height-auto.card--standard:before,
+.card--height-auto.card--text:before { 
+  display: none;
+}
+
+.card--height-auto {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card--height-auto.card--text.card--card .card__content,
+.card--height-auto .card__inner { 
+  flex-grow: 1;
+}
+
+.card .icon-wrap {
+  margin-left: 0.8rem;
+  white-space: nowrap;
+  transition: transform var(--duration-short) ease;
+  overflow: hidden;
+}
+
+.card-information > * + * {
+  margin-top: 0.5rem;
+}
+
+.card-information {
+  width: 100%;
+}
+
+.card-information > * {
+  line-height: calc(1 + 0.4 / var(--font-body-scale));
+  color: rgb(var(--color-foreground));
+}
+
+.card-information > .price {
+  color: rgb(var(--color-foreground));
+}
+
+.card-information > .rating {
+  margin-top: 0.4rem;
+}
+
+.card-information
+  > *:not(.visually-hidden:first-child)
+  + *:not(.rating) {
+  margin-top: 0.7rem;
+}
+
+.card-information .caption {
+  letter-spacing: 0.07rem;
+}
+
+.card-article-info {
+  margin-top: 1rem;
 }
diff --git a/assets/component-price.css b/assets/component-price.css
index 72795fe4ff1..59bdb097145 100644
--- a/assets/component-price.css
+++ b/assets/component-price.css
@@ -1,26 +1,31 @@
 .price {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
   font-size: 1.6rem;
   letter-spacing: 0.1rem;
   line-height: calc(1 + 0.5 / var(--font-body-scale));
   color: rgb(var(--color-foreground));
 }
 
+.price > * {
+  display: inline-block;
+  vertical-align: top;
+}
+
 .price.price--unavailable {
   visibility: hidden;
 }
 
 .price--end {
-  justify-content: flex-end;
+  text-align: right;
 }
 
 .price .price-item {
   margin: 0 1rem 0 0;
 }
 
+.price__regular .price-item--regular {
+  margin-right: 0;
+}
+
 .price:not(.price--show-badge) .price-item--last:last-of-type {
   margin: 0;
 }
@@ -59,17 +64,17 @@
 
 .price--sold-out .price__badge-sold-out,
 .price--on-sale .price__badge-sale {
-  display: inline-flex;
+  display: inline-block;
 }
 
 .price--on-sale .price__sale {
-  display: flex;
+  display: initial;
   flex-direction: row;
   flex-wrap: wrap;
 }
 
 .price--center {
-  display: flex;
+  display: initial;
   justify-content: center;
 }
 
diff --git a/assets/pickup-availability.js b/assets/pickup-availability.js
index 3c61947f6f2..38f55fb9d70 100644
--- a/assets/pickup-availability.js
+++ b/assets/pickup-availability.js
@@ -57,7 +57,8 @@ if (!customElements.get('pickup-availability')) {
 
       document.body.appendChild(sectionInnerHTML.querySelector('pickup-availability-drawer'));
 
-      this.querySelector('button').addEventListener('click', (evt) => {
+      const button = this.querySelector('button');
+      if (button) button.addEventListener('click', (evt) => {
         document.querySelector('pickup-availability-drawer').show(evt.target);
       });
     }
diff --git a/assets/section-collection-list.css b/assets/section-collection-list.css
index 0430b957527..eebbd650759 100644
--- a/assets/section-collection-list.css
+++ b/assets/section-collection-list.css
@@ -50,10 +50,6 @@
   width: 100%;
 }
 
-.collection-list__item .card--light-border:hover {
-  border: 0.1rem solid rgba(var(--color-foreground), 0.04);
-}
-
 .collection-list__item:only-child .media {
   height: 35rem;
 }
@@ -111,7 +107,3 @@
   }
 }
 
-.collection-list__item .card__text,
-.collection-list__item .card-colored {
-  position: relative;
-}
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index 58f0b408fe9..5bb2ce2ee60 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -305,12 +305,11 @@ a.product__text {
   padding: 0 1rem;
 }
 
-.product .price {
-  align-items: flex-start;
+.product .price .badge {
+  margin-bottom: 0.5rem;
 }
 
-.product .price .badge {
-  margin-top: 0.5rem;
+.product .price__container {
   margin-bottom: 0.5rem;
 }
 
@@ -322,7 +321,7 @@ a.product__text {
 .product .price--sold-out .price__badge-sold-out {
   background: transparent;
   color: rgb(var(--color-background));
-  border: none;
+  border-color: transparent;
 }
 
 .product .price--sold-out .price__badge-sale {
@@ -402,7 +401,7 @@ a.product__text {
 }
 
 .product--no-media .price {
-  justify-content: center;
+  text-align: center;
 }
 
 .product--no-media .product__info-wrapper {
diff --git a/config/settings_schema.json b/config/settings_schema.json
index 28bb304a6a2..0ebca17fad3 100644
--- a/config/settings_schema.json
+++ b/config/settings_schema.json
@@ -2,11 +2,247 @@
   {
     "name": "theme_info",
     "theme_name": "Dawn",
-    "theme_version": "2.3.0",
+    "theme_version": "2.4.0",
     "theme_author": "Shopify",
     "theme_documentation_url": "https://help.shopify.com/manual/online-store/themes/os20/themes-by-shopify/dawn",
     "theme_support_url": "https://support.shopify.com/"
   },
+  {
+    "name": "t:settings_schema.badges.name",
+    "settings": [
+      {
+        "type": "select",
+        "id": "badge_position",
+        "options": [
+          {
+            "value": "bottom left",
+            "label": "t:settings_schema.badges.settings.position.options__1.label"
+          },
+          {
+            "value": "bottom right",
+            "label": "t:settings_schema.badges.settings.position.options__2.label"
+          },
+          {
+            "value": "top left",
+            "label": "t:settings_schema.badges.settings.position.options__3.label"
+          },
+          {
+            "value": "top right",
+            "label": "t:settings_schema.badges.settings.position.options__4.label"
+          }
+        ],
+        "default": "bottom left",
+        "label": "t:settings_schema.badges.settings.position.label"
+      },
+      {
+        "type": "range",
+        "id": "badge_corner_radius",
+        "min": 0,
+        "max": 20,
+        "step": 2,
+        "unit": "px",
+        "label": "t:settings_schema.global.settings.corner_radius.label",
+        "default": 20
+      },
+      {
+        "type": "select",
+        "id": "badge_sale_color_scheme",
+        "options": [
+          {
+            "value": "accent-1",
+            "label": "t:settings_schema.global.settings.color_scheme.options__1.label"
+          },
+          {
+            "value": "accent-2",
+            "label": "t:settings_schema.global.settings.color_scheme.options__2.label"
+          },
+          {
+            "value": "background-2",
+            "label": "t:settings_schema.global.settings.color_scheme.options__4.label"
+          }
+        ],
+        "default": "accent-2",
+        "label": "t:settings_schema.badges.settings.badge_sale_color_scheme.label"
+      },
+      {
+        "type": "select",
+        "id": "badge_sold_out_color_scheme",
+        "options": [
+          {
+            "value": "background-1",
+            "label": "t:settings_schema.global.settings.color_scheme.options__3.label"
+          },
+          {
+            "value": "inverse",
+            "label": "t:settings_schema.global.settings.color_scheme.options__5.label"
+          }
+        ],
+        "default": "inverse",
+        "label": "t:settings_schema.badges.settings.badge_sold_out_color_scheme.label"
+      }
+    ]
+  },
+  {
+    "name": "t:settings_schema.cards.name",
+    "settings": [
+      {
+        "type": "header",
+        "content": "t:settings_schema.global.settings.header__general.content"
+      },
+      {
+        "type": "select",
+        "id": "card_style",
+        "options": [
+          {
+            "value": "standard",
+            "label": "t:settings_schema.cards.settings.style.options__1.label"
+          },
+          {
+            "value": "card",
+            "label": "t:settings_schema.cards.settings.style.options__2.label"
+          }
+        ],
+        "default": "standard",
+        "label": "t:settings_schema.cards.settings.style.label"
+      },
+      {
+        "type": "range",
+        "id": "card_image_padding",
+        "min": 0,
+        "max": 20,
+        "step": 1,
+        "unit": "px",
+        "label": "t:settings_schema.global.settings.image_padding.label",
+        "default": 0
+      },
+      {
+        "type": "range",
+        "id": "card_corner_radius",
+        "min": 0,
+        "max": 30,
+        "step": 3,
+        "unit": "px",
+        "label": "t:settings_schema.global.settings.corner_radius.label",
+        "default": 0
+      },
+      {
+        "type": "select",
+        "id": "card_text_alignment",
+        "options": [
+          {
+            "value": "left",
+            "label": "t:settings_schema.global.settings.text_alignment.options__1.label"
+          },
+          {
+            "value": "center",
+            "label": "t:settings_schema.global.settings.text_alignment.options__2.label"
+          },
+          {
+            "value": "right",
+            "label": "t:settings_schema.global.settings.text_alignment.options__3.label"
+          }
+        ],
+        "default": "left",
+        "label": "t:settings_schema.global.settings.text_alignment.label"
+      },
+      {
+        "type": "select",
+        "id": "card_color_scheme",
+        "options": [
+          {
+            "value": "accent-1",
+            "label": "t:settings_schema.global.settings.color_scheme.options__1.label"
+          },
+          {
+            "value": "accent-2",
+            "label": "t:settings_schema.global.settings.color_scheme.options__2.label"
+          },
+          {
+            "value": "background-1",
+            "label": "t:settings_schema.global.settings.color_scheme.options__3.label"
+          },
+          {
+            "value": "background-2",
+            "label": "t:settings_schema.global.settings.color_scheme.options__4.label"
+          },
+          {
+            "value": "inverse",
+            "label": "t:settings_schema.global.settings.color_scheme.options__5.label"
+          }
+        ],
+        "default": "background-1",
+        "label": "t:settings_schema.global.settings.color_scheme.label"
+      },
+      {
+        "type": "header",
+        "content": "t:settings_schema.global.settings.header__border.content"
+      },
+      {
+        "type": "range",
+        "id": "card_border_width",
+        "min": 0,
+        "max": 10,
+        "step": 1,
+        "unit": "px",
+        "label": "t:settings_schema.global.settings.width.label",
+        "default": 1
+      },
+      {
+        "type": "range",
+        "id": "card_border_opacity",
+        "min": 0,
+        "max": 100,
+        "step": 5,
+        "unit": "%",
+        "label": "t:settings_schema.global.settings.opacity.label",
+        "default": 10
+      },
+      {
+        "type": "header",
+        "content": "t:settings_schema.global.settings.header__shadow.content"
+      },
+      {
+        "type": "range",
+        "id": "card_shadow_opacity",
+        "min": 0,
+        "max": 100,
+        "step": 5,
+        "unit": "%",
+        "label": "t:settings_schema.global.settings.opacity.label",
+        "default": 10
+      },
+      {
+        "type": "range",
+        "id": "card_shadow_horizontal_offset",
+        "min": -20,
+        "max": 20,
+        "step": 2,
+        "unit": "px",
+        "label": "t:settings_schema.global.settings.horizontal_offset.label",
+        "default": 0
+      },
+      {
+        "type": "range",
+        "id": "card_shadow_vertical_offset",
+        "min": -20,
+        "max": 20,
+        "step": 2,
+        "unit": "px",
+        "label": "t:settings_schema.global.settings.vertical_offset.label",
+        "default": 0
+      },
+      {
+        "type": "range",
+        "id": "card_shadow_blur_radius",
+        "min": 0,
+        "max": 20,
+        "step": 2,
+        "unit": "px",
+        "label": "t:settings_schema.global.settings.blur_radius.label",
+        "default": 0
+      }
+    ]
+  },
   {
     "name": "t:settings_schema.colors.name",
     "settings": [
@@ -564,46 +800,6 @@
         "type": "header",
         "content": "t:settings_schema.styles.settings.header__1.content"
       },
-      {
-        "type": "select",
-        "id": "sale_badge_color_scheme",
-        "options": [
-          {
-            "value": "accent-1",
-            "label": "t:settings_schema.styles.settings.sale_badge_color_scheme.options__2.label"
-          },
-          {
-            "value": "accent-2",
-            "label": "t:settings_schema.styles.settings.sale_badge_color_scheme.options__3.label"
-          },
-          {
-            "value": "background-2",
-            "label": "t:settings_schema.styles.settings.sale_badge_color_scheme.options__1.label"
-          }
-        ],
-        "default": "accent-2",
-        "label": "t:settings_schema.styles.settings.sale_badge_color_scheme.label"
-      },
-      {
-        "type": "select",
-        "id": "sold_out_badge_color_scheme",
-        "options": [
-          {
-            "value": "background-1",
-            "label": "t:settings_schema.styles.settings.sold_out_badge_color_scheme.options__1.label"
-          },
-          {
-            "value": "inverse",
-            "label": "t:settings_schema.styles.settings.sold_out_badge_color_scheme.options__2.label"
-          }
-        ],
-        "default": "inverse",
-        "label": "t:settings_schema.styles.settings.sold_out_badge_color_scheme.label"
-      },
-      {
-        "type": "header",
-        "content": "t:settings_schema.styles.settings.header__2.content"
-      },
       {
         "type": "select",
         "id": "accent_icons",
diff --git a/layout/theme.liquid b/layout/theme.liquid
index 9a1c350c78a..dd64a24ef3d 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -83,6 +83,18 @@
         --page-width: {{ settings.page_width | divided_by: 10 }}rem;
         --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
 
+        --card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
+        --card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
+        --card-text-alignment: {{ settings.card_text_alignment }};
+        --card-border-width: {{ settings.card_border_width | divided_by: 10.0 }}rem;
+        --card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
+        --card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
+        --card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
+        --card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
+        --card-shadow-blur-radius: {{ settings.card_shadow_blur_radius | divided_by: 10.0 }}rem;
+
+        --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;
+        
         --sections-spacing: {{ settings.sections_spacing }}px;
         --sections-safe-spacing: {% if settings.sections_spacing < 15 %}15{% else %}{{settings.sections_spacing}}{% endif %}px;
         --sections-padding: 20px;
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index 2ec3885c89b..3ff385fd210 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -1,5 +1,112 @@
 {
   "settings_schema": {
+    "global": {
+      "settings": {
+        "header__general": {
+          "content":  "General"
+        },
+        "header__border": {
+          "content":  "Border"
+        },
+        "header__shadow": {
+          "content":  "Shadow"
+        },
+        "blur_radius": {
+          "label": "Blur radius"
+        },
+        "corner_radius": {
+          "label": "Corner radius"
+        },       
+        "horizontal_offset": {
+          "label": "Horizontal offset"
+        },
+        "vertical_offset": {
+          "label": "Vertical offset"
+        },
+        "opacity": {
+          "label": "Opacity"
+        },
+        "width": {
+          "label": "Width"
+        },
+        "image_padding": {
+          "label": "Image padding"
+        },
+        "text_alignment": {
+          "options__1": {
+            "label": "Left"
+          },
+          "options__2": {
+            "label": "Center"
+          },
+          "options__3": {
+            "label": "Right"
+          },
+          "label": "Text alignment"
+        },
+        "color_scheme": {
+          "options__1": {
+            "label": "Accent 1"
+          },
+          "options__2": {
+            "label": "Accent 2"
+          },
+          "options__3": {
+            "label": "Background 1"
+          },
+          "options__4": {
+            "label": "Background 2"
+          },
+          "options__5": {
+            "label": "Inverse"
+          },
+          "label": "Color scheme"
+        }
+      }
+    },
+    "cards": {
+      "name": "Cards",
+      "settings": {
+        "header__badge": {
+          "content":  "Badge"
+        },
+        "style": {
+          "options__1": {
+            "label": "Standard"
+          },
+          "options__2": {
+            "label": "Card"
+          },
+          "label": "Style"
+        }
+      }
+    },
+    "badges": {
+      "name": "Badges",
+      "settings": {
+        "position": {
+          "options__1": {
+            "label": "Bottom left"
+          },
+          "options__2": {
+            "label": "Bottom right"
+          },
+          "options__3": {
+            "label": "Top left"
+          },
+          "options__4": {
+            "label": "Top right"
+          },
+          "label": "Position"
+        },
+        "badge_sale_color_scheme": {
+          "label": "Sale badge color scheme"
+        },
+        "badge_sold_out_color_scheme": {
+          "label": "Sold out badge color scheme"
+        }
+      }
+    },
     "colors": {
       "name": "Colors",
       "settings": {
@@ -104,32 +211,8 @@
       "name": "Styles",
       "settings": {
         "header__1": {
-          "content": "Badges"
-        },
-        "header__2": {
           "content": "Decorative elements"
         },
-        "sale_badge_color_scheme": {
-          "options__1": {
-            "label": "Background 2"
-          },
-          "options__2": {
-            "label": "Accent 1"
-          },
-          "options__3": {
-            "label": "Accent 2"
-          },
-          "label": "Sale badge color scheme"
-        },
-        "sold_out_badge_color_scheme": {
-          "options__1": {
-            "label": "Background 1"
-          },
-          "options__2": {
-            "label": "Inverse"
-          },
-          "label": "Sold out badge color scheme"
-        },
         "accent_icons": {
           "options__1": {
             "label": "Accent 1"
@@ -358,11 +441,7 @@
             },
             "second_image": {
               "label": "Show second image on hover"
-            },
-            "image_padding": {
-              "label": "Add image padding",
-              "info": "Select image padding if you don't want your images to be cropped."
-            }
+            }           
           }
         },
         "collection": {
@@ -370,28 +449,6 @@
           "settings": {
             "collection": {
               "label": "Collection"
-            },
-            "image_padding": {
-              "label": "Add image padding",
-              "info": "Select image padding if you don't want your image to be cropped."
-            },
-            "color_scheme": {
-              "options__1": {
-                "label": "Accent 1"
-              },
-              "options__2": {
-                "label": "Accent 2"
-              },
-              "options__3": {
-                "label": "Background 1"
-              },
-              "options__4": {
-                "label": "Background 2"
-              },
-              "options__5": {
-                "label": "Inverse"
-              },
-              "label": "Color scheme"
             }
           }
         },
@@ -439,31 +496,10 @@
             "label": "Square"
           },
           "info": "Add images by editing your collections. [Learn more](https://help.shopify.com/en/manual/products/collections)"
-        },
-        "color_scheme": {
-          "options__1": {
-            "label": "Accent 1"
-          },
-          "options__2": {
-            "label": "Accent 2"
-          },
-          "options__3": {
-            "label": "Background 1"
-          },
-          "options__4": {
-            "label": "Background 2"
-          },
-          "options__5": {
-            "label": "Inverse"
-          },
-          "label": "Color scheme"
-        },
+        },       
         "swipe_on_mobile": {
           "label": "Enable swipe on mobile"
         },
-        "image_padding": {
-          "label": "Add image padding"
-        },
         "show_view_all": {
           "label": "Enable \"View all\" button if list includes more collections than shown"
         }
@@ -568,13 +604,7 @@
         },
         "show_secondary_image": {
           "label": "Show second image on hover"
-        },
-        "add_image_padding": {
-          "label": "Add image padding"
-        },
-        "show_image_outline": {
-          "label": "Show image border"
-        },
+        },      
         "show_vendor": {
           "label": "Show vendor"
         },
@@ -1215,13 +1245,7 @@
         },
         "show_secondary_image": {
           "label": "Show second image on hover"
-        },
-        "add_image_padding": {
-          "label": "Add image padding"
-        },
-        "show_image_outline": {
-          "label": "Show image border"
-        },
+        },       
         "show_vendor": {
           "label": "Show vendor"
         },
@@ -1283,28 +1307,7 @@
             "label": "Square"
           },
           "info": "Add images by editing your collections. [Learn more](https://help.shopify.com/en/manual/products/collections)"
-        },
-        "color_scheme": {
-          "options__1": {
-            "label": "Accent 1"
-          },
-          "options__2": {
-            "label": "Accent 2"
-          },
-          "options__3": {
-            "label": "Background 1"
-          },
-          "options__4": {
-            "label": "Background 2"
-          },
-          "options__5": {
-            "label": "Inverse"
-          },
-          "label": "Color scheme"
-        },
-        "image_padding": {
-          "label": "Add image padding"
-        }
+        }  
       }
     },
     "main-page": {
@@ -1590,13 +1593,7 @@
         },
         "show_secondary_image": {
           "label": "Show second image on hover"
-        },
-        "add_image_padding": {
-          "label": "Add image padding"
-        },
-        "show_image_outline": {
-          "label": "Show image border"
-        },
+        },       
         "show_vendor": {
           "label": "Show vendor"
         },
@@ -1892,13 +1889,7 @@
         },
         "show_secondary_image": {
           "label": "Show second image on hover"
-        },
-        "add_image_padding": {
-          "label": "Add image padding"
-        },
-        "show_image_outline": {
-          "label": "Show image border"
-        },
+        },   
         "show_vendor": {
           "label": "Show vendor"
         },
diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json
index add212918b6..305ba73b7e9 100644
--- a/locales/pt-BR.schema.json
+++ b/locales/pt-BR.schema.json
@@ -478,13 +478,17 @@
           "label": "Habilitar o botão \"Ver tudo\" se o blog tiver mais posts que os mostrados"
         },
         "show_image": {
-          "info": "Use uma imagem com proporção 3:2 para alcançar os melhores resultados. [Saiba mais](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
+          "info": "Use uma imagem com proporção 3:2 para alcançar os melhores resultados. [Saiba mais](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)",
+          "label": "Mostrar imagem em destaque"
         },
         "show_date": {
           "label": "Mostrar data"
         },
         "show_author": {
           "label": "Mostrar autor"
+        },
+        "soft_background": {
+          "label": "Mostrar plano de fundo secundário"
         }
       },
       "presets": {
@@ -958,7 +962,7 @@
           "content": "Cartão de post do blog"
         },
         "show_image": {
-          "label": "Exibir imagem em destaque"
+          "label": "Mostrar imagem em destaque"
         },
         "paragraph": {
           "content": "Edite os posts do blog para alterar os resumos. [Saiba mais](https://help.shopify.com/en/manual/online-store/blogs/writing-blogs#display-an-excerpt-from-a-blog-post)"
diff --git a/sections/collage.liquid b/sections/collage.liquid
index e450f7ededc..b371d25b84c 100644
--- a/sections/collage.liquid
+++ b/sections/collage.liquid
@@ -45,163 +45,24 @@
                 {%- endif -%}
               </div>
             </div>
-
           {%- when 'product'-%}
-            <div class="collage-card collage-product card-wrapper{% if focus_card_left %} collage-card--left{% elsif focus_card_right %} collage-card--right{% endif %}">
-              {%- if block.settings.product != blank -%}
-                {%- assign featured_media = block.settings.product.selected_or_first_available_variant.featured_media | default: block.settings.product.featured_media -%}
-                <div class="collage-content card{% if block.settings.secondary_background %} card-colored color-background-1{% endif %}{% if block.settings.image_padding %} collage-card-spacing{% endif %}" {{ block.shopify_attributes }}>
-                  {%- if featured_media != blank -%}
-                    <div class="collage-content__info card-information card-information__wrapper">
-                      <h3 class="card-information__text h4"><a href="{{ block.settings.product.url }}" class="full-unstyled-link">{{ block.settings.product.title | escape }}</a></h3>
-                      <span class="price">{% render 'price', product: block.settings.product %}</span>
-                    </div>
-                    
-                    <div class="collage-card__image-wrapper media media--transparent media--hover-effect"
-                      {% if focus_card_left and forloop.first %}
-                        style="padding-bottom: {{ 1 | divided_by: featured_media.aspect_ratio | times: 100 }}%;"
-                      {% elsif focus_card_right and forloop.last %}
-                        style="padding-bottom: {{ 1 | divided_by: featured_media.aspect_ratio | times: 100 }}%;"
-                      {% endif %}
-                    >
-                      <img
-                        srcset="{%- if featured_media.width >= 550 -%}{{ featured_media | img_url: '550x' }} 550w,{%- endif -%}
-                          {%- if featured_media.width >= 720 -%}{{ featured_media | img_url: '720x' }} 720w,{%- endif -%}
-                          {%- if featured_media.width >= 990 -%}{{ featured_media | img_url: '990x' }} 990w,{%- endif -%}
-                          {%- if featured_media.width >= 1100 -%}{{ featured_media | img_url: '1100x' }} 1100w,{%- endif -%}
-                          {%- if featured_media.width >= 1500 -%}{{ featured_media | img_url: '1500x' }} 1500w,{%- endif -%}
-                          {%- if featured_media.width >= 2200 -%}{{ featured_media | img_url: '2200x' }} 2200w,{%- endif -%}
-                          {%- if featured_media.width >= 3000 -%}{{ featured_media | img_url: '3000x' }} 3000w,{%- endif -%}
-                          {{ featured_media | img_url: 'master' }} {{ featured_media.width }}w"
-                        src="{{ featured_media | img_url: '1500x' }}"
-                        sizes="(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px)"
-                        alt="{{ featured_media.alt | escape }}"
-                        loading="lazy"
-                        width="{{ featured_media.width }}"
-                        height="{{ featured_media.height }}"
-                        class="collage-card__image"
-                      >
-
-                      {%- if block.settings.second_image and block.settings.product.media[1] != nil -%}
-                        <img
-                          srcset="{%- if block.settings.product.media[1].width >= 550 -%}{{ block.settings.product.media[1] | img_url: '550x' }} 550w,{%- endif -%}
-                            {%- if block.settings.product.media[1].width >= 720 -%}{{ block.settings.product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
-                            {%- if block.settings.product.media[1].width >= 990 -%}{{ block.settings.product.media[1] | img_url: '990x' }} 990w,{%- endif -%}
-                            {%- if block.settings.product.media[1].width >= 1100 -%}{{ block.settings.product.media[1] | img_url: '1100x' }} 1100w,{%- endif -%}
-                            {%- if block.settings.product.media[1].width >= 1500 -%}{{ block.settings.product.media[1] | img_url: '1500x' }} 1500w,{%- endif -%}
-                            {%- if block.settings.product.media[1].width >= 2200 -%}{{ block.settings.product.media[1] | img_url: '2200x' }} 2200w,{%- endif -%}
-                            {%- if block.settings.product.media[1].width >= 3000 -%}{{ block.settings.product.media[1] | img_url: '3000x' }} 3000w,{%- endif -%}
-                            {{ block.settings.product.media[1] | img_url: 'master' }} {{ block.settings.product.media[1].width }}w"
-                          src="{{ block.settings.product.media[1] | img_url: '533x' }}"
-                          sizes="(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px)"
-                          alt="{{ block.settings.product.media[1].alt | escape }}"
-                          loading="lazy"
-                          width="{{ block.settings.product.media[1].width }}"
-                          height="{{ block.settings.product.media[1].height }}"
-                          class="collage-card__image small-hide medium-hide"
-                        >
-                      {%- endif -%}
-                    </div>
-                    <div class="collage-product__badge">
-                      <div class="card__badge">
-                        {%- if block.settings.product.available == false -%}
-                          <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
-                        {%- elsif block.settings.product.compare_at_price > block.settings.product.price and block.settings.product.available -%}
-                          <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
-                        {%- endif -%}
-                      </div>
-                    </div>
-                  {%- else -%}
-                    <div class="collage-card__no-image card-colored color-background-1 card__text-spacing center">
-                      <h3 class="h2"><a href="{{ block.settings.product.url }}" class="full-unstyled-link">{{ block.settings.product.title | escape }}</a></h3>
-                    </div>
-                    <div class="collage-product__badge">
-                      <div class="card__badge">
-                        {%- if block.settings.product.available == false -%}
-                          <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">
-                            {{ 'products.product.sold_out' | t }}
-                          </span>
-                        {%- elsif block.settings.product.compare_at_price > block.settings.product.price and block.settings.product.available -%}
-                          <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">
-                            {{ 'products.product.on_sale' | t }}
-                          </span>
-                        {%- endif -%}
-                      </div>
-                    </div>
-                    <div class="collage-content__info">
-                      {% render 'price', product: block.settings.product %}
-                    </div>
-                  {%- endif -%}
-                </div>
-              {%- else -%}
-                <div class="collage-content">
-                  <div class="collage-card__no-image card-colored color-background-1 card__text-spacing center">
-                    <h3 class="h2">{{ 'onboarding.product_title' | t }}</h3>
-                  </div>
-                  <div class="collage-content__info">
-                    <span class="price">{% render 'price' %}</span>
-                  </div>
-                </div>
-              {%- endif -%}
-            </div>
-
+            <div class="collage-card collage-product{% if focus_card_left %} collage-card--left{% elsif focus_card_right %} collage-card--right{% endif %}">
+              <div class="collage-content">
+                {% render 'card-product',
+                  card_product: block.settings.product,
+                  media_aspect_ratio: 'auto',
+                  show_secondary_image: block.settings.second_image
+                %}
+              </div>
+            </div>        
           {%- when 'collection'-%}
             <div class="collage-card collage-collection color-{{ block.settings.color_scheme }}{% if focus_card_left %} collage-card--left{% elsif focus_card_right %} collage-card--right{% endif %}" {{ block.shopify_attributes }}>
-                {%- if block.settings.collection != blank -%}
-                  <a href="{{ block.settings.collection.url }}" class="card animate-arrow">
-                    <div class="collage-content card-colored color-{{ block.settings.color_scheme }}{% if block.settings.image_padding %} collage-card-spacing{% endif %}">
-                      {%- if block.settings.collection.featured_image != blank -%}
-                        <div class="collage-card__image-wrapper media media--transparent media--hover-effect">
-                          <img
-                            srcset="{%- if block.settings.collection.featured_image.width >= 550 -%}{{ block.settings.collection.featured_image | img_url: '550x' }} 550w,{%- endif -%}
-                              {%- if block.settings.collection.featured_image.width >= 720 -%}{{ block.settings.collection.featured_image | img_url: '720x' }} 720w,{%- endif -%}
-                              {%- if block.settings.collection.featured_image.width >= 990 -%}{{ block.settings.collection.featured_image | img_url: '990x' }} 990w,{%- endif -%}
-                              {%- if block.settings.collection.featured_image.width >= 1100 -%}{{ block.settings.collection.featured_image | img_url: '1100x' }} 1100w,{%- endif -%}
-                              {%- if block.settings.collection.featured_image.width >= 1500 -%}{{ block.settings.collection.featured_image | img_url: '1500x' }} 1500w,{%- endif -%}
-                              {%- if block.settings.collection.featured_image.width >= 2200 -%}{{ block.settings.collection.featured_image | img_url: '2200x' }} 2200w,{%- endif -%}
-                              {%- if block.settings.collection.featured_image.width >= 3000 -%}{{ block.settings.collection.featured_image | img_url: '3000x' }} 3000w,{%- endif -%}
-                              {{ block.settings.collection.featured_image | img_url: 'master' }} {{ block.settings.collection.featured_image.width }}w"
-                            src="{{ block.settings.collection.featured_image | img_url: '1500x' }}"
-                            sizes="(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px)"
-                            alt="{{ block.settings.collection.featured_image.alt | escape }}"
-                            loading="lazy"
-                            width="{{ block.settings.collection.featured_image.width }}"
-                            height="{{ block.settings.collection.featured_image.height }}"
-                            class="collage-card__image"
-                          >
-                        </div>
-
-                        {% unless section.settings.image_padding %}<div class="overlay-card"></div>{% endunless %}
-                        <div class="collage-content__info">
-                          <h3>{{ block.settings.collection.title | escape }}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span></h3>
-                        </div>
-                      {%- else -%}
-                        <div class="collage-card__no-image card__text-spacing card__text-hover card-color ">
-                          <div class="overlay-card"></div>
-                          <h3 class="h2">
-                            {{- block.settings.collection.title -}}<span class="icon-wrap{% if block.settings.collection.description != blank %} collage-card__arrow{% endif %}">&nbsp;{% render 'icon-arrow' %}</span>
-                          </h3>
-
-                          {%- if block.settings.collection.description != blank -%}
-                            <p class="collage-card__description card__caption">
-                              {{- block.settings.collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
-                            </p>
-                          {%- endif -%}
-                        </div>
-                      {%- endif -%}
-                    </div>
-                  </a>
-                {%- else -%}
-                  <div class="collage-content card card-colored color-{{ block.settings.color_scheme }}">
-                    <div class="collage-card__no-image card__text-spacing card__text-hover">
-                      <h3 class="h2">
-                        {{ 'onboarding.collection_title' | t }}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
-                      </h3>
-                    </div>
-                  </div>
-                {%- endif -%}
+              {% render 'card-collection',
+                card_collection: block.settings.collection,
+                media_aspect_ratio: 'auto',
+                columns: 2
+              %}
             </div>
-
           {%- when 'video' -%}
             <div class="collage-card collage-video{% if focus_card_left %} collage-card--left{% elsif focus_card_right %} collage-card--right{% endif %}" {{ block.shopify_attributes }}>
               <noscript>
@@ -452,19 +313,6 @@
           "id": "second_image",
           "default": false,
           "label": "t:sections.collage.blocks.product.settings.second_image.label"
-        },
-        {
-          "type": "checkbox",
-          "id": "image_padding",
-          "default": false,
-          "label": "t:sections.collage.blocks.product.settings.image_padding.label",
-          "info": "t:sections.collage.blocks.product.settings.image_padding.info"
-        },
-        {
-          "type": "checkbox",
-          "id": "secondary_background",
-          "default": false,
-          "label": "t:sections.collage.blocks.product.settings.secondary_background.label"
         }
       ]
     },
@@ -476,41 +324,6 @@
           "type": "collection",
           "id": "collection",
           "label": "t:sections.collage.blocks.collection.settings.collection.label"
-        },
-        {
-          "type": "checkbox",
-          "id": "image_padding",
-          "default": false,
-          "label": "t:sections.collage.blocks.collection.settings.image_padding.label",
-          "info": "t:sections.collage.blocks.collection.settings.image_padding.info"
-        },
-        {
-          "type": "select",
-          "id": "color_scheme",
-          "options": [
-            {
-              "value": "accent-1",
-              "label": "t:sections.collage.blocks.collection.settings.color_scheme.options__1.label"
-            },
-            {
-              "value": "accent-2",
-              "label": "t:sections.collage.blocks.collection.settings.color_scheme.options__2.label"
-            },
-            {
-              "value": "background-1",
-              "label": "t:sections.collage.blocks.collection.settings.color_scheme.options__3.label"
-            },
-            {
-              "value": "background-2",
-              "label": "t:sections.collage.blocks.collection.settings.color_scheme.options__4.label"
-            },
-            {
-              "value": "inverse",
-              "label": "t:sections.collage.blocks.collection.settings.color_scheme.options__5.label"
-            }
-          ],
-          "default": "background-1",
-          "label": "t:sections.collage.blocks.collection.settings.color_scheme.label"
         }
       ]
     },
diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid
index 73cfab47f21..39a17f603af 100644
--- a/sections/collection-list.liquid
+++ b/sections/collection-list.liquid
@@ -19,79 +19,15 @@
       id="Slider-{{ section.id }}"
       role="list"
     >
-
       {%- liquid
         assign columns = section.blocks.size
         if columns > 3
           assign columns = 3
         endif
       -%}
-
       {%- for block in section.blocks -%}
         <li class="collection-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}" {{ block.shopify_attributes }}>
-          <a{% if block.settings.collection != blank and block.settings.collection.all_products_count > 0 %} href="{{ block.settings.collection.url }}"{% else %} role="link" aria-disabled="true"{% endif %}
-            class="card animate-arrow link{% if block.settings.collection.featured_image != blank %} card--media{% else %}{% if section.settings.image_ratio != 'adapt' %} card--stretch{% endif %}{% endif %}{% unless section.settings.image_padding %} card--light-border{% endunless %}"
-          >
-            <div class="card--stretch card-colored color-{{ section.settings.color_scheme }}">
-              {%- if block.settings.collection.featured_image != blank -%}
-                <div{% if section.settings.image_padding %} class="card__media-spacer"{% endif %}>
-                  {% if section.settings.image_padding %}<div class="overlay-card"></div>{% endif %}
-                  <div class="media{% if section.blocks.size > 1 %} media--{{ section.settings.image_ratio }}{% endif %} media--hover-effect overflow-hidden"
-                    {% if section.settings.image_ratio == 'adapt' and section.blocks.size > 1 %}style="padding-bottom: {{ 1 | divided_by: block.settings.collection.featured_image.aspect_ratio | times: 100 }}%;"{% endif %}>
-
-                    <img
-                      srcset="{%- if block.settings.collection.featured_image.width >= 165 -%}{{ block.settings.collection.featured_image | img_url: '165x' }} 165w,{%- endif -%}
-                        {%- if block.settings.collection.featured_image.width >= 330 -%}{{ block.settings.collection.featured_image | img_url: '330x' }} 330w,{%- endif -%}
-                        {%- if block.settings.collection.featured_image.width >= 535 -%}{{ block.settings.collection.featured_image | img_url: '535x' }} 535w,{%- endif -%}
-                        {%- if block.settings.collection.featured_image.width >= 750 -%}{{ block.settings.collection.featured_image | img_url: '750x' }} 750w,{%- endif -%}
-                        {%- if block.settings.collection.featured_image.width >= 1000 -%}{{ block.settings.collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%}
-                        {%- if block.settings.collection.featured_image.width >= 1500 -%}{{ block.settings.collection.featured_image | img_url: '1500x' }} 1500w,{%- endif -%}
-                        {%- if block.settings.collection.featured_image.width >= 3000 -%}{{ block.settings.collection.featured_image | img_url: '3000x' }} 3000w,{%- endif -%}
-                        {{ block.settings.collection.featured_image | img_url: 'master' }} {{ block.settings.collection.featured_image.width }}w"
-                      src="{{ block.settings.collection.featured_image | img_url: '1500x' }}"
-                      sizes="
-                      (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
-                      (min-width: 750px) {% if section.blocks.size > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
-                      calc(100vw - 3rem)"
-                      alt="{{ block.settings.collection.title | escape }}"
-                      height="{{ block.settings.collection.featured_image.height }}"
-                      width="{{ block.settings.collection.featured_image.width }}"
-                      loading="lazy"
-                      class="motion-reduce"
-                    >
-                  </div>
-                </div>
-
-                <div class="card__text card__text-spacing card-colored card__text-hover{% if section.settings.image_padding == false %} color-{{ section.settings.color_scheme }}{% endif %}">
-                  {% unless section.settings.image_padding %}<div class="overlay-card"></div>{% endunless %}
-                  <h3>
-                    {%- if block.settings.collection.title != blank -%}
-                      {{- block.settings.collection.title | escape -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
-                    {%- else -%}
-                      {{ 'onboarding.collection_title' | t }}
-                    {%- endif -%}
-                  </h3>
-                </div>
-              {%- else -%}
-                <div class="overlay-card"></div>
-                <div class="card__text-spacing card__text-hover">
-                  <h3 class="h1">
-                    {%- if block.settings.collection.title != blank -%}
-                      {{- block.settings.collection.title | escape -}}{%- if block.settings.collection.description == blank -%}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>{% endif %}
-                    {%- else -%}
-                      {{ 'onboarding.collection_title' | t }}
-                    {%- endif -%}
-                  </h3>
-
-                  {%- if block.settings.collection.description != blank -%}
-                    <p class="card__caption">
-                      {{- block.settings.collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
-                    </p>
-                  {%- endif -%}
-                </div>
-              {%- endif -%}
-            </div>
-          </a>
+          {% render 'card-collection', card_collection: block.settings.collection , media_aspect_ratio: section.settings.image_ratio, columns: columns %}
         </li>
       {%- endfor -%}
     </ul>
@@ -151,46 +87,12 @@
       "label": "t:sections.collection-list.settings.image_ratio.label",
       "info": "t:sections.collection-list.settings.image_ratio.info"
     },
-    {
-      "type": "select",
-      "id": "color_scheme",
-      "options": [
-        {
-          "value": "accent-1",
-          "label": "t:sections.collection-list.settings.color_scheme.options__1.label"
-        },
-        {
-          "value": "accent-2",
-          "label": "t:sections.collection-list.settings.color_scheme.options__2.label"
-        },
-        {
-          "value": "background-1",
-          "label": "t:sections.collection-list.settings.color_scheme.options__3.label"
-        },
-        {
-          "value": "background-2",
-          "label": "t:sections.collection-list.settings.color_scheme.options__4.label"
-        },
-        {
-          "value": "inverse",
-          "label": "t:sections.collection-list.settings.color_scheme.options__5.label"
-        }
-      ],
-      "default": "background-1",
-      "label": "t:sections.collection-list.settings.color_scheme.label"
-    },
     {
       "type": "checkbox",
       "id": "swipe_on_mobile",
       "default": false,
       "label": "t:sections.collection-list.settings.swipe_on_mobile.label"
     },
-    {
-      "type": "checkbox",
-      "id": "image_padding",
-      "default": false,
-      "label": "t:sections.collection-list.settings.image_padding.label"
-    },
     {
       "type": "checkbox",
       "id": "show_view_all",
diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid
index 21ec733ab8b..67d1bfa49eb 100644
--- a/sections/featured-collection.liquid
+++ b/sections/featured-collection.liquid
@@ -29,20 +29,18 @@
     <ul class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
       {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
         <li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
-          {% render 'product-card',
-            product_card_product: product,
-            media_size: section.settings.image_ratio,
+          {% render 'card-product',
+            card_product: product,
+            media_aspect_ratio: section.settings.image_ratio,
             show_secondary_image: section.settings.show_secondary_image,
-            add_image_padding: section.settings.add_image_padding,
             show_vendor: section.settings.show_vendor,
-            show_image_outline: section.settings.show_image_outline,
             show_rating: section.settings.show_rating
           %}
         </li>
       {%- else -%}
         {%- for i in (1..4) -%}
           <li class="grid__item">
-            {% render 'product-card-placeholder' %}
+            {% render 'card-product', show_vendor: section.settings.show_vendor %}
           </li>
         {%- endfor -%}
       {%- endfor -%}
@@ -141,18 +139,6 @@
       "default": false,
       "label": "t:sections.featured-collection.settings.show_secondary_image.label"
     },
-    {
-      "type": "checkbox",
-      "id": "add_image_padding",
-      "default": false,
-      "label": "t:sections.featured-collection.settings.add_image_padding.label"
-    },
-    {
-      "type": "checkbox",
-      "id": "show_image_outline",
-      "default": true,
-      "label": "t:sections.featured-collection.settings.show_image_outline.label"
-    },
     {
       "type": "checkbox",
       "id": "show_vendor",
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 3a55df5b570..fbc3e7b99bd 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -404,22 +404,30 @@
   <script src="{{ 'product-model.js' | asset_url }}" defer></script>
 {%- endif -%}
 
+{%- liquid
+  if product.selected_or_first_available_variant.featured_media
+    assign seo_media = product.selected_or_first_available_variant.featured_media
+  else
+    assign seo_media = product.featured_media
+  endif
+-%}
+
 <script type="application/ld+json">
   {
     "@context": "http://schema.org/",
     "@type": "Product",
     "name": {{ product.title | json }},
     "url": {{ shop.url | append: product.url | json }},
-    {%- if product.selected_or_first_available_variant.featured_media -%}
-      {%- assign media_size = product.selected_or_first_available_variant.featured_media.preview_image.width | append: 'x' -%}
+    {% if seo_media -%}
+      {%- assign media_size = seo_media.preview_image.width | append: 'x' -%}
       "image": [
-        {{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
+        {{ seo_media | img_url: media_size | prepend: "https:" | json }}
       ],
-    {%- endif -%}
+    {%- endif %}
     "description": {{ product.description | strip_html | json }},
-    {%- if product.selected_or_first_available_variant.sku != blank -%}
+    {% if product.selected_or_first_available_variant.sku != blank -%}
       "sku": {{ product.selected_or_first_available_variant.sku | json }},
-    {%- endif -%}
+    {%- endif %}
     "brand": {
       "@type": "Thing",
       "name": {{ product.vendor | json }}
diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
index 5527e8f1a99..15219f6091c 100644
--- a/sections/main-collection-product-grid.liquid
+++ b/sections/main-collection-product-grid.liquid
@@ -40,13 +40,11 @@
           {% endif %}">
           {%- for product in collection.products -%}
             <li class="grid__item">
-              {% render 'product-card',
-                product_card_product: product,
-                media_size: section.settings.image_ratio,
+              {% render 'card-product',
+                card_product: product,
+                media_aspect_ratio: section.settings.image_ratio,
                 show_secondary_image: section.settings.show_secondary_image,
-                add_image_padding: section.settings.add_image_padding,
                 show_vendor: section.settings.show_vendor,
-                show_image_outline: section.settings.show_image_outline,
                 show_rating: section.settings.show_rating
               %}
             </li>
@@ -105,18 +103,6 @@
       "default": false,
       "label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
     },
-    {
-      "type": "checkbox",
-      "id": "add_image_padding",
-      "default": false,
-      "label": "t:sections.main-collection-product-grid.settings.add_image_padding.label"
-    },
-    {
-      "type": "checkbox",
-      "id": "show_image_outline",
-      "default": true,
-      "label": "t:sections.main-collection-product-grid.settings.show_image_outline.label"
-    },
     {
       "type": "checkbox",
       "id": "show_vendor",
diff --git a/sections/main-list-collections.liquid b/sections/main-list-collections.liquid
index 5a08c4c1a97..9c0fa38334c 100644
--- a/sections/main-list-collections.liquid
+++ b/sections/main-list-collections.liquid
@@ -3,7 +3,6 @@
 
 <div class="page-width">
   <h1 class="title title--primary">{{ section.settings.title | escape }}</h1>
-
   {%- liquid
     case section.settings.sort
       when 'products_high' or 'products_low'
@@ -16,57 +15,10 @@
       assign collections = collections | reverse
     endif
   -%}
-
   <ul class="collection-list grid grid--1-col grid--3-col-tablet" role="list">
     {%- for collection in collections -%}
       <li class="collection-list__item grid__item">
-        <a{% if collection.all_products_count > 0 %} href="{{ collection.url }}"{% endif %}
-          class="card animate-arrow{% if collection.featured_image != blank %} card--media{% else %}{% if section.settings.image_ratio != 'adapt' %} card--stretch{% endif %}{% endif %}{% unless section.settings.image_padding %} card--light-border{% endunless %}"
-        >
-          <div class="card--stretch card-colored color-{{ section.settings.color_scheme }}">
-            {%- if collection.featured_image != blank -%}
-              <div{% if section.settings.image_padding %} class="card__media-spacer"{% endif %}>
-                {% if section.settings.image_padding %}<div class="overlay-card"></div>{% endif %}
-                <div class="media media--{{ section.settings.image_ratio }} media--hover-effect overflow-hidden"
-                  {% if section.settings.image_ratio == 'adapt' %}style="padding-bottom: {{ 1 | divided_by: collection.featured_image.aspect_ratio | times: 100 }}%;"{% endif %}>
-
-                  <img
-                    srcset="{%- if collection.featured_image.width >= 165 -%}{{ collection.featured_image | img_url: '165x' }} 165w,{%- endif -%}
-                      {%- if collection.featured_image.width >= 360 -%}{{ collection.featured_image | img_url: '360x' }} 360w,{%- endif -%}
-                      {%- if collection.featured_image.width >= 535 -%}{{ collection.featured_image | img_url: '535x' }} 535w,{%- endif -%}
-                      {%- if collection.featured_image.width >= 750 -%}{{ collection.featured_image | img_url: '750x' }} 750w,{%- endif -%}
-                      {%- if collection.featured_image.width >= 1000 -%}{{ collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%}
-                      {%- if collection.featured_image.width >= 1500 -%}{{ collection.featured_image | img_url: '1500x' }} 1500w,{%- endif -%}
-                      {{ collection.featured_image | img_url: 'master' }} {{ collection.featured_image.width }}w"
-                    src="{{ collection.featured_image | img_url: '1500x' }}"
-                    sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 3 }}px, (min-width: 750px) calc((100vw - 130px) / 3), calc(100vw - 30px)"
-                    alt="{{ collection.title | escape }}"
-                    height="{{ collection.featured_image.height }}"
-                    width="{{ collection.featured_image.width }}"
-                    loading="lazy"
-                  >
-                </div>
-              </div>
-              <div class="card__text card__text-spacing card__text-hover">
-                {% unless section.settings.image_padding %}<div class="overlay-card"></div>{% endunless %}
-                <h2 class="h3">{{- collection.title -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span></h2>
-              </div>
-            {%- else -%}
-              <div class="overlay-card"></div>
-              <div class="card__text-spacing card__text-hover">
-                <h2 class="h1">
-                  {{- collection.title -}}{%- if collection.description == blank -%}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>{% endif %}
-                </h2>
-
-                {%- if collection.description != blank -%}
-                  <p>
-                    {{- collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
-                  </p>
-                {%- endif -%}
-              </div>
-            {%- endif -%}
-          </div>
-        </a>
+        {% render 'card-collection', card_collection: collection, media_aspect_ratio: section.settings.image_ratio, columns: 3 %}
       </li>
     {%- endfor -%}
   </ul>
@@ -135,40 +87,6 @@
       "default": "adapt",
       "label": "t:sections.main-list-collections.settings.image_ratio.label",
       "info": "t:sections.main-list-collections.settings.image_ratio.info"
-    },
-    {
-      "type": "select",
-      "id": "color_scheme",
-      "options": [
-        {
-          "value": "accent-1",
-          "label": "t:sections.main-list-collections.settings.color_scheme.options__1.label"
-        },
-        {
-          "value": "accent-2",
-          "label": "t:sections.main-list-collections.settings.color_scheme.options__2.label"
-        },
-        {
-          "value": "background-1",
-          "label": "t:sections.main-list-collections.settings.color_scheme.options__3.label"
-        },
-        {
-          "value": "background-2",
-          "label": "t:sections.main-list-collections.settings.color_scheme.options__4.label"
-        },
-        {
-          "value": "inverse",
-          "label": "t:sections.main-list-collections.settings.color_scheme.options__5.label"
-        }
-      ],
-      "default": "background-1",
-      "label": "t:sections.main-list-collections.settings.color_scheme.label"
-    },
-    {
-      "type": "checkbox",
-      "id": "image_padding",
-      "default": false,
-      "label": "t:sections.main-list-collections.settings.image_padding.label"
     }
   ]
 }
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 923edbb9e94..b8f136a09d8 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -477,22 +477,30 @@
   <script src="{{ 'product-model.js' | asset_url }}" defer></script>
 {%- endif -%}
 
+{%- liquid
+  if product.selected_or_first_available_variant.featured_media
+    assign seo_media = product.selected_or_first_available_variant.featured_media
+  else
+    assign seo_media = product.featured_media
+  endif
+-%}
+
 <script type="application/ld+json">
   {
     "@context": "http://schema.org/",
     "@type": "Product",
     "name": {{ product.title | json }},
     "url": {{ shop.url | append: product.url | json }},
-    {%- if product.selected_or_first_available_variant.featured_media -%}
-      {%- assign media_size = product.selected_or_first_available_variant.featured_media.preview_image.width | append: 'x' -%}
+    {% if seo_media -%}
+      {%- assign media_size = seo_media.preview_image.width | append: 'x' -%}
       "image": [
-        {{ product.selected_or_first_available_variant.featured_media | img_url: media_size | prepend: "https:" | json }}
+        {{ seo_media | img_url: media_size | prepend: "https:" | json }}
       ],
-    {%- endif -%}
+    {%- endif %}
     "description": {{ product.description | strip_html | json }},
-    {%- if product.selected_or_first_available_variant.sku != blank -%}
+    {% if product.selected_or_first_available_variant.sku != blank -%}
       "sku": {{ product.selected_or_first_available_variant.sku | json }},
-    {%- endif -%}
+    {%- endif %}
     "brand": {
       "@type": "Thing",
       "name": {{ product.vendor | json }}
diff --git a/sections/main-search.liquid b/sections/main-search.liquid
index 78c927d863b..b292c439f5a 100644
--- a/sections/main-search.liquid
+++ b/sections/main-search.liquid
@@ -155,40 +155,78 @@
                   {%- case item.object_type -%}
                     {%- when 'product' -%}
                       {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
-                      {% render 'product-card',
-                        product_card_product: item,
-                        media_size: section.settings.image_ratio,
+                      {% render 'card-product',
+                        card_product: item,
+                        media_aspect_ratio: section.settings.image_ratio,
                         show_secondary_image: section.settings.show_secondary_image,
-                        add_image_padding: section.settings.add_image_padding,
                         show_vendor: section.settings.show_vendor,
-                        show_image_outline: section.settings.show_image_outline,
                         show_rating: section.settings.show_rating
                       %}
                     {%- when 'article' -%}
-                      <a href="{{ item.url }}" class="card-wrapper">
-                        <div class="card card--search card--soft{% unless item.image %} card--text-only{% endunless %}">
-                          <div class="card__inner">
+                      {%- liquid
+                        assign ratio = 1
+                        if item.image and settings.card_style == 'card'
+                          assign ratio = 1.6
+                        endif
+                      -%}
+                      <div class="card-wrapper underline-links-hover">
+                        <div class="card
+                          card--{{ settings.card_style }}
+                          {% if item.image %} card--media{% else %} card--text{% endif %}
+                          {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }}{% endif %}
+                          {% if item.image == nil and settings.card_style == 'card' %} ratio{% endif %}"
+                          style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
+                        >
+                          <div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }}{% endif %}{% if item.image or settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
                             {%- if item.image -%}
-                              <div class="media media--cropped">
-                                <img
-                                  srcset="{%- if item.image.src.width >= 165 -%}{{ item.image.src | img_url: '165x' }} 165w,{%- endif -%}
-                                    {%- if item.image.src.width >= 360 -%}{{ item.image.src | img_url: '360x' }} 360w,{%- endif -%}
-                                    {%- if item.image.src.width >= 533 -%}{{ item.image.src | img_url: '533x' }} 533w,{%- endif -%}
-                                    {%- if item.image.src.width >= 720 -%}{{ item.image.src | img_url: '720x' }} 720w,{%- endif -%}
-                                    {%- if item.image.src.width >= 940 -%}{{ item.image.src | img_url: '940x' }} 940w,{%- endif -%}
-                                    {%- if item.image.src.width >= 1065 -%}{{ item.image.src | img_url: '1065x' }} 1065w,{%- endif -%}
-                                    {{ item.image.src | img_url: 'master' }} {{ item.image.src.width }}w"
-                                  src="{{ item.image.src | img_url: '940x' }}"
-                                  loading="lazy"
-                                  sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
-                                  width="{{ item.image.src.width }}"
-                                  height="{{ item.image.src.height }}"
-                                  alt="{{ item.image.src.alt | escape }}"
-                              >
+                              <div class="card__media">
+                                <div class="media media--hover-effect">
+                                  <img
+                                    srcset="{%- if item.image.src.width >= 165 -%}{{ item.image.src | img_url: '165x' }} 165w,{%- endif -%}
+                                      {%- if item.image.src.width >= 360 -%}{{ item.image.src | img_url: '360x' }} 360w,{%- endif -%}
+                                      {%- if item.image.src.width >= 533 -%}{{ item.image.src | img_url: '533x' }} 533w,{%- endif -%}
+                                      {%- if item.image.src.width >= 720 -%}{{ item.image.src | img_url: '720x' }} 720w,{%- endif -%}
+                                      {%- if item.image.src.width >= 940 -%}{{ item.image.src | img_url: '940x' }} 940w,{%- endif -%}
+                                      {%- if item.image.src.width >= 1065 -%}{{ item.image.src | img_url: '1065x' }} 1065w,{%- endif -%}
+                                      {{ item.image.src | img_url: 'master' }} {{ item.image.src.width }}w"
+                                    src="{{ item.image.src | img_url: '940x' }}"
+                                    loading="lazy"
+                                    sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
+                                    width="{{ item.image.src.width }}"
+                                    height="{{ item.image.src.height }}"
+                                    alt="{{ item.image.src.alt | escape }}"
+                                >
+                                </div>
                               </div>
                             {%- endif -%}
-                            <div class="card__content">
-                              <h2 class="card__text h3">{{ item.title | truncate: 50 | escape }}</h2>
+                            <div class="card__content">        
+                              <div class="card__information">
+                                <h3 class="card__heading">
+                                  <a href="{{ item.url }}" class="full-unstyled-link">
+                                    {{ item.title | truncate: 50 | escape }}
+                                  </a>
+                                </h3>
+                                <div class="card-article-info caption-with-letter-spacing h5">
+                                  {%- if section.settings.article_show_date -%}
+                                    <span class="circle-divider">{{ item.published_at | time_tag: format: 'date' }}</span>
+                                  {%- endif -%}
+                                  {%- if section.settings.article_show_author -%}
+                                    <span>{{ item.author }}</span>
+                                  {%- endif -%}
+                                </div>
+                              </div>      
+                              <div class="card__badge {{ settings.badge_position }}"> 
+                                <span class="badge color-background-1">{{ 'blogs.article.blog' | t }}</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="card__content">
+                            <div class="card__information">  
+                              <h3 class="card__heading">
+                                <a href="{{ item.url }}" class="full-unstyled-link">
+                                  {{ item.title | truncate: 50 | escape }}
+                                </a>
+                              </h3>
                               <div class="card-article-info caption-with-letter-spacing h5">
                                 {%- if section.settings.article_show_date -%}
                                   <span class="circle-divider">{{ item.published_at | time_tag: format: 'date' }}</span>
@@ -197,24 +235,29 @@
                                   <span>{{ item.author }}</span>
                                 {%- endif -%}
                               </div>
-                            </div>
-                            <div class="card__badge">
+                            </div>     
+                            <div class="card__badge {{ settings.badge_position }}">
                               <span class="badge color-background-1">{{ 'blogs.article.blog' | t }}</span>
                             </div>
                           </div>
                         </div>
-                      </a>
-                    {%- when 'page' -%}
-                      <a href="{{ item.url }}" class="card-wrapper">
-                        <div class="card card--search card--soft card--text-only">
-                          <div class="card__inner">
-                            <div class="card__content"><h2 class="card__text h3">{{ item.title | truncate: 50 | escape }}</h2></div>
-                            <div class="card__badge">
-                              <span class="badge color-background-1">{{ 'templates.search.page' | t }}</span>
-                            </div>
-                          </div>
+                      </div>
+                    {%- when 'page' -%}                
+                      <div class="card-wrapper underline-links-hover">
+                        <div class="card card--card card--text ratio color-{{ settings.card_color_scheme }}" style="--ratio-percent: 100%;">
+                            <div class="card__content">        
+                              <div class="card__information">
+                                <h3 class="card__heading">
+                                  <a href="{{ item.url }}" class="full-unstyled-link">
+                                    {{ item.title | truncate: 50 | escape }}
+                                  </a>
+                                </h3>
+                              </div>      
+                              <div class="card__badge {{ settings.badge_position }}"> 
+                                <span class="badge color-background-1">{{ 'templates.search.page' | t }}</span>
+                              </div>                    
                         </div>
-                      </a>
+                      </div>
                   {%- endcase -%}
                 </li>
               {%- endfor -%}
@@ -265,18 +308,6 @@
       "default": false,
       "label": "t:sections.main-search.settings.show_secondary_image.label"
     },
-    {
-      "type": "checkbox",
-      "id": "add_image_padding",
-      "default": false,
-      "label": "t:sections.main-search.settings.add_image_padding.label"
-    },
-    {
-      "type": "checkbox",
-      "id": "show_image_outline",
-      "default": true,
-      "label": "t:sections.main-search.settings.show_image_outline.label"
-    },
     {
       "type": "checkbox",
       "id": "show_vendor",
diff --git a/sections/product-recommendations.liquid b/sections/product-recommendations.liquid
index c394a2129e2..cb43d9c3e09 100644
--- a/sections/product-recommendations.liquid
+++ b/sections/product-recommendations.liquid
@@ -14,13 +14,11 @@
     <ul class="grid grid--2-col product-grid{% if recommendations.products_count > 3 %} grid--4-col-desktop grid--quarter-max{% else %} grid--{{ recommendations.products_count }}-col-tablet{% endif %}" role="list">
       {% for recommendation in recommendations.products %}
         <li class="grid__item">
-          {% render 'product-card',
-            product_card_product: recommendation,
-            media_size: section.settings.image_ratio,
+          {% render 'card-product',
+            card_product: recommendation,
+            media_aspect_ratio: section.settings.image_ratio,
             show_secondary_image: section.settings.show_secondary_image,
-            add_image_padding: section.settings.add_image_padding,
             show_vendor: section.settings.show_vendor,
-            show_image_outline: section.settings.show_image_outline,
             show_rating: section.settings.show_rating
           %}
         </li>
@@ -106,18 +104,6 @@
       "default": false,
       "label": "t:sections.product-recommendations.settings.show_secondary_image.label"
     },
-    {
-      "type": "checkbox",
-      "id": "add_image_padding",
-      "default": false,
-      "label": "t:sections.product-recommendations.settings.add_image_padding.label"
-    },
-    {
-      "type": "checkbox",
-      "id": "show_image_outline",
-      "default": true,
-      "label": "t:sections.product-recommendations.settings.show_image_outline.label"
-    },
     {
       "type": "checkbox",
       "id": "show_vendor",
diff --git a/snippets/card-collection.liquid b/snippets/card-collection.liquid
new file mode 100644
index 00000000000..a11f13c75f1
--- /dev/null
+++ b/snippets/card-collection.liquid
@@ -0,0 +1,103 @@
+{% comment %}
+    Renders a collection card
+
+    Accepts:
+    - card_collection: {Object} Collection Liquid object
+    - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
+    - columns: {Number} 
+    
+    Usage:
+    {% render 'card-collection' %}
+{% endcomment %}
+
+{%- liquid
+  assign ratio = 1
+  if card_collection.featured_image and media_aspect_ratio == 'portrait'
+    assign ratio = 0.8
+  elsif card_collection.featured_image and media_aspect_ratio == 'adapt'
+    assign ratio = card_collection.featured_image.aspect_ratio
+  endif
+  if ratio == 0 or ratio == nil
+    assign ratio = 1
+  endif
+-%}
+
+<div class="card-wrapper animate-arrow">
+  <div class="card
+    card--{{ settings.card_style }}
+    {% if card_collection.featured_image %} card--media{% else %} card--text{% endif %}
+    {% if media_aspect_ratio == 'auto' %} card--height-auto{% endif %}
+    {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }}{% endif %}
+    {% if card_collection.featured_image == nil and settings.card_style == 'card' %} ratio{% endif %}"
+    style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
+  >
+    <div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }}{% endif %}{% if card_collection.featured_image or settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
+      {%- if card_collection.featured_image -%}
+        <div class="card__media">
+          <div class="media media--transparent media--hover-effect">
+            <img
+              srcset="{%- if card_collection.featured_image.width >= 165 -%}{{ card_collection.featured_image | img_url: '165x' }} 165w,{%- endif -%}
+                {%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | img_url: '330x' }} 330w,{%- endif -%}
+                {%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | img_url: '535x' }} 535w,{%- endif -%}
+                {%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | img_url: '750x' }} 750w,{%- endif -%}
+                {%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%}
+                {%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | img_url: '1500x' }} 1500w,{%- endif -%}
+                {%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | img_url: '3000x' }} 3000w,{%- endif -%}
+                {{ card_collection.featured_image | img_url: 'master' }} {{ card_collection.featured_image.width }}w"
+              src="{{ card_collection.featured_image | img_url: '1500x' }}"
+              sizes="
+              (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
+              (min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
+              calc(100vw - 3rem)"
+              alt="{{ card_collection.title | escape }}"
+              height="{{ card_collection.featured_image.height }}"
+              width="{{ card_collection.featured_image.width }}"
+              loading="lazy"
+              class="motion-reduce"
+            >
+          </div>
+        </div>
+      {%- endif -%}
+      <div class="card__content">        
+        <div class="card__information">
+          <h3 class="card__heading h1">
+            <a href="{{ card_collection.url }}" class="full-unstyled-link">
+              {%- if card_collection.title != blank -%}
+                {{- card_collection.title | escape -}}
+              {%- else -%}
+                {{ 'onboarding.collection_title' | t }}
+              {%- endif -%}
+              {%- if card_collection.description == blank -%}<span class="icon-wrap">{% render 'icon-arrow' %}</span>{% endif %}
+            </a>
+          </h3>
+          {%- if card_collection.description != blank -%}
+            <p class="card__caption">
+              {{- card_collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
+            </p>
+          {%- endif -%}
+        </div>   
+      </div>
+    </div>
+    {% if settings.card_style == 'card' or card_collection.featured_image %} 
+      <div class="card__content">
+        <div class="card__information">
+          <h3 class="card__heading{% if card_collection.featured_image == nil %} h1{% endif %}">
+            <a href="{{ card_collection.url }}" class="full-unstyled-link">
+              {%- if card_collection.title != blank -%}
+                {{- card_collection.title | escape -}}
+              {%- else -%}
+                {{ 'onboarding.collection_title' | t }}
+              {%- endif -%}
+              {%- if card_collection.featured_image or card_collection.description == blank -%}<span class="icon-wrap">{% render 'icon-arrow' %}</span>{% endif %}
+            </a>
+          </h3>
+          {%- if card_collection.featured_image == nil and card_collection.description != blank -%}
+            <p class="card__caption">
+              {{- card_collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
+            </p>
+          {%- endif -%}
+        </div>
+      </div>
+    {% endif %} 
+  </div>
+</div>
diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
new file mode 100644
index 00000000000..91f9acddf12
--- /dev/null
+++ b/snippets/card-product.liquid
@@ -0,0 +1,186 @@
+{% comment %}
+    Renders a product card
+
+    Accepts:
+    - card_product: {Object} Product Liquid object (optional)
+    - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
+    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
+    - show_vendor: {Boolean} Show the product vendor. Default: false
+    - show_rating: {Boolean} Show the product rating. Default: false
+
+    Usage:
+    {% render 'card-product', show_vendor: section.settings.show_vendor %}
+{% endcomment %}
+
+{{ 'component-rating.css' | asset_url | stylesheet_tag }}
+
+{%- if card_product and card_product != empty -%}
+  {%- liquid
+    assign ratio = 1
+    if card_product.featured_media and media_aspect_ratio == 'portrait'
+      assign ratio = 0.8
+    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
+      assign ratio = card_product.featured_media.aspect_ratio
+    endif
+    if ratio == 0 or ratio == nil
+      assign ratio = 1
+    endif
+  -%}
+  <div class="card-wrapper underline-links-hover">
+    <div class="card
+      card--{{ settings.card_style }}
+      {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
+      {% if media_aspect_ratio == 'auto' %} card--height-auto{% endif %}
+      {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }}{% endif %}
+      {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}"
+      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
+    >
+      <div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }}{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
+        {%- if card_product.featured_media -%}
+          <div class="card__media">
+            <div class="media media--transparent media--hover-effect">
+              <img
+                srcset="{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
+                  {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
+                  {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
+                  {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
+                  {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
+                  {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
+                  {{ card_product.featured_media | img_url: 'master' }} {{ card_product.featured_media.width }}w"
+                src="{{ card_product.featured_media | img_url: '533x' }}"
+                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
+                alt="{{ card_product.featured_media.alt | escape }}"
+                loading="lazy"
+                class="motion-reduce"
+                width="{{ card_product.featured_media.width }}"
+                height="{{ card_product.featured_media.height }}"
+              >
+
+              {%- if card_product.media[1] != nil and show_secondary_image -%}
+                <img
+                  srcset="{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
+                    {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
+                    {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
+                    {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
+                    {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
+                    {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
+                    {{ card_product.media[1] | img_url: 'master' }} {{ card_product.media[1].width }}w"
+                  src="{{ card_product.media[1] | img_url: '533x' }}"
+                  sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
+                  alt="{{ card_product.media[1].alt | escape }}"
+                  loading="lazy"
+                  class="motion-reduce"
+                width="{{ card_product.media[1].width }}"
+                height="{{ card_product.media[1].height }}"
+                >
+              {%- endif -%}
+            </div>
+          </div>
+        {%- endif -%}
+        <div class="card__content">        
+          <div class="card__information">
+            <h3 class="card__heading">
+              <a href="{{ card_product.url | default: '#' }}" class="full-unstyled-link">
+                {{ card_product.title | escape }}
+              </a>
+            </h3>
+          </div>      
+          <div class="card__badge {{ settings.badge_position }}"> 
+            {%- if card_product.available == false -%}
+              <span class="badge badge--bottom-left color-{{ settings.badge_sold_out_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
+            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
+              <span class="badge badge--bottom-left color-{{ settings.badge_sale_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
+            {%- endif -%}
+          </div>
+        </div>
+      </div>
+      <div class="card__content">
+        <div class="card__information">  
+          <h3 class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}">
+            <a href="{{ card_product.url | default: '#' }}" class="full-unstyled-link">
+              {{ card_product.title | escape }}
+            </a>
+          </h3>
+          <div class="card-information">
+            {%- if show_vendor -%}
+              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
+              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
+            {%- endif -%}    
+            
+            <span class="caption-large light">{{ block.settings.description | escape }}</span>
+
+            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
+              {% liquid
+                assign rating_decimal = 0 
+                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1 
+                if decimal >= 0.3 and decimal <= 0.7
+                  assign rating_decimal = 0.5
+                elsif decimal > 0.7
+                  assign rating_decimal = 1
+                endif 
+              %}
+              <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}">
+                <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
+              </div>
+              <p class="rating-text caption">
+                <span aria-hidden="true">{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}</span>
+              </p>
+              <p class="rating-count caption">
+                <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
+                <span class="visually-hidden">{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
+              </p>
+            {%- endif -%}
+            
+            {% render 'price', product: card_product, price_class: '' %}
+          </div>
+        </div>     
+        <div class="card__badge {{ settings.badge_position }}">
+          {%- if card_product.available == false -%}
+            <span class="badge badge--bottom-left color-{{ settings.badge_sold_out_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
+          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
+            <span class="badge badge--bottom-left color-{{ settings.badge_sale_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
+          {%- endif -%}
+        </div>
+      </div>
+    </div>
+  </div>
+{%- else -%}
+  <div class="card-wrapper underline-links-hover">
+    <div class="card
+      card--{{ settings.card_style }}
+      card--text
+      {% if media_aspect_ratio == 'auto' %} card--height-auto{% endif %}
+      {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }}{% endif %}
+      {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}"
+      style="--ratio-percent: 100%;"
+    >
+      <div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }}{% endif %}{% if settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: 100%;">
+        <div class="card__content">        
+          <div class="card__information">
+            <h3 class="card__heading">
+              <a href="#" class="full-unstyled-link">
+                {{ 'onboarding.product_title' | t }}
+              </a>
+            </h3>
+          </div>  
+        </div>
+      </div>
+      <div class="card__content">
+        <div class="card__information">
+          <h3 class="card__heading{% if settings.card_style == 'standard' %} h5{% endif %}">
+            <a href="#" class="full-unstyled-link">
+              {{ 'onboarding.product_title' | t }}
+            </a>
+          </h3>
+          <div class="card-information">
+            {%- if show_vendor -%}
+              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
+              <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
+            {%- endif -%}
+            {% render 'price' %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{%- endif -%}
diff --git a/snippets/price.liquid b/snippets/price.liquid
index 4e6747beaa7..264eef32075 100644
--- a/snippets/price.liquid
+++ b/snippets/price.liquid
@@ -36,7 +36,7 @@
   {%- if compare_at_price > price %} price--on-sale {% endif -%}
   {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
   {%- if show_badges %} price--show-badge{% endif -%}">
-  <div>
+  <div class="price__container">
     {%- comment -%}
       Explanation of description list:
         - div.price__regular: Displayed when there are no variants on sale
@@ -82,11 +82,11 @@
     </small>
   </div>
   {%- if show_badges -%}
-    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
+    <span class="badge price__badge-sale color-{{ settings.badge_sale_color_scheme }}">
       {{ 'products.product.on_sale' | t }}
     </span>
 
-    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
+    <span class="badge price__badge-sold-out color-{{ settings.badge_sold_out_color_scheme }}">
       {{ 'products.product.sold_out' | t }}
     </span>
   {%- endif -%}
diff --git a/snippets/product-card-placeholder.liquid b/snippets/product-card-placeholder.liquid
deleted file mode 100644
index 87fdf18d413..00000000000
--- a/snippets/product-card-placeholder.liquid
+++ /dev/null
@@ -1,24 +0,0 @@
-{% comment %}
-    Renders a product card placeholder
-
-    Usage:
-    {% render 'product-card-placeholder' %}
-{% endcomment %}
-
-<div class="card-wrapper">
-  <a class="full-width-link"><span class="visually-hidden">{{ 'onboarding.product_title' | t }}</span></a>
-
-  <div class="card-information">
-    <div class="card-information__wrapper">
-      <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
-      <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
-      {% render 'price' %}
-    </div>
-  </div>
-
-  <div class="card card--text-only card--soft card--product">
-    <div class="card__inner">
-      <div class="card__content"><h2 class="card__text h3">{{ 'onboarding.product_title' | t }}</h2></div>
-    </div>
-  </div>  
-</div>
diff --git a/snippets/product-card.liquid b/snippets/product-card.liquid
deleted file mode 100644
index 1033ec1b53f..00000000000
--- a/snippets/product-card.liquid
+++ /dev/null
@@ -1,133 +0,0 @@
-{% comment %}
-    Renders a product card
-
-    Accepts:
-    - product_card_product: {Object} Product Liquid object (optional)
-    - media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
-    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
-    - add_image_padding: {Boolean} Enables padding on the image to space out the grid
-    - show_vendor: {Boolean} Show the product vendor. Default: false
-    - show_image_outline: {Boolean} Show card outline. Default: true (optional)
-    - show_rating: {Boolean} Show the product rating. Default: false
-
-    Usage:
-    {% render 'product-card', show_vendor: section.settings.show_vendor %}
-{% endcomment %}
-
-{{ 'component-rating.css' | asset_url | stylesheet_tag }}
-
-<div class="card-wrapper">
-  <div class="card-information">
-    <div class="card-information__wrapper">
-      {%- if show_vendor -%}
-        <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
-        <div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
-      {%- endif -%}
-
-      {%- if product_card_product.featured_media -%}
-        <h3 class="card-information__text h5">
-          <a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
-            {{ product_card_product.title | escape }}
-          </a>
-        </h3>
-      {%- endif -%}
-
-      {% comment %} TODO: metafield {% endcomment %}
-      <span class="caption-large light">{{ block.settings.description | escape }}</span>
-      {%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
-        {% liquid
-          assign rating_decimal = 0 
-          assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1 
-          if decimal >= 0.3 and decimal <= 0.7
-            assign rating_decimal = 0.5
-          elsif decimal > 0.7
-            assign rating_decimal = 1
-          endif 
-        %}
-        <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
-          <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
-        </div>
-        <p class="rating-text caption">
-          <span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
-        </p>
-        <p class="rating-count caption">
-          <span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
-          <span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
-        </p>
-      {%- endif -%}
-      {% render 'price', product: product_card_product, price_class: '' %}
-    </div>
-  </div>
-
-  <div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
-    <div class="card__inner">
-      {%- if product_card_product.featured_media -%}
-        {%- liquid
-          assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio
-
-          if product_card_product.featured_media.aspect_ratio == nil
-            assign featured_media_aspect_ratio = 1
-          endif
-        -%}
-
-        <div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
-          <div class="media media--transparent media--{{ media_size }} media--hover-effect"
-            {% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
-          >
-            <img
-              srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
-                {%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
-                {%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
-                {%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
-                {%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
-                {%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
-                {{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
-              src="{{ product_card_product.featured_media | img_url: '533x' }}"
-              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
-              alt="{{ product_card_product.featured_media.alt | escape }}"
-              loading="lazy"
-              class="motion-reduce"
-              width="{{ product_card_product.featured_media.width }}"
-              height="{{ product_card_product.featured_media.height }}"
-            >
-
-            {%- if product_card_product.media[1] != nil and show_secondary_image -%}
-              <img
-                srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
-                  {%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
-                  {%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
-                  {%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
-                  {%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
-                  {%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
-                  {{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
-                src="{{ product_card_product.media[1] | img_url: '533x' }}"
-                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
-                alt="{{ product_card_product.media[1].alt | escape }}"
-                loading="lazy"
-                class="motion-reduce"
-              width="{{ product_card_product.media[1].width }}"
-              height="{{ product_card_product.media[1].height }}"
-              >
-            {%- endif -%}
-          </div>
-        </div>
-      {%- else -%}
-        <div class="card__content">
-          <h2 class="card__text h3">
-            <a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
-              {{ product_card_product.title }}
-            </a>
-          </h2>
-        </div>
-      {%- endif -%}
-
-      <div class="card__badge">
-        {%- if product_card_product.available == false -%}
-          <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
-        {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
-          <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
-        {%- endif -%}
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/templates/gift_card.liquid b/templates/gift_card.liquid
index 37b704a4790..0e9e6f32772 100644
--- a/templates/gift_card.liquid
+++ b/templates/gift_card.liquid
@@ -108,7 +108,7 @@
           {% endif %}
         </p>
         {%- if gift_card.enabled == false or gift_card.expired -%}
-          <p class="gift-card__label badge badge--{{ settings.sold_out_badge_color_scheme }}">{{ 'gift_cards.issued.expired' | t }}</p>
+          <p class="gift-card__label badge badge--{{ settings.badge_sold_out_color_scheme }}">{{ 'gift_cards.issued.expired' | t }}</p>
         {%- endif -%}
       </div>