diff --git a/snippets/card-gallery.liquid b/snippets/card-gallery.liquid
new file mode 100644
index 0000000..eef50c3
--- /dev/null
+++ b/snippets/card-gallery.liquid
@@ -0,0 +1,488 @@
+{%- doc -%}
+  Displays product images in a carousel.
+  Settings allow for a full slideshow, showing only the first image, or showing the second image when hovering.
+  Note: When the product card itself is in a carousel layout, the card-gallery's carousel is disabled with JavaScript.
+
+  @param [children] - Additional content rendered below the card gallery
+  @param [section] - The section object the snippet is rendered in
+  @param [block] - The block object the snippet is rendered in
+{%- enddoc -%}
+
+{% liquid
+  assign product = closest.product
+  assign block_settings = block.settings
+  assign image_sizes = '(min-width: 750px) 50vw, 100vw'
+
+  # Check if product has badges and determine position
+  assign has_badges = false
+  assign badge_position = null
+  if product != blank
+    comment
+        start Yagi
+      endcomment
+      assign product_compare_at_price = product.compare_at_price
+      assign product_price = product.price
+
+      assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
+
+      if product.metafields.app--168074346497.discount_percentage.value > 0.01
+        assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value
+
+        assign product_price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
+
+        assign product_compare_at_price = product.price
+
+        if product.compare_at_price > product_compare_at_price
+          assign product_compare_at_price = product.compare_at_price
+        endif
+      endif
+      comment
+        end Yagi
+      endcomment
+
+    if product.available == false or product_compare_at_price > product_price
+      assign has_badges = true
+      assign badge_position = settings.badge_position
+    endif
+  endif
+
+  # if the card-gallery has a section.settings.product_card_size:
+  # assume grid-template autofill(card-size, 1fr) and calculate the sizes attribute based on the minimum card size
+  #
+  # if section has section.settings.columns:
+  # assume grid-template repeat(column-count, 1fr) and calculate the sizes attribute based on the number of columns
+  if section.settings.product_card_size
+    assign mobile_image_size = '100vw'
+    if section.settings.mobile_product_card_size == 'small'
+      assign mobile_image_size = '50vw'
+    endif
+
+    capture card_size
+      render 'util-product-grid-card-size', section: section
+    endcapture
+    assign card_size = card_size | strip | replace: 'px', '' | plus: 0
+    capture sizes_attribute
+      render 'util-autofill-img-size-attr', card_size: card_size, card_gap: section.settings.columns_gap_horizontal, mobile_size: mobile_image_size
+    endcapture
+    assign image_sizes = sizes_attribute | strip
+  elsif section.settings.columns and section.settings.layout_type != 'editorial'
+    assign viewport_width = 100.0 | divided_by: section.settings.columns
+    assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 100vw' | replace: '[viewport_width]', viewport_width
+    assign image_sizes = sizes_attribute | strip
+  endif
+
+  assign ratio = '1'
+  case block_settings.image_ratio
+    when 'landscape'
+      assign ratio = '16 / 9'
+    when 'portrait'
+      assign ratio = '4 / 5'
+    when 'square'
+      assign ratio = '1'
+    when 'adapt'
+      assign ratio = product.featured_media.preview_image.aspect_ratio | default: '1'
+  endcase
+
+  if block_settings.image_ratio == 'adapt' and block_settings.constrain_to_viewport
+    if block_settings.constrain_to_viewport != ''
+      assign constrain_to_viewport = true
+      assign media_fit = block_settings.constrain_to_viewport
+    endif
+  endif
+%}
+
+<div
+  ref="cardGallery"
+  class="card-gallery card-gallery-{{ block.id }} spacing-style border-style{% if has_badges %} card-gallery--badge-{{ badge_position }}{% endif %}"
+  style="
+    {% render 'border-override', settings: block_settings %}
+    {% render 'spacing-style', settings: block_settings %}
+    --gallery-aspect-ratio: {{ ratio }};
+  "
+  data-product-id="{{ product.id }}"
+  {% if settings.show_second_image_on_hover and product.media.size > 1 %}
+    on:pointerenter="/previewImage"
+    on:pointerleave="/resetImage"
+  {% endif %}
+  {% if settings.transition_to_main_product %}
+    data-view-transition-to-main-product
+  {% endif %}
+  data-image-ratio="{{ block_settings.image_ratio }}"
+  {{ block.shopify_attributes }}
+>
+  {%- if product.media.size > 0 -%}
+    <a
+      class="contents"
+      ref="cardGalleryLink"
+      href="{{ product.url }}"
+      aria-label="{{- product.title -}}"
+    >
+      {% liquid
+        assign featured_media = product.featured_media
+
+        assign featured_media_loading = 'lazy'
+        assign featured_media_sizes = 'auto, ' | append: image_sizes
+        if section.index == null or section.index < 5
+          assign featured_media_loading = 'eager'
+          assign featured_media_sizes = image_sizes
+        endif
+
+        # The class differs per media only by media_type; the base template and the
+        # constrain-height suffix are the same for every slide, so build them once.
+        assign media_class = 'product-media-container media-fit product-media-container--[media_type]'
+        assign media_class_suffix = ''
+        if constrain_to_viewport
+          assign media_class_suffix = ' constrain-height'
+        endif
+
+        assign featured_media_class = media_class | replace: '[media_type]', featured_media.media_type | append: media_class_suffix
+      %}
+      {%- if product.media.size == 1 -%}
+        <div
+          class="{{ featured_media_class }}"
+          style="--product-media-fit: {{ media_fit | default: 'cover' }};"
+        >
+          {% render 'product-media',
+            media: featured_media,
+            sizes: featured_media_sizes,
+            loading: featured_media_loading,
+            preview_image_only: true
+          %}
+        </div>
+      {%- else -%}
+        {% liquid
+          # Check if there are generic media that are not variant images
+          assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
+          assign generic_media_size = product.media.size | minus: variant_images.size
+
+          # Sort media so product.featured_media.preview_image comes first as that is the most relevant image to display
+          # product.featured_media updates based on search context and filters applied
+
+          assign other_media = product.media | reject: 'src', product.featured_media
+          assign media_list_to_show = product.featured_media | concat: other_media
+
+          # Don't overfetch media if we don't need to
+          assign max_visible_slide_count = 1
+          if settings.product_card_carousel
+            assign max_visible_slide_count = 5
+          elsif settings.show_second_image_on_hover
+            assign max_visible_slide_count = 2
+          endif
+
+          capture slides
+            for media in media_list_to_show
+              assign hidden = false
+              assign attributes = ''
+              if variant_images contains media.src
+                assign attributes = 'variant-image'
+
+                if forloop.first == false
+                  # hide all variant images that aren't the first one
+                  assign hidden = true
+                endif
+              endif
+
+              # Performance improvement: don't render more than 5 visible images into the slideshow
+              # We'll keep the images that we need for the variant images and hover next.
+              if forloop.first
+                assign visible_slide_count = 0
+              endif
+              unless hidden
+                assign visible_slide_count = visible_slide_count | plus: 1
+              endunless
+              if hidden == false and visible_slide_count > max_visible_slide_count
+                continue
+              endif
+
+              if forloop.first
+                assign loading = featured_media_loading
+                assign sizes = featured_media_sizes
+              else
+                assign loading = 'lazy'
+                assign sizes = 'auto, ' | append: image_sizes
+              endif
+
+              assign class = media_class | replace: '[media_type]', media.media_type | append: media_class_suffix
+
+              capture slideshow_children
+                render 'product-media', media: media, sizes: sizes, loading: loading, preview_image_only: true
+              endcapture
+
+              render 'slideshow-slide', slide_id: media.id, index: forloop.index0, hidden: hidden, class: class, attributes: attributes, children: slideshow_children, media_fit: media_fit
+            endfor
+          endcapture
+
+          # Arrows can only reach slides that are rendered visible. Variant images past
+          # the featured media are hidden, so a product whose only extra media are
+          # variant images has a single navigable slide and would get inert arrows.
+          if product.media.size > 2 and visible_slide_count > 1
+            assign show_arrows = true
+          endif
+
+          assign slideshow_attributes = 'data-generic-media-size="[generic_media_size]"' | replace: '[generic_media_size]', generic_media_size
+          if settings.product_card_carousel == false
+            assign slideshow_attributes = slideshow_attributes | append: ' disabled="true"'
+          endif
+        %}
+        {% render 'slideshow',
+          ref: 'slideshow',
+          initial_slide: 0,
+          slides: slides,
+          slide_count: media_list_to_show.size,
+          show_arrows: show_arrows,
+          attributes: slideshow_attributes
+        %}
+      {%- endif -%}
+    </a>
+  {% elsif product != blank and product.media.size == 0 %}
+    <div class="product-card-gallery__title-placeholder">
+      <a
+        class="contents"
+        ref="cardGalleryLink"
+        href="{{ product.url }}"
+      >
+        <span class="title-text">{{- product.title -}}</span>
+      </a>
+    </div>
+  {% elsif product == blank %}
+    {% liquid
+      capture placeholder_image
+        # Extract index from block ID (e.g., "product-card-3" -> "3")
+        assign block_parts = block.id | split: '-'
+        assign placeholder_index = block_parts.last | default: 0
+        assign variant = placeholder_index | modulo: 3 | plus: 1
+        assign placeholder_name = 'product-apparel-' | append: variant
+        echo placeholder_name | placeholder_svg_tag
+      endcapture
+      capture placeholder_slide
+        render 'slideshow-slide', index: 1, children: placeholder_image, class: 'product-media-container card-gallery__placeholder'
+      endcapture
+      render 'slideshow', ref: 'slideshow', slides: placeholder_slide, slide_count: 1, attributes: 'disabled="true"'
+    %}
+  {%- endif -%}
+  {{ children }}
+</div>
+
+{% render 'slideshow-styles' %}
+{% render 'product-media-container-styles' %}
+
+{% stylesheet %}
+  .card-gallery {
+    position: relative;
+    overflow: hidden;
+    container-type: inline-size; /* Make card-gallery a container */
+    container-name: card-gallery-container; /* Optional: name the container */
+  }
+
+  @container (max-width: 70px) {
+    .card-gallery:hover .quick-add__button {
+      display: none;
+    }
+  }
+
+  .card-gallery__placeholder svg {
+    height: 100%;
+    width: 100%;
+  }
+
+  .card-gallery svg {
+    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
+  }
+
+  .product-card-gallery__title-placeholder {
+    padding: var(--padding-md);
+    font-size: var(--font-size--2xl);
+    line-height: var(--line-height--display-loose);
+    word-break: break-word;
+    color: var(--color-foreground);
+    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
+    aspect-ratio: var(--gallery-aspect-ratio);
+    border-radius: var(--product-corner-radius);
+    display: block;
+  }
+
+  .product-card-gallery__title-placeholder .title-text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+    line-clamp: 5;
+    overflow: hidden;
+  }
+
+  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
+
+  @media screen and (min-width: 750px) {
+    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
+      padding: var(--padding-3xl);
+      font-size: var(--font-size--3xl);
+    }
+
+    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
+      padding: var(--padding-2xl);
+      font-size: var(--font-size--2xl);
+    }
+
+    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
+      padding: var(--padding-xl);
+      font-size: var(--font-size--xl);
+    }
+
+    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
+      padding: var(--padding-sm);
+      font-size: var(--font-size--lg);
+    }
+
+    .product-grid[data-product-card-size='extra-large']
+      .card-gallery.card-gallery--badge-top-right
+      .product-card-gallery__title-placeholder {
+      padding-inline-end: calc(var(--padding-3xl) + 50px);
+    }
+
+    .product-grid[data-product-card-size='large']
+      .card-gallery.card-gallery--badge-top-right
+      .product-card-gallery__title-placeholder {
+      padding-inline-end: calc(var(--padding-2xl) + 50px);
+    }
+
+    .product-grid[data-product-card-size='medium']
+      .card-gallery.card-gallery--badge-top-right
+      .product-card-gallery__title-placeholder {
+      padding-inline-end: calc(var(--padding-xl) + 50px);
+    }
+
+    .product-grid[data-product-card-size='small']
+      .card-gallery.card-gallery--badge-top-right
+      .product-card-gallery__title-placeholder {
+      padding-inline-end: calc(var(--padding-sm) + 50px);
+    }
+
+    .product-grid[data-product-card-size='extra-large']
+      .card-gallery.card-gallery--badge-top-left
+      .product-card-gallery__title-placeholder {
+      padding-top: calc(var(--padding-3xl) + 40px);
+    }
+
+    .product-grid[data-product-card-size='large']
+      .card-gallery.card-gallery--badge-top-left
+      .product-card-gallery__title-placeholder {
+      padding-top: calc(var(--padding-2xl) + 40px);
+    }
+
+    .product-grid[data-product-card-size='medium']
+      .card-gallery.card-gallery--badge-top-left
+      .product-card-gallery__title-placeholder {
+      padding-top: calc(var(--padding-xl) + 40px);
+    }
+
+    .product-grid[data-product-card-size='small']
+      .card-gallery.card-gallery--badge-top-left
+      .product-card-gallery__title-placeholder {
+      padding-top: calc(var(--padding-sm) + 40px);
+    }
+
+    .product-grid[data-product-card-size='extra-large']
+      .card-gallery.card-gallery--badge-bottom-left
+      .product-card-gallery__title-placeholder {
+      padding-bottom: calc(var(--padding-3xl) + 40px);
+    }
+
+    .product-grid[data-product-card-size='large']
+      .card-gallery.card-gallery--badge-bottom-left
+      .product-card-gallery__title-placeholder {
+      padding-bottom: calc(var(--padding-2xl) + 40px);
+    }
+
+    .product-grid[data-product-card-size='medium']
+      .card-gallery.card-gallery--badge-bottom-left
+      .product-card-gallery__title-placeholder {
+      padding-bottom: calc(var(--padding-xl) + 40px);
+    }
+
+    .product-grid[data-product-card-size='small']
+      .card-gallery.card-gallery--badge-bottom-left
+      .product-card-gallery__title-placeholder {
+      padding-bottom: calc(var(--padding-sm) + 40px);
+    }
+  }
+
+  @media screen and (max-width: 749px) {
+    .product-card-gallery__title-placeholder {
+      font-size: var(--font-size--xl);
+      padding: var(--padding-md);
+    }
+
+    .product-grid[data-product-card-size]
+      .card-gallery.card-gallery--badge-top-right
+      .product-card-gallery__title-placeholder {
+      padding-inline-end: calc(var(--padding-sm) + 50px);
+    }
+
+    .product-grid[data-product-card-size]
+      .card-gallery.card-gallery--badge-top-left
+      .product-card-gallery__title-placeholder {
+      padding-top: calc(var(--padding-sm) + 40px);
+    }
+
+    .product-grid[data-product-card-size]
+      .card-gallery.card-gallery--badge-bottom-left
+      .product-card-gallery__title-placeholder {
+      padding-bottom: calc(var(--padding-sm) + 40px);
+    }
+  }
+
+  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
+    /* stylelint-disable-next-line declaration-no-important */
+    padding: var(--padding-xs) !important;
+    font-size: var(--font-size--xs);
+  }
+
+  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
+    min-width: auto;
+  }
+
+  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
+    display: block;
+  }
+
+  [product-grid-view='zoom-out']
+    .card-gallery
+    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
+    display: none;
+  }
+
+  ul[product-grid-view='zoom-out'] .card-gallery > img {
+    display: block;
+  }
+
+  .card-gallery slideshow-arrows .slideshow-control {
+    /* Align icons with quick-add button */
+    padding-inline: var(--padding-xl);
+
+    @container (max-width: 249px) {
+      padding-inline: 0 var(--padding-sm);
+
+      [dir='rtl'] & {
+        padding-inline: var(--padding-sm) 0;
+      }
+    }
+  }
+
+  /*
+   * Card galleries preview the next or previous images on 'pointerenter', so we
+   * try to kick load them beforehand (they are lazy loaded otherwise).
+   */
+  .card-gallery
+    :is(
+      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
+      slideshow-slide[aria-hidden='false'] + slideshow-slide
+    ) {
+    content-visibility: auto;
+
+    slideshow-component[actioned] & {
+      content-visibility: visible;
+    }
+  }
+{% endstylesheet %}