diff --git a/assets/component-facets.css b/assets/component-facets.css
index ca766b95d91..20a3cffd7cf 100644
--- a/assets/component-facets.css
+++ b/assets/component-facets.css
@@ -300,8 +300,10 @@
 }
 
 .facets-layout-grid {
+  --swatch-input--size: 2.4rem;
+
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   text-align: center;
   padding: 2rem 2.4rem;
   gap: 3rem 1rem;
@@ -326,7 +328,7 @@
   align-items: flex-start;
 }
 
-.facets-layout-grid .visual-display-parent {
+.facets-layout-grid .facets__label {
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
@@ -340,7 +342,7 @@
   cursor: pointer;
 }
 
-.facet-checkbox {
+.facets__label {
   padding: 1rem 2rem 1rem 0;
   flex-grow: 1;
   position: relative;
@@ -361,7 +363,13 @@
   }
 }
 
-.facet-checkbox input[type='checkbox'] {
+/* Disabled state */
+.facets__label.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.facets-layout-list input[type='checkbox'] {
   position: absolute;
   opacity: 1;
   width: 1.6rem;
@@ -384,12 +392,6 @@
   opacity: 0;
 }
 
-.facets__visual-display-wrapper {
-  display: flex;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
 .no-js .facet-checkbox input[type='checkbox'] {
   z-index: 0;
 }
@@ -423,12 +425,6 @@
   }
 }
 
-.facet-checkbox--disabled,
-.mobile-facets__label--disabled {
-  opacity: 0.4;
-  pointer-events: none;
-}
-
 .facets__price {
   display: flex;
   padding: 2rem;
diff --git a/assets/component-product-variant-picker.css b/assets/component-product-variant-picker.css
index 71cb55a6130..3f1ab35e6d9 100644
--- a/assets/component-product-variant-picker.css
+++ b/assets/component-product-variant-picker.css
@@ -145,6 +145,8 @@ variant-selects {
 }
 
 .product-form__input--swatch .swatch-input__input + .swatch-input__label {
+  --swatch-input--size: 4.4rem;
+
   margin: 0.7rem 1.2rem 0.2rem 0;
 }
 
diff --git a/assets/component-swatch-input.css b/assets/component-swatch-input.css
index 149c51f6746..89c78f7955f 100644
--- a/assets/component-swatch-input.css
+++ b/assets/component-swatch-input.css
@@ -1,9 +1,9 @@
 /* swatch-input lives in its own file for reusability of the swatch in other areas than the product form context */
 .swatch-input__input + .swatch-input__label {
-  --swatch-input--size: 4.4rem;
   --swatch-input--border-radius: 50%;
 
   display: inline-block;
+  max-width: 100%;
   border-radius: var(--swatch-input--border-radius);
   cursor: pointer;
   outline-offset: 0.2rem;
@@ -14,7 +14,8 @@
   --swatch-input--border-radius: 0.2rem;
 }
 
-.swatch-input__input + .swatch-input__label:hover {
+.swatch-input__input + .swatch-input__label:hover,
+.swatch-input__input:hover + .swatch-input__label {
   outline: 0.2rem solid rgba(var(--color-foreground), 0.4);
 }
 
@@ -28,6 +29,11 @@
   outline: none;
 }
 
+/* Actually disabled */
+.swatch-input__input:disabled + .swatch-input__label {
+  pointer-events: none;
+}
+
 /* Focus visible */
 .swatch-input__input:focus-visible + .swatch-input__label {
   box-shadow: 0 0 0 0.5rem rgb(var(--color-background)), 0 0 0 0.7rem rgba(var(--color-foreground), 0.55);
diff --git a/assets/component-swatch.css b/assets/component-swatch.css
index 75d91b50f0e..834416d6637 100644
--- a/assets/component-swatch.css
+++ b/assets/component-swatch.css
@@ -5,8 +5,10 @@
 
   display: block;
   width: var(--swatch--size);
+  max-width: 100%;
   aspect-ratio: 1 / 1;
   background: var(--swatch--background);
+  background-position: var(--swatch-focal-point, initial);
   background-size: cover;
   background-origin: border-box;
   border: 0.1rem solid rgba(var(--color-foreground), 0.45);
diff --git a/assets/component-visual-display.css b/assets/component-visual-display.css
deleted file mode 100644
index f683b455d7e..00000000000
--- a/assets/component-visual-display.css
+++ /dev/null
@@ -1,90 +0,0 @@
-.visual-display {
-  --visual-display__size: min(2.4rem, 100%);
-  position: relative;
-  width: var(--visual-display__size);
-  max-width: 100%;
-  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
-  aspect-ratio: 1/1;
-}
-
-.visual-display.empty {
-  border-style: dashed;
-}
-
-.visual-display--presentation-swatch {
-  --visual-display__size: min(2.4rem, 100%);
-
-  border-radius: 100%;
-  overflow: hidden;
-}
-
-.visual-display-parent .visual-display--presentation-swatch {
-  outline-offset: 0.2rem;
-}
-
-/* Hover, active, and focus states */
-:is(
-    .visual-display-parent:hover .visual-display--presentation-swatch,
-    .visual-display-parent.active .visual-display--presentation-swatch,
-    .visual-display-parent:has(:focus-visible) .visual-display--presentation-swatch
-  ) {
-  outline-style: solid;
-}
-
-/* Active state */
-.visual-display-parent.active .visual-display--presentation-swatch {
-  outline-width: 0.2rem;
-  outline-color: rgb(var(--color-foreground), 1);
-}
-
-/* Hover state */
-.visual-display-parent:hover .visual-display--presentation-swatch {
-  outline-width: 0.2rem;
-  outline-color: rgb(var(--color-foreground), 0.4);
-}
-
-/* Focus state */
-.visual-display-parent:has(:focus-visible) .visual-display--presentation-swatch {
-  outline-width: 0.2rem;
-  outline-color: rgb(var(--color-foreground), 0.4);
-  box-shadow: 0 0 0 0.6rem rgb(var(--color-background)), 0 0 0 0.8rem rgba(var(--color-foreground), 0.5),
-    0 0 1.2rem 0.4rem rgba(var(--color-foreground), 0.3);
-}
-
-/* Focus state for older browsers */
-@supports not selector(:has(a, b)) {
-  .visual-display-parent:focus-within .visual-display--presentation-swatch {
-    outline-offset: 0.2rem;
-    outline: 0.2rem solid rgb(var(--color-foreground), 0.4);
-    box-shadow: 0 0 0 0.6rem rgb(var(--color-background)), 0 0 0 0.8rem rgba(var(--color-foreground), 0.5),
-      0 0 1.2rem 0.4rem rgba(var(--color-foreground), 0.3);
-  }
-}
-
-.visual-display-parent.disabled {
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-/* Used to display the disabled dash */
-.visual-display-parent.disabled .visual-display::after {
-  display: block;
-  content: '';
-
-  /* 1.414 is not a magic number, it's the square root of 2, or the length of the diagonal */
-  width: calc(var(--visual-display__size) * 1.414);
-  border-bottom: 0.1rem solid rgb(var(--color-background-contrast));
-  transform: rotate(-45deg);
-  transform-origin: left;
-}
-
-.visual-display .visual-display__child {
-  display: block;
-  height: 100%;
-  width: 100%;
-  forced-color-adjust: none;
-}
-
-.visual-display--presentation-swatch .visual-display__image {
-  object-fit: cover;
-}
diff --git a/assets/global.js b/assets/global.js
index c541c6fb82e..7145ddd6b73 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -1015,6 +1015,11 @@ class VariantSelects extends HTMLElement {
         selectedDropdownSwatchValue.style.setProperty('--swatch--background', 'unset');
         selectedDropdownSwatchValue.classList.add('swatch--unavailable');
       }
+
+      selectedDropdownSwatchValue.style.setProperty(
+        '--swatch-focal-point',
+        target.selectedOptions[0].dataset.optionSwatchFocalPoint || 'unset'
+      );
     } else if (tagName === 'INPUT' && target.type === 'radio') {
       const selectedSwatchValue = this.querySelector(`[data-selected-swatch-value="${name}"]`);
       if (selectedSwatchValue) selectedSwatchValue.innerHTML = value;
diff --git a/snippets/facets.liquid b/snippets/facets.liquid
index 88ad351eecb..7cde6a68a19 100644
--- a/snippets/facets.liquid
+++ b/snippets/facets.liquid
@@ -13,7 +13,8 @@
 {% endcomment %}
 
 {{ 'component-show-more.css' | asset_url | stylesheet_tag }}
-{{ 'component-visual-display.css' | asset_url | stylesheet_tag }}
+{{ 'component-swatch-input.css' | asset_url | stylesheet_tag }}
+{{ 'component-swatch.css' | asset_url | stylesheet_tag }}
 
 {%- liquid
   assign sort_by = results.sort_by | default: results.default_sort_by
@@ -116,13 +117,11 @@
                 assign total_active_values = total_active_values | plus: filter.active_values.size
                 case filter.presentation
                   when 'swatch'
-                    assign has_visual_display = true
                     assign show_more_number = 15
                     assign visual_layout_class = 'facets-layout-grid facets-layout-grid--' | append: filter.presentation
                   else
-                    assign has_visual_display = false
-                    assign visual_layout_class = 'facets-layout-list'
                     assign show_more_number = 10
+                    assign visual_layout_class = 'facets-layout-list'
                 endcase
               %}
 
@@ -182,54 +181,79 @@
                       {%- endif -%}
                       <fieldset class="facets-wrap parent-wrap {% if filter_type == 'vertical' %} facets-wrap-vertical{% endif %}">
                         <legend class="visually-hidden">{{ filter.label | escape }}</legend>
+                        {%- liquid
+                          assign sorted_values = filter.values
+                          # Keep the selected values grouped together when operator is AND
+                          if filter.operator == 'AND'
+                            assign active_filter_values = filter.values | where: 'active', true
+                            assign inactive_filter_values = filter.values | where: 'active', false
+                            assign sorted_values = active_filter_values | concat: inactive_filter_values
+                          endif
+                        -%}
                         <ul
                           class="{{ visual_layout_class }}{% if filter_type == 'vertical' %} facets__list--vertical{% else %} facets__list{% endif %} list-unstyled no-js-hidden"
                           role="list"
                         >
-                          {%- liquid
-                            assign sorted_values = filter.values
-                            # Keep the selected values grouped together when operator is AND
-                            if filter.operator == 'AND'
-                              assign active_filter_values = filter.values | where: 'active', true
-                              assign inactive_filter_values = filter.values | where: 'active', false
-                              assign sorted_values = active_filter_values | concat: inactive_filter_values
-                            endif
-                          -%}
                           {%- for value in sorted_values -%}
                             {% liquid
+                              assign input_id = 'Filter-' | append: filter.param_name | escape | append: '-' | append: forloop.index
                               assign is_disabled = false
                               if value.count == 0 and value.active == false
                                 assign is_disabled = true
                               endif
                             %}
+                            {%- capture label_class -%}
+                            facets__label facet-checkbox{% if is_disabled %} disabled{% endif %}{% if value.active %} active{% endif %}
+                            {%- endcapture -%}
 
-                            <li class="list-menu__item facets__item{% if forloop.index > show_more_number and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
-                              <label
-                                for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
-                                class="facets__label facet-checkbox{% if is_disabled %} facet-checkbox--disabled disabled{% endif %}{% if has_visual_display %} visual-display-parent visual-display-parent--{{ filter.presentation }}{% endif %}{% if value.active %} active{% endif %}"
-                              >
-                                <input
-                                  type="checkbox"
-                                  name="{{ value.param_name }}"
-                                  value="{{ value.value }}"
-                                  id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
-                                  {% if value.active %}
-                                    checked
-                                  {% endif %}
-                                  {% if is_disabled %}
-                                    disabled
-                                  {% endif %}
-                                >
+                            {%- capture text_value -%}
+                              <span class="facet-checkbox__text" aria-hidden="true">
+                                {{- value.label | escape }} ({{- value.count -}})
+                              </span>
+                              <span class="visually-hidden">
+                                {{- value.label | escape }} (
+                                {%- if value.count == 1 -%}
+                                  {{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
+                                {%- else -%}
+                                  {{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
+                                {%- endif -%}
+                                )
+                              </span>
+                            {%- endcapture -%}
 
-                                {% if has_visual_display %}
-                                  <div class="facets__visual-display-wrapper">
-                                    {% render 'visual-display',
-                                      type: value.display.type,
-                                      value: value.display.value,
-                                      presentation: filter.presentation
+                            <li class="list-menu__item facets__item{% if forloop.index > show_more_number and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
+                              {%- if filter.presentation == 'swatch' -%}
+                                <div class="{{ label_class }}">
+                                  <div>
+                                    {% render 'swatch-input',
+                                      id: input_id,
+                                      type: 'checkbox',
+                                      name: value.param_name,
+                                      value: value.value,
+                                      product_form_id: 'FacetFiltersForm',
+                                      swatch: value.swatch,
+                                      checked: value.active,
+                                      disabled: is_disabled
                                     %}
                                   </div>
-                                {% else %}
+
+                                  {{ text_value }}
+                                </div>
+                              {%- else -%}
+                                <label for="{{ input_id }}" class="{{ label_class }}">
+                                  <input
+                                    type="checkbox"
+                                    name="{{ value.param_name }}"
+                                    value="{{ value.value }}"
+                                    id="{{ input_id }}"
+                                    {% if value.active %}
+                                      checked
+                                    {% endif %}
+                                    {% if is_disabled %}
+                                      disabled
+                                    {% endif %}
+                                  >
+
                                   <svg
                                     width="1.6rem"
                                     height="1.6rem"
@@ -255,85 +279,108 @@
                                       stroke-linecap="round"
                                       stroke-linejoin="round" />
                                   </svg>
-                                {% endif %}
 
-                                <span class="facet-checkbox__text" aria-hidden="true">
-                                  {{- value.label | escape }} ({{ value.count }})</span
-                                >
-                                <span class="visually-hidden">
-                                  {{- value.label | escape }} (
-                                  {%- if value.count == 1 -%}
-                                    {{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
-                                  {%- else -%}
-                                    {{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
-                                  {%- endif -%}
-                                  )</span
-                                >
-                              </label>
+                                  {{ text_value }}
+                                </label>
+                              {%- endif -%}
                             </li>
                           {%- endfor -%}
                         </ul>
                         {% comment %} No show more for no JS {% endcomment %}
                         <ul
-                          class="{% if filter_type != 'vertical' %} facets__list{% endif %} no-js-list list-unstyled no-js"
+                          class="{{ visual_layout_class }}{% if filter_type == 'vertical' %} facets__list--vertical{% else %} facets__list{% endif %} no-js-list list-unstyled no-js"
                           role="list"
                         >
-                          {%- for value in filter.values -%}
+                          {%- for value in sorted_values -%}
+                            {% liquid
+                              assign input_id = 'Filter-' | append: filter.param_name | escape | append: '-' | append: forloop.index | append: 'no-js'
+                              assign is_disabled = false
+                              if value.count == 0 and value.active == false
+                                assign is_disabled = true
+                              endif
+                            %}
+
+                            {%- capture label_class -%}
+                            facets__label facet-checkbox{% if is_disabled %} disabled{% endif %}{% if value.active %} active{% endif %}
+                            {%- endcapture -%}
+
+                            {%- capture text_value -%}
+                              <span class="facet-checkbox__text" aria-hidden="true">
+                                {{- value.label | escape }} ({{- value.count -}})
+                              </span>
+                              <span class="visually-hidden">
+                                {{- value.label | escape }} (
+                                {%- if value.count == 1 -%}
+                                  {{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
+                                {%- else -%}
+                                  {{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
+                                {%- endif -%}
+                                )
+                              </span>
+                            {%- endcapture -%}
+
                             <li class="list-menu__item facets__item">
-                              <label
-                                for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js"
-                                class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}"
-                              >
-                                <input
-                                  type="checkbox"
-                                  name="{{ value.param_name }}"
-                                  value="{{ value.value }}"
-                                  id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js"
-                                  {% if value.active %}
-                                    checked
-                                  {% endif %}
-                                  {% if value.count == 0 and value.active == false %}
-                                    disabled
-                                  {% endif %}
-                                >
+                              {%- if filter.presentation == 'swatch' -%}
+                                <div class="{{ label_class }}">
+                                  <div>
+                                    {% render 'swatch-input',
+                                      id: input_id,
+                                      type: 'checkbox',
+                                      name: value.param_name,
+                                      value: value.value,
+                                      product_form_id: 'FacetFiltersForm',
+                                      swatch: value.swatch,
+                                      checked: value.active,
+                                      disabled: is_disabled
+                                    %}
+                                  </div>
+
+                                  {{ text_value }}
+                                </div>
+                              {%- else -%}
+                                <label for="{{ input_id }}" class="{{ label_class }}">
+                                  <input
+                                    type="checkbox"
+                                    name="{{ value.param_name }}"
+                                    value="{{ value.value }}"
+                                    id="{{ input_id }}"
+                                    {% if value.active %}
+                                      checked
+                                    {% endif %}
+                                    {% if is_disabled %}
+                                      disabled
+                                    {% endif %}
+                                  >
 
-                                <svg
-                                  width="1.6rem"
-                                  height="1.6rem"
-                                  viewBox="0 0 16 16"
-                                  aria-hidden="true"
-                                  focusable="false"
-                                >
-                                  <rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
-                                </svg>
+                                  <svg
+                                    width="1.6rem"
+                                    height="1.6rem"
+                                    viewBox="0 0 16 16"
+                                    aria-hidden="true"
+                                    focusable="false"
+                                  >
+                                    <rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
+                                  </svg>
 
-                                <svg
-                                  aria-hidden="true"
-                                  class="icon icon-checkmark"
-                                  width="1.1rem"
-                                  height="0.7rem"
-                                  viewBox="0 0 11 7"
-                                  fill="none"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1"
-                                    stroke="currentColor"
-                                    stroke-width="1.75"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                                </svg>
+                                  <svg
+                                    aria-hidden="true"
+                                    class="icon icon-checkmark"
+                                    width="1.1rem"
+                                    height="0.7rem"
+                                    viewBox="0 0 11 7"
+                                    fill="none"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1"
+                                      stroke="currentColor"
+                                      stroke-width="1.75"
+                                      stroke-linecap="round"
+                                      stroke-linejoin="round" />
+                                  </svg>
 
-                                <span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
-                                <span class="visually-hidden">
-                                  {{- value.label | escape }} (
-                                  {%- if value.count == 1 -%}
-                                    {{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
-                                  {%- else -%}
-                                    {{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
-                                  {%- endif -%}
-                                  )</span
-                                >
-                              </label>
+                                  {{ text_value }}
+                                </label>
+                              {%- endif -%}
                             </li>
                           {%- endfor -%}
                         </ul>
@@ -691,10 +738,8 @@
                   {% liquid
                     case filter.presentation
                       when 'swatch'
-                        assign has_visual_display = true
                         assign visual_layout_class = 'facets-layout-grid facets-layout-grid--' | append: filter.presentation
                       else
-                        assign has_visual_display = false
                         assign visual_layout_class = 'facets-layout-list'
                     endcase
                   %}
@@ -742,40 +787,66 @@
                             -%}
                             {%- for value in sorted_values -%}
                               {% liquid
+                                assign input_id = 'Filter-' | append: filter.param_name | escape | append: '-mobile-' | append: forloop.index
                                 assign is_disabled = false
                                 if value.count == 0 and value.active == false
                                   assign is_disabled = true
                                 endif
                               %}
 
-                              <li class="mobile-facets__item list-menu__item">
-                                <label
-                                  for="Filter-{{ filter.param_name | escape }}-mobile-{{ forloop.index }}"
-                                  class="facets__label mobile-facets__label{% if is_disabled %} mobile-facets__label--disabled disabled{% endif %}{% if has_visual_display %} visual-display-parent visual-display-parent--{{ filter.presentation }}{% endif %}{% if value.active %} active{% endif %}"
-                                >
-                                  <input
-                                    class="mobile-facets__checkbox"
-                                    type="checkbox"
-                                    name="{{ value.param_name }}"
-                                    value="{{ value.value }}"
-                                    id="Filter-{{ filter.param_name | escape }}-mobile-{{ forloop.index }}"
-                                    {% if value.active %}
-                                      checked
-                                    {% endif %}
-                                    {% if is_disabled %}
-                                      disabled
-                                    {% endif %}
-                                  >
+                              {%- capture label_class -%}
+                              facets__label mobile-facets__label{% if is_disabled %} disabled{% endif %}{% if value.active %} active{% endif %}
+                              {%- endcapture -%}
 
-                                  {% if has_visual_display %}
-                                    <div class="facets__visual-display-wrapper">
-                                      {% render 'visual-display',
-                                        type: value.display.type,
-                                        value: value.display.value,
-                                        presentation: filter.presentation
+                              {%- capture text_value -%}
+                                <span class="facet-checkbox__text" aria-hidden="true">
+                                  {{- value.label | escape }} ({{- value.count -}})
+                                </span>
+                                <span class="visually-hidden">
+                                  {{- value.label | escape }} (
+                                  {%- if value.count == '1' -%}
+                                    {{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
+                                  {%- else -%}
+                                    {{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
+                                  {%- endif -%}
+                                  )
+                                </span>
+                              {%- endcapture -%}
+
+                              <li class="mobile-facets__item list-menu__item">
+                                {% if filter.presentation == 'swatch' %}
+                                  <div class="{{ label_class }}">
+                                    <div>
+                                      {% render 'swatch-input',
+                                        id: input_id,
+                                        type: 'checkbox',
+                                        name: value.param_name,
+                                        value: value.value,
+                                        product_form_id: 'FacetFiltersFormMobile',
+                                        swatch: value.swatch,
+                                        checked: value.active,
+                                        disabled: is_disabled
                                       %}
                                     </div>
-                                  {% else %}
+
+                                    {{ text_value }}
+                                  </div>
+                                {% else %}
+                                  <label for="{{ input_id }}" class="{{ label_class }}">
+                                    <input
+                                      class="mobile-facets__checkbox"
+                                      type="checkbox"
+                                      name="{{ value.param_name }}"
+                                      value="{{ value.value }}"
+                                      id="{{ input_id }}"
+                                      {% if value.active %}
+                                        checked
+                                      {% endif %}
+                                      {% if is_disabled %}
+                                        disabled
+                                      {% endif %}
+                                    >
+
                                     <span class="mobile-facets__highlight"></span>
 
                                     <svg
@@ -799,21 +870,10 @@
                                     >
                                       <path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
                                     </svg>
-                                  {% endif %}
 
-                                  <span class="facet-checkbox__text" aria-hidden="true">
-                                    {{- value.label | escape }} ({{ value.count }})</span
-                                  >
-                                  <span class="visually-hidden">
-                                    {{- value.label | escape }} (
-                                    {%- if value.count == '1' -%}
-                                      {{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
-                                    {%- else -%}
-                                      {{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
-                                    {%- endif -%}
-                                    )</span
-                                  >
-                                </label>
+                                    {{ text_value }}
+                                  </label>
+                                {% endif %}
                               </li>
                             {%- endfor -%}
                           </ul>
diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
index d3dbaaa7eca..67def0ec294 100644
--- a/snippets/product-variant-options.liquid
+++ b/snippets/product-variant-options.liquid
@@ -46,9 +46,11 @@
       endcase
     endfor
 
+    assign swatch_focal_point = null
     if value.swatch.image
       assign image_url = value.swatch.image | image_url: width: 50
       assign swatch_value = 'url(' | append: image_url | append: ')'
+      assign swatch_focal_point = value.swatch.image.presentation.focal_point
     elsif value.swatch.color
       assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
     else
@@ -115,6 +117,9 @@
       {% endif %}
       {% if swatch_value and picker_type == 'swatch_dropdown' %}
         data-option-swatch-value="{{ swatch_value }}"
+        {% if swatch_focal_point %}
+          data-option-swatch-focal-point="{{ swatch_focal_point }}"
+        {% endif %}
       {% endif %}
     >
       {% if option_disabled -%}
diff --git a/snippets/swatch.liquid b/snippets/swatch.liquid
index 11cc63d4d04..c052d965606 100644
--- a/snippets/swatch.liquid
+++ b/snippets/swatch.liquid
@@ -12,10 +12,11 @@
 {% endcomment %}
 
 {%- liquid
-  assign swatch_value = nil
+  assign swatch_value = null
   if swatch.image
     assign image_url = swatch.image | image_url: width: 50
     assign swatch_value = 'url(' | append: image_url | append: ')'
+    assign swatch_focal_point = swatch.image.presentation.focal_point
   elsif swatch.color
     assign swatch_value = 'rgb(' | append: swatch.color.rgb | append: ')'
   endif
@@ -24,7 +25,7 @@
 <span
   {% if swatch_value %}
     class="swatch{% if shape == 'square' %} swatch--square{% endif %}"
-    style="--swatch--background: {{ swatch_value }}"
+    style="--swatch--background: {{ swatch_value }};{% if swatch_focal_point %} --swatch-focal-point: {{ swatch_focal_point }};{% endif %}"
   {% else %}
     class="swatch swatch--unavailable{% if shape == 'square' %} swatch--square{% endif %}"
   {% endif %}
diff --git a/snippets/visual-display.liquid b/snippets/visual-display.liquid
deleted file mode 100644
index 57fd02fd251..00000000000
--- a/snippets/visual-display.liquid
+++ /dev/null
@@ -1,45 +0,0 @@
-{% comment %}
-  Renders a visual display element, currently just a swatch. If wrapped in "visual-display-parent" and "visual-display-parent--swatch" classes, this will receive hover and focus states.
-
-  Add a class of "active" or "disabled" to the parent element to change the state of the visual display.
-
-  Accepts:
-  - type: {String} Can be "colors" or "image", or nothing to represent an empty state.
-  - value: {Object} Will be an array of color drops, or image drop, depending on the "type"
-  - presentation: {String} Can only be "swatch"
-
-  Usage:
-  {% render 'visual-display', type: value.display.type, value: value.display.value, presentation: filter.presentation %}
-{% endcomment %}
-<div class="visual-display visual-display--presentation-{{ presentation }}{% unless type == "colors" or type == "image" %} empty{% endunless %}">
-  {%- case type -%}
-    {%- when 'colors' -%}
-      {% liquid
-        assign size_limit = value.size | at_most: 4
-        assign rotation = '0deg'
-        if size_limit == 2
-          assign rotation = '45deg'
-        endif
-
-        assign angle_increment = 360 | divided_by: size_limit
-        assign angle = 0
-      %}
-      {%- capture conic_gradient -%}
-        {%- for color in value limit: size_limit -%}
-          {{ color }} {{ angle }}deg{%- assign angle = angle | plus: angle_increment %} {{ angle }}deg{%- unless forloop.last %}, {%- endunless -%}
-        {%- endfor -%}
-      {%- endcapture -%}
-      <div
-        class="visual-display__child"
-        style="background: conic-gradient({{ conic_gradient }}); transform: rotateZ({{ rotation }});"
-      ></div>
-    {%- when 'image' -%}
-      {{
-        value
-        | image_url: width: 300
-        | image_tag: class: 'visual-display__child visual-display__image', alt: value.alt
-      }}
-    {%- else -%}
-      <div class="visual-display__child"></div>
-  {%- endcase -%}
-</div>