/** Shopify CDN: Minification failed

Line 170:8 Unexpected bad string token
Line 170:44 Unterminated string token

**/
.product-card-wrapper.card-wrapper .rating-star {
  --font-size: 2;
  --letter-spacing: 2;
}

.product-card-wrapper {
  background: var(--color-white);
  border-radius: 2.4rem;
  padding: 1.4rem 2rem;
  border: 1px solid var(--color-graylight);
}

.card-product {
  position: relative;
}

.card-product__badges {
  display: flex;
  align-items: center;
}

.card-product__badges.justify-between {
  justify-content: space-between;
}

.card-product__badges.justify-end {
  justify-content: flex-end;
}

.card-product__badges span.sale-tag {
  font-weight: var(--font-body-weight-bold);
  background: #000;
  color: #fff;
  border-radius: 0.3rem;
  padding: 0.2rem 1.4rem;
  text-transform: uppercase;
  z-index: 1;
}
.card-product__badges .wishlist-engine {
  z-index: 1;
}

.card-product-media {
  margin-bottom: 2.4rem;
}

.card-product h3 {
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 3.9rem;
  margin: 0;
  font-family: var(--font-headingalt-family);
}

.card-product-content {
  padding: 0rem 0 1.8rem 0;
  border-bottom: 0.1rem solid #DADADA;
}

.card-product-content a {
  text-decoration: none;
}

.card-product-content__subtitle p {
  margin: 0;
  font-size: 1.7rem;
  font-family: var(--font-headingalt-family);
  font-weight: 300;
  color: #646464;
}

.card-product-content__actions {
  padding-top: 1.8rem;
}

.card-product-content__price {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1.3rem;
}

.card-product-content__price p.final-price {
  font-family: var(--font-headingalt-family);
  font-weight: 600;
  font-size: 3.7rem;
  line-height: 5.4rem;
  color: #000000;
  margin: 0;
}

.card-product-content__price p.compare-price {
  font-family: var(--font-headingalt-family);
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: #898989;
  margin: 0 0 0 0.4rem;
}

.card-product-content__price p.compare-price span {
  text-decoration: line-through;
}

.card-product-content__actions a.view-product {
  background: #000;
  color: #fff;
  border-radius: 0.5rem;
  border: none;
  padding: 1rem 1.6rem 1rem 1.6rem;
  width: 100%;
  display: block;
  text-decoration: none;
  text-align: center;
  font-family: var(--font-heading-family);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
  text-transform: uppercase;
}

.card-product-content__actions p.affirm-as-low-as {
  margin: 0.8rem 0 0 0;
  text-align: center;
  font-family: var(--font-headingalt-family);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

.card-product-content__actions .affirm-as-low-as a {
  text-decoration: none;
  color: #000;
  margin: 0;
}

.card-product__badges .wishlist-engine svg {
  margin: 0;
}

.card-product__badges .wishlist-engine svg path {
  stroke: black;
  fill: transparent;
  transition: all 150ms ease-in-out;
}

.card-product__badges .wishlist-engine .wishlist-text {
  display: none;
}

.card-product__badges .wishlist-engine .wishlist-icon:hover svg path,
.card-product__badges .wishlist-engine[data-added="true"] svg path {
  stroke: var(--color-red);
  fill: var(--color-red);
}

.button--primary-yellow {
  background: var(--color-yellow);
}
.button--primary-yellow:after, .button--primary-yellow:not([disabled]):hover:after {
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text),var(--border-opacity)),0 0 0 var(--buttons-border-width) rgba(var(--color-yellow),var(--alpha-button-background)) !important;
}

Yep, let's get that working for the v3 card.

The process is identical to the v4 card. You just need to add the same CSS logic and update the Liquid HTML to create the two-image structure.

Here are the two changes for your card-product--v3.liquid file:

1. Add the CSS
Add this <style> block at the very top of your card-product--v3.liquid file. This CSS is written to target the classes already in your v3 card (image-container-with-hover, primary-image, etc.).

CSS

<style>
  .image-container-with-hover {
    position: relative;
    display: block;
    overflow: hidden; /* Ensures images stay within card bounds */
  }
  .primary-image,
  .secondary-image {
    display: block;
    backface-visibility: hidden; /* Helps with flickering on transition */
  }
  .secondary-image {
    display: none; /* Hide by default */
  }

  /* Only apply transitions/stacking if enabled */
  .image-container-with-hover.v3-fade-enabled .primary-image,
  .image-container-with-hover.v3-fade-enabled .secondary-image {
    transition: opacity 0.35s ease-in-out;
  }
  .image-container-with-hover.v3-fade-enabled .secondary-image {
    display: block; /* Show for transition */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .image-container-with-hover.v3-fade-enabled:hover .primary-image {
    opacity: 0;
  }
  .image-container-with-hover.v3-fade-enabled:hover .secondary-image {
    opacity: 1;
  }