From 2663ae103d2d370f8d8fdbaf65906f6f66fec442 Mon Sep 17 00:00:00 2001
From: Roi-Arthur <48017311+Roi-Arthur@users.noreply.github.com>
Date: Wed, 6 Sep 2023 14:45:48 +0100
Subject: [PATCH 01/58] Add liquid to assign uses_comma_decimals on mobile
 (#2980)

Fixes #2981
---
 snippets/facets.liquid | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/snippets/facets.liquid b/snippets/facets.liquid
index 44ad719f915..219bc09ad9a 100644
--- a/snippets/facets.liquid
+++ b/snippets/facets.liquid
@@ -304,7 +304,7 @@
                   </details>
                 {% when 'price_range' %}
                   {% liquid
-                    assign currencies_using_comma_decimals = 'ANG,ARS,BRL,BYN,BYR,CLF,CLP,COP,CRC,CZK,DKK,EUR,HRK,HUF,IDR,ISK,MZN,NOK,PLN,RON,RUB,SEK,TRY,UYU,VES,VND' | split: ','
+                    assign currencies_using_comma_decimals = 'ANG,ARS,BRL,BYN,BYR,CLF,CLP,COP,CRC,CZK,DKK,EUR,HRK,HUF,IDR,ISK,MZN,NOK,PLN,RON,RUB,SEK,UYU,VES,VND' | split: ','
                     assign uses_comma_decimals = false
                     if currencies_using_comma_decimals contains cart.currency.iso_code
                       assign uses_comma_decimals = true
@@ -749,6 +749,13 @@
                         </div>
                       </details>
                     {% when 'price_range' %}
+                      {% liquid
+                        assign currencies_using_comma_decimals = 'ANG,ARS,BRL,BYN,BYR,CLF,CLP,COP,CRC,CZK,DKK,EUR,HRK,HUF,IDR,ISK,MZN,NOK,PLN,RON,RUB,SEK,UYU,VES,VND' | split: ','
+                        assign uses_comma_decimals = false
+                        if currencies_using_comma_decimals contains cart.currency.iso_code
+                          assign uses_comma_decimals = true
+                        endif
+                      %}
                       <details
                         id="Details-Mobile-{{ forloop.index }}-{{ section.id }}"
                         class="mobile-facets__details js-filter"

From 19373964ebc949bea9d0d15d6ebd656eb890e730 Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Mon, 18 Sep 2023 11:38:30 -0400
Subject: [PATCH 02/58] Update 1 translation file (#2997)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/da.schema.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/da.schema.json b/locales/da.schema.json
index 75d9417f1c3..3132cb08a13 100644
--- a/locales/da.schema.json
+++ b/locales/da.schema.json
@@ -900,7 +900,7 @@
         },
         "header__9": {
           "content": "Følg på Shop",
-          "info": "Hvis du vil give kunder mulighed for at følge din butik i Shop-appen via din butiksfacade, skal du have aktiveret Shop Pay. [Få mere at vide](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)"
+          "info": "Hvis du vil give kunder mulighed for at følge din butik i Shop-appen via dit butikslayout, skal du have aktiveret Shop Pay. [Få mere at vide](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)"
         },
         "enable_follow_on_shop": {
           "label": "Aktivér Følg på Shop"

From d8a2422031e5ce7ea5265486a3e39f302203739d Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Tue, 19 Sep 2023 12:30:32 -0400
Subject: [PATCH 03/58] Update 1 translation file (#3001)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/zh-CN.schema.json | 66 +++++++++++++++++++--------------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json
index 78a321ef1e5..7b63ff0eacd 100644
--- a/locales/zh-CN.schema.json
+++ b/locales/zh-CN.schema.json
@@ -222,7 +222,7 @@
     },
     "variant_pills": {
       "name": "多属性椭圆形框",
-      "paragraph": "多属性椭圆形框是显示产品多属性的一种方式。[了解详细信息](https://help.shopify.com/en/manual/online-store/themes/theme-structure/page-types#variant-picker-block)"
+      "paragraph": "多属性椭圆形框是显示产品多属性的一种方式。[详细了解](https://help.shopify.com/en/manual/online-store/themes/theme-structure/page-types#variant-picker-block)"
     },
     "inputs": {
       "name": "输入"
@@ -585,7 +585,7 @@
             },
             "description": {
               "label": "视频替代文本",
-              "info": "为使用屏幕阅读器的客户描述视频。[了解详细信息](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video-block)"
+              "info": "为使用屏幕阅读器的客户描述视频。[详细了解](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video-block)"
             }
           },
           "name": "视频"
@@ -612,7 +612,7 @@
           "options__3": {
             "label": "方形"
           },
-          "info": "通过编辑产品集合来添加图片。[了解详细信息](https://help.shopify.com/manual/products/collections)"
+          "info": "通过编辑产品集合来添加图片。[详细了解](https://help.shopify.com/manual/products/collections)"
         },
         "swipe_on_mobile": {
           "label": "在移动设备上启用刷卡功能"
@@ -661,7 +661,7 @@
       "settings": {
         "custom_liquid": {
           "label": "Liquid 代码",
-          "info": "添加应用代码片段或其他代码以创建高级自定义。[了解详细信息](https://shopify.dev/docs/api/liquid)"
+          "info": "添加应用代码片段或其他代码以创建高级自定义。[详细了解](https://shopify.dev/docs/api/liquid)"
         }
       },
       "presets": {
@@ -685,7 +685,7 @@
         },
         "show_image": {
           "label": "显示配图",
-          "info": "若要获得最佳效果，请使用纵横比为 3:2 的图片。[了解详细信息](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
+          "info": "若要获得最佳效果，请使用纵横比为 3:2 的图片。[详细了解](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
         },
         "show_date": {
           "label": "显示日期"
@@ -739,7 +739,7 @@
         },
         "show_rating": {
           "label": "显示产品评分",
-          "info": "若要显示评分，请添加产品评分应用。[了解详细信息](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#featured-collection-show-product-rating)"
+          "info": "若要显示评分，请添加产品评分应用。[详细了解](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#featured-collection-show-product-rating)"
         },
         "enable_quick_buy": {
           "label": "启用快速添加按钮",
@@ -854,7 +854,7 @@
           "label": "标题"
         },
         "header__1": {
-          "info": "订阅者已自动添加到您的“已接受营销”客户列表。[了解详细信息](https://help.shopify.com/manual/customers/manage-customers)",
+          "info": "订阅者已自动添加到您的“已接受营销”客户列表。[详细了解](https://help.shopify.com/manual/customers/manage-customers)",
           "content": "电子邮件注册信息"
         },
         "header__2": {
@@ -900,7 +900,7 @@
         },
         "header__9": {
           "content": "在 Shop 中关注",
-          "info": "若要使客户能够通过您的店面在 Shop 应用中关注您的商店，则必须启用 Shop Pay。[了解详细信息](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)"
+          "info": "若要使客户能够通过您的店面在 Shop 应用中关注您的商店，则必须启用 Shop Pay。[详细了解](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)"
         },
         "enable_follow_on_shop": {
           "label": "启用在 Shop 中关注"
@@ -1035,7 +1035,7 @@
           "options__3": {
             "label": "中"
           },
-          "info": "若要获得最佳效果，请使用纵横比为 3:2 的图片。[了解详细信息](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)",
+          "info": "若要获得最佳效果，请使用纵横比为 3:2 的图片。[详细了解](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)",
           "options__4": {
             "label": "大"
           }
@@ -1338,7 +1338,7 @@
               "options__3": {
                 "label": "中"
               },
-              "info": "若要获得最佳效果，请使用纵横比为 16:9 的图片。[了解详细信息](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)",
+              "info": "若要获得最佳效果，请使用纵横比为 16:9 的图片。[详细了解](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)",
               "options__4": {
                 "label": "大"
               }
@@ -1386,7 +1386,7 @@
           "label": "显示配图"
         },
         "paragraph": {
-          "content": "通过编辑博客文章来更改摘录。[了解详细信息](https://help.shopify.com/manual/online-store/blogs/writing-blogs#display-an-excerpt-from-a-blog-post)"
+          "content": "通过编辑博客文章来更改摘录。[详细了解](https://help.shopify.com/manual/online-store/blogs/writing-blogs#display-an-excerpt-from-a-blog-post)"
         },
         "show_date": {
           "label": "显示日期"
@@ -1418,7 +1418,7 @@
           "options__4": {
             "label": "大"
           },
-          "info": "若要获得最佳效果，请使用纵横比为 3:2 的图片。[了解详细信息](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
+          "info": "若要获得最佳效果，请使用纵横比为 3:2 的图片。[详细了解](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
         }
       }
     },
@@ -1440,14 +1440,14 @@
       "name": "产品系列横幅",
       "settings": {
         "paragraph": {
-          "content": "通过编辑产品系列来添加描述或图片。[了解详细信息](https://help.shopify.com/manual/products/collections/collection-layout)"
+          "content": "通过编辑产品系列来添加描述或图片。[详细了解](https://help.shopify.com/manual/products/collections/collection-layout)"
         },
         "show_collection_description": {
           "label": "显示产品系列描述"
         },
         "show_collection_image": {
           "label": "显示产品系列图片",
-          "info": "若要获得最佳效果，请使用纵横比为 16:9 的图片。[了解详细信息](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
+          "info": "若要获得最佳效果，请使用纵横比为 16:9 的图片。[详细了解](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
         }
       }
     },
@@ -1480,11 +1480,11 @@
         },
         "enable_tags": {
           "label": "启用筛选",
-          "info": "使用 Search & Discovery 应用自定义筛选条件。[了解详细信息](https://help.shopify.com/manual/online-store/search-and-discovery/filters)"
+          "info": "使用 Search & Discovery 应用自定义筛选条件。[详细了解](https://help.shopify.com/manual/online-store/search-and-discovery/filters)"
         },
         "enable_filtering": {
           "label": "启用筛选",
-          "info": "使用 Search & Discovery 应用自定义筛选条件。[了解详细信息](https://help.shopify.com/manual/online-store/search-and-discovery/filters)"
+          "info": "使用 Search & Discovery 应用自定义筛选条件。[详细了解](https://help.shopify.com/manual/online-store/search-and-discovery/filters)"
         },
         "enable_sorting": {
           "label": "启用排序"
@@ -1494,7 +1494,7 @@
         },
         "show_rating": {
           "label": "显示产品评分",
-          "info": "若要显示评分，请添加产品评分应用。[了解详细信息](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#product-grid-section-settings)"
+          "info": "若要显示评分，请添加产品评分应用。[详细了解](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#product-grid-section-settings)"
         },
         "enable_quick_buy": {
           "label": "启用快速添加按钮",
@@ -1568,7 +1568,7 @@
           "options__3": {
             "label": "方形"
           },
-          "info": "通过编辑产品集合来添加图片。[了解详细信息](https://help.shopify.com/manual/products/collections)"
+          "info": "通过编辑产品集合来添加图片。[详细了解](https://help.shopify.com/manual/products/collections)"
         },
         "columns_desktop": {
           "label": "台式设备上的列数"
@@ -1649,7 +1649,7 @@
             },
             "show_gift_card_recipient": {
               "label": "显示礼品卡的收件人信息表单",
-              "info": "允许客户在预定日期发送礼品卡并附加私人消息。[了解详细信息](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)"
+              "info": "允许客户在预定日期发送礼品卡并附加私人消息。[详细了解](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)"
             }
           },
           "name": "Buy Button"
@@ -1848,7 +1848,7 @@
           "name": "产品评分",
           "settings": {
             "paragraph": {
-              "content": "若要显示评分，请添加产品评分应用。[了解详细信息](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#product-rating-block)"
+              "content": "若要显示评分，请添加产品评分应用。[详细了解](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#product-rating-block)"
             }
           }
         },
@@ -1856,7 +1856,7 @@
           "name": "互补产品",
           "settings": {
             "paragraph": {
-              "content": "若要选择互补产品，请添加 Search & Discovery 应用。[了解详细信息](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)"
+              "content": "若要选择互补产品，请添加 Search & Discovery 应用。[详细了解](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)"
             },
             "heading": {
               "label": "标题"
@@ -2113,7 +2113,7 @@
         },
         "show_rating": {
           "label": "显示产品评分",
-          "info": "若要显示评分，请添加产品评分应用。[了解详细信息](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#search-results-section-settings)"
+          "info": "若要显示评分，请添加产品评分应用。[详细了解](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#search-results-section-settings)"
         },
         "columns_desktop": {
           "label": "桌面上的列数"
@@ -2241,7 +2241,7 @@
           "label": "使分区展示全宽"
         },
         "paragraph": {
-          "content": "每次电子邮件订阅均会创建一个客户账户。[了解详细信息](https://help.shopify.com/manual/customers)"
+          "content": "每次电子邮件订阅均会创建一个客户账户。[详细了解](https://help.shopify.com/manual/customers)"
         }
       },
       "blocks": {
@@ -2414,7 +2414,7 @@
         },
         "description": {
           "label": "视频替代文本",
-          "info": "为使用屏幕阅读器的客户描述视频。[了解详细信息](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video)"
+          "info": "为使用屏幕阅读器的客户描述视频。[详细了解](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video)"
         },
         "image_padding": {
           "label": "添加图片填充",
@@ -2497,7 +2497,7 @@
           "settings": {
             "show_dynamic_checkout": {
               "label": "显示动态结账按钮",
-              "info": "通过使用您商店中提供的付款方式，客户会看到他们的首选付款方式，例如 PayPal 或 Apple Pay。[了解详细信息](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
+              "info": "通过使用您商店中提供的付款方式，客户会看到他们的首选付款方式，例如 PayPal 或 Apple Pay。[详细了解](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
             }
           }
         },
@@ -2508,10 +2508,10 @@
           "name": "分享",
           "settings": {
             "featured_image_info": {
-              "content": "如果您在社交媒体帖子中包含链接，该页面的配图将作为预览图片显示。[了解详细信息](https://help.shopify.com/manual/online-store/images/showing-social-media-thumbnail-images)"
+              "content": "如果您在社交媒体帖子中包含链接，该页面的配图将作为预览图片显示。[详细了解](https://help.shopify.com/manual/online-store/images/showing-social-media-thumbnail-images)"
             },
             "title_info": {
-              "content": "预览图片中包含商店标题和描述。[了解详细信息](https://help.shopify.com/manual/promoting-marketing/seo/adding-keywords#set-a-title-and-description-for-your-online-store)"
+              "content": "预览图片中包含商店标题和描述。[详细了解](https://help.shopify.com/manual/promoting-marketing/seo/adding-keywords#set-a-title-and-description-for-your-online-store)"
             },
             "text": {
               "label": "文本"
@@ -2522,7 +2522,7 @@
           "name": "产品评分",
           "settings": {
             "paragraph": {
-              "content": "若要显示评分，请添加产品评分应用。[了解详细信息](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#featured-product-rating)"
+              "content": "若要显示评分，请添加产品评分应用。[详细了解](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#featured-product-rating)"
             }
           }
         },
@@ -2580,7 +2580,7 @@
       "name": "电子邮件注册横幅",
       "settings": {
         "paragraph": {
-          "content": "每次电子邮件订阅均会创建一个客户账户。[了解详细信息](https://help.shopify.com/manual/customers)"
+          "content": "每次电子邮件订阅均会创建一个客户账户。[详细了解](https://help.shopify.com/manual/customers)"
         },
         "image": {
           "label": "背景图片"
@@ -2596,7 +2596,7 @@
         },
         "show_text_below": {
           "label": "在移动设备上的图片下方显示内容。",
-          "info": "若要获得最佳效果，请使用纵横比为 16:9 的图片。[了解详细信息](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
+          "info": "若要获得最佳效果，请使用纵横比为 16:9 的图片。[详细了解](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
         },
         "image_height": {
           "label": "横幅高度",
@@ -2612,7 +2612,7 @@
           "options__4": {
             "label": "大"
           },
-          "info": "若要获得最佳效果，请使用纵横比为 16:9 的图片。[了解详细信息](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
+          "info": "若要获得最佳效果，请使用纵横比为 16:9 的图片。[详细了解](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
         },
         "desktop_content_position": {
           "options__4": {
@@ -3116,7 +3116,7 @@
           "label": "台式设备上的列数"
         },
         "paragraph__1": {
-          "content": "动态推荐使用订单和产品信息来随着时间而变化和改进。[了解详细信息](https://help.shopify.com/themes/development/recommended-products)"
+          "content": "动态推荐使用订单和产品信息来随着时间而变化和改进。[详细了解](https://help.shopify.com/themes/development/recommended-products)"
         },
         "header__2": {
           "content": "产品卡"
@@ -3141,7 +3141,7 @@
         },
         "show_rating": {
           "label": "显示产品评分",
-          "info": "若要显示评分，请添加产品评分应用。[了解详细信息](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#product-recommendations-section-settings)"
+          "info": "若要显示评分，请添加产品评分应用。[详细了解](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#product-recommendations-section-settings)"
         },
         "header_mobile": {
           "content": "移动设备布局"

From 92d3440dd032a592da05e2af017c02124a3bfe2e Mon Sep 17 00:00:00 2001
From: Ludo <ludo.segura@shopify.com>
Date: Wed, 20 Sep 2023 10:36:35 -0400
Subject: [PATCH 04/58] [Image_tag] Update to remove lazy loading and let it
 automatically decide the best loading strategy (#3002)

* remove lazy loading where necessary to better performance

* add fetch priority
---
 sections/collage.liquid             |  6 ++----
 sections/collapsible-content.liquid |  1 -
 sections/image-banner.liquid        | 12 ++++++++----
 sections/image-with-text.liquid     | 10 ++++++++--
 sections/multicolumn.liquid         |  1 -
 sections/multirow.liquid            |  2 +-
 sections/slideshow.liquid           | 22 +++++++++++++++++-----
 sections/video.liquid               |  8 ++------
 8 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/sections/collage.liquid b/sections/collage.liquid
index 39551f05635..19706ab5d84 100644
--- a/sections/collage.liquid
+++ b/sections/collage.liquid
@@ -68,7 +68,6 @@
                         block.settings.image
                         | image_url: width: 3200
                         | image_tag:
-                          loading: 'lazy',
                           sizes: sizes,
                           widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
                       }}
@@ -82,7 +81,6 @@
                         block.settings.image
                         | image_url: width: 3200
                         | image_tag:
-                          loading: 'lazy',
                           sizes: sizes,
                           widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
                       }}
@@ -141,7 +139,7 @@
                         {{
                           block.settings.cover_image
                           | image_url: width: 3000
-                          | image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
+                          | image_tag: sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
                         }}
                       {%- else -%}
                         {{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
@@ -185,7 +183,7 @@
                           {{
                             block.settings.cover_image
                             | image_url: width: 3000
-                            | image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
+                            | image_tag: sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
                           }}
                         {%- else -%}
                           {{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
diff --git a/sections/collapsible-content.liquid b/sections/collapsible-content.liquid
index 6dee94dc51b..9acb813ed6e 100644
--- a/sections/collapsible-content.liquid
+++ b/sections/collapsible-content.liquid
@@ -62,7 +62,6 @@
                   section.settings.image
                   | image_url: width: 3200
                   | image_tag:
-                    loading: 'lazy',
                     sizes: sizes,
                     widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
                 }}
diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid
index ee51b92ba55..2eaad5ef4e0 100644
--- a/sections/image-banner.liquid
+++ b/sections/image-banner.liquid
@@ -45,6 +45,10 @@
     assign half_width = '50vw'
     assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
   endif
+  assign fetch_priority = 'auto'
+  if section.index == 1
+    assign fetch_priority = 'high'
+  endif
 -%}
 
 <div
@@ -70,12 +74,12 @@
         section.settings.image
         | image_url: width: 3840
         | image_tag:
-          loading: 'lazy',
           width: section.settings.image.width,
           height: image_height,
           class: image_class,
           sizes: sizes,
-          widths: widths
+          widths: widths,
+          fetchpriority: fetch_priority
       }}
     </div>
   {%- elsif section.settings.image_2 == blank -%}
@@ -102,12 +106,12 @@
         section.settings.image_2
         | image_url: width: 3840
         | image_tag:
-          loading: 'lazy',
           width: section.settings.image_2.width,
           height: image_height_2,
           class: image_class_2,
           sizes: sizes,
-          widths: widths
+          widths: widths,
+          fetchpriority: fetch_priority
       }}
     </div>
   {%- endif -%}
diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid
index 927c0b986c4..359324b2046 100644
--- a/sections/image-with-text.liquid
+++ b/sections/image-with-text.liquid
@@ -14,7 +14,13 @@
   }
 {%- endstyle -%}
 
-{% assign scheme1 = settings.color_schemes | first %}
+{%- liquid
+  assign scheme1 = settings.color_schemes | first
+  assign fetch_priority = 'auto'
+  if section.index == 1
+    assign fetch_priority = 'high'
+  endif
+-%}
 
 <div class="image-with-text image-with-text--{{ section.settings.content_layout }} page-width isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == scheme1 and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %} section-{{ section.id }}-padding{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
   <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
@@ -42,7 +48,7 @@
           {{
             section.settings.image
             | image_url: width: 1500
-            | image_tag: loading: 'lazy', sizes: sizes, widths: widths
+            | image_tag: sizes: sizes, widths: widths, fetchpriority: fetch_priority
           }}
         {%- else -%}
           {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
diff --git a/sections/multicolumn.liquid b/sections/multicolumn.liquid
index cc5490dc245..fa21082ed02 100644
--- a/sections/multicolumn.liquid
+++ b/sections/multicolumn.liquid
@@ -111,7 +111,6 @@
                       block.settings.image
                       | image_url: width: 3200
                       | image_tag:
-                        loading: 'lazy',
                         widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
                         sizes: sizes,
                         class: 'multicolumn-card__image'
diff --git a/sections/multirow.liquid b/sections/multirow.liquid
index 9795a3d6231..e600f974e85 100644
--- a/sections/multirow.liquid
+++ b/sections/multirow.liquid
@@ -65,7 +65,7 @@
                 {{
                   block.settings.image
                   | image_url: width: 1500
-                  | image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500'
+                  | image_tag: sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500'
                 }}
               {%- else -%}
                 {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
diff --git a/sections/slideshow.liquid b/sections/slideshow.liquid
index eba91e849b7..a2d048bf428 100644
--- a/sections/slideshow.liquid
+++ b/sections/slideshow.liquid
@@ -138,12 +138,24 @@
                 assign sizes = '100vw'
                 assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
               endif
+              assign fetch_priority = 'auto'
+              if section.index == 1
+                assign fetch_priority = 'high'
+              endif
             -%}
-            {{
-              block.settings.image
-              | image_url: width: 3840
-              | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths
-            }}
+            {%- if forloop.first %}
+              {{
+                block.settings.image
+                | image_url: width: 3840
+                | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority
+              }}
+            {%- else -%}
+              {{
+                block.settings.image
+                | image_url: width: 3840
+                | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths
+              }}
+            {%- endif -%}
           {%- else -%}
             {%- assign placeholder_slide = forloop.index | modulo: 2 -%}
             {%- if placeholder_slide == 1 -%}
diff --git a/sections/video.liquid b/sections/video.liquid
index dfe5ebc7761..624918ea904 100644
--- a/sections/video.liquid
+++ b/sections/video.liquid
@@ -67,11 +67,7 @@
               {{
                 poster
                 | image_url: width: 3840
-                | image_tag:
-                  loading: 'lazy',
-                  sizes: sizes,
-                  widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840',
-                  alt: alt
+                | image_tag: sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
               }}
             {%- else -%}
               {{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
@@ -102,7 +98,7 @@
           {{
             poster
             | image_url: width: 3840
-            | image_tag: loading: 'lazy', sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
+            | image_tag: sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
           }}
         {%- else -%}
           {{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}

From 4dacca1f43a22d57e20c24ac66696cf6de56291f Mon Sep 17 00:00:00 2001
From: Patrick Racicot <patrick.racicot@shopify.com>
Date: Wed, 20 Sep 2023 15:27:46 -0400
Subject: [PATCH 05/58] [Facets] update filter counts on filter selection
 (#2988)

---
 assets/facets.js | 39 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/assets/facets.js b/assets/facets.js
index 21407ab5d59..1296864348b 100644
--- a/assets/facets.js
+++ b/assets/facets.js
@@ -147,14 +147,43 @@ class FacetFiltersForm extends HTMLElement {
   }
 
   static renderCounts(source, target) {
-    const targetElement = target.querySelector('.facets__selected');
-    const sourceElement = source.querySelector('.facets__selected');
+    const filterIsDrawer = Boolean(document.querySelector('.facets-container-drawer'));
+    const targetElement = filterIsDrawer
+      ? target.querySelector('.mobile-facets__list')
+      : target.querySelector('.facets__selected');
+    const sourceElement = filterIsDrawer
+      ? source.querySelector('.mobile-facets__list')
+      : source.querySelector('.facets__selected');
 
-    const targetElementAccessibility = target.querySelector('.facets__summary');
-    const sourceElementAccessibility = source.querySelector('.facets__summary');
+    const targetElementAccessibility = filterIsDrawer && target.querySelector('.facets__summary');
+    const sourceElementAccessibility = filterIsDrawer && source.querySelector('.facets__summary');
 
     if (sourceElement && targetElement) {
-      target.querySelector('.facets__selected').outerHTML = source.querySelector('.facets__selected').outerHTML;
+      const currentActiveID = document.activeElement.id;
+      const isShowingMore = Boolean(target.querySelector('show-more-button .label-show-more.hidden'));
+
+      if (sourceElement && targetElement) {
+        targetElement.outerHTML = sourceElement.outerHTML;
+      }
+
+      if (!filterIsDrawer) {
+        const targetWrapElement = target.querySelector('.facets-wrap');
+        const sourceWrapElement = source.querySelector('.facets-wrap');
+        if (sourceWrapElement && targetWrapElement) {
+          if (isShowingMore) {
+            sourceWrapElement
+              .querySelectorAll('.facets__item.hidden')
+              .forEach((x) => x.classList.replace('hidden', 'show-more-item'));
+          }
+
+          targetWrapElement.outerHTML = sourceWrapElement.outerHTML;
+        }
+      }
+
+      const newElementToActivate = document.getElementById(`${currentActiveID}`);
+      if (newElementToActivate) {
+        newElementToActivate.focus();
+      }
     }
 
     if (targetElementAccessibility && sourceElementAccessibility) {

From 9f26497dc66a17f05435a0e1bf67008a4ca776b2 Mon Sep 17 00:00:00 2001
From: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Date: Thu, 21 Sep 2023 08:45:10 -0700
Subject: [PATCH 06/58] Correct CSS (#3003)

---
 assets/quick-order-list.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css
index 36aad4d3d01..0f4408794aa 100644
--- a/assets/quick-order-list.css
+++ b/assets/quick-order-list.css
@@ -680,7 +680,7 @@ quick-order-list-remove-button {
     margin-bottom: 2rem;
   }
 
-  .quick-order-list-total__confirmation quick-order-list-remove-all-button.button {
+  .quick-order-list-total__confirmation quick-order-list-remove-all-button button {
     margin-top: 1rem;
   }
 

From 770621b615d12035ae5d7f5116fba8b89097e36d Mon Sep 17 00:00:00 2001
From: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Date: Thu, 21 Sep 2023 09:18:26 -0700
Subject: [PATCH 07/58] Check if there is compare_at_price (#3000)

---
 snippets/price.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/price.liquid b/snippets/price.liquid
index 30f3ad3aa73..5d6ca6a1c3b 100644
--- a/snippets/price.liquid
+++ b/snippets/price.liquid
@@ -56,7 +56,7 @@
     {%- endcomment -%}
     <div class="price__regular">
       {%- if product.quantity_price_breaks_configured? -%}
-        {%- if show_compare_at_price -%}
+        {%- if show_compare_at_price and compare_at_price -%}
           {%- unless product.price_varies == false and product.compare_at_price_varies %}
             <span class="visually-hidden visually-hidden--inline">
               {{- 'products.product.price.regular_price' | t -}}

From 0458195da488b3ae0a819fb3b2c7464be380b55a Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Tue, 26 Sep 2023 14:31:47 -0400
Subject: [PATCH 08/58] Update 1 translation file (#3012)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/zh-TW.schema.json | 82 +++++++++++++++++++--------------------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json
index 028ec149e28..4ccb2e5d14b 100644
--- a/locales/zh-TW.schema.json
+++ b/locales/zh-TW.schema.json
@@ -319,7 +319,7 @@
           "label": "標誌"
         },
         "logo_width": {
-          "label": "桌面版標誌寬度",
+          "label": "電腦版標誌寬度",
           "info": "標誌會自動調整為手機最佳寬度。"
         },
         "favicon": {
@@ -486,7 +486,7 @@
           "content": "公告"
         },
         "show_social": {
-          "label": "在桌面顯示圖示"
+          "label": "在電腦版顯示圖示"
         },
         "header__3": {
           "content": "國家/地區選擇器",
@@ -514,7 +514,7 @@
           "label": "標題"
         },
         "desktop_layout": {
-          "label": "桌面版版面配置",
+          "label": "電腦版版面配置",
           "options__1": {
             "label": "左側大型區塊"
           },
@@ -621,7 +621,7 @@
           "label": "若清單中包含的商品系列比顯示出的更多，請啟用「檢視全部」按鈕"
         },
         "columns_desktop": {
-          "label": "桌面版的欄數"
+          "label": "電腦版的欄數"
         },
         "header_mobile": {
           "content": "行動版版面配置"
@@ -694,7 +694,7 @@
           "label": "顯示作者"
         },
         "columns_desktop": {
-          "label": "桌面版的欄數"
+          "label": "電腦版的欄數"
         }
       },
       "presets": {
@@ -746,7 +746,7 @@
           "info": "最適合彈出式視窗或購物車導覽匣類型。"
         },
         "columns_desktop": {
-          "label": "桌面版的欄數"
+          "label": "電腦版的欄數"
         },
         "description": {
           "label": "說明"
@@ -779,7 +779,7 @@
           "label": "「檢視更多」樣式"
         },
         "enable_desktop_slider": {
-          "label": "在桌面版啟用輪播廣告"
+          "label": "在電腦版啟用輪播廣告"
         },
         "full_width": {
           "label": "讓產品以全寬度呈現"
@@ -911,7 +911,7 @@
       "name": "標頭",
       "settings": {
         "logo_position": {
-          "label": "桌面版標誌位置",
+          "label": "電腦版標誌位置",
           "options__1": {
             "label": "中央左方"
           },
@@ -935,7 +935,7 @@
           "label": "下方邊界"
         },
         "menu_type_desktop": {
-          "label": "桌面版選單類型",
+          "label": "電腦版選單類型",
           "info": "行動版的選單類型會自動調整大小。",
           "options__1": {
             "label": "下拉式選單"
@@ -1016,7 +1016,7 @@
           "label": "在行動裝置上堆疊圖片"
         },
         "show_text_box": {
-          "label": "在桌面顯示容器"
+          "label": "在電腦版顯示容器"
         },
         "image_overlay_opacity": {
           "label": "圖片疊加層透明度"
@@ -1068,7 +1068,7 @@
           "options__9": {
             "label": "下方靠右"
           },
-          "label": "桌面版內容位置"
+          "label": "電腦版內容位置"
         },
         "desktop_content_alignment": {
           "options__1": {
@@ -1080,7 +1080,7 @@
           "options__3": {
             "label": "靠右"
           },
-          "label": "桌面版內容對齊方式"
+          "label": "電腦版內容對齊方式"
         },
         "mobile_content_alignment": {
           "options__1": {
@@ -1185,7 +1185,7 @@
           "options__2": {
             "label": "圖片秒數"
           },
-          "label": "桌面版圖片位置",
+          "label": "電腦版圖片位置",
           "info": "圖片會先預設為行動版版面配置。"
         },
         "desktop_image_width": {
@@ -1198,7 +1198,7 @@
           "options__3": {
             "label": "大"
           },
-          "label": "桌面版圖片寬度",
+          "label": "電腦版圖片寬度",
           "info": "行動版的圖片會自動調整大小。"
         },
         "desktop_content_alignment": {
@@ -1208,7 +1208,7 @@
           "options__3": {
             "label": "靠右"
           },
-          "label": "桌面版內容對齊方式",
+          "label": "電腦版內容對齊方式",
           "options__2": {
             "label": "置中"
           }
@@ -1223,7 +1223,7 @@
           "options__3": {
             "label": "靠下"
           },
-          "label": "桌面版內容位置"
+          "label": "電腦版內容位置"
         },
         "content_layout": {
           "options__1": {
@@ -1395,7 +1395,7 @@
           "label": "顯示作者"
         },
         "layout": {
-          "label": "桌面版版面配置",
+          "label": "電腦版版面配置",
           "options__1": {
             "label": "網格"
           },
@@ -1501,7 +1501,7 @@
           "info": "最適合彈出式視窗或購物車導覽匣類型。"
         },
         "columns_desktop": {
-          "label": "桌面版的欄數"
+          "label": "電腦版的欄數"
         },
         "header_mobile": {
           "content": "行動版版面配置"
@@ -1516,7 +1516,7 @@
           }
         },
         "filter_type": {
-          "label": "桌面版濾鏡版面配置",
+          "label": "電腦版濾鏡版面配置",
           "options__1": {
             "label": "水平"
           },
@@ -1571,7 +1571,7 @@
           "info": "編輯您的商品系列以新增圖片。[瞭解詳情](https://help.shopify.com/manual/products/collections)"
         },
         "columns_desktop": {
-          "label": "桌面版的欄數"
+          "label": "電腦版的欄數"
         },
         "header_mobile": {
           "content": "行動版版面配置"
@@ -1995,13 +1995,13 @@
           "label": "啟用影片循環播放功能"
         },
         "enable_sticky_info": {
-          "label": "在桌面版啟用黏性內容"
+          "label": "在電腦版啟用黏性內容"
         },
         "hide_variants": {
           "label": "在選取一個子類後，隱藏其他子類的多媒體檔案"
         },
         "gallery_layout": {
-          "label": "桌面版版面配置",
+          "label": "電腦版版面配置",
           "options__1": {
             "label": "已堆疊"
           },
@@ -2016,7 +2016,7 @@
           }
         },
         "media_size": {
-          "label": "桌面版多媒體檔案寬度",
+          "label": "電腦版多媒體檔案寬度",
           "options__1": {
             "label": "小"
           },
@@ -2041,7 +2041,7 @@
           }
         },
         "media_position": {
-          "label": "桌面版多媒體檔案位置",
+          "label": "電腦版多媒體檔案位置",
           "info": "行動版會自動調整為最佳位置。",
           "options__1": {
             "label": "靠左"
@@ -2116,7 +2116,7 @@
           "info": "新增產品評等應用程式，即可顯示評等。[瞭解詳情](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#search-results-section-settings)"
         },
         "columns_desktop": {
-          "label": "桌面版的欄數"
+          "label": "電腦版的欄數"
         },
         "header_mobile": {
           "content": "行動版版面配置"
@@ -2193,7 +2193,7 @@
           "label": "啟用行動裝置的滑動功能"
         },
         "columns_desktop": {
-          "label": "桌面版的欄數"
+          "label": "電腦版的欄數"
         },
         "header_mobile": {
           "content": "行動版版面配置"
@@ -2296,7 +2296,7 @@
           "options__3": {
             "label": "靠右"
           },
-          "label": "桌面版內容位置",
+          "label": "電腦版內容位置",
           "info": "行動版會自動調整為最佳位置。"
         },
         "content_alignment": {
@@ -2559,10 +2559,10 @@
           "label": "啟用影片循環播放功能"
         },
         "hide_variants": {
-          "label": "隱藏桌面版未選擇的子類多媒體檔案"
+          "label": "隱藏電腦版未選擇的子類多媒體檔案"
         },
         "media_position": {
-          "label": "桌面版多媒體檔案位置",
+          "label": "電腦版多媒體檔案位置",
           "info": "行動版會自動調整為最佳位置。",
           "options__1": {
             "label": "靠左"
@@ -2589,7 +2589,7 @@
           "label": "顯示背景圖片"
         },
         "show_text_box": {
-          "label": "在桌面顯示容器"
+          "label": "在電腦版顯示容器"
         },
         "image_overlay_opacity": {
           "label": "圖片疊加層透明度"
@@ -2642,7 +2642,7 @@
           "options__3": {
             "label": "上方靠右"
           },
-          "label": "桌面版內容位置"
+          "label": "電腦版內容位置"
         },
         "desktop_content_alignment": {
           "options__1": {
@@ -2654,7 +2654,7 @@
           "options__3": {
             "label": "靠右"
           },
-          "label": "桌面版內容對齊方式"
+          "label": "電腦版內容對齊方式"
         },
         "header": {
           "content": "行動版版面配置"
@@ -2790,7 +2790,7 @@
               "label": "使用外框按鈕樣式"
             },
             "box_align": {
-              "label": "桌面版內容位置",
+              "label": "電腦版內容位置",
               "options__1": {
                 "label": "上方靠左"
               },
@@ -2821,10 +2821,10 @@
               "info": "行動版會自動調整為最佳位置。"
             },
             "show_text_box": {
-              "label": "在桌面顯示容器"
+              "label": "在電腦版顯示容器"
             },
             "text_alignment": {
-              "label": "桌面版內容對齊方式",
+              "label": "電腦版內容對齊方式",
               "option_1": {
                 "label": "靠左"
               },
@@ -2916,7 +2916,7 @@
           }
         },
         "desktop_layout": {
-          "label": "桌面版版面配置",
+          "label": "電腦版版面配置",
           "options__1": {
             "label": "先顯示圖片"
           },
@@ -3113,7 +3113,7 @@
           "label": "商品數量顯示上限"
         },
         "columns_desktop": {
-          "label": "桌面版的欄數"
+          "label": "電腦版的欄數"
         },
         "paragraph__1": {
           "content": "動態推薦會使用訂單和商品資訊，以隨著時間改變與改進。[瞭解詳情](https://help.shopify.com/themes/development/recommended-products)"
@@ -3188,7 +3188,7 @@
           "options__3": {
             "label": "大"
           },
-          "label": "桌面版圖片寬度",
+          "label": "電腦版圖片寬度",
           "info": "行動版的圖片會自動調整大小。"
         },
         "heading_size": {
@@ -3231,7 +3231,7 @@
           "options__3": {
             "label": "靠右"
           },
-          "label": "桌面版內容對齊方式"
+          "label": "電腦版內容對齊方式"
         },
         "desktop_content_position": {
           "options__1": {
@@ -3243,7 +3243,7 @@
           "options__3": {
             "label": "靠下"
           },
-          "label": "桌面版內容位置",
+          "label": "電腦版內容位置",
           "info": "行動版會自動調整為最佳位置。"
         },
         "image_layout": {
@@ -3259,7 +3259,7 @@
           "options__4": {
             "label": "靠右對齊"
           },
-          "label": "桌面版圖片位置",
+          "label": "電腦版圖片位置",
           "info": "行動版的圖片會自動調整位置。"
         },
         "container_color_scheme": {

From dbdc28cf42e95061acfa9b64b14698921fd19f62 Mon Sep 17 00:00:00 2001
From: Patrick Racicot <patrick.racicot@shopify.com>
Date: Mon, 2 Oct 2023 16:09:23 -0400
Subject: [PATCH 09/58] [Facets] fix mobile count update (#3018)

---
 assets/facets.js | 68 +++++++++++++++++++++++-------------------------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/assets/facets.js b/assets/facets.js
index 1296864348b..6a242c1cc7d 100644
--- a/assets/facets.js
+++ b/assets/facets.js
@@ -120,7 +120,18 @@ class FacetFiltersForm extends HTMLElement {
     FacetFiltersForm.renderActiveFacets(parsedHTML);
     FacetFiltersForm.renderAdditionalElements(parsedHTML);
 
-    if (countsToRender) FacetFiltersForm.renderCounts(countsToRender, event.target.closest('.js-filter'));
+    if (countsToRender) {
+      const closestJSFilterID = event.target.closest('.js-filter').id;
+      const currentActiveID = document.activeElement.id;
+
+      if (closestJSFilterID) {
+        FacetFiltersForm.renderCounts(countsToRender, event.target.closest('.js-filter'));
+        FacetFiltersForm.renderMobileCounts(countsToRender, document.getElementById(closestJSFilterID));
+
+        const newElementToActivate = document.getElementById(currentActiveID);
+        if (newElementToActivate) newElementToActivate.focus();
+      }
+    }
   }
 
   static renderActiveFacets(html) {
@@ -147,47 +158,34 @@ class FacetFiltersForm extends HTMLElement {
   }
 
   static renderCounts(source, target) {
-    const filterIsDrawer = Boolean(document.querySelector('.facets-container-drawer'));
-    const targetElement = filterIsDrawer
-      ? target.querySelector('.mobile-facets__list')
-      : target.querySelector('.facets__selected');
-    const sourceElement = filterIsDrawer
-      ? source.querySelector('.mobile-facets__list')
-      : source.querySelector('.facets__selected');
-
-    const targetElementAccessibility = filterIsDrawer && target.querySelector('.facets__summary');
-    const sourceElementAccessibility = filterIsDrawer && source.querySelector('.facets__summary');
-
-    if (sourceElement && targetElement) {
-      const currentActiveID = document.activeElement.id;
-      const isShowingMore = Boolean(target.querySelector('show-more-button .label-show-more.hidden'));
+    const targetSummary = target.querySelector('.facets__summary');
+    const sourceSummary = source.querySelector('.facets__summary');
 
-      if (sourceElement && targetElement) {
-        targetElement.outerHTML = sourceElement.outerHTML;
-      }
+    if (sourceSummary && targetSummary) {
+      targetSummary.outerHTML = sourceSummary.outerHTML;
+    }
 
-      if (!filterIsDrawer) {
-        const targetWrapElement = target.querySelector('.facets-wrap');
-        const sourceWrapElement = source.querySelector('.facets-wrap');
-        if (sourceWrapElement && targetWrapElement) {
-          if (isShowingMore) {
-            sourceWrapElement
-              .querySelectorAll('.facets__item.hidden')
-              .forEach((x) => x.classList.replace('hidden', 'show-more-item'));
-          }
+    const targetWrapElement = target.querySelector('.facets-wrap');
+    const sourceWrapElement = source.querySelector('.facets-wrap');
 
-          targetWrapElement.outerHTML = sourceWrapElement.outerHTML;
-        }
+    if (sourceWrapElement && targetWrapElement) {
+      const isShowingMore = Boolean(target.querySelector('show-more-button .label-show-more.hidden'));
+      if (isShowingMore) {
+        sourceWrapElement
+          .querySelectorAll('.facets__item.hidden')
+          .forEach((hiddenItem) => hiddenItem.classList.replace('hidden', 'show-more-item'));
       }
 
-      const newElementToActivate = document.getElementById(`${currentActiveID}`);
-      if (newElementToActivate) {
-        newElementToActivate.focus();
-      }
+      targetWrapElement.outerHTML = sourceWrapElement.outerHTML;
     }
+  }
+
+  static renderMobileCounts(source, target) {
+    const targetFacetsList = target.querySelector('.mobile-facets__list');
+    const sourceFacetsList = source.querySelector('.mobile-facets__list');
 
-    if (targetElementAccessibility && sourceElementAccessibility) {
-      target.querySelector('.facets__summary').outerHTML = source.querySelector('.facets__summary').outerHTML;
+    if (sourceFacetsList && targetFacetsList) {
+      targetFacetsList.outerHTML = sourceFacetsList.outerHTML;
     }
   }
 

From 27b5f3fbcbacd0dd51c615b16f7158eb596a11a1 Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Wed, 4 Oct 2023 09:47:11 -0400
Subject: [PATCH 10/58] Update 1 translation file (#3043)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/fr.schema.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
index e4fc2042d5a..7902e9a0ad5 100644
--- a/locales/fr.schema.json
+++ b/locales/fr.schema.json
@@ -519,7 +519,7 @@
             "label": "Grand bloc gauche"
           },
           "options__2": {
-            "label": "Grand bloc droit"
+            "label": "Grand bloc droite"
           }
         },
         "mobile_layout": {

From a32602b918bb78b9c48b4939fe37c1dfd0e61445 Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Wed, 4 Oct 2023 15:21:54 -0400
Subject: [PATCH 11/58] Update 1 translation file (#3044)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/cs.schema.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/locales/cs.schema.json b/locales/cs.schema.json
index f6b14ce0c7b..b1a25d0822b 100644
--- a/locales/cs.schema.json
+++ b/locales/cs.schema.json
@@ -1637,7 +1637,7 @@
           "name": "Selektor množství"
         },
         "variant_picker": {
-          "name": "Výběr varianty",
+          "name": "Selektor variant",
           "settings": {
             "picker_type": {
               "label": "Typ",
@@ -2479,7 +2479,7 @@
           "name": "Selektor množství"
         },
         "variant_picker": {
-          "name": "Výběr varianty",
+          "name": "Selektor variant",
           "settings": {
             "picker_type": {
               "label": "Typ",

From 5c8c1513b9f280ce74884e2b12e05c3f1a8a8943 Mon Sep 17 00:00:00 2001
From: Ludo <ludo.segura@shopify.com>
Date: Thu, 5 Oct 2023 08:35:59 -0400
Subject: [PATCH 12/58] [Image with text] Add color scheme picker for section
 wrapper (#3016)

* [Image with text] Add color scheme picker for section wrapper

* address review comment about overlap and transparency
---
 assets/component-image-with-text.css |   4 +-
 sections/image-with-text.liquid      | 150 +++++++++++++++------------
 sections/multirow.liquid             |   2 +-
 3 files changed, 84 insertions(+), 72 deletions(-)

diff --git a/assets/component-image-with-text.css b/assets/component-image-with-text.css
index fcf450334fd..e8a5a3c96b5 100644
--- a/assets/component-image-with-text.css
+++ b/assets/component-image-with-text.css
@@ -313,8 +313,8 @@
 }
 
 /* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
-.image-with-text:not(.image-with-text--overlap) .color-background-1,
-.image-with-text.image-with-text--overlap .image-with-text__media.color-background-1 {
+.image-with-text.image-with-text--overlap .backround-transparent,
+.image-with-text:not(.image-with-text--overlap) .background-transparent {
   background: transparent;
 }
 
diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid
index 359324b2046..fcb92495d97 100644
--- a/sections/image-with-text.liquid
+++ b/sections/image-with-text.liquid
@@ -15,87 +15,93 @@
 {%- endstyle -%}
 
 {%- liquid
-  assign scheme1 = settings.color_schemes | first
   assign fetch_priority = 'auto'
   if section.index == 1
     assign fetch_priority = 'high'
   endif
+  if section.settings.color_scheme == section.settings.section_color_scheme and section.settings.content_layout == 'no-overlap'
+    assign remove_color_classes = true
+  endif
 -%}
 
-<div class="image-with-text image-with-text--{{ section.settings.content_layout }} page-width isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == scheme1 and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %} section-{{ section.id }}-padding{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
-  <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
-    <div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
-      <div
-        class="image-with-text__media image-with-text__media--{{ section.settings.height }} gradient color-{{ section.settings.color_scheme }} global-media-settings {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}"
-        {% if section.settings.height == 'adapt' and section.settings.image != blank %}
-          style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"
-        {% endif %}
-      >
-        {%- if section.settings.image != blank -%}
-          {%- if section.settings.image_behavior == 'ambient' or section.settings.image_behavior == 'zoom-in' -%}
-            {%- assign widths = '198, 432, 642, 900, 1284, 1800' -%}
-            {%- capture sizes -%}
+<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.section_color_scheme }}">
+  <div class="page-width">
+    <div class="image-with-text image-with-text--{{ section.settings.content_layout }} isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == section.settings.section_color_scheme and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
+      <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
+        <div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
+          <div
+            class="image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings{% unless remove_color_classes %} gradient color-{{ section.settings.color_scheme }}{% else %} background-transparent{% endunless %}{% if section.settings.image != blank %} media{% else %} image-with-text__media--placeholder placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}"
+            {% if section.settings.height == 'adapt' and section.settings.image != blank %}
+              style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"
+            {% endif %}
+          >
+            {%- if section.settings.image != blank -%}
+              {%- if section.settings.image_behavior == 'ambient' or section.settings.image_behavior == 'zoom-in' -%}
+                {%- assign widths = '198, 432, 642, 900, 1284, 1800' -%}
+                {%- capture sizes -%}
               (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1.6667 }}px,
               (min-width: 750px) calc((100vw - 130px) / 1.667), calc((100vw - 50px) / 1.667)
             {%- endcapture -%}
-          {%- else -%}
-            {%- assign widths = '165, 360, 535, 750, 1070, 1500' -%}
-            {%- capture sizes -%}
+              {%- else -%}
+                {%- assign widths = '165, 360, 535, 750, 1070, 1500' -%}
+                {%- capture sizes -%}
               (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
               (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
             {%- endcapture -%}
-          {%- endif -%}
-          {{
-            section.settings.image
-            | image_url: width: 1500
-            | image_tag: sizes: sizes, widths: widths, fetchpriority: fetch_priority
-          }}
-        {%- else -%}
-          {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
-        {%- endif -%}
-      </div>
-    </div>
-    <div class="image-with-text__text-item grid__item">
-      <div
-        id="ImageWithText--{{ section.id }}"
-        class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.height }} gradient color-{{ section.settings.color_scheme }} content-container"
-      >
-        {%- for block in section.blocks -%}
-          {% case block.type %}
-            {%- when 'heading' -%}
-              <h2
-                class="image-with-text__heading inline-richtext {{ block.settings.heading_size }}"
-                {{ block.shopify_attributes }}
-              >
-                {{ block.settings.heading }}
-              </h2>
-            {%- when 'caption' -%}
-              <p
-                class="image-with-text__text image-with-text__text--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}"
-                {{ block.shopify_attributes }}
-              >
-                {{ block.settings.caption | escape }}
-              </p>
-            {%- when 'text' -%}
-              <div class="image-with-text__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
-                {{ block.settings.text }}
-              </div>
-            {%- when 'button' -%}
-              {%- if block.settings.button_label != blank -%}
-                <a
-                  {% if block.settings.button_link == blank %}
-                    role="link" aria-disabled="true"
-                  {% else %}
-                    href="{{ block.settings.button_link }}"
-                  {% endif %}
-                  class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
-                  {{ block.shopify_attributes }}
-                >
-                  {{ block.settings.button_label | escape }}
-                </a>
               {%- endif -%}
-          {%- endcase -%}
-        {%- endfor -%}
+              {{
+                section.settings.image
+                | image_url: width: 1500
+                | image_tag: sizes: sizes, widths: widths, fetchpriority: fetch_priority
+              }}
+            {%- else -%}
+              {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
+            {%- endif -%}
+          </div>
+        </div>
+        <div class="image-with-text__text-item grid__item">
+          <div
+            id="ImageWithText--{{ section.id }}"
+            class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.height }} content-container{% unless remove_color_classes %} gradient color-{{ section.settings.color_scheme }}{% else %} background-transparent{% endunless %}"
+          >
+            {%- for block in section.blocks -%}
+              {% case block.type %}
+                {%- when 'heading' -%}
+                  <h2
+                    class="image-with-text__heading inline-richtext {{ block.settings.heading_size }}"
+                    {{ block.shopify_attributes }}
+                  >
+                    {{ block.settings.heading }}
+                  </h2>
+                {%- when 'caption' -%}
+                  <p
+                    class="image-with-text__text image-with-text__text--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}"
+                    {{ block.shopify_attributes }}
+                  >
+                    {{ block.settings.caption | escape }}
+                  </p>
+                {%- when 'text' -%}
+                  <div class="image-with-text__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
+                    {{ block.settings.text }}
+                  </div>
+                {%- when 'button' -%}
+                  {%- if block.settings.button_label != blank -%}
+                    <a
+                      {% if block.settings.button_link == blank %}
+                        role="link" aria-disabled="true"
+                      {% else %}
+                        href="{{ block.settings.button_link }}"
+                      {% endif %}
+                      class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
+                      {{ block.shopify_attributes }}
+                    >
+                      {{ block.settings.button_label | escape }}
+                    </a>
+                  {%- endif -%}
+              {%- endcase -%}
+            {%- endfor -%}
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -234,10 +240,16 @@
     },
     {
       "type": "color_scheme",
-      "id": "color_scheme",
+      "id": "section_color_scheme",
       "label": "t:sections.all.colors.label",
       "default": "background-1"
     },
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "t:sections.multirow.settings.container_color_scheme.label",
+      "default": "background-1"
+    },
     {
       "type": "header",
       "content": "t:sections.all.animation.content"
diff --git a/sections/multirow.liquid b/sections/multirow.liquid
index e600f974e85..d49ed6f8a70 100644
--- a/sections/multirow.liquid
+++ b/sections/multirow.liquid
@@ -73,7 +73,7 @@
             </div>
           </div>
           <div class="image-with-text__text-item grid__item">
-            <div class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.image_height }} content-container{% unless no_content_background and no_content_styles %} gradient color-{{ section.settings.row_color_scheme }}{% endunless %}">
+            <div class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.image_height }} content-container{% unless no_content_background and no_content_styles %} gradient color-{{ section.settings.row_color_scheme }}{% else %} background-transparent{% endunless %}">
               {%- if block.settings.caption -%}
                 <p class="image-with-text__text image-with-text__text--caption caption-with-letter-spacing caption-with-letter-spacing--medium">
                   {{ block.settings.caption | escape }}

From 7ee3da2b1964b3cd46d9780af2f8130df88a25ea Mon Sep 17 00:00:00 2001
From: Andrew Etchen <andrew.etchen@shopify.com>
Date: Thu, 5 Oct 2023 10:33:03 -0400
Subject: [PATCH 13/58] Refactor `quick-order-list.css` (#3006)

---
 assets/quick-order-list.css | 132 +++++-------------------------------
 1 file changed, 18 insertions(+), 114 deletions(-)

diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css
index 0f4408794aa..4bea213ae19 100644
--- a/assets/quick-order-list.css
+++ b/assets/quick-order-list.css
@@ -11,10 +11,6 @@ quick-order-list .quantity__button {
   width: calc(3.5rem / var(--font-body-scale));
 }
 
-.quick-order-list__contents {
-  position: relative;
-}
-
 .quick-order-list__container {
   padding-bottom: 4rem;
 }
@@ -28,10 +24,6 @@ quick-order-list .quantity__button {
   border-top: 0.1rem solid rgba(var(--color-foreground), .08);
 }
 
-.totals__product-total {
-  text-align: center;
-}
-
 .variant-item__quantity .quantity:before {
   z-index: 0;
 }
@@ -48,15 +40,6 @@ quick-order-list .quantity__button {
     background-color: rgb(var(--color-background));
   }
 
-  .totals__product-total {
-    text-align: right;
-  }
-
-  .variant__items {
-    max-height: 90rem;
-    overflow-y: auto;
-  }
-
   .variant-item__quantity-wrapper--no-info,
   .variant-item__error {
     padding-left: calc(15px + 3.4rem);
@@ -142,10 +125,6 @@ quick-order-list .quantity__button {
     display: flex;
   }
 
-  .quick-order-list__table .variant-item__inner.variant-item__inner--no-sku {
-    vertical-align: middle;
-  }
-
   .variant-item__discounted-prices {
     justify-content: flex-end;
   }
@@ -161,7 +140,6 @@ quick-order-list .quantity__button {
   max-width: 30rem;
 }
 
-
 .variant-item__info {
   position: relative;
   padding-bottom: 0.5rem;
@@ -208,12 +186,6 @@ quick-order-list .quantity__button {
   font-weight: 400;
 }
 
-.product-option {
-  font-size: 1.4rem;
-  word-break: break-word;
-  line-height: calc(1 + 0.5 / var(--font-body-scale));
-}
-
 .variant-item__sold-out {
   opacity: 0.7;
   font-size: 1.6rem;
@@ -222,7 +194,7 @@ quick-order-list .quantity__button {
 
 quick-order-list-remove-button {
   display: flex;
-  margin-left: 1rem;
+  margin: 0 0 0 1.2rem;
   align-self: center;
 }
 
@@ -242,14 +214,7 @@ quick-order-list-remove-button {
     margin-top: 1rem;
   }
 
-  .quick-order-list-buttons {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-  }
-
   .quick-order-list-total__column {
-    display: flex;
     flex-wrap: wrap;
   }
 
@@ -266,18 +231,10 @@ quick-order-list-remove-button .button {
   margin: 0 0.1rem 0.1rem 0;
 }
 
-
 quick-order-list-remove-button .button:not([disabled]):hover {
   color: rgb(var(--color-foreground));
 }
 
-@media screen and (min-width: 990px) {
-  quick-order-list-remove-button .button {
-    min-width: 1.5rem;
-    min-height: 1.5rem;
-  }
-}
-
 quick-order-list-remove-button .icon-remove {
   height: 1.5rem;
   width: 1.5rem;
@@ -292,6 +249,11 @@ quick-order-list-remove-button .icon-remove {
   padding: 0;
 }
 
+.variant-remove-total {
+  position: relative;
+  align-self: center;
+}
+
 .variant-remove-total .button--tertiary {
   width: max-content;
 }
@@ -302,16 +264,16 @@ quick-order-list-remove-button .icon-remove {
   margin-right: 0.8rem;
 }
 
-.quick-order-list__message svg {
-  margin-right: 1rem;
-  width: 1.3rem;
-}
-
 .quick-order-list__message {
   margin-top: 1rem;
   display: block;
 }
 
+.quick-order-list__message svg {
+  margin-right: 1rem;
+  width: 1.3rem;
+}
+
 .quick-order-list-error {
   margin-top: 1rem;
   display: flex;
@@ -350,11 +312,6 @@ quick-order-list-remove-button:hover .icon-remove {
   text-underline-offset: 0.3rem;
 }
 
-.variant-remove-total {
-  position: relative;
-  align-self: center;
-}
-
 .variant-item .loading-overlay:not(.hidden)~*,
 .variant-remove-total .loading-overlay:not(.hidden)~* {
   visibility: hidden;
@@ -385,15 +342,6 @@ quick-order-list-remove-button:hover .icon-remove {
   display: none;
 }
 
-.product-option+.product-option {
-  margin-top: 0.4rem;
-}
-
-.product-option * {
-  display: inline;
-  margin: 0;
-}
-
 .quick-order-list__table thead th {
   text-transform: uppercase;
 }
@@ -472,17 +420,12 @@ quick-order-list-remove-button:hover .icon-remove {
     text-align: center;
   }
 
-  .quick-order-list-total__column {
+  .quick-order-list-total__column,
+  .quick-order-list-buttons {
     display: flex;
     flex-direction: column;
     align-items: center;
-  }
-
-  .quick-order-list-buttons {
     width: 100%;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
   }
 
   .quick-order-list__button {
@@ -497,10 +440,6 @@ quick-order-list-remove-button:hover .icon-remove {
   margin-top: -2rem;
 }
 
-.quick-order-list-total__confirmation .button--tertirary {
-  margin-left: 2rem;
-}
-
 @media screen and (min-width: 990px) {
   .quick-order-list__table {
     border-spacing: 0;
@@ -514,10 +453,6 @@ quick-order-list-remove-button:hover .icon-remove {
     border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
   }
 
-  .quick-order-list__table thead th:first-child {
-    width: 20%;
-  }
-
   .quick-order-list__table th+th {
     padding-left: 5.4rem;
   }
@@ -529,7 +464,6 @@ quick-order-list-remove-button:hover .icon-remove {
 
   .quick-order-list__table td {
     padding-top: 1.6rem;
-    vertical-align: middle;
   }
 
   .quick-order-list__table .desktop-row-error td {
@@ -537,8 +471,7 @@ quick-order-list-remove-button:hover .icon-remove {
   }
 
   .quick-order-list__table .variant-item--unit-price td {
-    vertical-align: top;
-
+    vertical-align: middle;
   }
 
   .variant-item {
@@ -559,10 +492,6 @@ quick-order-list-remove-button:hover .icon-remove {
     margin-right: 3rem;
   }
 
-  .quick-order-list-total__column {
-    width: 20%;
-  }
-
   .quick-order-list__total-items {
     width: calc(((11rem / var(--font-body-scale) + var(--inputs-border-width) * 2)));
     margin-left: calc(15px + 3.4rem);
@@ -570,26 +499,14 @@ quick-order-list-remove-button:hover .icon-remove {
   }
 }
 
-quick-order-list-remove-button {
-  margin: 0 0 0 1.2rem;
-}
-
 @media screen and (min-width: 990px) {
-  .variant-item .variant-item__quantity {
-    padding-left: 0;
-  }
-
-  .quick-order-list__table thead th:first-child {
-    width: 37%;
-  }
-
+  .quick-order-list__table thead th:first-child,
   .quick-order-list-total__column {
     width: 37%;
   }
 
   .quick-order-list-buttons {
     display: flex;
-    align-self: flex-start;
   }
 
   quick-order-list-remove-all-button {
@@ -629,21 +546,13 @@ quick-order-list-remove-button {
   min-height: 10rem;
 }
 
-.quick-order-list-total {
-  padding-top: 2rem;
-  border-top: 0.1rem solid rgba(var(--color-foreground), .08);
-}
-
 .quick-order-list-total__price {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  width: min-content;
-}
-
-.quick-order-list-total__price {
   flex-grow: 1;
   text-align: right;
+  width: min-content;
 }
 
 .quick-order-list-total__price .button {
@@ -660,7 +569,6 @@ quick-order-list-remove-button {
   .totals__product-total {
     display: flex;
     justify-content: center;
-    text-align: center;
     width: 100%;
     align-items: center;
     padding-bottom: 2rem;
@@ -689,22 +597,18 @@ quick-order-list-remove-button {
     margin-top: 2rem;
   }
 
-  .quick-order-list-total__column {
-    width: 100%;
-  }
-
   .quick-order-list__button-confirm {
     width: 100%;
     max-width: 36rem;
   }
 
   quick-order-list .tax-note {
-    text-align: center
+    text-align: center;
   }
 }
 
 quick-order-list .tax-note {
-  margin-bottom: 2rem;
+  margin: 0 0 2rem;
   display: block;
   width: 100%;
 }

From a64da0f160c065b6bc17c307563d233b172c8645 Mon Sep 17 00:00:00 2001
From: Ludo <ludo.segura@shopify.com>
Date: Thu, 5 Oct 2023 13:49:58 -0400
Subject: [PATCH 14/58] Fix Add to Cart error on page load/slower connections
 (#3008)

---
 assets/product-form.js       | 6 +++++-
 snippets/buy-buttons.liquid  | 4 +++-
 snippets/card-product.liquid | 4 +++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/assets/product-form.js b/assets/product-form.js
index 4deccf99b41..cb7374348fd 100644
--- a/assets/product-form.js
+++ b/assets/product-form.js
@@ -66,7 +66,11 @@ if (!customElements.get('product-form')) {
             }
 
             if (!this.error)
-              publish(PUB_SUB_EVENTS.cartUpdate, { source: 'product-form', productVariantId: formData.get('id'), cartData: response });
+              publish(PUB_SUB_EVENTS.cartUpdate, {
+                source: 'product-form',
+                productVariantId: formData.get('id'),
+                cartData: response,
+              });
             this.error = false;
             const quickAddModal = this.closest('quick-add-modal');
             if (quickAddModal) {
diff --git a/snippets/buy-buttons.liquid b/snippets/buy-buttons.liquid
index c302aacbc33..1d7cc6c146f 100644
--- a/snippets/buy-buttons.liquid
+++ b/snippets/buy-buttons.liquid
@@ -55,7 +55,9 @@
           type="hidden"
           name="id"
           value="{{ product.selected_or_first_available_variant.id }}"
-          disabled
+          {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
+            disabled
+          {% endif %}
           class="product-variant-id"
         >
 
diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
index b8be5fb6b86..5935fe18a27 100644
--- a/snippets/card-product.liquid
+++ b/snippets/card-product.liquid
@@ -277,7 +277,9 @@
                     name="id"
                     value="{{ card_product.selected_or_first_available_variant.id }}"
                     class="product-variant-id"
-                    disabled
+                    {% if card_product.selected_or_first_available_variant.available == false %}
+                      disabled
+                    {% endif %}
                   >
                   <button
                     id="{{ product_form_id }}-submit"

From fdd69059800e77e435c7fad36ff9fa598ceec3a1 Mon Sep 17 00:00:00 2001
From: Patrick Racicot <patrick.racicot@shopify.com>
Date: Fri, 6 Oct 2023 10:58:42 -0400
Subject: [PATCH 15/58] [Facets] dynamic header (#3048)

---
 assets/facets.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/assets/facets.js b/assets/facets.js
index 6a242c1cc7d..9b507e26300 100644
--- a/assets/facets.js
+++ b/assets/facets.js
@@ -165,6 +165,13 @@ class FacetFiltersForm extends HTMLElement {
       targetSummary.outerHTML = sourceSummary.outerHTML;
     }
 
+    const targetHeaderElement = target.querySelector('.facets__header');
+    const sourceHeaderElement = source.querySelector('.facets__header');
+
+    if (sourceHeaderElement && targetHeaderElement) {
+      targetHeaderElement.outerHTML = sourceHeaderElement.outerHTML;
+    }
+
     const targetWrapElement = target.querySelector('.facets-wrap');
     const sourceWrapElement = source.querySelector('.facets-wrap');
 

From 000a4695cada47f315b0ac0c038ea9be2589e260 Mon Sep 17 00:00:00 2001
From: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Date: Fri, 6 Oct 2023 13:47:54 -0700
Subject: [PATCH 16/58] Add component-card.css to cart drawer (#3049)

---
 snippets/cart-drawer.liquid | 1 +
 1 file changed, 1 insertion(+)

diff --git a/snippets/cart-drawer.liquid b/snippets/cart-drawer.liquid
index c5a9d5300d7..88d80ea40f9 100644
--- a/snippets/cart-drawer.liquid
+++ b/snippets/cart-drawer.liquid
@@ -6,6 +6,7 @@
 {% endcomment %}
 
 {{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
+{{ 'component-card.css' | asset_url | stylesheet_tag }}
 
 <script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
 <script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>

From d50698b3d8ffd06dff31dbf6e6c9c96f8b979509 Mon Sep 17 00:00:00 2001
From: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Date: Wed, 11 Oct 2023 08:55:17 -0700
Subject: [PATCH 17/58] [Refactoring] Replace loading spinner with snippet
 (#2996)

* Change spinner for main-cart-items

* Change spinner for cart-drawer

* remove extra div and change classes

* Replace spinner with snippet for pdp and fead prod

* Remove unnecessary classes

* Add comment for snippet

* Change naming for files and css classes

* Put back deleted elements

* Remove unused classes

* Put back loading-overlay for cases when no spinner

* Chnage loading-overlay--error name

* Minor change in CSS

* Move loading-overlay styles to template-collection

* Rename component-loading-overlay

* Fix bug with overlay and spinner for facets

* Remove component-loading-spinner import from files

* Use spinner snippet for predictive search

* Hide product count when loading for drawer filters

* Address feedback. Clean-up.

* Minor changes to address feedback

* Fix spinner conflict with cart drawer

* Address feedabck

* Add missing whitespace for if tag
---
 assets/base.css                               |  10 +-
 assets/cart.js                                |  10 +-
 assets/component-cart-drawer.css              |   2 +-
 assets/component-cart-items.css               |   6 +-
 assets/component-facets.css                   |  14 +-
 ...rlay.css => component-loading-spinner.css} |  31 +-
 assets/component-search.css                   |   4 +
 assets/facets.js                              |   4 +
 assets/magnify.js                             |   2 +-
 assets/product-form.js                        |   4 +-
 assets/product-info.js                        |   4 +-
 assets/quick-add.js                           |   4 +-
 assets/quick-order-list.css                   |  21 +-
 assets/quick-order-list.js                    |  12 +-
 assets/section-main-product.css               |   2 +-
 assets/template-collection.css                |  19 +
 sections/featured-product.liquid              |  15 +-
 sections/header.liquid                        |   2 -
 sections/main-cart-items.liquid               |  30 +-
 sections/main-collection-product-grid.liquid  |  14 +-
 sections/main-product.liquid                  |  15 +-
 sections/main-search.liquid                   | 198 ++++++----
 sections/predictive-search.liquid             | 352 +++++++++++-------
 sections/quick-order-list.liquid              |   4 +-
 snippets/buy-buttons.liquid                   |  12 +-
 snippets/card-product.liquid                  |  24 +-
 snippets/cart-drawer.liquid                   |  15 +-
 snippets/facets.liquid                        |  24 +-
 snippets/header-search.liquid                 | 121 +++---
 snippets/loading-overlay.liquid               |  15 -
 snippets/loading-spinner.liquid               |  22 ++
 snippets/product-thumbnail.liquid             |  12 +-
 snippets/quick-order-list-row.liquid          |   4 +-
 33 files changed, 527 insertions(+), 501 deletions(-)
 rename assets/{component-loading-overlay.css => component-loading-spinner.css} (60%)
 delete mode 100644 snippets/loading-overlay.liquid
 create mode 100644 snippets/loading-spinner.liquid

diff --git a/assets/base.css b/assets/base.css
index 2c2c806e6d3..0aca2b6829a 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -1373,7 +1373,7 @@ button.shopify-payment-button__button--unbranded {
   }
 }
 
-.button.loading > .loading-overlay__spinner {
+.button.loading > .loading__spinner {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -1383,11 +1383,11 @@ button.shopify-payment-button__button--unbranded {
   align-items: center;
 }
 
-.button.loading > .loading-overlay__spinner .spinner {
+.button.loading > .loading__spinner .spinner {
   width: fit-content;
 }
 
-.button.loading > .loading-overlay__spinner .path {
+.button.loading > .loading__spinner .path {
   stroke: rgb(var(--color-button-text));
 }
 
@@ -2021,8 +2021,8 @@ input[type='checkbox'] {
   position: relative;
 }
 
-product-info .loading-overlay:not(.hidden) ~ *,
-.quantity__rules-cart .loading-overlay:not(.hidden) ~ * {
+product-info .loading__spinner:not(.hidden) ~ *,
+.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
   visibility: hidden;
 }
 
diff --git a/assets/cart.js b/assets/cart.js
index 9ab23ea3956..76ed47a31eb 100644
--- a/assets/cart.js
+++ b/assets/cart.js
@@ -170,7 +170,7 @@ class CartItems extends HTMLElement {
         publish(PUB_SUB_EVENTS.cartUpdate, { source: 'cart-items', cartData: parsedState, variantId: variantId });
       })
       .catch(() => {
-        this.querySelectorAll('.loading-overlay').forEach((overlay) => overlay.classList.add('hidden'));
+        this.querySelectorAll('.loading__spinner').forEach((overlay) => overlay.classList.add('hidden'));
         const errors = document.getElementById('cart-errors') || document.getElementById('CartDrawer-CartErrors');
         errors.textContent = window.cartStrings.error;
       })
@@ -203,8 +203,8 @@ class CartItems extends HTMLElement {
     const mainCartItems = document.getElementById('main-cart-items') || document.getElementById('CartDrawer-CartItems');
     mainCartItems.classList.add('cart__items--disabled');
 
-    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading-overlay`);
-    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading-overlay`);
+    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading__spinner`);
+    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading__spinner`);
 
     [...cartItemElements, ...cartDrawerItemElements].forEach((overlay) => overlay.classList.remove('hidden'));
 
@@ -216,8 +216,8 @@ class CartItems extends HTMLElement {
     const mainCartItems = document.getElementById('main-cart-items') || document.getElementById('CartDrawer-CartItems');
     mainCartItems.classList.remove('cart__items--disabled');
 
-    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading-overlay`);
-    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading-overlay`);
+    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading__spinner`);
+    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading__spinner`);
 
     cartItemElements.forEach((overlay) => overlay.classList.add('hidden'));
     cartDrawerItemElements.forEach((overlay) => overlay.classList.add('hidden'));
diff --git a/assets/component-cart-drawer.css b/assets/component-cart-drawer.css
index d8869ace452..cd471dcd076 100644
--- a/assets/component-cart-drawer.css
+++ b/assets/component-cart-drawer.css
@@ -254,7 +254,7 @@ cart-drawer-items {
   margin-bottom: 1.5rem;
 }
 
-.cart-drawer .cart-item .loading-overlay {
+.cart-drawer .cart-item .loading__spinner {
   right: 5px;
   padding-top: 2.5rem;
 }
diff --git a/assets/component-cart-items.css b/assets/component-cart-items.css
index 6e6bc02cb79..df548b88be1 100644
--- a/assets/component-cart-items.css
+++ b/assets/component-cart-items.css
@@ -151,7 +151,7 @@ cart-remove-button .icon-remove {
   width: 1.5rem;
 }
 
-.cart-item .loading-overlay {
+.cart-item .loading__spinner {
   top: 0;
   left: auto;
   right: auto;
@@ -160,14 +160,14 @@ cart-remove-button .icon-remove {
 }
 
 @media screen and (min-width: 750px) {
-  .cart-item .loading-overlay {
+  .cart-item .loading__spinner {
     right: 0;
     padding-top: 4.5rem;
     bottom: auto;
   }
 }
 
-.cart-item .loading-overlay:not(.hidden)~* {
+.cart-item .loading__spinner:not(.hidden)~* {
   visibility: hidden;
 }
 
diff --git a/assets/component-facets.css b/assets/component-facets.css
index 119d326eada..61146e49505 100644
--- a/assets/component-facets.css
+++ b/assets/component-facets.css
@@ -927,24 +927,21 @@ input.mobile-facets__checkbox {
   margin: 0;
 }
 
-.product-count__text.loading {
+#ProductCountDesktop.loading,
+#ProductCount.loading {
   visibility: hidden;
 }
 
-.product-count .loading-overlay__spinner,
-.product-count-vertical .loading-overlay__spinner {
-  display: none;
+.product-count .loading__spinner,
+.product-count-vertical .loading__spinner {
   position: absolute;
+  padding-top: 0.6rem;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 1.8rem;
 }
 
-.product-count__text.loading + .loading-overlay__spinner {
-  display: block;
-}
-
 @media screen and (min-width: 750px) {
   .facets-vertical {
     display: flex;
@@ -1009,6 +1006,7 @@ input.mobile-facets__checkbox {
 
   .product-count-vertical {
     margin-left: 3.5rem;
+    position: relative;
   }
 
   .facets-vertical .active-facets__button-wrapper {
diff --git a/assets/component-loading-overlay.css b/assets/component-loading-spinner.css
similarity index 60%
rename from assets/component-loading-overlay.css
rename to assets/component-loading-spinner.css
index a6c5e25c1bd..6cc341a3ed7 100644
--- a/assets/component-loading-overlay.css
+++ b/assets/component-loading-spinner.css
@@ -1,35 +1,14 @@
-.loading-overlay {
+.loading__spinner {
   position: absolute;
   z-index: 1;
   width: 1.8rem;
 }
 
-price-per-item .loading-overlay {
-  position: relative;
-}
-
-@media screen and (max-width: 749px) {
-  .loading-overlay {
-    top: 0;
-    right: 0;
-  }
-}
-
-@media screen and (min-width: 750px) {
-  .loading-overlay {
-    left: 0;
-  }
-}
-
-.loading-overlay__spinner {
+.loading__spinner {
   width: 1.8rem;
   display: inline-block;
 }
 
-price-per-item .loading-overlay__spinner {
-  display: flex;
-}
-
 .spinner {
   animation: rotator 1.4s linear infinite;
 }
@@ -71,12 +50,12 @@ price-per-item .loading-overlay__spinner {
   }
 }
 
-.loading-overlay:not(.hidden) + .cart-item__price-wrapper,
-.loading-overlay:not(.hidden) ~ cart-remove-button {
+.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
+.loading__spinner:not(.hidden) ~ cart-remove-button {
   opacity: 50%;
 }
 
-.loading-overlay:not(.hidden) ~ cart-remove-button {
+.loading__spinner:not(.hidden) ~ cart-remove-button {
   pointer-events: none;
   cursor: default;
 }
diff --git a/assets/component-search.css b/assets/component-search.css
index 08acd4a64d9..5a04cb5e587 100644
--- a/assets/component-search.css
+++ b/assets/component-search.css
@@ -68,3 +68,7 @@
 input::-webkit-search-decoration {
   -webkit-appearance: none;
 }
+
+.template-search__results {
+  position: relative;
+}
diff --git a/assets/facets.js b/assets/facets.js
index 9b507e26300..335a4adf8f4 100644
--- a/assets/facets.js
+++ b/assets/facets.js
@@ -34,6 +34,8 @@ class FacetFiltersForm extends HTMLElement {
     const sections = FacetFiltersForm.getSections();
     const countContainer = document.getElementById('ProductCount');
     const countContainerDesktop = document.getElementById('ProductCountDesktop');
+    const loadingSpinners = document.querySelectorAll('.facets-container .loading__spinner, facet-filters-form .loading__spinner');
+    loadingSpinners.forEach((spinner) => spinner.classList.remove('hidden'));
     document.getElementById('ProductGridContainer').querySelector('.collection').classList.add('loading');
     if (countContainer) {
       countContainer.classList.add('loading');
@@ -98,6 +100,8 @@ class FacetFiltersForm extends HTMLElement {
       containerDesktop.innerHTML = count;
       containerDesktop.classList.remove('loading');
     }
+    const loadingSpinners = document.querySelectorAll('.facets-container .loading__spinner, facet-filters-form .loading__spinner');
+    loadingSpinners.forEach((spinner) => spinner.classList.add('hidden'));
   }
 
   static renderFilters(html, event) {
diff --git a/assets/magnify.js b/assets/magnify.js
index 60a4f91a9c5..11359d2e1a9 100644
--- a/assets/magnify.js
+++ b/assets/magnify.js
@@ -25,7 +25,7 @@ function prepareOverlay(container, image) {
 }
 
 function toggleLoadingSpinner(image) {
-  const loadingSpinner = image.parentElement.parentElement.querySelector(`.loading-overlay__spinner`);
+  const loadingSpinner = image.parentElement.parentElement.querySelector(`.loading__spinner`);
   loadingSpinner.classList.toggle('hidden');
 }
 
diff --git a/assets/product-form.js b/assets/product-form.js
index cb7374348fd..da186473160 100644
--- a/assets/product-form.js
+++ b/assets/product-form.js
@@ -24,7 +24,7 @@ if (!customElements.get('product-form')) {
 
         this.submitButton.setAttribute('aria-disabled', true);
         this.submitButton.classList.add('loading');
-        this.querySelector('.loading-overlay__spinner').classList.remove('hidden');
+        this.querySelector('.loading__spinner').classList.remove('hidden');
 
         const config = fetchConfig('javascript');
         config.headers['X-Requested-With'] = 'XMLHttpRequest';
@@ -95,7 +95,7 @@ if (!customElements.get('product-form')) {
             this.submitButton.classList.remove('loading');
             if (this.cart && this.cart.classList.contains('is-empty')) this.cart.classList.remove('is-empty');
             if (!this.error) this.submitButton.removeAttribute('aria-disabled');
-            this.querySelector('.loading-overlay__spinner').classList.add('hidden');
+            this.querySelector('.loading__spinner').classList.add('hidden');
           });
       }
 
diff --git a/assets/product-info.js b/assets/product-info.js
index 79a714b67ab..c78c371ec26 100644
--- a/assets/product-info.js
+++ b/assets/product-info.js
@@ -59,7 +59,7 @@ if (!customElements.get('product-info')) {
 
       fetchQuantityRules() {
         if (!this.currentVariant || !this.currentVariant.value) return;
-        this.querySelector('.quantity__rules-cart .loading-overlay').classList.remove('hidden');
+        this.querySelector('.quantity__rules-cart .loading__spinner').classList.remove('hidden');
         fetch(`${this.dataset.url}?variant=${this.currentVariant.value}&section_id=${this.dataset.section}`)
           .then((response) => {
             return response.text();
@@ -73,7 +73,7 @@ if (!customElements.get('product-info')) {
             console.error(e);
           })
           .finally(() => {
-            this.querySelector('.quantity__rules-cart .loading-overlay').classList.add('hidden');
+            this.querySelector('.quantity__rules-cart .loading__spinner').classList.add('hidden');
           });
       }
 
diff --git a/assets/quick-add.js b/assets/quick-add.js
index 253b9672443..564e0748373 100644
--- a/assets/quick-add.js
+++ b/assets/quick-add.js
@@ -19,7 +19,7 @@ if (!customElements.get('quick-add-modal')) {
       show(opener) {
         opener.setAttribute('aria-disabled', true);
         opener.classList.add('loading');
-        opener.querySelector('.loading-overlay__spinner').classList.remove('hidden');
+        opener.querySelector('.loading__spinner').classList.remove('hidden');
 
         fetch(opener.getAttribute('data-product-url'))
           .then((response) => response.text())
@@ -44,7 +44,7 @@ if (!customElements.get('quick-add-modal')) {
           .finally(() => {
             opener.removeAttribute('aria-disabled');
             opener.classList.remove('loading');
-            opener.querySelector('.loading-overlay__spinner').classList.add('hidden');
+            opener.querySelector('.loading__spinner').classList.add('hidden');
           });
       }
 
diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css
index 4bea213ae19..a733c922ac4 100644
--- a/assets/quick-order-list.css
+++ b/assets/quick-order-list.css
@@ -53,7 +53,7 @@ quick-order-list .quantity__button {
     vertical-align: top;
   }
 
-  .variant-item--unit-price .variant-item__totals .loading-overlay {
+  .variant-item--unit-price .variant-item__totals .loading__spinner {
     padding-top: 1.7rem;
   }
 }
@@ -241,7 +241,7 @@ quick-order-list-remove-button .icon-remove {
   transition: transform var(--duration-default) ease;
 }
 
-.variant-item .loading-overlay {
+.variant-item .loading__spinner {
   top: 0;
   left: auto;
   right: 0;
@@ -288,16 +288,16 @@ quick-order-list-remove-button .icon-remove {
 }
 
 @media screen and (min-width: 990px) {
-  .variant-item .loading-overlay {
+  .variant-item .loading__spinner {
     padding-top: 3rem;
     bottom: auto;
   }
 
-  .variant-item .loading-overlay--error {
+  .variant-item .loading__spinner--error {
     padding-top: 5rem;
   }
 
-  .variant-remove-total .loading-overlay {
+  .variant-remove-total .loading__spinner {
     left: 2rem;
     top: 1.2rem;
   }
@@ -312,8 +312,13 @@ quick-order-list-remove-button:hover .icon-remove {
   text-underline-offset: 0.3rem;
 }
 
-.variant-item .loading-overlay:not(.hidden)~*,
-.variant-remove-total .loading-overlay:not(.hidden)~* {
+.variant-remove-total {
+  position: relative;
+  align-self: center;
+}
+
+.variant-item .loading__spinner:not(.hidden)~*,
+.variant-remove-total .loading__spinner:not(.hidden)~* {
   visibility: hidden;
 }
 
@@ -356,7 +361,7 @@ quick-order-list-remove-button:hover .icon-remove {
     align-items: center;
   }
 
-  .variant-item__details .loading-overlay {
+  .variant-item__details .loading__spinner {
     left: 0;
     top: auto;
   }
diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
index 7a597594774..68171d17df8 100644
--- a/assets/quick-order-list.js
+++ b/assets/quick-order-list.js
@@ -180,7 +180,7 @@ class QuickOrderList extends HTMLElement {
   }
 
   updateMultipleQty(items) {
-    this.querySelector('.variant-remove-total .loading-overlay').classList.remove('hidden');
+    this.querySelector('.variant-remove-total .loading__spinner').classList.remove('hidden');
 
     const body = JSON.stringify({
       updates: items,
@@ -202,7 +202,7 @@ class QuickOrderList extends HTMLElement {
         this.setErrorMessage(window.cartStrings.error);
       })
       .finally(() => {
-        this.querySelector('.variant-remove-total .loading-overlay').classList.add('hidden');
+        this.querySelector('.variant-remove-total .loading__spinner').classList.add('hidden');
       });
   }
 
@@ -245,8 +245,8 @@ class QuickOrderList extends HTMLElement {
         const items = document.querySelectorAll('.variant-item');
 
         if (parsedState.description || parsedState.errors) {
-          const variantItem = document.querySelector(`[id^="Variant-${id}"] .variant-item__totals.small-hide .loading-overlay`);
-          variantItem.classList.add('loading-overlay--error');
+          const variantItem = document.querySelector(`[id^="Variant-${id}"] .variant-item__totals.small-hide .loading__spinner`);
+          variantItem.classList.add('loading__spinner--error');
           this.resetQuantityInput(id, quantityElement);
           if (parsedState.errors) {
             this.updateLiveRegions(id, parsedState.errors);
@@ -285,7 +285,7 @@ class QuickOrderList extends HTMLElement {
           this.updateMessage(-parseInt(quantityElement.dataset.cartQuantity))
         }
       }).catch((error) => {
-        this.querySelectorAll('.loading-overlay').forEach((overlay) => overlay.classList.add('hidden'));
+        this.querySelectorAll('.loading__spinner').forEach((overlay) => overlay.classList.add('hidden'));
         this.resetQuantityInput(id);
         console.error(error);
         this.setErrorMessage(window.cartStrings.error);
@@ -375,7 +375,7 @@ class QuickOrderList extends HTMLElement {
 
   toggleLoading(id, enable) {
     const quickOrderList = document.getElementById(this.quickOrderListId);
-    const quickOrderListItems = this.querySelectorAll(`#Variant-${id} .loading-overlay`);
+    const quickOrderListItems = this.querySelectorAll(`#Variant-${id} .loading__spinner`);
 
     if (enable) {
       quickOrderList.classList.add('quick-order-list__container--disabled');
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index ddebf7660d9..7a523d9db72 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -1165,7 +1165,7 @@ a.product__text {
   display: none;
 }
 
-.product__modal-opener > .loading-overlay__spinner {
+.product__modal-opener > .loading__spinner {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
diff --git a/assets/template-collection.css b/assets/template-collection.css
index b55af5c8f3c..b8205194add 100644
--- a/assets/template-collection.css
+++ b/assets/template-collection.css
@@ -11,6 +11,25 @@
   }
 }
 
+.collection .loading-overlay {
+  position: absolute;
+  z-index: 1;
+  width: 1.8rem;
+}
+
+@media screen and (max-width: 749px) {
+  .collection .loading-overlay {
+    top: 0;
+    right: 0;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .collection .loading-overlay {
+    left: 0;
+  }
+}
+
 .collection .loading-overlay {
   top: 0;
   right: 0;
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 5bb47fcf8ba..aaaf76c8c39 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -2,7 +2,6 @@
 {{ 'section-featured-product.css' | asset_url | stylesheet_tag }}
 {{ 'component-accordion.css' | asset_url | stylesheet_tag }}
 {{ 'component-price.css' | asset_url | stylesheet_tag }}
-{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
 {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
 {{ 'component-rating.css' | asset_url | stylesheet_tag }}
 {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
@@ -224,19 +223,7 @@
                   <label class="quantity__label form__label" for="Quantity-{{ section.id }}">
                     {{ 'products.product.quantity.label' | t }}
                     <span class="quantity__rules-cart no-js-hidden{% if cart_qty == 0 %} hidden{% endif %}">
-                      <span class="loading-overlay hidden">
-                        <span class="loading-overlay__spinner">
-                          <svg
-                            aria-hidden="true"
-                            focusable="false"
-                            class="spinner"
-                            viewBox="0 0 66 66"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-                          </svg>
-                        </span>
-                      </span>
+                      {%- render 'loading-spinner' -%}
                       <span
                         >(
                         {{- 'products.product.quantity.in_cart_html' | t: quantity: cart_qty -}}
diff --git a/sections/header.liquid b/sections/header.liquid
index 53b4a108d86..0c44123e82f 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -5,7 +5,6 @@
 <link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'">
 {%- if settings.predictive_search_enabled -%}
   <link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
-  <link rel="stylesheet" href="{{ 'component-loading-overlay.css' | asset_url }}" media="print" onload="this.media='all'">
 {%- endif -%}
 {%- if section.settings.menu_type_desktop == 'mega' -%}
   <link rel="stylesheet" href="{{ 'component-mega-menu.css' | asset_url }}" media="print" onload="this.media='all'">
@@ -18,7 +17,6 @@
   {{ 'component-totals.css' | asset_url | stylesheet_tag }}
   {{ 'component-price.css' | asset_url | stylesheet_tag }}
   {{ 'component-discounts.css' | asset_url | stylesheet_tag }}
-  {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
 {%- endif -%}
 
 <noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
diff --git a/sections/main-cart-items.liquid b/sections/main-cart-items.liquid
index 068f6840eed..c014a04db41 100644
--- a/sections/main-cart-items.liquid
+++ b/sections/main-cart-items.liquid
@@ -3,7 +3,6 @@
 {{ 'component-totals.css' | asset_url | stylesheet_tag }}
 {{ 'component-price.css' | asset_url | stylesheet_tag }}
 {{ 'component-discounts.css' | asset_url | stylesheet_tag }}
-{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
 {{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
@@ -170,19 +169,7 @@
                   </td>
 
                   <td class="cart-item__totals right medium-hide large-up-hide">
-                    <div class="loading-overlay hidden">
-                      <div class="loading-overlay__spinner">
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          class="spinner"
-                          viewBox="0 0 66 66"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-                        </svg>
-                      </div>
-                    </div>
+                    {%- render 'loading-spinner' -%}
                     <div class="cart-item__price-wrapper">
                       {%- if item.original_line_price != item.final_line_price -%}
                         <dl class="cart-item__discounted-prices">
@@ -397,20 +384,7 @@
                   </td>
 
                   <td class="cart-item__totals right small-hide">
-                    <div class="loading-overlay hidden">
-                      <div class="loading-overlay__spinner">
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          class="spinner"
-                          viewBox="0 0 66 66"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-                        </svg>
-                      </div>
-                    </div>
-
+                    {%- render 'loading-spinner' -%}
                     <div class="cart-item__price-wrapper">
                       {%- if item.original_line_price != item.final_line_price -%}
                         <dl class="cart-item__discounted-prices">
diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
index 6a449836d78..a74a7547680 100644
--- a/sections/main-collection-product-grid.liquid
+++ b/sections/main-collection-product-grid.liquid
@@ -1,5 +1,4 @@
 {{ 'template-collection.css' | asset_url | stylesheet_tag }}
-{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
 {{ 'component-card.css' | asset_url | stylesheet_tag }}
 {{ 'component-price.css' | asset_url | stylesheet_tag }}
 
@@ -85,17 +84,7 @@
                 {%- endif -%}
               </span>
             </h2>
-            <div class="loading-overlay__spinner">
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                class="spinner"
-                viewBox="0 0 66 66"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-              </svg>
-            </div>
+            {%- render 'loading-spinner' -%}
           </div>
         </form>
       </facet-filters-form>
@@ -145,7 +134,6 @@
         {%- else -%}
           <div class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
             <div class="loading-overlay gradient"></div>
-
             <ul
               id="product-grid"
               data-id="{{ section.id }}"
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index b026b6042d1..70ae8159d88 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -8,7 +8,6 @@
   {{ 'component-price.css' | asset_url | stylesheet_tag }}
   {{ 'component-slider.css' | asset_url | stylesheet_tag }}
   {{ 'component-rating.css' | asset_url | stylesheet_tag }}
-  {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
   {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
   {%- if product.quantity_price_breaks_configured? -%}
     {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
@@ -220,19 +219,7 @@
                 <label class="quantity__label form__label" for="Quantity-{{ section.id }}">
                   {{ 'products.product.quantity.label' | t }}
                   <span class="quantity__rules-cart no-js-hidden{% if cart_qty == 0 %} hidden{% endif %}">
-                    <span class="loading-overlay hidden">
-                      <span class="loading-overlay__spinner">
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          class="spinner"
-                          viewBox="0 0 66 66"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-                        </svg>
-                      </span>
-                    </span>
+                    {%- render 'loading-spinner' -%}
                     <span>({{- 'products.product.quantity.in_cart_html' | t: quantity: cart_qty -}})</span>
                   </span>
                 </label>
diff --git a/sections/main-search.liquid b/sections/main-search.liquid
index 7b225a89549..07327dfa2e8 100644
--- a/sections/main-search.liquid
+++ b/sections/main-search.liquid
@@ -77,66 +77,67 @@
         {%- if settings.predictive_search_enabled -%}
           <predictive-search data-loading-text="{{ 'accessibility.loading' | t }}">
         {%- endif -%}
-            <main-search>
-              <form action="{{ routes.search_url }}" method="get" role="search" class="search">
-                <div class="field">
-                  <input
-                    class="search__input field__input"
-                    id="Search-In-Template"
-                    type="search"
-                    name="q"
-                    value="{{ search.terms | escape }}"
-                    placeholder="{{ 'general.search.search' | t }}"
-                    {%- if settings.predictive_search_enabled -%}
-                      role="combobox"
-                      aria-expanded="false"
-                      aria-owns="predictive-search-results"
-                      aria-controls="predictive-search-results"
-                      aria-haspopup="listbox"
-                      aria-autocomplete="list"
-                      autocorrect="off"
-                      autocomplete="off"
-                      autocapitalize="off"
-                      spellcheck="false"
-                    {%- endif -%}
-                  >
-                  <label class="field__label" for="Search-In-Template">{{ 'general.search.search' | t }}</label>
-                  <input name="options[prefix]" type="hidden" value="last">
+        <main-search>
+          <form action="{{ routes.search_url }}" method="get" role="search" class="search">
+            <div class="field">
+              <input
+                class="search__input field__input"
+                id="Search-In-Template"
+                type="search"
+                name="q"
+                value="{{ search.terms | escape }}"
+                placeholder="{{ 'general.search.search' | t }}"
+                {%- if settings.predictive_search_enabled -%}
+                  role="combobox"
+                  aria-expanded="false"
+                  aria-owns="predictive-search-results"
+                  aria-controls="predictive-search-results"
+                  aria-haspopup="listbox"
+                  aria-autocomplete="list"
+                  autocorrect="off"
+                  autocomplete="off"
+                  autocapitalize="off"
+                  spellcheck="false"
+                {%- endif -%}
+              >
+              <label class="field__label" for="Search-In-Template">{{ 'general.search.search' | t }}</label>
+              <input name="options[prefix]" type="hidden" value="last">
 
-                  {%- if settings.predictive_search_enabled -%}
-                    <div class="predictive-search predictive-search--search-template" tabindex="-1" data-predictive-search>
-                      <div class="predictive-search__loading-state">
-                        <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-                        </svg>
-                      </div>
-                    </div>
+              {%- if settings.predictive_search_enabled -%}
+                <div class="predictive-search predictive-search--search-template" tabindex="-1" data-predictive-search>
+                  {%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
+                </div>
 
-                    <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
-                  {%- endif -%}
+                <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
+              {%- endif -%}
 
-                  <button type="reset" class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}" aria-label="{{ 'general.search.reset' | t }}">
-                    <svg class="icon icon-close" aria-hidden="true" focusable="false">
-                      <use xlink:href="#icon-reset">
-                    </svg>
-                  </button>
-                  <button type="submit" class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
-                    <svg class="icon icon-search" aria-hidden="true" focusable="false">
-                      <use xlink:href="#icon-search">
-                    </svg>
-                  </button>
-                </div>
-              </form>
-            </main-search>
+              <button
+                type="reset"
+                class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
+                aria-label="{{ 'general.search.reset' | t }}"
+              >
+                <svg class="icon icon-close" aria-hidden="true" focusable="false">
+                  <use xlink:href="#icon-reset">
+                </svg>
+              </button>
+              <button type="submit" class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
+                <svg class="icon icon-search" aria-hidden="true" focusable="false">
+                  <use xlink:href="#icon-search">
+                </svg>
+              </button>
+            </div>
+          </form>
+        </main-search>
         {%- if settings.predictive_search_enabled -%}
           </predictive-search>
         {%- endif -%}
-
       </div>
       {%- if search.performed -%}
         {%- unless section.settings.enable_filtering or section.settings.enable_sorting -%}
           {%- if search.results_count > 0 -%}
-            <p role="status">{{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}</p>
+            <p role="status">
+              {{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}
+            </p>
           {%- endif -%}
         {%- endunless -%}
         {%- if search.results_count == 0 and search.filters == empty -%}
@@ -145,7 +146,10 @@
       {%- endif -%}
     </div>
     {%- if search.performed -%}
-      {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' and search.filters != empty -%}
+      {%- if section.settings.enable_sorting
+        and section.settings.filter_type == 'vertical'
+        and search.filters != empty
+      -%}
         <facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">
           <form class="facets-vertical-form" id="FacetSortForm">
             <div class="facet-filters sorting caption">
@@ -155,16 +159,30 @@
                 </h2>
                 <div class="select">
                   {%- assign sort_by = search.sort_by | default: search.default_sort_by -%}
-                  <select name="sort_by" class="facet-filters__sort select__select caption-large" id="SortBy" aria-describedby="a11y-refresh-page-message">
+                  <select
+                    name="sort_by"
+                    class="facet-filters__sort select__select caption-large"
+                    id="SortBy"
+                    aria-describedby="a11y-refresh-page-message"
+                  >
                     {%- for option in search.sort_options -%}
-                      <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
+                      <option
+                        value="{{ option.value | escape }}"
+                        {% if option.value == sort_by %}
+                          selected="selected"
+                        {% endif %}
+                      >
+                        {{ option.name | escape }}
+                      </option>
                     {%- endfor -%}
                   </select>
                   {% render 'icon-caret' %}
                 </div>
               </div>
               <noscript>
-                <button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.sort_button' | t }}</button>
+                <button type="submit" class="facets__button-no-js button button--secondary">
+                  {{ 'products.facets.sort_button' | t }}
+                </button>
               </noscript>
             </div>
 
@@ -176,52 +194,83 @@
                   {%- elsif search.products_count == search.all_products_count -%}
                     {{ 'products.facets.product_count_simple' | t: count: search.products_count }}
                   {%- else -%}
-                    {{ 'products.facets.product_count' | t: product_count: search.products_count, count: search.all_products_count }}
+                    {{
+                      'products.facets.product_count'
+                      | t: product_count: search.products_count, count: search.all_products_count
+                    }}
                   {%- endif -%}
                 </span>
               </h2>
-              <div class="loading-overlay__spinner">
-                <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-                </svg>
-              </div>
+              {%- render 'loading-spinner' -%}
             </div>
           </form>
         </facet-filters-form>
       {%- endif -%}
-      <div{% if section.settings.filter_type == 'vertical' %} class="facets-vertical page-width"{% endif %}>
+      <div
+        {% if section.settings.filter_type == 'vertical' %}
+          class="facets-vertical page-width"
+        {% endif %}
+      >
         {%- if search.filters != empty -%}
           {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
-            <aside aria-labelledby="verticalTitle" class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-search-filters" data-id="{{ section.id }}">
-              {% render 'facets', results: search, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type, paginate: paginate %}
+            <aside
+              aria-labelledby="verticalTitle"
+              class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
+              id="main-search-filters"
+              data-id="{{ section.id }}"
+            >
+              {% render 'facets',
+                results: search,
+                enable_filtering: section.settings.enable_filtering,
+                enable_sorting: section.settings.enable_sorting,
+                filter_type: section.settings.filter_type,
+                paginate: paginate
+              %}
             </aside>
           {%- endif -%}
         {%- endif -%}
         <div class="product-grid-container" id="ProductGridContainer">
           {%- if search.results.size == 0 and search.filters != empty -%}
-            <div class="template-search__results collection collection--empty{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="product-grid" data-id="{{ section.id }}">
+            <div
+              class="template-search__results collection collection--empty{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
+              id="product-grid"
+              data-id="{{ section.id }}"
+            >
               <div class="loading-overlay gradient"></div>
               <div class="title-wrapper center">
                 <h2 class="title title--primary">
-                  {{ 'sections.collection_template.empty' | t }}<br>
-                  {{ 'sections.collection_template.use_fewer_filters_html' | t: link: search_url, class: "underlined-link link" }}
+                  {{ 'sections.collection_template.empty' | t -}}
+                  <br>
+                  {{
+                    'sections.collection_template.use_fewer_filters_html'
+                    | t: link: search_url, class: 'underlined-link link'
+                  }}
                 </h2>
               </div>
             </div>
           {%- else -%}
-            <div class="template-search__results collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="product-grid" data-id="{{ section.id }}">
+            <div
+              class="template-search__results collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
+              id="product-grid"
+              data-id="{{ section.id }}"
+            >
               <div class="loading-overlay gradient"></div>
-              <ul class="grid product-grid  grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop" role="list">
+              <ul
+                class="grid product-grid  grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop"
+                role="list"
+              >
                 {%- for item in search.results -%}
                   {% assign lazy_load = false %}
                   {%- if forloop.index > 2 -%}
                     {%- assign lazy_load = true -%}
                   {%- endif -%}
 
-                  <li class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+                  <li
+                    class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                     {% if settings.animations_reveal_on_scroll %}
                       data-cascade
-                    {% endif %}>
+                    {% endif %}
+                  >
                     {%- case item.object_type -%}
                       {%- when 'product' -%}
                         {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
@@ -246,7 +295,10 @@
                         %}
                       {%- when 'page' -%}
                         <div class="article-card-wrapper card-wrapper underline-links-hover">
-                          <div class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}" style="--ratio-percent: 100%;">
+                          <div
+                            class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}"
+                            style="--ratio-percent: 100%;"
+                          >
                             <div class="card__content">
                               <div class="card__information">
                                 <h3 class="card__heading">
@@ -256,7 +308,9 @@
                                 </h3>
                               </div>
                               <div class="card__badge {{ settings.badge_position }}">
-                                <span class="badge color-{{ settings.color_schemes | first }}">{{ 'templates.search.page' | t }}</span>
+                                <span class="badge color-{{ settings.color_schemes | first }}">
+                                  {{- 'templates.search.page' | t -}}
+                                </span>
                               </div>
                             </div>
                           </div>
diff --git a/sections/predictive-search.liquid b/sections/predictive-search.liquid
index 00c2482fade..cd368893b8f 100644
--- a/sections/predictive-search.liquid
+++ b/sections/predictive-search.liquid
@@ -1,149 +1,225 @@
 {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
 {%- if predictive_search.performed -%}
-{% assign first_column_results_size = predictive_search.resources.queries.size
-| plus: predictive_search.resources.collections.size
-| plus: predictive_search.resources.pages.size
-| plus: predictive_search.resources.articles.size
-%}
+  {% assign first_column_results_size = predictive_search.resources.queries.size
+    | plus: predictive_search.resources.collections.size
+    | plus: predictive_search.resources.pages.size
+    | plus: predictive_search.resources.articles.size
+  %}
   <div id="predictive-search-results" role="listbox">
     {%- if first_column_results_size > 0 or predictive_search.resources.products.size > 0 -%}
-      <div id="predictive-search-results-groups-wrapper" class="predictive-search__results-groups-wrapper{% unless predictive_search.resources.products.size > 0 %} predictive-search__results-groups-wrapper--no-products{% endunless %}{% unless predictive_search.resources.queries.size > 0 or predictive_search.resources.collections.size > 0 %} predictive-search__results-groups-wrapper--no-suggestions{% endunless %}">
+      <div
+        id="predictive-search-results-groups-wrapper"
+        class="predictive-search__results-groups-wrapper{% unless predictive_search.resources.products.size > 0 %} predictive-search__results-groups-wrapper--no-products{% endunless %}{% unless predictive_search.resources.queries.size > 0 or predictive_search.resources.collections.size > 0 %} predictive-search__results-groups-wrapper--no-suggestions{% endunless %}"
+      >
+    {%- endif -%}
+    {%- if first_column_results_size > 0 -%}
+      <div class="predictive-search__result-group">
+    {%- endif -%}
+    {%- if predictive_search.resources.queries.size > 0 or predictive_search.resources.collections.size > 0 -%}
+      <div>
+        <h2 id="predictive-search-queries" class="predictive-search__heading text-body caption-with-letter-spacing">
+          {{- 'templates.search.suggestions' | t -}}
+        </h2>
+        <ul
+          id="predictive-search-results-queries-list"
+          class="predictive-search__results-list list-unstyled"
+          role="group"
+          aria-labelledby="predictive-search-queries"
+        >
+          {%- for query in predictive_search.resources.queries -%}
+            <li
+              id="predictive-search-option-query-{{ forloop.index }}"
+              class="predictive-search__list-item"
+              role="option"
+              aria-selected="false"
+            >
+              <a href="{{ query.url }}" class="predictive-search__item link link--text" tabindex="-1">
+                <div class="predictive-search__item-content predictive-search__item-content--centered">
+                  <p
+                    class="predictive-search__item-heading predictive-search__item-query-result h5"
+                    aria-label="{{ query.text }}"
+                  >
+                    {{ query.styled_text }}
+                  </p>
+                </div>
+              </a>
+            </li>
+          {%- endfor -%}
+          {%- for collection in predictive_search.resources.collections -%}
+            <li
+              id="predictive-search-option-collection-{{ forloop.index }}"
+              class="predictive-search__list-item"
+              role="option"
+              aria-selected="false"
+            >
+              <a href="{{ collection.url }}" class="predictive-search__item link link--text" tabindex="-1">
+                <div class="predictive-search__item-content predictive-search__item-content--centered">
+                  <p class="predictive-search__item-heading h5">{{ collection.title }}</p>
+                </div>
+              </a>
+            </li>
+          {%- endfor -%}
+        </ul>
+      </div>
     {%- endif -%}
-      {%- if first_column_results_size > 0 -%}
-        <div class="predictive-search__result-group">
-      {%- endif -%}
-      {%- if predictive_search.resources.queries.size > 0 or predictive_search.resources.collections.size > 0 -%}
-        <div>
-          <h2 id="predictive-search-queries" class="predictive-search__heading text-body caption-with-letter-spacing">
-            {{- 'templates.search.suggestions' | t -}}
-          </h2>
-          <ul id="predictive-search-results-queries-list" class="predictive-search__results-list list-unstyled" role="group" aria-labelledby="predictive-search-queries">
-            {%- for query in predictive_search.resources.queries -%}
-              <li id="predictive-search-option-query-{{ forloop.index }}" class="predictive-search__list-item" role="option" aria-selected="false">
-                <a href="{{ query.url }}" class="predictive-search__item link link--text" tabindex="-1">
-                  <div class="predictive-search__item-content predictive-search__item-content--centered">
-                    <p class="predictive-search__item-heading predictive-search__item-query-result h5" aria-label="{{ query.text }}">{{ query.styled_text }}</p>
-                  </div>
-                </a>
-              </li>
-            {%- endfor -%}
-            {%- for collection in predictive_search.resources.collections -%}
-              <li id="predictive-search-option-collection-{{ forloop.index }}" class="predictive-search__list-item" role="option" aria-selected="false">
-                <a href="{{ collection.url }}" class="predictive-search__item link link--text" tabindex="-1">
-                  <div class="predictive-search__item-content predictive-search__item-content--centered">
-                    <p class="predictive-search__item-heading h5">{{ collection.title }}</p>
-                  </div>
-                </a>
-              </li>
-            {%- endfor -%}
-          </ul>
-        </div>
-      {%- endif -%}
-      {%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
-        <div class="predictive-search__pages-wrapper">
-          <h2 id="predictive-search-pages-desktop" class="predictive-search__heading text-body caption-with-letter-spacing">
-            {{- 'templates.search.pages' | t -}}
-          </h2>
-          <ul id="predictive-search-results-pages-list-desktop" class="predictive-search__results-list list-unstyled" role="group" aria-labelledby="predictive-search-pages-desktop">
-            {%- for page in predictive_search.resources.pages -%}
-              <li id="predictive-search-option-page-desktop-{{ forloop.index }}" class="predictive-search__list-item" role="option" aria-selected="false">
-                <a href="{{ page.url }}" class="predictive-search__item link link--text" tabindex="-1">
-                  <div class="predictive-search__item-content predictive-search__item-content--centered">
-                    <p class="predictive-search__item-heading h5">{{ page.title }}</p>
-                  </div>
-                </a>
-              </li>
-            {%- endfor -%}
-            {%- for article in predictive_search.resources.articles -%}
-              <li id="predictive-search-option-article-desktop-{{ forloop.index }}" class="predictive-search__list-item" role="option" aria-selected="false">
-                <a href="{{ article.url }}" class="predictive-search__item link link--text" tabindex="-1">
-                  <div class="predictive-search__item-content predictive-search__item-content--centered">
-                    <p class="predictive-search__item-heading h5">{{ article.title }}</p>
-                  </div>
-                </a>
-              </li>
-            {%- endfor -%}
-          </ul>
-        </div>
-      {%- endif -%}
-      {%- if first_column_results_size > 0 -%}
-        </div>
-      {%- endif -%}
-      {%- if predictive_search.resources.products.size > 0 or predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
-        <div class="predictive-search__result-group">
-          {%- if predictive_search.resources.products.size > 0 -%}
-            <div>
-              <h2 id="predictive-search-products" class="predictive-search__heading text-body caption-with-letter-spacing">
-                {{- 'templates.search.products' | t -}}
-              </h2>
-              <ul id="predictive-search-results-products-list" class="predictive-search__results-list list-unstyled" role="group" aria-labelledby="predictive-search-products">
-                {%- for product in predictive_search.resources.products -%}
-                  <li id="predictive-search-option-product-{{ forloop.index }}" class="predictive-search__list-item" role="option" aria-selected="false">
-                    <a href="{{ product.url }}" class="predictive-search__item predictive-search__item--link-with-thumbnail link link--text" tabindex="-1">
-                      {%- if product.featured_media != blank -%}
-                        <img class="predictive-search__image" src="{{ product.featured_media | image_url: width: 150 }}" alt="{{ product.featured_media.alt }}" width="50" height="{{ 50 | divided_by: product.featured_media.preview_image.aspect_ratio }}">
+    {%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
+      <div class="predictive-search__pages-wrapper">
+        <h2
+          id="predictive-search-pages-desktop"
+          class="predictive-search__heading text-body caption-with-letter-spacing"
+        >
+          {{- 'templates.search.pages' | t -}}
+        </h2>
+        <ul
+          id="predictive-search-results-pages-list-desktop"
+          class="predictive-search__results-list list-unstyled"
+          role="group"
+          aria-labelledby="predictive-search-pages-desktop"
+        >
+          {%- for page in predictive_search.resources.pages -%}
+            <li
+              id="predictive-search-option-page-desktop-{{ forloop.index }}"
+              class="predictive-search__list-item"
+              role="option"
+              aria-selected="false"
+            >
+              <a href="{{ page.url }}" class="predictive-search__item link link--text" tabindex="-1">
+                <div class="predictive-search__item-content predictive-search__item-content--centered">
+                  <p class="predictive-search__item-heading h5">{{ page.title }}</p>
+                </div>
+              </a>
+            </li>
+          {%- endfor -%}
+          {%- for article in predictive_search.resources.articles -%}
+            <li
+              id="predictive-search-option-article-desktop-{{ forloop.index }}"
+              class="predictive-search__list-item"
+              role="option"
+              aria-selected="false"
+            >
+              <a href="{{ article.url }}" class="predictive-search__item link link--text" tabindex="-1">
+                <div class="predictive-search__item-content predictive-search__item-content--centered">
+                  <p class="predictive-search__item-heading h5">{{ article.title }}</p>
+                </div>
+              </a>
+            </li>
+          {%- endfor -%}
+        </ul>
+      </div>
+    {%- endif -%}
+    {%- if first_column_results_size > 0 -%}
+      </div>
+    {%- endif -%}
+    {%- if predictive_search.resources.products.size > 0
+      or predictive_search.resources.articles.size > 0
+      or predictive_search.resources.pages.size > 0
+    -%}
+      <div class="predictive-search__result-group">
+        {%- if predictive_search.resources.products.size > 0 -%}
+          <div>
+            <h2
+              id="predictive-search-products"
+              class="predictive-search__heading text-body caption-with-letter-spacing"
+            >
+              {{- 'templates.search.products' | t -}}
+            </h2>
+            <ul
+              id="predictive-search-results-products-list"
+              class="predictive-search__results-list list-unstyled"
+              role="group"
+              aria-labelledby="predictive-search-products"
+            >
+              {%- for product in predictive_search.resources.products -%}
+                <li
+                  id="predictive-search-option-product-{{ forloop.index }}"
+                  class="predictive-search__list-item"
+                  role="option"
+                  aria-selected="false"
+                >
+                  <a
+                    href="{{ product.url }}"
+                    class="predictive-search__item predictive-search__item--link-with-thumbnail link link--text"
+                    tabindex="-1"
+                  >
+                    {%- if product.featured_media != blank -%}
+                      <img
+                        class="predictive-search__image"
+                        src="{{ product.featured_media | image_url: width: 150 }}"
+                        alt="{{ product.featured_media.alt }}"
+                        width="50"
+                        height="{{ 50 | divided_by: product.featured_media.preview_image.aspect_ratio }}"
+                      >
+                    {%- endif -%}
+                    <div class="predictive-search__item-content{% unless settings.predictive_search_show_vendor or settings.predictive_search_show_price %} predictive-search__item-content--centered{% endunless %}">
+                      {%- if settings.predictive_search_show_vendor -%}
+                        <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
+                        <div class="predictive-search__item-vendor caption-with-letter-spacing">
+                          {{ product.vendor }}
+                        </div>
+                      {%- endif -%}
+                      <p class="predictive-search__item-heading h5">{{ product.title }}</p>
+                      {%- if settings.predictive_search_show_price -%}
+                        {% render 'price', product: product, use_variant: true, show_badges: false %}
                       {%- endif -%}
-                      <div class="predictive-search__item-content{% unless settings.predictive_search_show_vendor or settings.predictive_search_show_price %} predictive-search__item-content--centered{% endunless %}">
-                        {%- if settings.predictive_search_show_vendor -%}
-                          <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
-                          <div class="predictive-search__item-vendor caption-with-letter-spacing">{{ product.vendor }}</div>
-                        {%- endif -%}
-                        <p class="predictive-search__item-heading h5">{{ product.title }}
-                        </p>
-                        {%- if settings.predictive_search_show_price -%}
-                          {% render 'price', product: product, use_variant: true, show_badges: false %}
-                        {%- endif -%}
-                      </div>
-                    </a>
-                  </li>
-                {%- endfor -%}
-              </ul>
-            </div>
-          {%- endif -%}
-          {%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
-            <div class="predictive-search__pages-wrapper">
-              <h2 id="predictive-search-pages-mobile" class="predictive-search__heading text-body caption-with-letter-spacing">
-                {{- 'templates.search.pages' | t -}}
-              </h2>
-              <ul id="predictive-search-results-pages-list-mobile" class="predictive-search__results-list list-unstyled" role="group" aria-labelledby="predictive-search-pages-mobile">
-                {%- for page in predictive_search.resources.pages -%}
-                  <li id="predictive-search-option-page-mobile-{{ forloop.index }}" class="predictive-search__list-item" role="option" aria-selected="false">
-                    <a href="{{ page.url }}" class="predictive-search__item link link--text" tabindex="-1">
-                      <div class="predictive-search__item-content predictive-search__item-content--centered">
-                        <p class="predictive-search__item-heading h5">{{ page.title }}</p>
-                      </div>
-                    </a>
-                  </li>
-                {%- endfor -%}
-                {%- for article in predictive_search.resources.articles -%}
-                  <li id="predictive-search-option-article-mobile-{{ forloop.index }}" class="predictive-search__list-item" role="option" aria-selected="false">
-                    <a href="{{ article.url }}" class="predictive-search__item link link--text" tabindex="-1">
-                      <div class="predictive-search__item-content predictive-search__item-content--centered">
-                        <p class="predictive-search__item-heading h5">{{ article.title }}</p>
-                      </div>
-                    </a>
-                  </li>
-                {%- endfor -%}
-              </ul>
-            </div>
-          {%- endif -%}
-        </div>
-      {%- endif -%}
+                    </div>
+                  </a>
+                </li>
+              {%- endfor -%}
+            </ul>
+          </div>
+        {%- endif -%}
+        {%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
+          <div class="predictive-search__pages-wrapper">
+            <h2
+              id="predictive-search-pages-mobile"
+              class="predictive-search__heading text-body caption-with-letter-spacing"
+            >
+              {{- 'templates.search.pages' | t -}}
+            </h2>
+            <ul
+              id="predictive-search-results-pages-list-mobile"
+              class="predictive-search__results-list list-unstyled"
+              role="group"
+              aria-labelledby="predictive-search-pages-mobile"
+            >
+              {%- for page in predictive_search.resources.pages -%}
+                <li
+                  id="predictive-search-option-page-mobile-{{ forloop.index }}"
+                  class="predictive-search__list-item"
+                  role="option"
+                  aria-selected="false"
+                >
+                  <a href="{{ page.url }}" class="predictive-search__item link link--text" tabindex="-1">
+                    <div class="predictive-search__item-content predictive-search__item-content--centered">
+                      <p class="predictive-search__item-heading h5">{{ page.title }}</p>
+                    </div>
+                  </a>
+                </li>
+              {%- endfor -%}
+              {%- for article in predictive_search.resources.articles -%}
+                <li
+                  id="predictive-search-option-article-mobile-{{ forloop.index }}"
+                  class="predictive-search__list-item"
+                  role="option"
+                  aria-selected="false"
+                >
+                  <a href="{{ article.url }}" class="predictive-search__item link link--text" tabindex="-1">
+                    <div class="predictive-search__item-content predictive-search__item-content--centered">
+                      <p class="predictive-search__item-heading h5">{{ article.title }}</p>
+                    </div>
+                  </a>
+                </li>
+              {%- endfor -%}
+            </ul>
+          </div>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
     {%- if first_column_results_size > 0 or predictive_search.resources.products.size > 0 -%}
       </div>
     {%- endif -%}
 
-    <div class="predictive-search__loading-state" aria-hidden="true">
-      <svg
-        aria-hidden="true"
-        focusable="false"
-        class="spinner"
-        viewBox="0 0 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-      </svg>
-    </div>
+    {%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
 
     <div id="predictive-search-option-search-keywords" class="predictive-search__search-for-button">
       <button
@@ -152,7 +228,9 @@
         role="option"
         aria-selected="false"
       >
-        <span data-predictive-search-search-for-text>{{ 'templates.search.search_for' | t: terms: predictive_search.terms }}</span>
+        <span data-predictive-search-search-for-text>
+          {{- 'templates.search.search_for' | t: terms: predictive_search.terms -}}
+        </span>
         {% render 'icon-arrow' %}
       </button>
     </div>
diff --git a/sections/quick-order-list.liquid b/sections/quick-order-list.liquid
index 672d791524c..1a78b2b1e49 100644
--- a/sections/quick-order-list.liquid
+++ b/sections/quick-order-list.liquid
@@ -142,7 +142,7 @@
                 <span class="quick-order-list__button-text">{{- 'sections.quick_order_list.view_cart' | t -}}</span>
               </a>
               <div class="variant-remove-total">
-                {%- render 'loading-overlay' -%}
+                {%- render 'loading-spinner' -%}
                 <quick-order-list-remove-all-button
                   class="no-js-hidden"
                   data-action="confirm"
@@ -204,7 +204,7 @@
                 <span class="quick-order-list__button-text">{{- 'sections.quick_order_list.view_cart' | t -}}</span>
               </a>
               <div class="variant-remove-total">
-                {%- render 'loading-overlay' -%}
+                {%- render 'loading-spinner' -%}
                 <quick-order-list-remove-all-button
                   class="no-js-hidden"
                   data-action="confirm"
diff --git a/snippets/buy-buttons.liquid b/snippets/buy-buttons.liquid
index 1d7cc6c146f..15d8d48ff40 100644
--- a/snippets/buy-buttons.liquid
+++ b/snippets/buy-buttons.liquid
@@ -91,17 +91,7 @@
                 {{ 'products.product.add_to_cart' | t }}
               {%- endif -%}
             </span>
-            <div class="loading-overlay__spinner hidden">
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                class="spinner"
-                viewBox="0 0 66 66"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-              </svg>
-            </div>
+            {%- render 'loading-spinner' -%}
           </button>
           {%- if show_dynamic_checkout -%}
             {{ form | payment_button }}
diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
index 5935fe18a27..1d83c18f98c 100644
--- a/snippets/card-product.liquid
+++ b/snippets/card-product.liquid
@@ -231,17 +231,7 @@
                   {%- if horizontal_quick_add -%}
                     <span class="icon-wrap">{% render 'icon-arrow' %}</span>
                   {%- endif -%}
-                  <div class="loading-overlay__spinner hidden">
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      class="spinner"
-                      viewBox="0 0 66 66"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-                    </svg>
-                  </div>
+                  {%- render 'loading-spinner' -%}
                 </button>
               </modal-opener>
               <quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
@@ -307,17 +297,7 @@
                     {%- if horizontal_quick_add -%}
                       <span class="icon-wrap">{% render 'icon-plus' %}</span>
                     {%- endif -%}
-                    <div class="loading-overlay__spinner hidden">
-                      <svg
-                        aria-hidden="true"
-                        focusable="false"
-                        class="spinner"
-                        viewBox="0 0 66 66"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-                      </svg>
-                    </div>
+                    {%- render 'loading-spinner' -%}
                   </button>
                 {%- endform -%}
               </product-form>
diff --git a/snippets/cart-drawer.liquid b/snippets/cart-drawer.liquid
index 88d80ea40f9..c12ac7c131d 100644
--- a/snippets/cart-drawer.liquid
+++ b/snippets/cart-drawer.liquid
@@ -219,20 +219,7 @@
                         </td>
 
                         <td class="cart-item__totals right" role="cell" headers="CartDrawer-ColumnTotal">
-                          <div class="loading-overlay hidden">
-                            <div class="loading-overlay__spinner">
-                              <svg
-                                aria-hidden="true"
-                                focusable="false"
-                                class="spinner"
-                                viewBox="0 0 66 66"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-                              </svg>
-                            </div>
-                          </div>
-
+                          {%- render 'loading-spinner' -%}
                           <div class="cart-item__price-wrapper">
                             {%- if item.original_line_price != item.final_line_price -%}
                               <div class="cart-item__discounted-prices">
diff --git a/snippets/facets.liquid b/snippets/facets.liquid
index 219bc09ad9a..fd375b96438 100644
--- a/snippets/facets.liquid
+++ b/snippets/facets.liquid
@@ -513,17 +513,7 @@
                 {%- endif -%}
               </span>
             </h2>
-            <div class="loading-overlay__spinner">
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                class="spinner"
-                viewBox="0 0 66 66"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-              </svg>
-            </div>
+            {%- render 'loading-spinner' -%}
           </div>
         {%- endif -%}
       </form>
@@ -1047,17 +1037,7 @@
         {%- endif -%}
       </span>
     </h2>
-    <div class="loading-overlay__spinner">
-      <svg
-        aria-hidden="true"
-        focusable="false"
-        class="spinner"
-        viewBox="0 0 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-      </svg>
-    </div>
+    {%- render 'loading-spinner' -%}
   </div>
   {%- if filter_type == 'drawer' -%}
     <facet-filters-form class="facets facets-pill small-hide">
diff --git a/snippets/header-search.liquid b/snippets/header-search.liquid
index eae0fd67798..57215645914 100644
--- a/snippets/header-search.liquid
+++ b/snippets/header-search.liquid
@@ -10,7 +10,11 @@
 
 <details-modal class="header__search">
   <details>
-    <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-haspopup="dialog" aria-label="{{ 'general.search.search' | t }}">
+    <summary
+      class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle"
+      aria-haspopup="dialog"
+      aria-label="{{ 'general.search.search' | t }}"
+    >
       <span>
         <svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false">
           <use href="#icon-search">
@@ -20,67 +24,80 @@
         </svg>
       </span>
     </summary>
-    <div class="search-modal modal__content gradient" role="dialog" aria-modal="true" aria-label="{{ 'general.search.search' | t }}">
+    <div
+      class="search-modal modal__content gradient"
+      role="dialog"
+      aria-modal="true"
+      aria-label="{{ 'general.search.search' | t }}"
+    >
       <div class="modal-overlay"></div>
-      <div class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}" tabindex="-1">
+      <div
+        class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}"
+        tabindex="-1"
+      >
         {%- if settings.predictive_search_enabled -%}
           <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
         {%- else -%}
           <search-form class="search-modal__form">
         {%- endif -%}
-            <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
-              <div class="field">
-                <input class="search__input field__input"
-                  id="{{ input_id }}"
-                  type="search"
-                  name="q"
-                  value="{{ search.terms | escape }}"
-                  placeholder="{{ 'general.search.search' | t }}"
-                  {%- if settings.predictive_search_enabled -%}
-                    role="combobox"
-                    aria-expanded="false"
-                    aria-owns="predictive-search-results"
-                    aria-controls="predictive-search-results"
-                    aria-haspopup="listbox"
-                    aria-autocomplete="list"
-                    autocorrect="off"
-                    autocomplete="off"
-                    autocapitalize="off"
-                    spellcheck="false"
-                  {%- endif -%}
-                >
-                <label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
-                <input type="hidden" name="options[prefix]" value="last">
-                <button type="reset" class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}" aria-label="{{ 'general.search.reset' | t }}">
-                  <svg class="icon icon-close" aria-hidden="true" focusable="false">
-                    <use xlink:href="#icon-reset">
-                  </svg>
-                </button>
-                <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
-                  <svg class="icon icon-search" aria-hidden="true" focusable="false">
-                    <use href="#icon-search">
-                  </svg>
-                </button>
-              </div>
-
+        <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
+          <div class="field">
+            <input
+              class="search__input field__input"
+              id="{{ input_id }}"
+              type="search"
+              name="q"
+              value="{{ search.terms | escape }}"
+              placeholder="{{ 'general.search.search' | t }}"
               {%- if settings.predictive_search_enabled -%}
-                <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
-                  <div class="predictive-search__loading-state">
-                    <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-                      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-                    </svg>
-                  </div>
-                </div>
-
-                <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
+                role="combobox"
+                aria-expanded="false"
+                aria-owns="predictive-search-results"
+                aria-controls="predictive-search-results"
+                aria-haspopup="listbox"
+                aria-autocomplete="list"
+                autocorrect="off"
+                autocomplete="off"
+                autocapitalize="off"
+                spellcheck="false"
               {%- endif -%}
-            </form>
+            >
+            <label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
+            <input type="hidden" name="options[prefix]" value="last">
+            <button
+              type="reset"
+              class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
+              aria-label="{{ 'general.search.reset' | t }}"
+            >
+              <svg class="icon icon-close" aria-hidden="true" focusable="false">
+                <use xlink:href="#icon-reset">
+              </svg>
+            </button>
+            <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
+              <svg class="icon icon-search" aria-hidden="true" focusable="false">
+                <use href="#icon-search">
+              </svg>
+            </button>
+          </div>
+
           {%- if settings.predictive_search_enabled -%}
-            </predictive-search>
-          {%- else -%}
-            </search-form>
+            <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
+              {%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
+            </div>
+
+            <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
           {%- endif -%}
-        <button type="button" class="search-modal__close-button modal__close-button link link--text focus-inset" aria-label="{{ 'accessibility.close' | t }}">
+        </form>
+        {%- if settings.predictive_search_enabled -%}
+          </predictive-search>
+        {%- else -%}
+          </search-form>
+        {%- endif -%}
+        <button
+          type="button"
+          class="search-modal__close-button modal__close-button link link--text focus-inset"
+          aria-label="{{ 'accessibility.close' | t }}"
+        >
           <svg class="icon icon-close" aria-hidden="true" focusable="false">
             <use href="#icon-close">
           </svg>
diff --git a/snippets/loading-overlay.liquid b/snippets/loading-overlay.liquid
deleted file mode 100644
index d6a86eb084c..00000000000
--- a/snippets/loading-overlay.liquid
+++ /dev/null
@@ -1,15 +0,0 @@
-{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
-
-<div class="loading-overlay hidden">
-  <div class="loading-overlay__spinner">
-    <svg
-      aria-hidden="true"
-      focusable="false"
-      class="spinner"
-      viewBox="0 0 66 66"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-    </svg>
-  </div>
-</div>
diff --git a/snippets/loading-spinner.liquid b/snippets/loading-spinner.liquid
new file mode 100644
index 00000000000..bd40d3d4bb6
--- /dev/null
+++ b/snippets/loading-spinner.liquid
@@ -0,0 +1,22 @@
+{% comment %}
+  Renders loading-spinner.
+  Accepts:
+    - class: {string} css classes to replace the default ones (optional)
+
+  Usage:
+  {% render 'loading-spinner' %}
+{% endcomment %}
+
+{{ 'component-loading-spinner.css' | asset_url | stylesheet_tag }}
+
+<div class="{% if class %}{{ class }}{% else %}loading__spinner hidden{% endif %}">
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    class="spinner"
+    viewBox="0 0 66 66"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
+  </svg>
+</div>
diff --git a/snippets/product-thumbnail.liquid b/snippets/product-thumbnail.liquid
index 711fe41e891..05b2effbee8 100644
--- a/snippets/product-thumbnail.liquid
+++ b/snippets/product-thumbnail.liquid
@@ -90,17 +90,7 @@
         endcase
       -%}
     </span>
-    <div class="loading-overlay__spinner hidden">
-      <svg
-        aria-hidden="true"
-        focusable="false"
-        class="spinner"
-        viewBox="0 0 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle class="path" fill="none" stroke-width="4" cx="33" cy="33" r="30"></circle>
-      </svg>
-    </div>
+    {%- render 'loading-spinner' -%}
     <div class="product__media media media--transparent">
       {{ media.preview_image | image_url: width: 1946 | image_tag:
         class: image_class,
diff --git a/snippets/quick-order-list-row.liquid b/snippets/quick-order-list-row.liquid
index 84ccaffec1d..60507696860 100644
--- a/snippets/quick-order-list-row.liquid
+++ b/snippets/quick-order-list-row.liquid
@@ -160,7 +160,7 @@
   </td>
 
   <td class="variant-item__totals right large-up-hide">
-    {%- render 'loading-overlay' -%}
+    {%- render 'loading-spinner' -%}
     {% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
     {% # theme-check-disable %}
     <span class="price">{{ cart | line_items_for: item | sum: 'original_line_price' | money }}</span>
@@ -429,7 +429,7 @@
     {%- endif -%}
   </td>
   <td class="variant-item__totals right small-hide medium-hide">
-    {%- render 'loading-overlay' -%}
+    {%- render 'loading-spinner' -%}
     {% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
     {% # theme-check-disable %}
     <span class="price">{{ cart | line_items_for: item | sum: 'original_line_price' | money }}</span>

From 069c198c18dc8300e7caeb70d86f02b509aafc83 Mon Sep 17 00:00:00 2001
From: Ludo <ludo.segura@shopify.com>
Date: Thu, 19 Oct 2023 08:35:59 -0400
Subject: [PATCH 18/58] [Sliders] Regression fix. Apply CSS only when necessary
 in theme editor (#3070)

* [Sliders] Regretion fix. Apply CSS only when necessary in theme editor

* change of approach

* add comment to explain CSS
---
 assets/component-slider.css      | 4 ----
 sections/announcement-bar.liquid | 6 ++++++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/assets/component-slider.css b/assets/component-slider.css
index 536fe288bfd..a9c911827fb 100644
--- a/assets/component-slider.css
+++ b/assets/component-slider.css
@@ -38,10 +38,6 @@ slider-component.slider-component-full-width {
   padding-bottom: 0;
 }
 
-.slider__slide[aria-hidden="true"] {
-  visibility: hidden;
-}
-
 @media screen and (max-width: 749px) {
   .slider.slider--mobile {
     position: relative;
diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid
index 92426f1261d..6b6f2d90d85 100644
--- a/sections/announcement-bar.liquid
+++ b/sections/announcement-bar.liquid
@@ -126,6 +126,12 @@
       </slideshow-component>
       {%- if request.design_mode -%}
         <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
+        <style>
+          /* theme editor power preview fix */
+          .announcement-bar-slider .slider__slide[aria-hidden='true'] {
+            visibility: hidden;
+          }
+        </style>
       {%- endif -%}
     {%- endif -%}
     <div class="localization-wrapper">

From fac0e41c4daf16b1a74fbfe38f0320cc1d4da59b Mon Sep 17 00:00:00 2001
From: Jason Addleman <jason.addleman@shopify.com>
Date: Thu, 19 Oct 2023 18:00:03 -0400
Subject: [PATCH 19/58] Add visual representation for filters (#3045)

---
 assets/component-facets.css         |  84 ++++++++++---
 assets/component-visual-display.css |  89 ++++++++++++++
 layout/theme.liquid                 |  14 +++
 snippets/facets.liquid              | 175 +++++++++++++++++++---------
 snippets/visual-display.liquid      |  45 +++++++
 5 files changed, 338 insertions(+), 69 deletions(-)
 create mode 100644 assets/component-visual-display.css
 create mode 100644 snippets/visual-display.liquid

diff --git a/assets/component-facets.css b/assets/component-facets.css
index 61146e49505..2842d43f325 100644
--- a/assets/component-facets.css
+++ b/assets/component-facets.css
@@ -272,11 +272,42 @@
   padding: 0.5rem 2rem;
 }
 
+.facets-layout-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  text-align: center;
+  padding: 2rem 2.4rem;
+  gap: 3rem 1rem;
+}
+
+.facets-layout-grid.facets__list--vertical {
+  padding: 1rem 0;
+}
+
 .facets__item {
   display: flex;
   align-items: center;
 }
 
+/* Hover/focus state */
+.facets-layout-list .facets__label:hover .facet-checkbox__text,
+.facets-layout-list input:focus ~ .facet-checkbox__text {
+  text-decoration: underline;
+}
+
+.facets-layout-grid > * {
+  align-items: flex-start;
+}
+
+.facets-layout-grid .visual-display-parent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 0;
+  height: 100%;
+  font-size: 1.3rem;
+}
+
 .facets__item label,
 .facets__item input[type='checkbox'] {
   cursor: pointer;
@@ -291,6 +322,18 @@
   word-break: break-word;
 }
 
+/* Hover, active, and focus states */
+:is(.facets__label:hover, .facets__label.active, .facets__label:has(:focus-visible)) {
+  color: rgba(var(--color-foreground), 1);
+}
+
+/* Focus states for older browsers */
+@supports not selector(:has(a, b)) {
+  .facets__label:focus-within {
+    color: rgba(var(--color-foreground), 1);
+  }
+}
+
 .facet-checkbox input[type='checkbox'] {
   position: absolute;
   opacity: 1;
@@ -303,6 +346,23 @@
   -webkit-appearance: none;
 }
 
+.facets-layout-grid input[type='checkbox'] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.facets__visual-display-wrapper {
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
 .no-js .facet-checkbox input[type='checkbox'] {
   z-index: 0;
 }
@@ -336,8 +396,10 @@
   }
 }
 
-.facet-checkbox--disabled {
-  color: rgba(var(--color-foreground), 0.4);
+.facet-checkbox--disabled,
+.mobile-facets__label--disabled {
+  opacity: 0.4;
+  pointer-events: none;
 }
 
 .facets__price {
@@ -744,13 +806,6 @@ details.menu-opening .mobile-facets__close svg {
 }
 
 .mobile-facets__highlight {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.mobile-facets__checkbox:checked + .mobile-facets__highlight {
-  visibility: visible;
-  opacity: 1;
   position: absolute;
   top: 0px;
   left: 0px;
@@ -758,6 +813,13 @@ details.menu-opening .mobile-facets__close svg {
   bottom: 0px;
   display: block;
   background-color: rgba(var(--color-foreground), 0.04);
+  opacity: 0;
+  visibility: hidden;
+}
+
+.mobile-facets__checkbox:checked + .mobile-facets__highlight {
+  opacity: 1;
+  visibility: visible;
 }
 
 .mobile-facets__summary {
@@ -854,10 +916,6 @@ input.mobile-facets__checkbox {
   display: block;
 }
 
-.mobile-facets__label--disabled {
-  opacity: 0.5;
-}
-
 .mobile-facets__footer {
   border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
   padding: 2rem;
diff --git a/assets/component-visual-display.css b/assets/component-visual-display.css
new file mode 100644
index 00000000000..19a49bfa8d1
--- /dev/null
+++ b/assets/component-visual-display.css
@@ -0,0 +1,89 @@
+.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.1rem;
+  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%;
+}
+
+.visual-display--presentation-swatch .visual-display__image {
+  object-fit: cover;
+}
diff --git a/layout/theme.liquid b/layout/theme.liquid
index 1e98e6c18cf..31feb21cb81 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -62,7 +62,21 @@
         {% else %}
           --gradient-background: {{ scheme.settings.background }};
         {% endif %}
+
+        {% liquid
+          assign background_color = scheme.settings.background
+          assign background_color_brightness = background_color | color_brightness
+          if background_color_brightness <= 26
+            assign background_color_contrast = background_color | color_lighten: 50
+          elsif background_color_brightness <= 65
+            assign background_color_contrast = background_color | color_lighten: 5
+          else
+            assign background_color_contrast = background_color | color_darken: 25
+          endif
+        %}
+
         --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
+        --color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
         --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
         --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
         --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
diff --git a/snippets/facets.liquid b/snippets/facets.liquid
index fd375b96438..f2a3f6b96a1 100644
--- a/snippets/facets.liquid
+++ b/snippets/facets.liquid
@@ -13,6 +13,7 @@
 {% endcomment %}
 
 {{ 'component-show-more.css' | asset_url | stylesheet_tag }}
+{{ 'component-visual-display.css' | asset_url | stylesheet_tag }}
 
 {%- liquid
   assign sort_by = results.sort_by | default: results.default_sort_by
@@ -111,7 +112,20 @@
             <script src="{{ 'show-more.js' | asset_url }}" defer="defer"></script>
             {% comment %} Filters for both horizontal and vertical filter {% endcomment %}
             {%- for filter in results.filters -%}
-              {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%}
+              {% liquid
+                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
+                endcase
+              %}
+
               {% case filter.type %}
                 {% when 'boolean', 'list' %}
                   <details
@@ -157,14 +171,21 @@
                       <fieldset class="facets-wrap parent-wrap {% if filter_type == 'vertical' %} facets-wrap-vertical{% endif %}">
                         <legend class="visually-hidden">{{ filter.label | escape }}</legend>
                         <ul
-                          class="{% if filter_type != 'vertical' %} facets__list{% endif %} list-unstyled no-js-hidden"
+                          class="{{ visual_layout_class }}{% if filter_type == 'vertical' %} facets__list--vertical{% else %} facets__list{% endif %} list-unstyled no-js-hidden"
                           role="list"
                         >
                           {%- for value in filter.values -%}
-                            <li class="list-menu__item facets__item{% if forloop.index > 10 and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
+                            {% liquid
+                              assign is_disabled = false
+                              if value.count == 0 and value.active == false
+                                assign is_disabled = true
+                              endif
+                            %}
+
+                            <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="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}"
+                                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"
@@ -174,38 +195,50 @@
                                   {% if value.active %}
                                     checked
                                   {% endif %}
-                                  {% if value.count == 0 and value.active == false %}
+                                  {% 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>
+                                {% if has_visual_display %}
+                                  <div class="facets__visual-display-wrapper">
+                                    {% render 'visual-display',
+                                      type: value.display.type,
+                                      value: value.display.value,
+                                      presentation: filter.presentation
+                                    %}
+                                  </div>
+                                {% else %}
+                                  <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>
+                                {% endif %}
 
-                                <span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
+                                <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 -%}
@@ -284,7 +317,7 @@
                           {%- endfor -%}
                         </ul>
                       </fieldset>
-                      {%- if filter.values.size > 10 and filter_type == 'vertical' -%}
+                      {%- if filter.values.size > show_more_number and filter_type == 'vertical' -%}
                         <show-more-button>
                           <button
                             class="button-show-more link underlined-link no-js-hidden"
@@ -631,6 +664,17 @@
             <div class="mobile-facets__main has-submenu gradient">
               {%- if enable_filtering -%}
                 {%- for filter in results.filters -%}
+                  {% 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
+                  %}
+
                   {% case filter.type %}
                     {% when 'boolean', 'list' %}
                       <details
@@ -657,12 +701,19 @@
                             {% render 'icon-arrow' %}
                             {{ filter.label | escape }}
                           </button>
-                          <ul class="mobile-facets__list list-unstyled" role="list">
+                          <ul class="{{ visual_layout_class }} mobile-facets__list list-unstyled" role="list">
                             {%- for value in filter.values -%}
+                              {% liquid
+                                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="mobile-facets__label{% if value.count == 0 and value.active == false %} mobile-facets__label--disabled{% endif %}"
+                                  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"
@@ -673,36 +724,48 @@
                                     {% if value.active %}
                                       checked
                                     {% endif %}
-                                    {% if value.count == 0 and value.active == false %}
+                                    {% if is_disabled %}
                                       disabled
                                     {% endif %}
                                   >
 
-                                  <span class="mobile-facets__highlight"></span>
+                                  {% if has_visual_display %}
+                                    <div class="facets__visual-display-wrapper">
+                                      {% render 'visual-display',
+                                        type: value.display.type,
+                                        value: value.display.value,
+                                        presentation: filter.presentation
+                                      %}
+                                    </div>
+                                  {% else %}
+                                    <span class="mobile-facets__highlight"></span>
 
-                                  <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>
+                                  {% endif %}
 
-                                  <span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
+                                  <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' -%}
diff --git a/snippets/visual-display.liquid b/snippets/visual-display.liquid
new file mode 100644
index 00000000000..57fd02fd251
--- /dev/null
+++ b/snippets/visual-display.liquid
@@ -0,0 +1,45 @@
+{% 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>

From 168ba32fae2a1c27b6404fd46da0f4235e082699 Mon Sep 17 00:00:00 2001
From: Patrick Racicot <patrick.racicot@shopify.com>
Date: Fri, 20 Oct 2023 13:44:54 -0400
Subject: [PATCH 20/58] [Facets] update visual representation of facets
 operators (#3061)

---
 assets/component-facets.css | 42 +++++++++++++++++++++++++++----
 assets/facets.js            |  8 ++++--
 locales/bg-BG.json          |  3 ++-
 locales/cs.json             |  3 ++-
 locales/da.json             |  3 ++-
 locales/de.json             |  3 ++-
 locales/el.json             |  3 ++-
 locales/en.default.json     |  1 +
 locales/es.json             |  3 ++-
 locales/fi.json             |  3 ++-
 locales/fr.json             |  3 ++-
 locales/hr-HR.json          |  3 ++-
 locales/hu.json             |  3 ++-
 locales/id.json             |  3 ++-
 locales/it.json             |  3 ++-
 locales/ja.json             |  3 ++-
 locales/ko.json             |  3 ++-
 locales/lt-LT.json          |  3 ++-
 locales/nb.json             |  3 ++-
 locales/nl.json             |  3 ++-
 locales/pl.json             |  3 ++-
 locales/pt-BR.json          |  3 ++-
 locales/pt-PT.json          |  3 ++-
 locales/ro-RO.json          |  3 ++-
 locales/ru.json             |  3 ++-
 locales/sk-SK.json          |  3 ++-
 locales/sl-SI.json          |  3 ++-
 locales/sv.json             |  3 ++-
 locales/th.json             |  3 ++-
 locales/tr.json             |  3 ++-
 locales/vi.json             |  3 ++-
 locales/zh-CN.json          |  3 ++-
 locales/zh-TW.json          |  3 ++-
 snippets/facets.liquid      | 49 +++++++++++++++++++++++++++++++------
 34 files changed, 146 insertions(+), 44 deletions(-)

diff --git a/assets/component-facets.css b/assets/component-facets.css
index 2842d43f325..ca766b95d91 100644
--- a/assets/component-facets.css
+++ b/assets/component-facets.css
@@ -223,11 +223,34 @@
   transition: text-decoration var(--duration-short) ease;
 }
 
-.facets__summary:hover span {
+.facets__summary:hover .facets__summary-label {
   text-decoration: underline;
   text-underline-offset: 0.3rem;
 }
 
+.facets__and-helptext {
+  color: rgba(var(--color-foreground), 0.5);
+  font-size: calc(var(--font-heading-scale) * 1.2rem);
+  line-height: calc(var(--font-heading-scale) * 1.2rem);
+}
+
+@media only screen and (min-width: 750px) {
+  .facets__and-helptext {
+    font-size: calc(var(--font-heading-scale) * 1.3rem);
+    line-height: calc(var(--font-heading-scale) * 1.3rem);
+  }
+}
+
+.facets__disclosure .facets__and-helptext,
+.facets__disclosure-vertical .facets__and-helptext {
+  display: none;
+}
+
+.facets__disclosure[open] .facets__and-helptext,
+.facets__disclosure-vertical[open] .facets__and-helptext {
+  display: block;
+}
+
 .disclosure-has-popup[open] > .facets__summary::before {
   z-index: 2;
 }
@@ -268,6 +291,10 @@
   z-index: 1;
 }
 
+.facets__header facet-remove {
+  align-self: center;
+}
+
 .facets__list {
   padding: 0.5rem 2rem;
 }
@@ -768,14 +795,20 @@ details.menu-opening .mobile-facets__close svg {
 .mobile-facets__close-button {
   align-items: center;
   background-color: transparent;
-  display: flex;
   font-size: 1.4rem;
   font: inherit;
   letter-spacing: inherit;
   margin-top: 1.5rem;
   padding: 1.2rem 2.6rem;
   text-decoration: none;
-  width: calc(100% - 5.2rem);
+
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  text-align: start;
+}
+
+.mobile-facets__close-button > .facets__and-helptext {
+  grid-column-start: 2;
 }
 
 .no-js .mobile-facets__close-button {
@@ -830,8 +863,7 @@ details.menu-opening .mobile-facets__close svg {
   margin-left: auto;
 }
 
-.mobile-facets__summary > div,
-.facets__summary > div {
+.mobile-facets__summary > div {
   display: flex;
   align-items: center;
 }
diff --git a/assets/facets.js b/assets/facets.js
index 335a4adf8f4..0739a4b623e 100644
--- a/assets/facets.js
+++ b/assets/facets.js
@@ -126,13 +126,17 @@ class FacetFiltersForm extends HTMLElement {
 
     if (countsToRender) {
       const closestJSFilterID = event.target.closest('.js-filter').id;
-      const currentActiveID = document.activeElement.id;
 
       if (closestJSFilterID) {
         FacetFiltersForm.renderCounts(countsToRender, event.target.closest('.js-filter'));
         FacetFiltersForm.renderMobileCounts(countsToRender, document.getElementById(closestJSFilterID));
 
-        const newElementToActivate = document.getElementById(currentActiveID);
+        const newElementSelector = document
+          .getElementById(closestJSFilterID)
+          .classList.contains('mobile-facets__details')
+          ? `#${closestJSFilterID} .mobile-facets__close-button`
+          : `#${closestJSFilterID} .facets__summary`;
+        const newElementToActivate = document.querySelector(newElementSelector);
         if (newElementToActivate) newElementToActivate.focus();
       }
     }
diff --git a/locales/bg-BG.json b/locales/bg-BG.json
index 910661fb346..707695f7eaf 100644
--- a/locales/bg-BG.json
+++ b/locales/bg-BG.json
@@ -206,7 +206,8 @@
       "clear_filter": "Премахване на филтъра",
       "filter_selected_accessibility": "{{ type }} ({{ count }} избрани филтъра)",
       "show_more": "Покажи повече",
-      "show_less": "Покажи по-малко"
+      "show_less": "Покажи по-малко",
+      "filter_and_operator_subtitle": "Изрявняване за всички"
     }
   },
   "templates": {
diff --git a/locales/cs.json b/locales/cs.json
index 97a53661313..3da8a96f702 100644
--- a/locales/cs.json
+++ b/locales/cs.json
@@ -214,7 +214,8 @@
       "clear_filter": "Odebrat filtr",
       "filter_selected_accessibility": "{{ type }} (počet vybraných filtrů: {{ count }})",
       "show_more": "Zobrazit více",
-      "show_less": "Zobrazit méně"
+      "show_less": "Zobrazit méně",
+      "filter_and_operator_subtitle": "Shoda se všemi kritérii"
     }
   },
   "templates": {
diff --git a/locales/da.json b/locales/da.json
index 914a8452bd8..82a7a5755ff 100644
--- a/locales/da.json
+++ b/locales/da.json
@@ -206,7 +206,8 @@
       "clear_filter": "Fjern filter",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filtre er valgt)",
       "show_more": "Vis mere",
-      "show_less": "Vis mindre"
+      "show_less": "Vis mindre",
+      "filter_and_operator_subtitle": "Match alle"
     }
   },
   "templates": {
diff --git a/locales/de.json b/locales/de.json
index 2b3edf36f81..635924c1826 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -206,7 +206,8 @@
       "clear_filter": "Filter entfernen",
       "filter_selected_accessibility": "{{ type }} ({{ count }} Filter ausgewählt)",
       "show_more": "Mehr anzeigen",
-      "show_less": "Weniger anzeigen"
+      "show_less": "Weniger anzeigen",
+      "filter_and_operator_subtitle": "Allen entsprechen"
     }
   },
   "templates": {
diff --git a/locales/el.json b/locales/el.json
index 30776045aac..6a437a30ca2 100644
--- a/locales/el.json
+++ b/locales/el.json
@@ -206,7 +206,8 @@
       "clear_filter": "Κατάργηση φίλτρου",
       "filter_selected_accessibility": "{{ type }} (επιλέχθηκαν {{ count }} φίλτρα)",
       "show_more": "Εμφάνιση περισσότερων",
-      "show_less": "Εμφάνιση λιγότερων"
+      "show_less": "Εμφάνιση λιγότερων",
+      "filter_and_operator_subtitle": "Αντιστοιχεί με όλα"
     }
   },
   "templates": {
diff --git a/locales/en.default.json b/locales/en.default.json
index ba2cca63983..52ffeaee0ac 100644
--- a/locales/en.default.json
+++ b/locales/en.default.json
@@ -179,6 +179,7 @@
       "label": "Media gallery"
     },
     "facets": {
+      "filter_and_operator_subtitle": "Match all",
       "apply": "Apply",
       "clear": "Clear",
       "clear_all": "Remove all",
diff --git a/locales/es.json b/locales/es.json
index c7368208895..39c3dd65cd0 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -210,7 +210,8 @@
       "clear_filter": "Eliminar filtro",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filtros seleccionados)",
       "show_more": "Mostrar más",
-      "show_less": "Mostrar menos"
+      "show_less": "Mostrar menos",
+      "filter_and_operator_subtitle": "Seleccionar todos"
     }
   },
   "templates": {
diff --git a/locales/fi.json b/locales/fi.json
index b4d5b22e252..70ae6a5f8b8 100644
--- a/locales/fi.json
+++ b/locales/fi.json
@@ -206,7 +206,8 @@
       "clear_filter": "Poista suodatin",
       "filter_selected_accessibility": "{{ type }} ({{ count }} suodatinta valittu)",
       "show_more": "Näytä enemmän",
-      "show_less": "Näytä vähemmän"
+      "show_less": "Näytä vähemmän",
+      "filter_and_operator_subtitle": "Sovella kaikkia"
     }
   },
   "templates": {
diff --git a/locales/fr.json b/locales/fr.json
index 98d84318c4d..c7f6f0bb31d 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -210,7 +210,8 @@
       "clear_filter": "Supprimer le filtre",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filtres sélectionnés)",
       "show_more": "Afficher plus",
-      "show_less": "Afficher moins"
+      "show_less": "Afficher moins",
+      "filter_and_operator_subtitle": "Tout associer"
     }
   },
   "templates": {
diff --git a/locales/hr-HR.json b/locales/hr-HR.json
index 18bc326d681..848d266e1e0 100644
--- a/locales/hr-HR.json
+++ b/locales/hr-HR.json
@@ -210,7 +210,8 @@
       "clear_filter": "Ukloni filtar",
       "filter_selected_accessibility": "{{ type }} (broj odabranih filtra: {{ count }})",
       "show_more": "Prikaži više",
-      "show_less": "Prikaži manje"
+      "show_less": "Prikaži manje",
+      "filter_and_operator_subtitle": "Uskladi sve"
     }
   },
   "templates": {
diff --git a/locales/hu.json b/locales/hu.json
index 08bf50c0e0f..11998f287be 100644
--- a/locales/hu.json
+++ b/locales/hu.json
@@ -206,7 +206,8 @@
       "clear_filter": "Szűrő eltávolítása",
       "filter_selected_accessibility": "{{ type }} ({{ count }} szűrő kiválasztva)",
       "show_more": "Több részlet",
-      "show_less": "Kevesebb részlet"
+      "show_less": "Kevesebb részlet",
+      "filter_and_operator_subtitle": "Az összesnek megfelelő"
     }
   },
   "templates": {
diff --git a/locales/id.json b/locales/id.json
index 5ee952242c0..ffa05031138 100644
--- a/locales/id.json
+++ b/locales/id.json
@@ -206,7 +206,8 @@
       "clear_filter": "Hapus filter",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filter dipilih)",
       "show_more": "Selengkapnya",
-      "show_less": "Sembunyikan lainnya"
+      "show_less": "Sembunyikan lainnya",
+      "filter_and_operator_subtitle": "Cocokkan semua"
     }
   },
   "templates": {
diff --git a/locales/it.json b/locales/it.json
index d977d1316d8..cbc6581d1f1 100644
--- a/locales/it.json
+++ b/locales/it.json
@@ -210,7 +210,8 @@
       "clear_filter": "Rimuovi filtri",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filtri selezionati)",
       "show_more": "Mostra di più",
-      "show_less": "Mostra di meno"
+      "show_less": "Mostra di meno",
+      "filter_and_operator_subtitle": "Seleziona tutte"
     }
   },
   "templates": {
diff --git a/locales/ja.json b/locales/ja.json
index b88159eb4e8..4b0eb79c6d0 100644
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -206,7 +206,8 @@
       "clear_filter": "絞り込みを削除する",
       "filter_selected_accessibility": "{{ type }} ({{ count }}件のフィルターを選択済み)",
       "show_more": "さらに表示する",
-      "show_less": "表示を減らす"
+      "show_less": "表示を減らす",
+      "filter_and_operator_subtitle": "すべて一致"
     }
   },
   "templates": {
diff --git a/locales/ko.json b/locales/ko.json
index 8f3ef66223d..3ebce3b2f55 100644
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -206,7 +206,8 @@
       "clear_filter": "필터 제거",
       "filter_selected_accessibility": "{{ type }}({{ count }}개 필터 선택됨)",
       "show_more": "자세히 표시",
-      "show_less": "간단히 표시"
+      "show_less": "간단히 표시",
+      "filter_and_operator_subtitle": "모두 일치"
     }
   },
   "templates": {
diff --git a/locales/lt-LT.json b/locales/lt-LT.json
index 73241e2bb22..9a418b04fcd 100644
--- a/locales/lt-LT.json
+++ b/locales/lt-LT.json
@@ -214,7 +214,8 @@
       "clear_filter": "Pašalinti filtrą",
       "filter_selected_accessibility": "{{ type }} (pasirinkta filtrų: {{ count }})",
       "show_more": "Rodyti daugiau",
-      "show_less": "Rodyti mažiau"
+      "show_less": "Rodyti mažiau",
+      "filter_and_operator_subtitle": "Atitikti visas"
     }
   },
   "templates": {
diff --git a/locales/nb.json b/locales/nb.json
index c98a886ed0c..b2ca9a75b02 100644
--- a/locales/nb.json
+++ b/locales/nb.json
@@ -206,7 +206,8 @@
       "clear_filter": "Fjern filter",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filtre valgt)",
       "show_more": "Vis mer",
-      "show_less": "Vis færre"
+      "show_less": "Vis færre",
+      "filter_and_operator_subtitle": "Match alle"
     }
   },
   "templates": {
diff --git a/locales/nl.json b/locales/nl.json
index 2ed0207e0f9..e17599b2525 100644
--- a/locales/nl.json
+++ b/locales/nl.json
@@ -206,7 +206,8 @@
       "clear_filter": "Filter verwijderen",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filters geselecteerd)",
       "show_more": "Meer weergeven",
-      "show_less": "Minder weergeven"
+      "show_less": "Minder weergeven",
+      "filter_and_operator_subtitle": "Alles matchen"
     }
   },
   "templates": {
diff --git a/locales/pl.json b/locales/pl.json
index b7b2774877f..91636e3d695 100644
--- a/locales/pl.json
+++ b/locales/pl.json
@@ -214,7 +214,8 @@
       "clear_filter": "Usuń filtr",
       "filter_selected_accessibility": "{{ type }} (wybrano {{ count }} fitry(-ów))",
       "show_more": "Pokaż więcej",
-      "show_less": "Pokaż mniej"
+      "show_less": "Pokaż mniej",
+      "filter_and_operator_subtitle": "Dopasuj wszystko"
     }
   },
   "templates": {
diff --git a/locales/pt-BR.json b/locales/pt-BR.json
index 2b8a80638d6..6d469d3b33d 100644
--- a/locales/pt-BR.json
+++ b/locales/pt-BR.json
@@ -210,7 +210,8 @@
       "clear_filter": "Remover filtro",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filtros selecionados)",
       "show_more": "Exibir mais",
-      "show_less": "Exibir menos"
+      "show_less": "Exibir menos",
+      "filter_and_operator_subtitle": "Corresponder todos"
     }
   },
   "templates": {
diff --git a/locales/pt-PT.json b/locales/pt-PT.json
index 000b7f8aaea..ce5a34d8924 100644
--- a/locales/pt-PT.json
+++ b/locales/pt-PT.json
@@ -210,7 +210,8 @@
       "clear_filter": "Remover filtro",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filtros selecionados)",
       "show_more": "Mostrar mais",
-      "show_less": "Mostrar menos"
+      "show_less": "Mostrar menos",
+      "filter_and_operator_subtitle": "Corresponder todos"
     }
   },
   "templates": {
diff --git a/locales/ro-RO.json b/locales/ro-RO.json
index 829e15c6814..109951e65f5 100644
--- a/locales/ro-RO.json
+++ b/locales/ro-RO.json
@@ -210,7 +210,8 @@
       "clear_filter": "Elimină filtrul",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filtre selectate)",
       "show_more": "Afișează mai mult",
-      "show_less": "Afișează mai puțin"
+      "show_less": "Afișează mai puțin",
+      "filter_and_operator_subtitle": "Potrivește-le pe toate"
     }
   },
   "templates": {
diff --git a/locales/ru.json b/locales/ru.json
index ea78c1cd767..76935652797 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -214,7 +214,8 @@
       "clear_filter": "Снять фильтр",
       "filter_selected_accessibility": "{{ type }} (установлены фильтры: {{ count }})",
       "show_more": "Показать больше",
-      "show_less": "Показать меньше"
+      "show_less": "Показать меньше",
+      "filter_and_operator_subtitle": "Выбрать все"
     }
   },
   "templates": {
diff --git a/locales/sk-SK.json b/locales/sk-SK.json
index c3b1dbe4d65..4598c4593a0 100644
--- a/locales/sk-SK.json
+++ b/locales/sk-SK.json
@@ -214,7 +214,8 @@
       "clear_filter": "Odstrániť filter",
       "filter_selected_accessibility": "{{ type }} (vybrané filtre: {{ count }})",
       "show_more": "Zobraziť viac",
-      "show_less": "Zobraziť menej"
+      "show_less": "Zobraziť menej",
+      "filter_and_operator_subtitle": "Spĺňať všetko"
     }
   },
   "templates": {
diff --git a/locales/sl-SI.json b/locales/sl-SI.json
index fa6b4386ebb..e695adb41ea 100644
--- a/locales/sl-SI.json
+++ b/locales/sl-SI.json
@@ -214,7 +214,8 @@
       "clear_filter": "Odstrani filter",
       "filter_selected_accessibility": "{{ type }} (št. izbranih filtrov: {{ count }})",
       "show_more": "Prikaži več",
-      "show_less": "Prikaži manj"
+      "show_less": "Prikaži manj",
+      "filter_and_operator_subtitle": "Ustreza vsem"
     }
   },
   "templates": {
diff --git a/locales/sv.json b/locales/sv.json
index 409f03840cd..2424c7fd8b0 100644
--- a/locales/sv.json
+++ b/locales/sv.json
@@ -206,7 +206,8 @@
       "clear_filter": "Ta bort filter",
       "filter_selected_accessibility": "{{ type }} ({{ count }}) filter valda",
       "show_more": "Visa mer",
-      "show_less": "Visa mindre"
+      "show_less": "Visa mindre",
+      "filter_and_operator_subtitle": "Matcha alla"
     }
   },
   "templates": {
diff --git a/locales/th.json b/locales/th.json
index fee77f60164..64b09cdec86 100644
--- a/locales/th.json
+++ b/locales/th.json
@@ -206,7 +206,8 @@
       "clear_filter": "ลบตัวกรองออก",
       "filter_selected_accessibility": "{{ type }} (เลือกตัวกรองแล้ว {{ count }} รายการ)",
       "show_more": "แสดงมากขึ้น",
-      "show_less": "แสดงน้อยลง"
+      "show_less": "แสดงน้อยลง",
+      "filter_and_operator_subtitle": "ที่ตรงกันทั้งหมด"
     }
   },
   "templates": {
diff --git a/locales/tr.json b/locales/tr.json
index 99e4a2010be..b218cc58203 100644
--- a/locales/tr.json
+++ b/locales/tr.json
@@ -206,7 +206,8 @@
       "clear_filter": "Filtreyi kaldır",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filtre seçildi)",
       "show_more": "Daha fazla göster",
-      "show_less": "Daha az göster"
+      "show_less": "Daha az göster",
+      "filter_and_operator_subtitle": "Tümünü eşleştir"
     }
   },
   "templates": {
diff --git a/locales/vi.json b/locales/vi.json
index 64887d3f739..b2978fdb789 100644
--- a/locales/vi.json
+++ b/locales/vi.json
@@ -206,7 +206,8 @@
       "clear_filter": "Xóa bộ lọc",
       "filter_selected_accessibility": "{{ type }} (Đã chọn {{ count }} bộ lọc)",
       "show_more": "Hiển thị thêm",
-      "show_less": "Rút gọn"
+      "show_less": "Rút gọn",
+      "filter_and_operator_subtitle": "Phù hợp với tất cả"
     }
   },
   "templates": {
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 67bca53bef9..036f378fa5e 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -206,7 +206,8 @@
       "clear_filter": "删除筛选条件",
       "filter_selected_accessibility": "{{ type }}（已选择 {{ count }} 个筛选条件）",
       "show_more": "显示更多内容",
-      "show_less": "隐藏部分内容"
+      "show_less": "隐藏部分内容",
+      "filter_and_operator_subtitle": "匹配全部"
     }
   },
   "templates": {
diff --git a/locales/zh-TW.json b/locales/zh-TW.json
index 1278e63b1c6..1318b2d0e27 100644
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -206,7 +206,8 @@
       "clear_filter": "移除篩選條件",
       "filter_selected_accessibility": "{{ type }} (已選取 {{ count }} 個篩選條件)",
       "show_more": "顯示更多內容",
-      "show_less": "顯示較少內容"
+      "show_less": "顯示較少內容",
+      "filter_and_operator_subtitle": "完全符合"
     }
   },
   "templates": {
diff --git a/snippets/facets.liquid b/snippets/facets.liquid
index f2a3f6b96a1..55981d6879a 100644
--- a/snippets/facets.liquid
+++ b/snippets/facets.liquid
@@ -141,7 +141,7 @@
                       aria-label="{{ filter.label }} ({{ 'products.facets.filters_selected.one' | t: count: filter.active_values.size }})"
                     >
                       <div>
-                        <span>
+                        <span class="facets__summary-label">
                           {{- filter.label | escape }}
                           {%- if filter_type == 'vertical' -%}
                             <span class="facets__selected no-js-hidden{% if filter.active_values.size == 0 %} hidden{% endif %}">
@@ -149,6 +149,11 @@
                             >
                           {%- endif -%}
                         </span>
+                        {%- if filter_type == 'vertical' and filter.operator == 'AND' -%}
+                          <span class="facets__and-helptext">
+                            {{ 'products.facets.filter_and_operator_subtitle' | t }}
+                          </span>
+                        {%- endif -%}
                         {% render 'icon-caret' %}
                       </div>
                     </summary>
@@ -158,9 +163,16 @@
                     >
                       {%- if filter_type != 'vertical' -%}
                         <div class="facets__header">
-                          <span class="facets__selected no-js-hidden">
-                            {{- 'products.facets.filters_selected' | t: count: filter.active_values.size -}}
-                          </span>
+                          <div>
+                            <span class="facets__selected no-js-hidden">
+                              {{- 'products.facets.filters_selected' | t: count: filter.active_values.size -}}
+                            </span>
+                            {%- if filter.operator == 'AND' -%}
+                              <span class="facets__and-helptext">
+                                {{ 'products.facets.filter_and_operator_subtitle' | t }}
+                              </span>
+                            {%- endif -%}
+                          </div>
                           <facet-remove>
                             <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">
                               {{ 'products.facets.reset' | t }}
@@ -174,7 +186,16 @@
                           class="{{ visual_layout_class }}{% if filter_type == 'vertical' %} facets__list--vertical{% else %} facets__list{% endif %} list-unstyled no-js-hidden"
                           role="list"
                         >
-                          {%- for value in filter.values -%}
+                          {%- 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 is_disabled = false
                               if value.count == 0 and value.active == false
@@ -699,10 +720,24 @@
                             type="button"
                           >
                             {% render 'icon-arrow' %}
-                            {{ filter.label | escape }}
+                            <span>{{ filter.label | escape }}</span>
+                            {%- if filter.operator == 'AND' -%}
+                              <span class="facets__and-helptext">
+                                {{ 'products.facets.filter_and_operator_subtitle' | t }}
+                              </span>
+                            {%- endif -%}
                           </button>
                           <ul class="{{ visual_layout_class }} mobile-facets__list list-unstyled" role="list">
-                            {%- for value in filter.values -%}
+                            {%- 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 is_disabled = false
                                 if value.count == 0 and value.active == false

From bc86ac38dcbc3363b2ba30c4d695d65f00ddc603 Mon Sep 17 00:00:00 2001
From: Ludo <ludo.segura@shopify.com>
Date: Fri, 20 Oct 2023 14:22:58 -0400
Subject: [PATCH 21/58] [Collection template] Product grid color scheme picker
 (#3017)

* [Collection template] Product grid color scheme picker]

* move color setting up in the list

* support gradient
---
 sections/main-collection-product-grid.liquid | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
index a74a7547680..a863001d748 100644
--- a/sections/main-collection-product-grid.liquid
+++ b/sections/main-collection-product-grid.liquid
@@ -26,7 +26,7 @@
   }
 {%- endstyle -%}
 
-<div class="section-{{ section.id }}-padding">
+<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}">
   {%- paginate collection.products by section.settings.products_per_page -%}
     {% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
     {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
@@ -205,6 +205,13 @@
       "default": 4,
       "label": "t:sections.main-collection-product-grid.settings.columns_desktop.label"
     },
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "t:sections.all.colors.label",
+      "info": "t:sections.all.colors.has_cards_info",
+      "default": "background-1"
+    },
     {
       "type": "header",
       "content": "t:sections.main-collection-product-grid.settings.header__3.content"

From c7e455f61078cc200a8486eb168b01575164330d Mon Sep 17 00:00:00 2001
From: Ludo <ludo.segura@shopify.com>
Date: Mon, 23 Oct 2023 14:15:59 -0400
Subject: [PATCH 22/58] [Cart] Add color picker on cart page and in general
 cart settings (#3021)

* rebase final final

* use the update for the loading spinner

* add color picker for the cart drawer and cart popup

* fix spacing issues on cart page

* add gradient support

* address review comments

* adjust where the class is added. Fix gradient issue

* isolation needed for shadow

* add comment

* Remove unnecessary isolate

* use the isolate class instead
---
 assets/component-cart-drawer.css  |   5 -
 assets/component-cart-items.css   |  29 +-
 assets/component-cart.css         |   6 +-
 config/settings_schema.json       |   6 +
 sections/main-cart-footer.liquid  |  16 +-
 sections/main-cart-items.liquid   | 780 +++++++++++++++---------------
 snippets/cart-drawer.liquid       |   2 +-
 snippets/cart-notification.liquid |   4 +-
 8 files changed, 440 insertions(+), 408 deletions(-)

diff --git a/assets/component-cart-drawer.css b/assets/component-cart-drawer.css
index cd471dcd076..c3d7629b8d9 100644
--- a/assets/component-cart-drawer.css
+++ b/assets/component-cart-drawer.css
@@ -22,7 +22,6 @@
   padding: 0 1.5rem;
   border: 0.1rem solid rgba(var(--color-foreground), 0.2);
   border-right: 0;
-  background-color: rgb(var(--color-background));
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -33,7 +32,6 @@
 .drawer__inner-empty {
   height: 100%;
   padding: 0 1.5rem;
-  background-color: rgb(var(--color-background));
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -72,7 +70,6 @@ cart-drawer:not(.is-empty) .cart-drawer__collection {
 
 .drawer__header {
   position: relative;
-  background-color: rgb(var(--color-background));
   padding: 1.5rem 0;
   display: flex;
   justify-content: space-between;
@@ -114,7 +111,6 @@ cart-drawer:not(.is-empty) .cart-drawer__collection {
 }
 
 .drawer__footer {
-  background-color: rgb(var(--color-background));
   border-top: 0.1rem solid rgba(var(--color-foreground), 0.2);
   padding: 1.5rem 0;
 }
@@ -189,7 +185,6 @@ cart-drawer {
   position: sticky;
   top: 0;
   z-index: 2;
-  background-color: rgb(var(--color-background));
 }
 
 cart-drawer-items {
diff --git a/assets/component-cart-items.css b/assets/component-cart-items.css
index df548b88be1..23303e61776 100644
--- a/assets/component-cart-items.css
+++ b/assets/component-cart-items.css
@@ -1,3 +1,7 @@
+cart-items .title-wrapper-with-link {
+  margin-top: 0;
+}
+
 .cart-items td,
 .cart-items th {
   padding: 0;
@@ -48,12 +52,12 @@
   line-height: calc(1 + 0.4 / var(--font-body-scale));
 }
 
-.cart-item__details>* {
+.cart-item__details > * {
   margin: 0;
   max-width: 30rem;
 }
 
-.cart-item__details>*+* {
+.cart-item__details > * + * {
   margin-top: 0.6rem;
 }
 
@@ -83,7 +87,7 @@
   text-decoration-thickness: 0.2rem;
 }
 
-.cart-item__price-wrapper>* {
+.cart-item__price-wrapper > * {
   display: block;
   margin: 0;
   padding: 0;
@@ -167,7 +171,7 @@ cart-remove-button .icon-remove {
   }
 }
 
-.cart-item .loading__spinner:not(.hidden)~* {
+.cart-item .loading__spinner:not(.hidden) ~ * {
   visibility: hidden;
 }
 
@@ -185,18 +189,18 @@ cart-remove-button .icon-remove {
   order: 1;
 }
 
-.cart-item__error-text+svg {
+.cart-item__error-text + svg {
   flex-shrink: 0;
   width: 1.2rem;
   margin-right: 0.5rem;
   margin-top: 0.1rem;
 }
 
-.cart-item__error-text:empty+svg {
+.cart-item__error-text:empty + svg {
   display: none;
 }
 
-.product-option+.product-option {
+.product-option + .product-option {
   margin-top: 0.4rem;
 }
 
@@ -210,7 +214,6 @@ cart-remove-button .icon-remove {
 }
 
 @media screen and (max-width: 749px) {
-
   .cart-items,
   .cart-items thead,
   .cart-items tbody {
@@ -276,7 +279,7 @@ cart-remove-button .icon-remove {
     width: 50%;
   }
 
-  .cart-items th+th {
+  .cart-items th + th {
     padding-left: 4rem;
   }
 
@@ -289,7 +292,7 @@ cart-remove-button .icon-remove {
     display: table-row;
   }
 
-  .cart-item>td+td {
+  .cart-item > td + td {
     padding-left: 4rem;
   }
 
@@ -305,7 +308,7 @@ cart-remove-button .icon-remove {
     margin: 0.5rem 0 0 1.5rem;
   }
 
-  .cart-item__price-wrapper>*:only-child:not(.cart-item__discounted-prices) {
+  .cart-item__price-wrapper > *:only-child:not(.cart-item__discounted-prices) {
     margin-top: 1rem;
   }
 
@@ -315,7 +318,6 @@ cart-remove-button .icon-remove {
 }
 
 @media screen and (min-width: 990px) {
-
   .cart-item .cart-item__quantity,
   .cart-items .cart-items__heading--wide {
     padding-left: 6rem;
@@ -331,10 +333,9 @@ cart-remove-button .icon-remove {
 }
 
 @media screen and (min-width: 750px) {
-
   .cart-items .cart-items__heading--quantity,
   .cart-item .cart-item__quantity,
-  .cart-item__quantity--info quantity-popover>*,
+  .cart-item__quantity--info quantity-popover > *,
   .no-js .cart-item .cart-item__quantity--info {
     padding-left: 5rem;
   }
diff --git a/assets/component-cart.css b/assets/component-cart.css
index 34c3d49f8d0..8e107f60cd4 100644
--- a/assets/component-cart.css
+++ b/assets/component-cart.css
@@ -86,8 +86,6 @@ cart-items {
   top: 2.5rem;
 }
 
-
-
 .cart__note label {
   display: flex;
   align-items: flex-end;
@@ -170,6 +168,10 @@ cart-items {
   margin: 0 auto;
 }
 
+.cart__dynamic-checkout-buttons:has(.dynamic-checkout__content:empty) {
+  margin: 0;
+}
+
 .cart__dynamic-checkout-buttons div[role='button'] {
   border-radius: var(--buttons-radius-outset) !important;
 }
diff --git a/config/settings_schema.json b/config/settings_schema.json
index 27f904f371c..48e350293ff 100644
--- a/config/settings_schema.json
+++ b/config/settings_schema.json
@@ -1457,6 +1457,12 @@
         "id": "cart_drawer_collection",
         "label": "t:settings_schema.cart.settings.cart_drawer.collection.label",
         "info": "t:settings_schema.cart.settings.cart_drawer.collection.info"
+      },
+      {
+        "type": "color_scheme",
+        "id": "cart_color_scheme",
+        "label": "t:sections.all.colors.label",
+        "default": "background-1"
       }
     ]
   }
diff --git a/sections/main-cart-footer.liquid b/sections/main-cart-footer.liquid
index ba750bc9972..af6654c4ece 100644
--- a/sections/main-cart-footer.liquid
+++ b/sections/main-cart-footer.liquid
@@ -17,9 +17,13 @@
   }
 {%- endstyle -%}
 
-<div class="page-width{% if cart == empty %} is-empty{% endif %}" id="main-cart-footer" data-id="{{ section.id }}">
-  <div>
-    <div class="cart__footer section-{{ section.id }}-padding">
+<div
+  class="gradient color-{{ section.settings.color_scheme }}{% if cart == empty %} is-empty{% endif %}"
+  id="main-cart-footer"
+  data-id="{{ section.id }}"
+>
+  <div class="page-width">
+    <div class="cart__footer isolate section-{{ section.id }}-padding">
       {%- if settings.show_cart_note -%}
         <cart-note class="cart__note field">
           <label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
@@ -133,6 +137,12 @@
   "name": "t:sections.main-cart-footer.name",
   "class": "cart__footer-wrapper",
   "settings": [
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "t:sections.all.colors.label",
+      "default": "background-1"
+    },
     {
       "type": "range",
       "id": "padding_top",
diff --git a/sections/main-cart-items.liquid b/sections/main-cart-items.liquid
index c014a04db41..4799a835efd 100644
--- a/sections/main-cart-items.liquid
+++ b/sections/main-cart-items.liquid
@@ -25,425 +25,441 @@
 
 <script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
 
-<cart-items class="page-width{% if cart == empty %} is-empty{% else %} section-{{ section.id }}-padding{% endif %}">
-  <div class="title-wrapper-with-link">
-    <h1 class="title title--primary">{{ 'sections.cart.title' | t }}</h1>
-    <a href="{{ routes.all_products_collection_url }}" class="underlined-link">{{ 'general.continue_shopping' | t }}</a>
-  </div>
-
-  <div class="cart__warnings">
-    <h1 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h1>
-    <a href="{{ routes.all_products_collection_url }}" class="button">
-      {{ 'general.continue_shopping' | t }}
-    </a>
-
-    {%- if shop.customer_accounts_enabled and customer == null -%}
-      <h2 class="cart__login-title">{{ 'sections.cart.login.title' | t }}</h2>
-      <p class="cart__login-paragraph">
-        {{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
-      </p>
-    {%- endif -%}
-  </div>
-
-  <form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">
-    <div class="cart__items" id="main-cart-items" data-id="{{ section.id }}">
-      <div class="js-contents">
-        {%- if cart != empty -%}
-          <table class="cart-items">
-            <caption class="visually-hidden">
-              {{ 'sections.cart.title' | t }}
-            </caption>
-            <thead>
-              <tr>
-                <th class="caption-with-letter-spacing" colspan="2" scope="col">
-                  {{ 'sections.cart.headings.product' | t }}
-                </th>
-                <th class="medium-hide large-up-hide right caption-with-letter-spacing" colspan="1" scope="col">
-                  {{ 'sections.cart.headings.total' | t }}
-                </th>
-                <th
-                  class="cart-items__heading--wide cart-items__heading--quantity small-hide caption-with-letter-spacing"
-                  colspan="1"
-                  scope="col"
-                >
-                  {{ 'sections.cart.headings.quantity' | t }}
-                </th>
-                <th class="small-hide right caption-with-letter-spacing" colspan="1" scope="col">
-                  {{ 'sections.cart.headings.total' | t }}
-                </th>
-              </tr>
-            </thead>
-
-            <tbody>
-              {%- for item in cart.items -%}
-                <tr class="cart-item" id="CartItem-{{ item.index | plus: 1 }}">
-                  <td class="cart-item__media">
-                    {% if item.image %}
-                      {% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
-                      <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
-                      <div class="cart-item__image-container gradient global-media-settings">
-                        <img
-                          src="{{ item.image | image_url: width: 300 }}"
-                          class="cart-item__image"
-                          alt="{{ item.image.alt | escape }}"
-                          loading="lazy"
-                          width="150"
-                          height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
-                        >
-                      </div>
-                    {% endif %}
-                  </td>
-
-                  <td class="cart-item__details">
-                    {%- if settings.show_vendor -%}
-                      <p class="caption-with-letter-spacing">{{ item.product.vendor }}</p>
-                    {%- endif -%}
+<cart-items class="gradient color-{{ section.settings.color_scheme }} isolate{% if cart == empty %} is-empty{% else %} section-{{ section.id }}-padding{% endif %}">
+  <div class="page-width">
+    <div class="title-wrapper-with-link">
+      <h1 class="title title--primary">{{ 'sections.cart.title' | t }}</h1>
+      <a href="{{ routes.all_products_collection_url }}" class="underlined-link">
+        {{- 'general.continue_shopping' | t -}}
+      </a>
+    </div>
 
-                    <a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>
+    <div class="cart__warnings">
+      <h1 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h1>
+      <a href="{{ routes.all_products_collection_url }}" class="button">
+        {{ 'general.continue_shopping' | t }}
+      </a>
 
-                    {%- if item.original_price != item.final_price -%}
-                      <div class="cart-item__discounted-prices">
-                        <span class="visually-hidden">
-                          {{ 'products.product.price.regular_price' | t }}
-                        </span>
-                        <s class="cart-item__old-price product-option">
-                          {{- item.original_price | money -}}
-                        </s>
-                        <span class="visually-hidden">
-                          {{ 'products.product.price.sale_price' | t }}
-                        </span>
-                        <strong class="cart-item__final-price product-option">
-                          {{ item.final_price | money }}
-                        </strong>
-                      </div>
-                    {%- else -%}
-                      <div class="product-option">
-                        {{ item.original_price | money }}
-                      </div>
-                    {%- endif -%}
+      {%- if shop.customer_accounts_enabled and customer == null -%}
+        <h2 class="cart__login-title">{{ 'sections.cart.login.title' | t }}</h2>
+        <p class="cart__login-paragraph">
+          {{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
+        </p>
+      {%- endif -%}
+    </div>
 
-                    {%- if item.product.has_only_default_variant == false
-                      or item.properties.size != 0
-                      or item.selling_plan_allocation != null
-                    -%}
-                      <dl>
-                        {%- if item.product.has_only_default_variant == false -%}
-                          {%- for option in item.options_with_values -%}
-                            <div class="product-option">
-                              <dt>{{ option.name }}:</dt>
-                              <dd>{{ option.value }}</dd>
-                            </div>
-                          {%- endfor -%}
-                        {%- endif -%}
+    <form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">
+      <div class="cart__items" id="main-cart-items" data-id="{{ section.id }}">
+        <div class="js-contents">
+          {%- if cart != empty -%}
+            <table class="cart-items">
+              <caption class="visually-hidden">
+                {{ 'sections.cart.title' | t }}
+              </caption>
+              <thead>
+                <tr>
+                  <th class="caption-with-letter-spacing" colspan="2" scope="col">
+                    {{ 'sections.cart.headings.product' | t }}
+                  </th>
+                  <th class="medium-hide large-up-hide right caption-with-letter-spacing" colspan="1" scope="col">
+                    {{ 'sections.cart.headings.total' | t }}
+                  </th>
+                  <th
+                    class="cart-items__heading--wide cart-items__heading--quantity small-hide caption-with-letter-spacing"
+                    colspan="1"
+                    scope="col"
+                  >
+                    {{ 'sections.cart.headings.quantity' | t }}
+                  </th>
+                  <th class="small-hide right caption-with-letter-spacing" colspan="1" scope="col">
+                    {{ 'sections.cart.headings.total' | t }}
+                  </th>
+                </tr>
+              </thead>
 
-                        {%- for property in item.properties -%}
-                          {%- assign property_first_char = property.first | slice: 0 -%}
-                          {%- if property.last != blank and property_first_char != '_' -%}
-                            <div class="product-option">
-                              <dt>{{ property.first }}:</dt>
-                              <dd>
-                                {%- if property.last contains '/uploads/' -%}
-                                  <a href="{{ property.last }}" class="link" target="_blank">
-                                    {{ property.last | split: '/' | last }}
-                                  </a>
-                                {%- else -%}
-                                  {{ property.last }}
-                                {%- endif -%}
-                              </dd>
-                            </div>
-                          {%- endif -%}
-                        {%- endfor -%}
-                      </dl>
+              <tbody>
+                {%- for item in cart.items -%}
+                  <tr class="cart-item" id="CartItem-{{ item.index | plus: 1 }}">
+                    <td class="cart-item__media">
+                      {% if item.image %}
+                        {% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
+                        <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
+                        <div class="cart-item__image-container gradient global-media-settings">
+                          <img
+                            src="{{ item.image | image_url: width: 300 }}"
+                            class="cart-item__image"
+                            alt="{{ item.image.alt | escape }}"
+                            loading="lazy"
+                            width="150"
+                            height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
+                          >
+                        </div>
+                      {% endif %}
+                    </td>
 
-                      <p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
-                    {%- endif -%}
+                    <td class="cart-item__details">
+                      {%- if settings.show_vendor -%}
+                        <p class="caption-with-letter-spacing">{{ item.product.vendor }}</p>
+                      {%- endif -%}
 
-                    <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
-                      {%- for discount in item.line_level_discount_allocations -%}
-                        <li class="discounts__discount">
-                          {%- render 'icon-discount' -%}
-                          {{ discount.discount_application.title }}
-                        </li>
-                      {%- endfor -%}
-                    </ul>
-                  </td>
+                      <a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>
 
-                  <td class="cart-item__totals right medium-hide large-up-hide">
-                    {%- render 'loading-spinner' -%}
-                    <div class="cart-item__price-wrapper">
-                      {%- if item.original_line_price != item.final_line_price -%}
-                        <dl class="cart-item__discounted-prices">
-                          <dt class="visually-hidden">
+                      {%- if item.original_price != item.final_price -%}
+                        <div class="cart-item__discounted-prices">
+                          <span class="visually-hidden">
                             {{ 'products.product.price.regular_price' | t }}
-                          </dt>
-                          <dd>
-                            <s class="cart-item__old-price price price--end">
-                              {{ item.original_line_price | money }}
-                            </s>
-                          </dd>
-                          <dt class="visually-hidden">
+                          </span>
+                          <s class="cart-item__old-price product-option">
+                            {{- item.original_price | money -}}
+                          </s>
+                          <span class="visually-hidden">
                             {{ 'products.product.price.sale_price' | t }}
-                          </dt>
-                          <dd class="price price--end">
-                            {{ item.final_line_price | money }}
-                          </dd>
-                        </dl>
+                          </span>
+                          <strong class="cart-item__final-price product-option">
+                            {{ item.final_price | money }}
+                          </strong>
+                        </div>
                       {%- else -%}
-                        <span class="price price--end">
-                          {{ item.original_line_price | money }}
-                        </span>
-                      {%- endif -%}
-
-                      {%- if item.variant.available and item.unit_price_measurement -%}
-                        <div class="unit-price caption">
-                          <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
-                          {{ item.unit_price | money }}
-                          <span aria-hidden="true">/</span>
-                          <span class="visually-hidden"
-                            >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
-                          >
-                          {%- if item.unit_price_measurement.reference_value != 1 -%}
-                            {{- item.unit_price_measurement.reference_value -}}
-                          {%- endif -%}
-                          {{ item.unit_price_measurement.reference_unit }}
+                        <div class="product-option">
+                          {{ item.original_price | money }}
                         </div>
                       {%- endif -%}
-                    </div>
-                  </td>
-                  {%- liquid
-                    assign has_qty_rules = false
-                    if item.variant.quantity_rule.increment > 1 or item.variant.quantity_rule.min > 1 or item.variant.quantity_rule.max != null
-                      assign has_qty_rules = true
-                    endif
 
-                    assign has_vol_pricing = false
-                    if item.variant.quantity_price_breaks.size > 0
-                      assign has_vol_pricing = true
-                    endif
-                  -%}
-                  <td class="cart-item__quantity{% if has_qty_rules or has_vol_pricing %} cart-item__quantity--info{% endif %}">
-                    <quantity-popover>
-                      <div class="cart-item__quantity-wrapper quantity-popover-wrapper">
-                        <label class="visually-hidden" for="Quantity-{{ item.index | plus: 1 }}">
-                          {{ 'products.product.quantity.label' | t }}
-                        </label>
-                        <div class="quantity-popover-container{% if has_qty_rules or has_vol_pricing %} quantity-popover-container--hover{% endif %}">
-                          {%- if has_qty_rules or has_vol_pricing -%}
-                            <button
-                              type="button"
-                              aria-expanded="false"
-                              class="quantity-popover__info-button quantity-popover__info-button--icon-only button button--tertiary small-hide no-js-hidden"
-                            >
-                              {% render 'icon-info' %}
-                            </button>
+                      {%- if item.product.has_only_default_variant == false
+                        or item.properties.size != 0
+                        or item.selling_plan_allocation != null
+                      -%}
+                        <dl>
+                          {%- if item.product.has_only_default_variant == false -%}
+                            {%- for option in item.options_with_values -%}
+                              <div class="product-option">
+                                <dt>{{ option.name }}:</dt>
+                                <dd>{{ option.value }}</dd>
+                              </div>
+                            {%- endfor -%}
                           {%- endif -%}
-                          <quantity-input class="quantity cart-quantity">
-                            <button class="quantity__button no-js-hidden" name="minus" type="button">
-                              <span class="visually-hidden">
-                                {{- 'products.product.quantity.decrease' | t: product: item.product.title | escape -}}
-                              </span>
-                              {% render 'icon-minus' %}
-                            </button>
-                            <input
-                              class="quantity__input"
-                              data-quantity-variant-id="{{ item.variant.id }}"
-                              type="number"
-                              name="updates[]"
-                              value="{{ item.quantity }}"
-                              {% # theme-check-disable %}
-                              data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
-                              min="{{ item.variant.quantity_rule.min }}"
-                              {% if item.variant.quantity_rule.max != null %}
-                                max="{{ item.variant.quantity_rule.max }}"
-                              {% endif %}
-                              step="{{ item.variant.quantity_rule.increment }}"
-                              {% # theme-check-enable %}
-                              aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
-                              id="Quantity-{{ item.index | plus: 1 }}"
-                              data-index="{{ item.index | plus: 1 }}"
-                            >
-                            <button class="quantity__button no-js-hidden" name="plus" type="button">
-                              <span class="visually-hidden">
-                                {{- 'products.product.quantity.increase' | t: product: item.product.title | escape -}}
-                              </span>
-                              {% render 'icon-plus' %}
-                            </button>
-                          </quantity-input>
-                        </div>
-                        <cart-remove-button
-                          id="Remove-{{ item.index | plus: 1 }}"
-                          data-index="{{ item.index | plus: 1 }}"
-                        >
-                          <a
-                            href="{{ item.url_to_remove }}"
-                            class="button button--tertiary"
-                            aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
-                          >
-                            {% render 'icon-remove' %}
-                          </a>
-                        </cart-remove-button>
-                      </div>
-                      {%- if has_qty_rules or has_vol_pricing -%}
-                        <button
-                          type="button"
-                          class="quantity-popover__info-button quantity-popover__info-button--icon-with-label button button--tertiary medium-hide large-up-hide"
-                          aria-expanded="false"
-                        >
-                          {% render 'icon-info' %}
-                          <span>
-                            {%- if has_vol_pricing -%}
-                              {{ 'products.product.volume_pricing.note' | t }}
-                            {%- elsif has_qty_rules -%}
-                              {{ 'products.product.quantity.note' | t }}
+
+                          {%- for property in item.properties -%}
+                            {%- assign property_first_char = property.first | slice: 0 -%}
+                            {%- if property.last != blank and property_first_char != '_' -%}
+                              <div class="product-option">
+                                <dt>{{ property.first }}:</dt>
+                                <dd>
+                                  {%- if property.last contains '/uploads/' -%}
+                                    <a href="{{ property.last }}" class="link" target="_blank">
+                                      {{ property.last | split: '/' | last }}
+                                    </a>
+                                  {%- else -%}
+                                    {{ property.last }}
+                                  {%- endif -%}
+                                </dd>
+                              </div>
                             {%- endif -%}
-                          </span>
-                        </button>
+                          {%- endfor -%}
+                        </dl>
+
+                        <p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
                       {%- endif -%}
-                      {%- if has_vol_pricing or has_qty_rules -%}
-                        <div
-                          class="cart-items__info global-settings-popup quantity-popover__info"
-                          tabindex="-1"
-                          hidden
-                        >
-                          {%- if has_qty_rules == false -%}
-                            <span class="volume-pricing-label caption">
-                              {{- 'products.product.volume_pricing.title' | t -}}
-                            </span>
-                          {%- endif -%}
-                          <div class="quantity__rules caption no-js-hidden">
-                            {%- if item.variant.quantity_rule.increment > 1 -%}
-                              <span class="divider">
-                                {{-
-                                  'products.product.quantity.multiples_of'
-                                  | t: quantity: item.variant.quantity_rule.increment
-                                -}}
-                              </span>
-                            {%- endif -%}
-                            {%- if item.variant.quantity_rule.min > 1 -%}
-                              <span class="divider">
-                                {{-
-                                  'products.product.quantity.minimum_of'
-                                  | t: quantity: item.variant.quantity_rule.min
-                                -}}
-                              </span>
+
+                      <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
+                        {%- for discount in item.line_level_discount_allocations -%}
+                          <li class="discounts__discount">
+                            {%- render 'icon-discount' -%}
+                            {{ discount.discount_application.title }}
+                          </li>
+                        {%- endfor -%}
+                      </ul>
+                    </td>
+
+                    <td class="cart-item__totals right medium-hide large-up-hide">
+                      {%- render 'loading-spinner' -%}
+                      <div class="cart-item__price-wrapper">
+                        {%- if item.original_line_price != item.final_line_price -%}
+                          <dl class="cart-item__discounted-prices">
+                            <dt class="visually-hidden">
+                              {{ 'products.product.price.regular_price' | t }}
+                            </dt>
+                            <dd>
+                              <s class="cart-item__old-price price price--end">
+                                {{ item.original_line_price | money }}
+                              </s>
+                            </dd>
+                            <dt class="visually-hidden">
+                              {{ 'products.product.price.sale_price' | t }}
+                            </dt>
+                            <dd class="price price--end">
+                              {{ item.final_line_price | money }}
+                            </dd>
+                          </dl>
+                        {%- else -%}
+                          <span class="price price--end">
+                            {{ item.original_line_price | money }}
+                          </span>
+                        {%- endif -%}
+
+                        {%- if item.variant.available and item.unit_price_measurement -%}
+                          <div class="unit-price caption">
+                            <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
+                            {{ item.unit_price | money }}
+                            <span aria-hidden="true">/</span>
+                            <span class="visually-hidden"
+                              >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
+                            >
+                            {%- if item.unit_price_measurement.reference_value != 1 -%}
+                              {{- item.unit_price_measurement.reference_value -}}
                             {%- endif -%}
-                            {%- if item.variant.quantity_rule.max != null -%}
-                              <span class="divider">
-                                {{-
-                                  'products.product.quantity.maximum_of'
-                                  | t: quantity: item.variant.quantity_rule.max
-                                -}}
-                              </span>
+                            {{ item.unit_price_measurement.reference_unit }}
+                          </div>
+                        {%- endif -%}
+                      </div>
+                    </td>
+                    {%- liquid
+                      assign has_qty_rules = false
+                      if item.variant.quantity_rule.increment > 1 or item.variant.quantity_rule.min > 1 or item.variant.quantity_rule.max != null
+                        assign has_qty_rules = true
+                      endif
+
+                      assign has_vol_pricing = false
+                      if item.variant.quantity_price_breaks.size > 0
+                        assign has_vol_pricing = true
+                      endif
+                    -%}
+                    <td class="cart-item__quantity{% if has_qty_rules or has_vol_pricing %} cart-item__quantity--info{% endif %}">
+                      <quantity-popover>
+                        <div class="cart-item__quantity-wrapper quantity-popover-wrapper">
+                          <label class="visually-hidden" for="Quantity-{{ item.index | plus: 1 }}">
+                            {{ 'products.product.quantity.label' | t }}
+                          </label>
+                          <div class="quantity-popover-container{% if has_qty_rules or has_vol_pricing %} quantity-popover-container--hover{% endif %}">
+                            {%- if has_qty_rules or has_vol_pricing -%}
+                              <button
+                                type="button"
+                                aria-expanded="false"
+                                class="quantity-popover__info-button quantity-popover__info-button--icon-only button button--tertiary small-hide no-js-hidden"
+                              >
+                                {% render 'icon-info' %}
+                              </button>
                             {%- endif -%}
+                            <quantity-input class="quantity cart-quantity">
+                              <button class="quantity__button no-js-hidden" name="minus" type="button">
+                                <span class="visually-hidden">
+                                  {{- 'products.product.quantity.decrease' | t: product: item.product.title | escape -}}
+                                </span>
+                                {% render 'icon-minus' %}
+                              </button>
+                              <input
+                                class="quantity__input"
+                                data-quantity-variant-id="{{ item.variant.id }}"
+                                type="number"
+                                name="updates[]"
+                                value="{{ item.quantity }}"
+                                {% # theme-check-disable %}
+                                data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
+                                min="{{ item.variant.quantity_rule.min }}"
+                                {% if item.variant.quantity_rule.max != null %}
+                                  max="{{ item.variant.quantity_rule.max }}"
+                                {% endif %}
+                                step="{{ item.variant.quantity_rule.increment }}"
+                                {% # theme-check-enable %}
+                                aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
+                                id="Quantity-{{ item.index | plus: 1 }}"
+                                data-index="{{ item.index | plus: 1 }}"
+                              >
+                              <button class="quantity__button no-js-hidden" name="plus" type="button">
+                                <span class="visually-hidden">
+                                  {{- 'products.product.quantity.increase' | t: product: item.product.title | escape -}}
+                                </span>
+                                {% render 'icon-plus' %}
+                              </button>
+                            </quantity-input>
                           </div>
+                          <cart-remove-button
+                            id="Remove-{{ item.index | plus: 1 }}"
+                            data-index="{{ item.index | plus: 1 }}"
+                          >
+                            <a
+                              href="{{ item.url_to_remove }}"
+                              class="button button--tertiary"
+                              aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
+                            >
+                              {% render 'icon-remove' %}
+                            </a>
+                          </cart-remove-button>
+                        </div>
+                        {%- if has_qty_rules or has_vol_pricing -%}
                           <button
-                            class="button-close button button--tertiary medium-hide large-up-hide"
                             type="button"
-                            aria-label="{{ 'accessibility.close' | t }}"
+                            class="quantity-popover__info-button quantity-popover__info-button--icon-with-label button button--tertiary medium-hide large-up-hide"
+                            aria-expanded="false"
                           >
-                            {%- render 'icon-close' -%}
+                            {% render 'icon-info' %}
+                            <span>
+                              {%- if has_vol_pricing -%}
+                                {{ 'products.product.volume_pricing.note' | t }}
+                              {%- elsif has_qty_rules -%}
+                                {{ 'products.product.quantity.note' | t }}
+                              {%- endif -%}
+                            </span>
                           </button>
-                          {%- if item.variant.quantity_price_breaks.size > 0 -%}
-                            <volume-pricing class="parent-display">
-                              <ul class="list-unstyled">
-                                <li>
-                                  <span>{{ item.variant.quantity_rule.min }}+</span>
-                                  {%- assign price = item.variant.price | money_with_currency -%}
-                                  <span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
-                                </li>
-                                {%- for price_break in item.variant.quantity_price_breaks -%}
+                        {%- endif -%}
+                        {%- if has_vol_pricing or has_qty_rules -%}
+                          <div
+                            class="cart-items__info global-settings-popup quantity-popover__info"
+                            tabindex="-1"
+                            hidden
+                          >
+                            {%- if has_qty_rules == false -%}
+                              <span class="volume-pricing-label caption">
+                                {{- 'products.product.volume_pricing.title' | t -}}
+                              </span>
+                            {%- endif -%}
+                            <div class="quantity__rules caption no-js-hidden">
+                              {%- if item.variant.quantity_rule.increment > 1 -%}
+                                <span class="divider">
+                                  {{-
+                                    'products.product.quantity.multiples_of'
+                                    | t: quantity: item.variant.quantity_rule.increment
+                                  -}}
+                                </span>
+                              {%- endif -%}
+                              {%- if item.variant.quantity_rule.min > 1 -%}
+                                <span class="divider">
+                                  {{-
+                                    'products.product.quantity.minimum_of'
+                                    | t: quantity: item.variant.quantity_rule.min
+                                  -}}
+                                </span>
+                              {%- endif -%}
+                              {%- if item.variant.quantity_rule.max != null -%}
+                                <span class="divider">
+                                  {{-
+                                    'products.product.quantity.maximum_of'
+                                    | t: quantity: item.variant.quantity_rule.max
+                                  -}}
+                                </span>
+                              {%- endif -%}
+                            </div>
+                            <button
+                              class="button-close button button--tertiary medium-hide large-up-hide"
+                              type="button"
+                              aria-label="{{ 'accessibility.close' | t }}"
+                            >
+                              {%- render 'icon-close' -%}
+                            </button>
+                            {%- if item.variant.quantity_price_breaks.size > 0 -%}
+                              <volume-pricing class="parent-display">
+                                <ul class="list-unstyled">
                                   <li>
-                                    <span>
-                                      {{- price_break.minimum_quantity -}}
-                                      <span aria-hidden="true">+</span></span
-                                    >
-                                    {%- assign price = price_break.price | money_with_currency -%}
+                                    <span>{{ item.variant.quantity_rule.min }}+</span>
+                                    {%- assign price = item.variant.price | money_with_currency -%}
                                     <span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
                                   </li>
-                                {%- endfor -%}
-                              </ul>
-                            </volume-pricing>
-                          {%- endif -%}
+                                  {%- for price_break in item.variant.quantity_price_breaks -%}
+                                    <li>
+                                      <span>
+                                        {{- price_break.minimum_quantity -}}
+                                        <span aria-hidden="true">+</span></span
+                                      >
+                                      {%- assign price = price_break.price | money_with_currency -%}
+                                      <span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
+                                    </li>
+                                  {%- endfor -%}
+                                </ul>
+                              </volume-pricing>
+                            {%- endif -%}
+                          </div>
+                        {%- endif -%}
+                        <div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
+                          <small class="cart-item__error-text"></small>
+                          <svg
+                            aria-hidden="true"
+                            focusable="false"
+                            class="icon icon-error"
+                            viewBox="0 0 13 13"
+                          >
+                            <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
+                            <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
+                            <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
+                            <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
+                          </svg>
                         </div>
-                      {%- endif -%}
-                      <div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
-                        <small class="cart-item__error-text"></small>
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          class="icon icon-error"
-                          viewBox="0 0 13 13"
-                        >
-                          <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
-                          <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
-                          <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
-                          <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
-                        </svg>
-                      </div>
-                    </quantity-popover>
-                  </td>
+                      </quantity-popover>
+                    </td>
 
-                  <td class="cart-item__totals right small-hide">
-                    {%- render 'loading-spinner' -%}
-                    <div class="cart-item__price-wrapper">
-                      {%- if item.original_line_price != item.final_line_price -%}
-                        <dl class="cart-item__discounted-prices">
-                          <dt class="visually-hidden">
-                            {{ 'products.product.price.regular_price' | t }}
-                          </dt>
-                          <dd>
-                            <s class="cart-item__old-price price price--end">
-                              {{ item.original_line_price | money }}
-                            </s>
-                          </dd>
-                          <dt class="visually-hidden">
-                            {{ 'products.product.price.sale_price' | t }}
-                          </dt>
-                          <dd class="price price--end">
-                            {{ item.final_line_price | money }}
-                          </dd>
-                        </dl>
-                      {%- else -%}
-                        <span class="price price--end">
-                          {{ item.original_line_price | money }}
-                        </span>
-                      {%- endif -%}
+                    <td class="cart-item__totals right small-hide">
+                      {%- render 'loading-spinner' -%}
+                      <div class="cart-item__price-wrapper">
+                        {%- if item.original_line_price != item.final_line_price -%}
+                          <dl class="cart-item__discounted-prices">
+                            <dt class="visually-hidden">
+                              {{ 'products.product.price.regular_price' | t }}
+                            </dt>
+                            <dd>
+                              <s class="cart-item__old-price price price--end">
+                                {{ item.original_line_price | money }}
+                              </s>
+                            </dd>
+                            <dt class="visually-hidden">
+                              {{ 'products.product.price.sale_price' | t }}
+                            </dt>
+                            <dd class="price price--end">
+                              {{ item.final_line_price | money }}
+                            </dd>
+                          </dl>
+                        {%- else -%}
+                          <span class="price price--end">
+                            {{ item.original_line_price | money }}
+                          </span>
+                        {%- endif -%}
 
-                      {%- if item.variant.available and item.unit_price_measurement -%}
-                        <div class="unit-price caption">
-                          <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
-                          {{ item.unit_price | money }}
-                          <span aria-hidden="true">/</span>
-                          <span class="visually-hidden"
-                            >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
-                          >
-                          {%- if item.unit_price_measurement.reference_value != 1 -%}
-                            {{- item.unit_price_measurement.reference_value -}}
-                          {%- endif -%}
-                          {{ item.unit_price_measurement.reference_unit }}
-                        </div>
-                      {%- endif -%}
-                    </div>
-                  </td>
-                </tr>
-              {%- endfor -%}
-            </tbody>
-          </table>
-        {%- endif -%}
+                        {%- if item.variant.available and item.unit_price_measurement -%}
+                          <div class="unit-price caption">
+                            <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
+                            {{ item.unit_price | money }}
+                            <span aria-hidden="true">/</span>
+                            <span class="visually-hidden"
+                              >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
+                            >
+                            {%- if item.unit_price_measurement.reference_value != 1 -%}
+                              {{- item.unit_price_measurement.reference_value -}}
+                            {%- endif -%}
+                            {{ item.unit_price_measurement.reference_unit }}
+                          </div>
+                        {%- endif -%}
+                      </div>
+                    </td>
+                  </tr>
+                {%- endfor -%}
+              </tbody>
+            </table>
+          {%- endif -%}
+        </div>
       </div>
-    </div>
 
-    <p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
-    <p class="visually-hidden" id="shopping-cart-line-item-status" aria-live="polite" aria-hidden="true" role="status">
-      {{ 'accessibility.loading' | t }}
-    </p>
-  </form>
+      <p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
+      <p
+        class="visually-hidden"
+        id="shopping-cart-line-item-status"
+        aria-live="polite"
+        aria-hidden="true"
+        role="status"
+      >
+        {{ 'accessibility.loading' | t }}
+      </p>
+    </form>
+  </div>
 </cart-items>
 
 {% schema %}
 {
   "name": "t:sections.main-cart-items.name",
   "settings": [
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "t:sections.all.colors.label",
+      "default": "background-1"
+    },
     {
       "type": "header",
       "content": "t:sections.all.padding.section_padding_heading"
diff --git a/snippets/cart-drawer.liquid b/snippets/cart-drawer.liquid
index c12ac7c131d..c1edd78171c 100644
--- a/snippets/cart-drawer.liquid
+++ b/snippets/cart-drawer.liquid
@@ -21,7 +21,7 @@
   <div id="CartDrawer" class="cart-drawer">
     <div id="CartDrawer-Overlay" class="cart-drawer__overlay"></div>
     <div
-      class="drawer__inner"
+      class="drawer__inner gradient color-{{ settings.cart_color_scheme }}"
       role="dialog"
       aria-modal="true"
       aria-label="{{ 'sections.cart.title' | t }}"
diff --git a/snippets/cart-notification.liquid b/snippets/cart-notification.liquid
index 2154f1df0bc..6fcaf4a5118 100644
--- a/snippets/cart-notification.liquid
+++ b/snippets/cart-notification.liquid
@@ -40,7 +40,9 @@
           href="{{ routes.cart_url }}"
           id="cart-notification-button"
           class="button button--secondary button--full-width"
-        >{{ 'general.cart.view_empty_cart' | t }}</a>
+        >
+          {{- 'general.cart.view_empty_cart' | t -}}
+        </a>
         <form action="{{ routes.cart_url }}" method="post" id="cart-notification-form">
           <button class="button button--primary button--full-width" name="checkout">
             {{ 'sections.cart.checkout' | t }}

From a96d0f94b117d8e6bf6d1097c7283f0c45e857ea Mon Sep 17 00:00:00 2001
From: Ludo <ludo.segura@shopify.com>
Date: Mon, 23 Oct 2023 16:43:57 -0400
Subject: [PATCH 23/58] [Product] Add color scheme picker (#3015)

* [Product] Add color scheme picker

* support gradient

* apply background color to be full width

* address review comments: color scheme applied to quick add modal and lightbox modal

* add color scheme to product availability drawer and move color settings up

* fix color classes to work properly with gradients

* Add support for gradient on modal

* remove console log
---
 assets/pickup-availability.js       |  4 ++++
 assets/quick-add.js                 |  4 ++++
 sections/main-product.liquid        | 13 ++++++++++---
 snippets/buy-buttons.liquid         |  1 +
 snippets/product-media-modal.liquid |  4 ++--
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/assets/pickup-availability.js b/assets/pickup-availability.js
index 238d77fd1fa..56c6f71fbf1 100644
--- a/assets/pickup-availability.js
+++ b/assets/pickup-availability.js
@@ -58,6 +58,10 @@ if (!customElements.get('pickup-availability')) {
         this.setAttribute('available', '');
 
         document.body.appendChild(sectionInnerHTML.querySelector('pickup-availability-drawer'));
+        const colorClassesToApply = this.dataset.productPageColorScheme.split(' ');
+        colorClassesToApply.forEach((colorClass) => {
+          document.querySelector('pickup-availability-drawer').classList.add(colorClass);
+        });
 
         const button = this.querySelector('button');
         if (button)
diff --git a/assets/quick-add.js b/assets/quick-add.js
index 564e0748373..6ac69250594 100644
--- a/assets/quick-add.js
+++ b/assets/quick-add.js
@@ -26,6 +26,10 @@ if (!customElements.get('quick-add-modal')) {
           .then((responseText) => {
             const responseHTML = new DOMParser().parseFromString(responseText, 'text/html');
             this.productElement = responseHTML.querySelector('section[id^="MainProduct-"]');
+            this.productElement.classList.forEach((classApplied) => {
+              if (classApplied.startsWith('color-') || classApplied === 'gradient')
+                this.modalContent.classList.add(classApplied);
+            });
             this.preventDuplicatedIDs();
             this.removeDOMElements();
             this.setInnerHTML(this.modalContent, this.productElement.innerHTML);
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 70ae8159d88..20e9ce466c3 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -1,6 +1,6 @@
 <section
   id="MainProduct-{{ section.id }}"
-  class="page-width section-{{ section.id }}-padding"
+  class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}"
   data-section="{{ section.id }}"
 >
   {{ 'section-main-product.css' | asset_url | stylesheet_tag }}
@@ -61,8 +61,8 @@
   {%- endif -%}
 
   {% assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' %}
-
-  <div class="product product--{{ section.settings.media_size }} product--{{ section.settings.media_position }} product--{{ section.settings.gallery_layout }} product--mobile-{{ section.settings.mobile_thumbnails }} grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
+  <div class="page-width">
+    <div class="product product--{{ section.settings.media_size }} product--{{ section.settings.media_position }} product--{{ section.settings.gallery_layout }} product--mobile-{{ section.settings.mobile_thumbnails }} grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
     <div class="grid__item product__media-wrapper{% if section.settings.media_position == 'right' %} medium-hide large-up-hide{% endif %}">
       {% render 'product-media-gallery', variant_images: variant_images %}
     </div>
@@ -667,6 +667,7 @@
       ]
     }
   </script>
+  </div>
 </section>
 
 {% schema %}
@@ -2007,6 +2008,12 @@
       "default": true,
       "label": "t:sections.main-product.settings.enable_sticky_info.label"
     },
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "t:sections.all.colors.label",
+      "default": "background-1"
+    },
     {
       "type": "header",
       "content": "t:sections.main-product.settings.header.content",
diff --git a/snippets/buy-buttons.liquid b/snippets/buy-buttons.liquid
index 15d8d48ff40..4e83e3de29f 100644
--- a/snippets/buy-buttons.liquid
+++ b/snippets/buy-buttons.liquid
@@ -129,6 +129,7 @@
       data-root-url="{{ routes.root_url }}"
       data-variant-id="{{ product.selected_or_first_available_variant.id }}"
       data-has-only-default-variant="{{ product.has_only_default_variant }}"
+      data-product-page-color-scheme="gradient color-{{ section.settings.color_scheme }}"
     >
       <template>
         <pickup-availability-preview class="pickup-availability-preview">
diff --git a/snippets/product-media-modal.liquid b/snippets/product-media-modal.liquid
index 66c77e046db..6568150682c 100644
--- a/snippets/product-media-modal.liquid
+++ b/snippets/product-media-modal.liquid
@@ -11,7 +11,7 @@
 
 <product-modal id="ProductModal-{{ section.id }}" class="product-media-modal media-modal">
   <div
-    class="product-media-modal__dialog"
+    class="product-media-modal__dialog color-{{ section.settings.color_scheme }} gradient"
     role="dialog"
     aria-label="{{ 'products.modal.label' | t }}"
     aria-modal="true"
@@ -27,7 +27,7 @@
     </button>
 
     <div
-      class="product-media-modal__content color-{{ settings.color_schemes | first }} gradient"
+      class="product-media-modal__content color-{{ section.settings.color_scheme }} gradient"
       role="document"
       aria-label="{{ 'products.modal.label' | t }}"
       tabindex="0"

From f56a6869ba5bd449007e51f9d9c4f0a216c1c4c0 Mon Sep 17 00:00:00 2001
From: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Date: Tue, 31 Oct 2023 14:32:41 -0400
Subject: [PATCH 24/58] [VisualDisplay] bump the active outline width (#3083)
 (#3091)

---
 assets/component-visual-display.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/component-visual-display.css b/assets/component-visual-display.css
index 19a49bfa8d1..11e21e5cce5 100644
--- a/assets/component-visual-display.css
+++ b/assets/component-visual-display.css
@@ -33,7 +33,7 @@
 
 /* Active state */
 .visual-display-parent.active .visual-display--presentation-swatch {
-  outline-width: 0.1rem;
+  outline-width: 0.2rem;
   outline-color: rgb(var(--color-foreground), 1);
 }
 

From 1247c8b4f97602a7d11f583ab354b1fe1a260ed0 Mon Sep 17 00:00:00 2001
From: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Date: Tue, 31 Oct 2023 14:51:55 -0400
Subject: [PATCH 25/58] 12.0.0 Version Bump and release notes (#3092)

---
 config/settings_schema.json |  2 +-
 release-notes.md            | 35 +++++++++++++++++------------------
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/config/settings_schema.json b/config/settings_schema.json
index 48e350293ff..37a0d4bcc72 100644
--- a/config/settings_schema.json
+++ b/config/settings_schema.json
@@ -2,7 +2,7 @@
   {
     "name": "theme_info",
     "theme_name": "Dawn",
-    "theme_version": "11.0.0",
+    "theme_version": "12.0.0",
     "theme_author": "Shopify",
     "theme_documentation_url": "https://help.shopify.com/manual/online-store/themes",
     "theme_support_url": "https://support.shopify.com/"
diff --git a/release-notes.md b/release-notes.md
index d4dc701125b..ee0a2c2505f 100644
--- a/release-notes.md
+++ b/release-notes.md
@@ -1,24 +1,23 @@
-Dawn 11.0.0 introduces new customization options to the announcement bar, new animations and hover effects, and a Quick order list section to product pages. 
+Dawn 12.0.0 introduces additional customization options by adding color scheme pickers to new areas, and new ways to visually display product filters. It also introduces some performance improvements related to image loading. 
 
 ### Added
-- You can now add multiple Announcement bar sections to your Header. 
-- You can now display social media icons in the Announcement bar. 
-- You can now add the country/region selector and the language selector to the Announcement bar.
-- You can now set a different color scheme for your navigation menu than for your Header. 
-- We added a new “Zoom in on scroll” animation option to the Image with text and Image banner sections.
-- We added a new “Vertical lift” hover effect option to cards and buttons. 
-- You can now apply the outline button style to the button on Image with text. 
-- You can now adjust the bottom padding on the Subtotal section in the cart.
-- We introduced a new Quick order list section to the product template. This allows you to optimize your product pages for bulk buying. 
-- Customers who qualify for volume pricing will now see the different price breaks on your product pages. 
+- Important: If you use a gradient as a main background, the look of your cart drawer and product modal (quick add) will be affected. 
+- You can now select a color scheme for the Image with text section, Collection template (Product grid section), Product information section, Cart drawer, and Cart page.
 
 ### Changed
-- We reduced the height of the Announcement bar section.
-- You can now choose to auto rotate the Announcement bar slides every 3 seconds. The minimum was previously 5 seconds.
-- Your mobile menu drawer will now appear full-width.
-- The Featured collection section will now display placeholder product images until a collection is selected. 
+- If you are using the Search & Discovery app, you can now change the logical operator for facet filter values between OR and AND.
+- If you are using the Search & Discovery app, you can now choose to apply a swatch visual style for certain filter types (references to metaobjects).
 
 ### Fixes and improvements
-- We fixed a bug where text links were not styled properly in the heading of the Related products section.
-- We made light stylistic improvements to link styles, alignment and spacing for both the dropdown and mega menu types in the Header.
-- We fixed a bug where the Footer would display extra white space when the “Show email signup” setting was left unchecked. 
\ No newline at end of file
+- We fixed an issue with facet filters that affected currencies that use comma separators.
+- We fixed a formatting issue with metadata that is used for SEO purposes.
+- We fixed a visual bug that was affecting the collage section.
+- We fixed an issue with the “compare at” price to ensure more predictable behavior.
+- We’ve improved the experience of adding items to cart on slower connections.
+- We fixed a styling issue affecting collections in empty cart drawers.
+- We fixed an issue in the Slideshow section where the next slide flashes before coming into view. 
+- We’ve improved various visual elements on the Quick order list including font consistency, alignment, and spacing. 
+- We fixed an issue affecting Quick order list on iOS, removing the need to double tap the info icon to open it.
+
+### Removed
+- Removed image tag attribute that indicated which images to load first. We will now allow the platform to determine this, which will improve performance.
\ No newline at end of file

From ab71c57171bd0d06a037fd8a3c0b47f959385862 Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Thu, 2 Nov 2023 14:12:02 -0400
Subject: [PATCH 26/58] Update 1 translation file (#3093)

---
 locales/ja.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/locales/ja.json b/locales/ja.json
index 4b0eb79c6d0..f024f8693a0 100644
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -278,10 +278,10 @@
       "empty": "カートは空です",
       "cart_error": "カートをアップデートするときにエラーが発生しました。もう一度お試しください。",
       "cart_quantity_error_html": "このアイテムは{{ quantity }}個しかカートに追加することができません。",
-      "taxes_and_shipping_policy_at_checkout_html": "税、ディスカウント、および<a href=\"{{ link }}\">配送料</a>はチエックアウト時に計算されます",
+      "taxes_and_shipping_policy_at_checkout_html": "税、ディスカウント、および<a href=\"{{ link }}\">配送料</a>はチェックアウト時に計算されます",
       "taxes_included_but_shipping_at_checkout": "税込みで、配送料とディスカウントはチェックアアウト時に計算されます",
-      "taxes_included_and_shipping_policy_html": "税込。<a href=\"{{ link }}\">配送料</a>とディスカウントはチエックアウト時に計算されます",
-      "taxes_and_shipping_at_checkout": "税、ディスカウント、および配送料はチエックアウト時に計算されます",
+      "taxes_included_and_shipping_policy_html": "税込。<a href=\"{{ link }}\">配送料</a>とディスカウントはチェックアウト時に計算されます",
+      "taxes_and_shipping_at_checkout": "税、ディスカウント、および配送料はチェックアウト時に計算されます",
       "headings": {
         "product": "商品",
         "price": "価格",

From b0ba46d4bb716f073e6ddbdc3560517c5c86c53e Mon Sep 17 00:00:00 2001
From: Louisa Goncharenko <93098869+lougoncharenko@users.noreply.github.com>
Date: Thu, 9 Nov 2023 10:44:17 -0500
Subject: [PATCH 27/58] updated code to match new color scheme naming (#2801)

* updated code to match new color scheme naming

* removing additional background-1 after rebase
---
 assets/collapsible-content.css               |  2 +-
 assets/component-card.css                    |  2 +-
 assets/section-footer.css                    |  2 +-
 assets/section-image-banner.css              |  2 +-
 config/settings_data.json                    | 24 ++++++++++----------
 config/settings_schema.json                  | 12 +++++-----
 sections/announcement-bar.liquid             |  2 +-
 sections/collage.liquid                      |  2 +-
 sections/collapsible-content.liquid          |  4 ++--
 sections/collection-list.liquid              |  2 +-
 sections/contact-form.liquid                 |  2 +-
 sections/custom-liquid.liquid                |  2 +-
 sections/email-signup-banner.liquid          |  2 +-
 sections/featured-blog.liquid                |  2 +-
 sections/featured-collection.liquid          |  2 +-
 sections/featured-product.liquid             |  2 +-
 sections/footer-group.json                   |  2 +-
 sections/footer.liquid                       |  2 +-
 sections/header-group.json                   |  4 ++--
 sections/header.liquid                       |  4 ++--
 sections/image-banner.liquid                 |  2 +-
 sections/image-with-text.liquid              |  4 ++--
 sections/main-cart-footer.liquid             |  2 +-
 sections/main-cart-items.liquid              |  2 +-
 sections/main-collection-banner.liquid       |  2 +-
 sections/main-collection-product-grid.liquid |  2 +-
 sections/main-password-footer.liquid         |  2 +-
 sections/main-password-header.liquid         |  2 +-
 sections/main-product.liquid                 |  2 +-
 sections/multicolumn.liquid                  |  2 +-
 sections/multirow.liquid                     |  4 ++--
 sections/newsletter.liquid                   |  2 +-
 sections/page.liquid                         |  2 +-
 sections/quick-order-list.liquid             |  2 +-
 sections/related-products.liquid             |  4 ++--
 sections/rich-text.liquid                    |  2 +-
 sections/slideshow.liquid                    |  2 +-
 sections/video.liquid                        |  2 +-
 templates/cart.json                          |  2 +-
 templates/collection.json                    |  2 +-
 templates/index.json                         | 12 +++++-----
 templates/page.contact.json                  |  2 +-
 templates/password.json                      |  2 +-
 templates/product.json                       |  6 ++---
 44 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/assets/collapsible-content.css b/assets/collapsible-content.css
index 28a371358f7..232ce8da717 100644
--- a/assets/collapsible-content.css
+++ b/assets/collapsible-content.css
@@ -70,7 +70,7 @@
   border-top: 0;
 }
 
-.collapsible-row-layout .accordion:not(:first-child):not(.color-background-1) {
+.collapsible-row-layout .accordion:not(:first-child):not(.color-scheme-1) {
   margin-top: 1rem;
 }
 
diff --git a/assets/component-card.css b/assets/component-card.css
index eb841680ace..d4081f00c9d 100644
--- a/assets/component-card.css
+++ b/assets/component-card.css
@@ -68,7 +68,7 @@
 }
 
 /* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
-.card__inner.color-background-1 {
+.card__inner.color-scheme-1 {
   background: transparent;
 }
 
diff --git a/assets/section-footer.css b/assets/section-footer.css
index 97a564ed6c8..11aa7529b2a 100644
--- a/assets/section-footer.css
+++ b/assets/section-footer.css
@@ -2,7 +2,7 @@
   border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
 }
 
-.footer:not(.color-background-1) {
+.footer:not(.color-scheme-1) {
   border-top: none;
 }
 
diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css
index a5a2c548aef..28ed04c2849 100644
--- a/assets/section-image-banner.css
+++ b/assets/section-image-banner.css
@@ -331,7 +331,7 @@
   }
 
   .banner:not(.banner--mobile-bottom) .field__input,
-  .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-background-1 {
+  .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
     background: transparent;
   }
 }
diff --git a/config/settings_data.json b/config/settings_data.json
index 1feccea7ae2..0f7a06db992 100644
--- a/config/settings_data.json
+++ b/config/settings_data.json
@@ -4,7 +4,7 @@
     "Default": {
       "logo_width": 90,
       "color_schemes": {
-        "background-1": {
+        "scheme-1": {
           "settings": {
             "background": "#FFFFFF",
             "background_gradient": "",
@@ -15,7 +15,7 @@
             "shadow": "#121212"
           }
         },
-        "background-2": {
+        "scheme-2": {
           "settings": {
             "background": "#F3F3F3",
             "background_gradient": "",
@@ -26,7 +26,7 @@
             "shadow": "#121212"
           }
         },
-        "inverse": {
+        "scheme-3": {
           "settings": {
             "background": "#242833",
             "background_gradient": "",
@@ -37,7 +37,7 @@
             "shadow": "#121212"
           }
         },
-        "accent-1": {
+        "scheme-4": {
           "settings": {
             "background": "#121212",
             "background_gradient": "",
@@ -48,7 +48,7 @@
             "shadow": "#121212"
           }
         },
-        "accent-2": {
+        "scheme-5": {
           "settings": {
             "background": "#334FB4",
             "background_gradient": "",
@@ -92,7 +92,7 @@
       "card_style": "standard",
       "card_image_padding": 0,
       "card_text_alignment": "left",
-      "card_color_scheme": "background-2",
+      "card_color_scheme": "scheme-2",
       "card_border_thickness": 0,
       "card_border_opacity": 10,
       "card_corner_radius": 0,
@@ -103,7 +103,7 @@
       "collection_card_style": "standard",
       "collection_card_image_padding": 0,
       "collection_card_text_alignment": "left",
-      "collection_card_color_scheme": "background-2",
+      "collection_card_color_scheme": "scheme-2",
       "collection_card_border_thickness": 0,
       "collection_card_border_opacity": 10,
       "collection_card_corner_radius": 0,
@@ -114,7 +114,7 @@
       "blog_card_style": "standard",
       "blog_card_image_padding": 0,
       "blog_card_text_alignment": "left",
-      "blog_card_color_scheme": "background-2",
+      "blog_card_color_scheme": "scheme-2",
       "blog_card_border_thickness": 0,
       "blog_card_border_opacity": 10,
       "blog_card_corner_radius": 0,
@@ -151,8 +151,8 @@
       "drawer_shadow_blur": 5,
       "badge_position": "bottom left",
       "badge_corner_radius": 40,
-      "sale_badge_color_scheme": "accent-2",
-      "sold_out_badge_color_scheme": "inverse",
+      "sale_badge_color_scheme": "scheme-5",
+      "sold_out_badge_color_scheme": "scheme-3",
       "social_twitter_link": "",
       "social_facebook_link": "",
       "social_pinterest_link": "",
@@ -174,13 +174,13 @@
         "main-password-header": {
           "type": "main-password-header",
           "settings": {
-            "color_scheme": "background-1"
+            "color_scheme": "scheme-1"
           }
         },
         "main-password-footer": {
           "type": "main-password-footer",
           "settings": {
-            "color_scheme": "background-1"
+            "color_scheme": "scheme-1"
           }
         }
       }
diff --git a/config/settings_schema.json b/config/settings_schema.json
index 37a0d4bcc72..4b30279b1ab 100644
--- a/config/settings_schema.json
+++ b/config/settings_schema.json
@@ -539,7 +539,7 @@
         "type": "color_scheme",
         "id": "card_color_scheme",
         "label": "t:sections.all.colors.label",
-        "default": "background-2"
+        "default": "scheme-2"
       },
       {
         "type": "header",
@@ -674,7 +674,7 @@
         "type": "color_scheme",
         "id": "collection_card_color_scheme",
         "label": "t:sections.all.colors.label",
-        "default": "background-2"
+        "default": "scheme-2"
       },
       {
         "type": "header",
@@ -809,7 +809,7 @@
         "type": "color_scheme",
         "id": "blog_card_color_scheme",
         "label": "t:sections.all.colors.label",
-        "default": "background-2"
+        "default": "scheme-2"
       },
       {
         "type": "header",
@@ -1258,13 +1258,13 @@
         "type": "color_scheme",
         "id": "sale_badge_color_scheme",
         "label": "t:settings_schema.badges.settings.sale_badge_color_scheme.label",
-        "default": "accent-2"
+        "default": "scheme-5"
       },
       {
         "type": "color_scheme",
         "id": "sold_out_badge_color_scheme",
         "label": "t:settings_schema.badges.settings.sold_out_badge_color_scheme.label",
-        "default": "inverse"
+        "default": "scheme-3"
       }
     ]
   },
@@ -1462,7 +1462,7 @@
         "type": "color_scheme",
         "id": "cart_color_scheme",
         "label": "t:sections.all.colors.label",
-        "default": "background-1"
+        "default": "scheme-1"
       }
     ]
   }
diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid
index 6b6f2d90d85..31db1f58257 100644
--- a/sections/announcement-bar.liquid
+++ b/sections/announcement-bar.liquid
@@ -231,7 +231,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "accent-1"
+      "default": "scheme-4"
     },
     {
       "type": "checkbox",
diff --git a/sections/collage.liquid b/sections/collage.liquid
index 19706ab5d84..ae7da8c9b3a 100644
--- a/sections/collage.liquid
+++ b/sections/collage.liquid
@@ -333,7 +333,7 @@
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
       "info": "t:sections.all.colors.has_cards_info",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/collapsible-content.liquid b/sections/collapsible-content.liquid
index 9acb813ed6e..a2d923d2c0c 100644
--- a/sections/collapsible-content.liquid
+++ b/sections/collapsible-content.liquid
@@ -190,14 +190,14 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "color_scheme",
       "id": "container_color_scheme",
       "label": "t:sections.collapsible_content.settings.container_color_scheme.label",
       "info": "t:sections.collapsible_content.settings.container_color_scheme.info",
-      "default": "background-2"
+      "default": "scheme-2"
     },
     {
       "type": "checkbox",
diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid
index b94cdac159d..828f9f7e448 100644
--- a/sections/collection-list.liquid
+++ b/sections/collection-list.liquid
@@ -200,7 +200,7 @@
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
       "info": "t:sections.all.colors.has_cards_info",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "checkbox",
diff --git a/sections/contact-form.liquid b/sections/contact-form.liquid
index 99d4f4eb919..e545933c533 100644
--- a/sections/contact-form.liquid
+++ b/sections/contact-form.liquid
@@ -172,7 +172,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/custom-liquid.liquid b/sections/custom-liquid.liquid
index 7faf4560003..869a5b795d4 100644
--- a/sections/custom-liquid.liquid
+++ b/sections/custom-liquid.liquid
@@ -33,7 +33,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/email-signup-banner.liquid b/sections/email-signup-banner.liquid
index 4c76172f80c..464637c9ea2 100644
--- a/sections/email-signup-banner.liquid
+++ b/sections/email-signup-banner.liquid
@@ -267,7 +267,7 @@
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
       "info": "t:sections.email-signup-banner.settings.color_scheme.info",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/featured-blog.liquid b/sections/featured-blog.liquid
index 7829f704527..d96a8762f10 100644
--- a/sections/featured-blog.liquid
+++ b/sections/featured-blog.liquid
@@ -244,7 +244,7 @@
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
       "info": "t:sections.all.colors.has_cards_info",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "checkbox",
diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid
index c582f39b19c..ff209cf64bb 100644
--- a/sections/featured-collection.liquid
+++ b/sections/featured-collection.liquid
@@ -294,7 +294,7 @@
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
       "info": "t:sections.all.colors.has_cards_info",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index aaaf76c8c39..207c97ee24d 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -1513,7 +1513,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "checkbox",
diff --git a/sections/footer-group.json b/sections/footer-group.json
index aba81fbe1eb..a9263d9b541 100644
--- a/sections/footer-group.json
+++ b/sections/footer-group.json
@@ -33,7 +33,7 @@
         "footer-2"
       ],
       "settings": {
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "newsletter_enable": true,
         "newsletter_heading": "Subscribe to our emails",
         "show_social": true,
diff --git a/sections/footer.liquid b/sections/footer.liquid
index f00cdd7c888..889a4f0dba2 100644
--- a/sections/footer.liquid
+++ b/sections/footer.liquid
@@ -484,7 +484,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/header-group.json b/sections/header-group.json
index 438add1530f..a9ac3a08a0d 100644
--- a/sections/header-group.json
+++ b/sections/header-group.json
@@ -10,7 +10,7 @@
           "settings": {
             "text": "Welcome to our store",
             "text_alignment": "center",
-            "color_scheme": "background-1",
+            "color_scheme": "scheme-1",
             "link": ""
           }
         }
@@ -22,7 +22,7 @@
     "header": {
       "type": "header",
       "settings": {
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "logo_position": "middle-left",
         "menu": "main-menu",
         "menu_type_desktop": "dropdown",
diff --git a/sections/header.liquid b/sections/header.liquid
index 0c44123e82f..a9551ddccb7 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -591,13 +591,13 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
       {
       "type": "color_scheme",
       "id": "menu_color_scheme",
       "label": "t:sections.header.settings.menu_color_scheme.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid
index 2eaad5ef4e0..126dad84f85 100644
--- a/sections/image-banner.liquid
+++ b/sections/image-banner.liquid
@@ -294,7 +294,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid
index fcb92495d97..0a24e48a351 100644
--- a/sections/image-with-text.liquid
+++ b/sections/image-with-text.liquid
@@ -242,13 +242,13 @@
       "type": "color_scheme",
       "id": "section_color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.multirow.settings.container_color_scheme.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/main-cart-footer.liquid b/sections/main-cart-footer.liquid
index af6654c4ece..78a3967e8bc 100644
--- a/sections/main-cart-footer.liquid
+++ b/sections/main-cart-footer.liquid
@@ -141,7 +141,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "range",
diff --git a/sections/main-cart-items.liquid b/sections/main-cart-items.liquid
index 4799a835efd..8ce645d9553 100644
--- a/sections/main-cart-items.liquid
+++ b/sections/main-cart-items.liquid
@@ -458,7 +458,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/main-collection-banner.liquid b/sections/main-collection-banner.liquid
index e9b814c8005..832ee0da323 100644
--- a/sections/main-collection-banner.liquid
+++ b/sections/main-collection-banner.liquid
@@ -71,7 +71,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     }
   ]
 }
diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
index a863001d748..918dd69b0b8 100644
--- a/sections/main-collection-product-grid.liquid
+++ b/sections/main-collection-product-grid.liquid
@@ -210,7 +210,7 @@
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
       "info": "t:sections.all.colors.has_cards_info",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/main-password-footer.liquid b/sections/main-password-footer.liquid
index 745f46358a4..65d59ed491a 100644
--- a/sections/main-password-footer.liquid
+++ b/sections/main-password-footer.liquid
@@ -110,7 +110,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     }
   ]
 }
diff --git a/sections/main-password-header.liquid b/sections/main-password-header.liquid
index 1342744d5e4..e0fac2d54f8 100644
--- a/sections/main-password-header.liquid
+++ b/sections/main-password-header.liquid
@@ -110,7 +110,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     }
   ]
 }
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 20e9ce466c3..a5dd8eb105e 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -2012,7 +2012,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/multicolumn.liquid b/sections/multicolumn.liquid
index fa21082ed02..293780a6306 100644
--- a/sections/multicolumn.liquid
+++ b/sections/multicolumn.liquid
@@ -323,7 +323,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/multirow.liquid b/sections/multirow.liquid
index d49ed6f8a70..2d242bd05a4 100644
--- a/sections/multirow.liquid
+++ b/sections/multirow.liquid
@@ -282,13 +282,13 @@
       "type": "color_scheme",
       "id": "section_color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "color_scheme",
       "id": "row_color_scheme",
       "label": "t:sections.multirow.settings.container_color_scheme.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/newsletter.liquid b/sections/newsletter.liquid
index b4988a38afb..d9e510dc6e1 100644
--- a/sections/newsletter.liquid
+++ b/sections/newsletter.liquid
@@ -127,7 +127,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "checkbox",
diff --git a/sections/page.liquid b/sections/page.liquid
index 9f61c0e1306..24eccbc68b0 100644
--- a/sections/page.liquid
+++ b/sections/page.liquid
@@ -73,7 +73,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/quick-order-list.liquid b/sections/quick-order-list.liquid
index 1a78b2b1e49..af5f1070ba0 100644
--- a/sections/quick-order-list.liquid
+++ b/sections/quick-order-list.liquid
@@ -294,7 +294,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/related-products.liquid b/sections/related-products.liquid
index 610e0d31144..683668bc9c0 100644
--- a/sections/related-products.liquid
+++ b/sections/related-products.liquid
@@ -111,8 +111,8 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "info": "t:sections.all.colors.has_cards_info",
-      "default": "background-1"
+      "info": "t:sections.image-banner.settings.color_scheme.info",
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/sections/rich-text.liquid b/sections/rich-text.liquid
index 3210b5ecb8b..4a2914ce57b 100644
--- a/sections/rich-text.liquid
+++ b/sections/rich-text.liquid
@@ -148,7 +148,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "checkbox",
diff --git a/sections/slideshow.liquid b/sections/slideshow.liquid
index a2d048bf428..0b5738076a1 100644
--- a/sections/slideshow.liquid
+++ b/sections/slideshow.liquid
@@ -548,7 +548,7 @@
           "type": "color_scheme",
           "id": "color_scheme",
           "label": "t:sections.all.colors.label",
-          "default": "background-1"
+          "default": "scheme-1"
         },
         {
           "type": "header",
diff --git a/sections/video.liquid b/sections/video.liquid
index 624918ea904..17b14532c9c 100644
--- a/sections/video.liquid
+++ b/sections/video.liquid
@@ -239,7 +239,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "default": "background-1"
+      "default": "scheme-1"
     },
     {
       "type": "header",
diff --git a/templates/cart.json b/templates/cart.json
index 00ff37e5833..c830dd0464e 100644
--- a/templates/cart.json
+++ b/templates/cart.json
@@ -34,7 +34,7 @@
         "collection": "all",
         "products_to_show": 4,
         "columns_desktop": 4,
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "show_view_all": true,
         "swipe_on_mobile": false,
         "image_ratio": "square",
diff --git a/templates/collection.json b/templates/collection.json
index f21fa3a4c12..d12dfab5447 100644
--- a/templates/collection.json
+++ b/templates/collection.json
@@ -5,7 +5,7 @@
       "settings": {
         "show_collection_description": true,
         "show_collection_image": false,
-        "color_scheme": "background-1"
+        "color_scheme": "scheme-1"
       }
     },
     "product-grid": {
diff --git a/templates/index.json b/templates/index.json
index 51864508d43..92d10b71ece 100644
--- a/templates/index.json
+++ b/templates/index.json
@@ -40,7 +40,7 @@
         "desktop_content_position": "bottom-center",
         "show_text_box": false,
         "desktop_content_alignment": "center",
-        "color_scheme": "inverse",
+        "color_scheme": "scheme-3",
         "mobile_content_alignment": "center",
         "stack_images_on_mobile": false,
         "show_text_below": false
@@ -68,7 +68,7 @@
         "text"
       ],
       "settings": {
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "full_width": true,
         "padding_top": 40,
         "padding_bottom": 0
@@ -82,7 +82,7 @@
         "collection": "all",
         "products_to_show": 8,
         "columns_desktop": 4,
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "show_view_all": false,
         "swipe_on_mobile": false,
         "image_ratio": "adapt",
@@ -127,7 +127,7 @@
         "heading_size": "h2",
         "desktop_layout": "left",
         "mobile_layout": "collage",
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "padding_top": 36,
         "padding_bottom": 36
       }
@@ -140,7 +140,7 @@
         "heading_size": "h1",
         "description": "",
         "full_width": false,
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "padding_top": 36,
         "padding_bottom": 36
       }
@@ -192,7 +192,7 @@
         "button_label": "",
         "button_link": "",
         "swipe_on_mobile": false,
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "columns_mobile": "1",
         "padding_top": 36,
         "padding_bottom": 36
diff --git a/templates/page.contact.json b/templates/page.contact.json
index cf4e6931807..73a56c11d11 100644
--- a/templates/page.contact.json
+++ b/templates/page.contact.json
@@ -12,7 +12,7 @@
       "settings": {
         "heading": "",
         "heading_size": "h1",
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "padding_top": 36,
         "padding_bottom": 36
       }
diff --git a/templates/password.json b/templates/password.json
index 227a4d4938a..5366ca07a5a 100644
--- a/templates/password.json
+++ b/templates/password.json
@@ -34,7 +34,7 @@
         "desktop_content_position": "middle-center",
         "show_text_box": true,
         "desktop_content_alignment": "center",
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "mobile_content_alignment": "center",
         "show_text_below": true
       }
diff --git a/templates/product.json b/templates/product.json
index e8ffab4b0bb..62fb0ab6af7 100644
--- a/templates/product.json
+++ b/templates/product.json
@@ -141,7 +141,7 @@
         "desktop_content_position": "top",
         "desktop_content_alignment": "left",
         "content_layout": "no-overlap",
-        "color_scheme": "background-2",
+        "color_scheme": "scheme-2",
         "mobile_content_alignment": "left",
         "padding_top": 36,
         "padding_bottom": 36
@@ -184,7 +184,7 @@
         "button_label": "",
         "button_link": "",
         "swipe_on_mobile": false,
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "columns_mobile": "1",
         "padding_top": 36,
         "padding_bottom": 36
@@ -196,7 +196,7 @@
         "heading": "You may also like",
         "heading_size": "h2",
         "columns_desktop": 4,
-        "color_scheme": "background-1",
+        "color_scheme": "scheme-1",
         "image_ratio": "square",
         "show_secondary_image": true,
         "show_vendor": false,

From 2c847245ea3dfec6f248dcbb2dd76c4ceb65c437 Mon Sep 17 00:00:00 2001
From: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com>
Date: Thu, 23 Nov 2023 15:02:23 -0500
Subject: [PATCH 28/58] Fixed race condition for cart note updates (#3125)

---
 assets/cart.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/cart.js b/assets/cart.js
index 76ed47a31eb..7727d7ec629 100644
--- a/assets/cart.js
+++ b/assets/cart.js
@@ -234,7 +234,7 @@ if (!customElements.get('cart-note')) {
         super();
 
         this.addEventListener(
-          'change',
+          'input',
           debounce((event) => {
             const body = JSON.stringify({ note: event.target.value });
             fetch(`${routes.cart_update_url}`, { ...fetchConfig(), ...{ body } });

From a204f20eb3c25b0c544a41492937b2749c209777 Mon Sep 17 00:00:00 2001
From: Patrick Racicot <patrick.racicot@shopify.com>
Date: Thu, 14 Dec 2023 11:37:04 -0500
Subject: [PATCH 29/58] [Facets] support dynamic facet lists (#3123)

---
 assets/facets.js       | 62 +++++++++++++++++++++++++++++++-----------
 snippets/facets.liquid | 14 ++++++----
 2 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/assets/facets.js b/assets/facets.js
index 0739a4b623e..f41ab17a8db 100644
--- a/assets/facets.js
+++ b/assets/facets.js
@@ -34,7 +34,9 @@ class FacetFiltersForm extends HTMLElement {
     const sections = FacetFiltersForm.getSections();
     const countContainer = document.getElementById('ProductCount');
     const countContainerDesktop = document.getElementById('ProductCountDesktop');
-    const loadingSpinners = document.querySelectorAll('.facets-container .loading__spinner, facet-filters-form .loading__spinner');
+    const loadingSpinners = document.querySelectorAll(
+      '.facets-container .loading__spinner, facet-filters-form .loading__spinner'
+    );
     loadingSpinners.forEach((spinner) => spinner.classList.remove('hidden'));
     document.getElementById('ProductGridContainer').querySelector('.collection').classList.add('loading');
     if (countContainer) {
@@ -100,25 +102,54 @@ class FacetFiltersForm extends HTMLElement {
       containerDesktop.innerHTML = count;
       containerDesktop.classList.remove('loading');
     }
-    const loadingSpinners = document.querySelectorAll('.facets-container .loading__spinner, facet-filters-form .loading__spinner');
+    const loadingSpinners = document.querySelectorAll(
+      '.facets-container .loading__spinner, facet-filters-form .loading__spinner'
+    );
     loadingSpinners.forEach((spinner) => spinner.classList.add('hidden'));
   }
 
   static renderFilters(html, event) {
     const parsedHTML = new DOMParser().parseFromString(html, 'text/html');
-
-    const facetDetailsElements = parsedHTML.querySelectorAll(
+    const facetDetailsElementsFromFetch = parsedHTML.querySelectorAll(
       '#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter'
     );
-    const matchesIndex = (element) => {
+    const facetDetailsElementsFromDom = document.querySelectorAll(
+      '#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter'
+    );
+
+    // Remove facets that are no longer returned from the server
+    Array.from(facetDetailsElementsFromDom).forEach((currentElement) => {
+      if (!Array.from(facetDetailsElementsFromFetch).some(({ id }) => currentElement.id === id)) {
+        currentElement.remove();
+      }
+    });
+
+    const matchesId = (element) => {
       const jsFilter = event ? event.target.closest('.js-filter') : undefined;
-      return jsFilter ? element.dataset.index === jsFilter.dataset.index : false;
+      return jsFilter ? element.id === jsFilter.id : false;
     };
-    const facetsToRender = Array.from(facetDetailsElements).filter((element) => !matchesIndex(element));
-    const countsToRender = Array.from(facetDetailsElements).find(matchesIndex);
+    const facetsToRender = Array.from(facetDetailsElementsFromFetch).filter((element) => !matchesId(element));
+    const countsToRender = Array.from(facetDetailsElementsFromFetch).find(matchesId);
+
+    facetsToRender.forEach((elementToRender, index) => {
+      const currentElement = document.getElementById(elementToRender.id);
+      // Element already rendered in the DOM so just update the innerHTML
+      if (currentElement) {
+        document.getElementById(elementToRender.id).innerHTML = elementToRender.innerHTML;
+      } else {
+        if (index > 0) {
+          const { className: previousElementClassName, id: previousElementId } = facetsToRender[index - 1];
+          // Same facet type (eg horizontal/vertical or drawer/mobile)
+          if (elementToRender.className === previousElementClassName) {
+            document.getElementById(previousElementId).after(elementToRender);
+            return;
+          }
+        }
 
-    facetsToRender.forEach((element) => {
-      document.querySelector(`.js-filter[data-index="${element.dataset.index}"]`).innerHTML = element.innerHTML;
+        if (elementToRender.parentElement) {
+          document.querySelector(`#${elementToRender.parentElement.id} .js-filter`).before(elementToRender);
+        }
+      }
     });
 
     FacetFiltersForm.renderActiveFacets(parsedHTML);
@@ -131,12 +162,11 @@ class FacetFiltersForm extends HTMLElement {
         FacetFiltersForm.renderCounts(countsToRender, event.target.closest('.js-filter'));
         FacetFiltersForm.renderMobileCounts(countsToRender, document.getElementById(closestJSFilterID));
 
-        const newElementSelector = document
-          .getElementById(closestJSFilterID)
-          .classList.contains('mobile-facets__details')
-          ? `#${closestJSFilterID} .mobile-facets__close-button`
-          : `#${closestJSFilterID} .facets__summary`;
-        const newElementToActivate = document.querySelector(newElementSelector);
+        const newFacetDetailsElement = document.getElementById(closestJSFilterID);
+        const newElementSelector = newFacetDetailsElement.classList.contains('mobile-facets__details')
+          ? `.mobile-facets__close-button`
+          : `.facets__summary`;
+        const newElementToActivate = newFacetDetailsElement.querySelector(newElementSelector);
         if (newElementToActivate) newElementToActivate.focus();
       }
     }
diff --git a/snippets/facets.liquid b/snippets/facets.liquid
index 55981d6879a..8a5269d4c82 100644
--- a/snippets/facets.liquid
+++ b/snippets/facets.liquid
@@ -129,7 +129,7 @@
               {% case filter.type %}
                 {% when 'boolean', 'list' %}
                   <details
-                    id="Details-{{ forloop.index }}-{{ section.id }}"
+                    id="Details-{{ filter.param_name | escape }}-{{ section.id }}"
                     class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
                     data-index="{{ forloop.index }}"
                     {% if filter_type == 'vertical' and forloop.index == 1 %}
@@ -365,7 +365,7 @@
                     endif
                   %}
                   <details
-                    id="Details-{{ forloop.index }}-{{ section.id }}"
+                    id="Details-{{ filter.param_name | escape }}-{{ section.id }}"
                     class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
                     data-index="{{ forloop.index }}"
                     {% if filter_type == 'vertical' and forloop.index == 1 %}
@@ -682,7 +682,10 @@
                 </p>
               </div>
             </div>
-            <div class="mobile-facets__main has-submenu gradient">
+            <div
+              id="FacetsWrapperMobile"
+              class="mobile-facets__main has-submenu gradient"
+            >
               {%- if enable_filtering -%}
                 {%- for filter in results.filters -%}
                   {% liquid
@@ -699,7 +702,7 @@
                   {% case filter.type %}
                     {% when 'boolean', 'list' %}
                       <details
-                        id="Details-Mobile-{{ forloop.index }}-{{ section.id }}"
+                        id="Details-Mobile-{{ filter.param_name | escape }}-{{ section.id }}"
                         class="mobile-facets__details js-filter"
                         data-index="mobile-{{ forloop.index }}"
                       >
@@ -845,7 +848,7 @@
                         endif
                       %}
                       <details
-                        id="Details-Mobile-{{ forloop.index }}-{{ section.id }}"
+                        id="Details-Mobile-{{ filter.param_name | escape }}-{{ section.id }}"
                         class="mobile-facets__details js-filter"
                         data-index="mobile-{{ forloop.index }}"
                       >
@@ -959,6 +962,7 @@
 
               {%- if enable_sorting -%}
                 <div
+                  id="Details-Mobile-SortBy-{{ section.id }}"
                   class="mobile-facets__details js-filter{% if filter_type == 'drawer' %} medium-hide large-up-hide{% endif %}"
                   data-index="mobile-{{ forloop.index }}"
                 >

From fce1573a1ea36ca653582296d4ca70fa0def3a84 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Thu, 14 Dec 2023 13:21:44 -0500
Subject: [PATCH 30/58] Assign font family to input fields (#2871)

* Price per item, Popover and global style bugs (#2851)

* Fix cart submission on Quick Order List (#2868)

* Social icons: Visual fixes (#2855)

* Adjust spacing.

* Facebook + Tumblr icon size adjustments.

* Update social icon SVGs.

* Tidy up new icon sizes again.

* Resize icons.

* Make spacing slightly smaller.

* Make icons larger so they're more similar to the old sizes.

* Remove padding to compensate for extra viewbox space.

* Try a smaller Twitter icon.

* Update snapchat icon.

* Resize social links in menu drawer to 44x44

* replace translation string to have the translation visible (#2869)

* B2B compare at price with price range (#2858)

* Add sale badge and price-range for volume-pricing

* Add compare_at price to PDP and Feat Prod.

* Change opacity to 100% for price per item.

* Update the logic

* Hide price per item for unavailable variants.

* Remove margin for dl.

* Refactoring

* Correct a mistake in liquid.

* Change the JS logic back for updating price per item

* Add compare at to prod card. Add style to compare at

* Assign font family to input fields.

* Update assets/base.css

Co-authored-by: Kai <KaichenWang@users.noreply.github.com>

* Use the theme's font style + weight in form elements.

---------

Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Co-authored-by: melissaperreault <melissa.perreault@shopify.com>
Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Co-authored-by: Kai <KaichenWang@users.noreply.github.com>
---
 assets/base.css             | 6 ++++++
 assets/quantity-popover.css | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/assets/base.css b/assets/base.css
index 0aca2b6829a..151b99b9519 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -1585,6 +1585,9 @@ details[open] > .share-button__fallback {
   appearance: none;
   background-color: rgb(var(--color-background));
   color: rgb(var(--color-foreground));
+  font-family: var(--font-body-family);
+  font-style: var(--font-body-style);
+  font-weight: var(--font-body-weight);
   font-size: 1.6rem;
   width: 100%;
   box-sizing: border-box;
@@ -1925,6 +1928,9 @@ input[type='checkbox'] {
 
 .quantity__input {
   color: currentColor;
+  font-family: var(--font-body-family);
+  font-style: var(--font-body-style);
+  font-weight: var(--font-body-weight);
   font-size: 1.6rem;
   font-weight: 500;
   opacity: 0.85;
diff --git a/assets/quantity-popover.css b/assets/quantity-popover.css
index 3173a685a60..f7b0c87c987 100644
--- a/assets/quantity-popover.css
+++ b/assets/quantity-popover.css
@@ -161,4 +161,4 @@ quantity-popover .quantity__rules .divider:nth-child(2)::before {
 quantity-popover .quantity__button:not(:focus-visible):not(.focused),
 quantity-popover .quantity__input:not(:focus-visible):not(.focused) {
   background-color: initial;
-}
+}
\ No newline at end of file

From 8c2518beaaa3fe07fc61f03ce94b8fac2411d252 Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Fri, 15 Dec 2023 16:19:22 -0400
Subject: [PATCH 31/58] Update 1 translation file (#3155)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/fr.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/fr.json b/locales/fr.json
index c7f6f0bb31d..2216bacee61 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -206,7 +206,7 @@
       "reset": "Réinitialiser",
       "sort_button": "Trier",
       "sort_by_label": "Trier par :",
-      "to": "À",
+      "to": "Destination",
       "clear_filter": "Supprimer le filtre",
       "filter_selected_accessibility": "{{ type }} ({{ count }} filtres sélectionnés)",
       "show_more": "Afficher plus",

From 67b82a7091010caaf2354da4f25788d0e2c503fb Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Mon, 18 Dec 2023 09:51:21 -0500
Subject: [PATCH 32/58] Update 1 translation file (#3157)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/fr.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/fr.json b/locales/fr.json
index 2216bacee61..12707714af1 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -17,7 +17,7 @@
         "share_on_pinterest": "Épingler sur Pinterest"
       },
       "links": {
-        "twitter": "Twitter",
+        "twitter": "X",
         "facebook": "Facebook",
         "pinterest": "Pinterest",
         "instagram": "Instagram",

From cdba06653f0b65d05b18430bdd0d09eb5dd6315e Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Mon, 18 Dec 2023 09:57:50 -0500
Subject: [PATCH 33/58] Update 1 translation file (#3158)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/fr.schema.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
index 7902e9a0ad5..8b0f53108a8 100644
--- a/locales/fr.schema.json
+++ b/locales/fr.schema.json
@@ -56,7 +56,7 @@
       "name": "Médias sociaux",
       "settings": {
         "social_twitter_link": {
-          "label": "Twitter",
+          "label": "X",
           "info": "https://twitter.com/shopify"
         },
         "social_facebook_link": {

From 41e4604a808746a012b16d9406acda20a73674e3 Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Wed, 20 Dec 2023 10:30:10 -0400
Subject: [PATCH 34/58] Update 1 translation file (#3161)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/da.schema.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/da.schema.json b/locales/da.schema.json
index 3132cb08a13..55d5fdb0401 100644
--- a/locales/da.schema.json
+++ b/locales/da.schema.json
@@ -56,7 +56,7 @@
       "name": "Sociale medier",
       "settings": {
         "social_twitter_link": {
-          "label": "Twitter",
+          "label": "X",
           "info": "https://twitter.com/shopify"
         },
         "social_facebook_link": {

From 19f68280177e56b37744e8ea7cece7c869b41087 Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Wed, 20 Dec 2023 09:39:26 -0500
Subject: [PATCH 35/58] Update 2 translation files (#3160)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/da.json | 2 +-
 locales/fr.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/locales/da.json b/locales/da.json
index 82a7a5755ff..95973bc35bb 100644
--- a/locales/da.json
+++ b/locales/da.json
@@ -17,7 +17,7 @@
         "share_on_pinterest": "Pin på Pinterest"
       },
       "links": {
-        "twitter": "Twitter",
+        "twitter": "X",
         "facebook": "Facebook",
         "pinterest": "Pinterest",
         "instagram": "Instagram",
diff --git a/locales/fr.json b/locales/fr.json
index 12707714af1..77bdc63218c 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -299,7 +299,7 @@
         "quantity": "Quantité",
         "image": "Image de produit"
       },
-      "update": "Mettre à jour",
+      "update": "Mise à jour",
       "login": {
         "title": "Vous possédez un compte ?",
         "paragraph_html": "<a href=\"{{ link }}\" class=\"link underlined-link\">Connectez-vous</a> pour payer plus vite."

From 1ac327ac06142a335c4938c8cd02a823d2f91d64 Mon Sep 17 00:00:00 2001
From: Louisa Goncharenko <93098869+lougoncharenko@users.noreply.github.com>
Date: Wed, 20 Dec 2023 13:20:00 -0500
Subject: [PATCH 36/58] Applied image shape and ratio to placeholder images
 (#2817)

added classes and styles to get image shape and image ratio working

added styling on portrait placeholders

aligned placeholder when in potrait mode

applying code review suggestions and removed image-ratio
---
 assets/component-card.css           |  1 -
 sections/featured-collection.liquid |  2 ++
 snippets/card-product.liquid        | 18 ++++++++++++++----
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/assets/component-card.css b/assets/component-card.css
index d4081f00c9d..b4c8458c285 100644
--- a/assets/component-card.css
+++ b/assets/component-card.css
@@ -300,7 +300,6 @@
 }
 
 .card--standard:not(.card--horizontal) .placeholder-svg {
-  height: auto;
   width: 100%;
 }
 
diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid
index ff209cf64bb..15049af18d1 100644
--- a/sections/featured-collection.liquid
+++ b/sections/featured-collection.liquid
@@ -109,6 +109,8 @@
               {%- assign placeholder_image = 'product-apparel-' | append: forloop.rindex -%}
               {% render 'card-product',
                 show_vendor: section.settings.show_vendor,
+                media_aspect_ratio: section.settings.image_ratio,
+                image_shape: section.settings.image_shape,
                 placeholder_image: placeholder_image
               %}
             </li>
diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
index 1d83c18f98c..75163307778 100644
--- a/snippets/card-product.liquid
+++ b/snippets/card-product.liquid
@@ -325,21 +325,31 @@
     </div>
   </div>
 {%- else -%}
+  {%- liquid
+    assign ratio = 1
+    if media_aspect_ratio == 'portrait'
+      assign ratio = 0.8
+    endif
+  -%}
   <div class="card-wrapper product-card-wrapper underline-links-hover">
     <div
       class="
         card card--{{ settings.card_style }}
         {% if extend_height %} card--extend-height{% endif %}
+        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
         {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
       "
-      style="--ratio-percent: 100%;"
+      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
     >
       <div
         class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio"
-        style="--ratio-percent: 100%;"
       >
-        <div class="card__media">
-          <div class="media media--transparent">
+        <div
+          class="card__media {% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}"
+        >
+          <div
+            class="media media--transparent"
+          >
             {%- if placeholder_image -%}
               {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
             {%- else -%}

From 9376e598614b19878be99f09200745162d104f4d Mon Sep 17 00:00:00 2001
From: Alex Ilea <6627543+alisterdev@users.noreply.github.com>
Date: Thu, 21 Dec 2023 12:02:43 -0500
Subject: [PATCH 37/58] [Visual Display] Display accurate filter colors when
 high contrast mode is enabled (#3165)

---
 assets/component-visual-display.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/component-visual-display.css b/assets/component-visual-display.css
index 11e21e5cce5..f683b455d7e 100644
--- a/assets/component-visual-display.css
+++ b/assets/component-visual-display.css
@@ -82,6 +82,7 @@
   display: block;
   height: 100%;
   width: 100%;
+  forced-color-adjust: none;
 }
 
 .visual-display--presentation-swatch .visual-display__image {

From b1696f1b460dae8dc4f618e5af2fe36ef68bbd45 Mon Sep 17 00:00:00 2001
From: Abdulrahman Hamideh <abdulrahman.hamideh@shopify.com>
Date: Fri, 5 Jan 2024 12:42:35 -0500
Subject: [PATCH 38/58] Improved country selectors (#3175)

Original PR with review comments -> https://github.com/Shopify/dawn/pull/3135
---
 assets/component-localization-form.css | 176 +++++++++++++++++++++++--
 assets/component-menu-drawer.css       |   8 ++
 assets/global.js                       |   5 +-
 assets/localization-form.js            | 154 ++++++++++++++++++++--
 assets/section-footer.css              |   6 +
 layout/theme.liquid                    |   1 +
 locales/bg-BG.json                     |   5 +-
 locales/cs.json                        |   5 +-
 locales/da.json                        |   5 +-
 locales/de.json                        |   5 +-
 locales/el.json                        |   5 +-
 locales/en.default.json                |   5 +-
 locales/es.json                        |   5 +-
 locales/fi.json                        |   5 +-
 locales/fr.json                        |   5 +-
 locales/hr-HR.json                     |   5 +-
 locales/hu.json                        |   5 +-
 locales/id.json                        |   5 +-
 locales/it.json                        |   5 +-
 locales/ja.json                        |   5 +-
 locales/ko.json                        |   5 +-
 locales/lt-LT.json                     |   5 +-
 locales/nb.json                        |   5 +-
 locales/nl.json                        |   5 +-
 locales/pl.json                        |   5 +-
 locales/pt-BR.json                     |   5 +-
 locales/pt-PT.json                     |   5 +-
 locales/ro-RO.json                     |   5 +-
 locales/ru.json                        |   5 +-
 locales/sk-SK.json                     |   5 +-
 locales/sl-SI.json                     |   5 +-
 locales/sv.json                        |   5 +-
 locales/th.json                        |   5 +-
 locales/tr.json                        |   5 +-
 locales/vi.json                        |   5 +-
 locales/zh-CN.json                     |   5 +-
 locales/zh-TW.json                     |   5 +-
 snippets/country-localization.liquid   | 154 ++++++++++++++++++----
 snippets/language-localization.liquid  |  13 +-
 39 files changed, 596 insertions(+), 76 deletions(-)

diff --git a/assets/component-localization-form.css b/assets/component-localization-form.css
index 2285d96f6ab..a01bdac8fbe 100644
--- a/assets/component-localization-form.css
+++ b/assets/component-localization-form.css
@@ -51,13 +51,20 @@
 }
 
 .localization-form__currency {
-  display: inline-block;
+  opacity: 0;
+  transition: opacity 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  white-space: nowrap;
+  padding-right: 1.7rem;
 }
 
 @media screen and (max-width: 749px) {
   .localization-form .button {
     word-break: break-all;
   }
+
+  .localization-form__currency {
+    opacity: 1;
+  }
 }
 
 .localization-form__select {
@@ -149,6 +156,7 @@ noscript .localization-selector.link {
   border-radius: var(--popup-corner-radius);
   box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
     rgba(var(--color-shadow), var(--popup-shadow-opacity));
+  max-height: 27.5rem;
 }
 
 .disclosure__list {
@@ -158,20 +166,164 @@ noscript .localization-selector.link {
   padding-bottom: 0.5rem;
   padding-top: 0.5rem;
   scroll-padding: 0.5rem 0;
-  min-height: 8.2rem;
-  max-height: 20.65rem;
-  max-width: 22rem;
+  max-height: 20.5rem;
+  max-width: 25.5rem;
   min-width: 12rem;
   width: max-content;
 }
 
+.country-selector__list {
+  width: 25.5rem;
+  padding-bottom: 0.95rem;
+  padding-top: 0;
+}
+
+.country-selector__close-button {
+  display: none;
+}
+
+.country-filter {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.5rem 1.5rem 0.6rem;
+  position: sticky;
+  top: -0.02rem;
+  background-color: rgb(var(--color-background));
+  z-index: 6;
+}
+
+.country-filter__reset-button,
+.country-filter__search-icon {
+  right: calc(var(--inputs-border-width));
+  top: var(--inputs-border-width);
+}
+
+.country-filter__reset-button:not(:focus-visible)::after,
+.country-filter__reset-button:not(:focus)::after {
+  display: block;
+  height: calc(100% - 1.8rem);
+  content: '';
+  position: absolute;
+  right: 0;
+}
+
+.country-filter__reset-button:focus,
+.country-filter__reset-button:focus-visible {
+  background-color: rgb(var(--color-background));
+  z-index: 4;
+}
+
+.country-filter__reset-button:not(:focus-visible):not(.focused) {
+  box-shadow: inherit;
+  background-color: inherit;
+}
+
+.country-filter__reset-button:hover .icon {
+  transform: scale(1.07);
+}
+
+.country-filter__reset-button .icon.icon-close,
+.country-filter__search-icon .icon {
+  height: 1.8rem;
+  width: 1.8rem;
+  stroke-width: 0.1rem;
+}
+
+.country-filter__search-icon {
+  transition: opacity var(--duration-short) ease, visibility var(--duration-short) ease;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: none;
+  cursor: text;
+}
+
+.country-filter__search-icon--hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+@media screen and (max-width: 749px) {
+  .disclosure__list-wrapper.country-selector:not([hidden]) + .country-selector__overlay:empty {
+    display: block;
+  }
+
+  .country-selector__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(var(--color-foreground), 0.5);
+    z-index: 3;
+  }
+
+  .disclosure__list-wrapper.country-selector {
+    position: fixed;
+    bottom: -1rem;
+    left: 0;
+    width: 100%;
+    height: 80%;
+    max-height: 80vh;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+    z-index: 4;
+  }
+
+  .disclosure__list.country-selector__list {
+    max-height: 85%;
+    min-width: 100%;
+    margin-bottom: 0;
+    z-index: 5;
+  }
+
+  .country-selector__close-button.link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0rem;
+    background-color: transparent;
+    height: 4.4rem;
+    width: 4.4rem;
+  }
+
+  .country-selector__close-button .icon {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .country-filter {
+    padding: 1.5rem 2rem 0.6rem 1.5rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .country-filter--no-padding {
+    padding: 0;
+  }
+}
+
+.countries {
+  padding-top: 0.6rem;
+}
+
+.popular-countries {
+  border-bottom: 1px solid rgba(var(--color-foreground), 0.2);
+  padding-bottom: 0.6rem;
+  padding-top: 0.6rem;
+}
+
 .disclosure__item {
   position: relative;
 }
 
 .disclosure__link {
-  display: block;
-  padding: 0.95rem 3.5rem 0.95rem 2rem;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 0.5rem;
+  padding: 0.9rem 1.5rem;
   text-decoration: none;
   line-height: calc(1 + 0.8 / var(--font-body-scale));
   color: rgba(var(--color-foreground), 0.75);
@@ -182,8 +334,16 @@ noscript .localization-selector.link {
   color: rgb(var(--color-foreground));
 }
 
-.disclosure__link--active {
-  text-decoration: underline;
+.disclosure__link .icon-checkmark {
+  width: 1rem;
+  margin-right: 0.2rem;
+}
+
+.disclosure__link:hover .localization-form__currency,
+.disclosure__link:focus-visible .localization-form__currency,
+.disclosure__link:focus .localization-form__currency {
+  display: inline-block;
+  opacity: 1;
 }
 
 .disclosure__button[aria-expanded='true'] .icon-caret {
diff --git a/assets/component-menu-drawer.css b/assets/component-menu-drawer.css
index beaf09bee50..a8a4fbcf658 100644
--- a/assets/component-menu-drawer.css
+++ b/assets/component-menu-drawer.css
@@ -263,3 +263,11 @@ details[open].menu-opening > .menu-drawer__submenu {
 .menu-drawer .list-social__link {
   padding: 1.1rem 1.1rem;
 }
+
+@media screen and (max-width: 749px) {
+  .menu-drawer.country-selector-open {
+    transform: none !important;
+    filter: none !important;
+    transition: none !important;
+  }
+}
diff --git a/assets/global.js b/assets/global.js
index c04d3d37ad3..e8d89b149fa 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -359,8 +359,9 @@ class MenuDrawer extends HTMLElement {
     this.querySelectorAll('summary').forEach((summary) =>
       summary.addEventListener('click', this.onSummaryClick.bind(this))
     );
-    this.querySelectorAll('button:not(.localization-selector)').forEach((button) =>
-      button.addEventListener('click', this.onCloseButtonClick.bind(this))
+    this.querySelectorAll(
+      'button:not(.localization-selector):not(.country-selector__close-button):not(.country-filter__reset-button)'
+    ).forEach((button) => button.addEventListener('click', this.onCloseButtonClick.bind(this))
     );
   }
 
diff --git a/assets/localization-form.js b/assets/localization-form.js
index 997a81364fe..82937c799c7 100644
--- a/assets/localization-form.js
+++ b/assets/localization-form.js
@@ -6,12 +6,32 @@ if (!customElements.get('localization-form')) {
         super();
         this.elements = {
           input: this.querySelector('input[name="locale_code"], input[name="country_code"]'),
-          button: this.querySelector('button'),
+          button: this.querySelector('button.localization-form__select'),
           panel: this.querySelector('.disclosure__list-wrapper'),
+          search: this.querySelector('input[name="country_filter"]'),
+          closeButton: this.querySelector('.country-selector__close-button'),
+          resetButton: this.querySelector('.country-filter__reset-button'),
+          searchIcon: this.querySelector('.country-filter__search-icon'),
+          liveRegion: this.querySelector('#sr-country-search-results'),
         };
-        this.elements.button.addEventListener('click', this.openSelector.bind(this));
-        this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
         this.addEventListener('keyup', this.onContainerKeyUp.bind(this));
+        this.addEventListener('keydown', this.onContainerKeyDown.bind(this));
+        this.addEventListener('focusout', this.closeSelector.bind(this));
+        this.elements.button.addEventListener('click', this.openSelector.bind(this));
+
+        if (this.elements.search) {
+          this.elements.search.addEventListener('keyup', this.filterCountries.bind(this));
+          this.elements.search.addEventListener('focus', this.onSearchFocus.bind(this));
+          this.elements.search.addEventListener('blur', this.onSearchBlur.bind(this));
+          this.elements.search.addEventListener('keydown', this.onSearchKeyDown.bind(this));
+        }
+        if (this.elements.closeButton) {
+          this.elements.closeButton.addEventListener('click', this.hidePanel.bind(this));
+        }
+        if (this.elements.resetButton) {
+          this.elements.resetButton.addEventListener('click', this.resetFilter.bind(this));
+          this.elements.resetButton.addEventListener('mousedown', (event) => event.preventDefault());
+        }
 
         this.querySelectorAll('a').forEach((item) => item.addEventListener('click', this.onItemClick.bind(this)));
       }
@@ -19,15 +39,64 @@ if (!customElements.get('localization-form')) {
       hidePanel() {
         this.elements.button.setAttribute('aria-expanded', 'false');
         this.elements.panel.setAttribute('hidden', true);
+        if (this.elements.search) {
+          this.elements.search.value = '';
+          this.filterCountries();
+          this.elements.search.setAttribute('aria-activedescendant', '');
+        }
+        document.body.classList.remove('overflow-hidden-mobile');
+        document.querySelector('.menu-drawer').classList.remove('country-selector-open');
+      }
+
+      onContainerKeyDown(event) {
+        const focusableItems = Array.from(this.querySelectorAll('a')).filter(
+          (item) => !item.parentElement.classList.contains('hidden')
+        );
+        let focusedItemIndex = focusableItems.findIndex((item) => item === document.activeElement);
+        let itemToFocus;
+
+        switch (event.code.toUpperCase()) {
+          case 'ARROWUP':
+            event.preventDefault();
+            itemToFocus =
+              focusedItemIndex > 0 ? focusableItems[focusedItemIndex - 1] : focusableItems[focusableItems.length - 1];
+            itemToFocus.focus();
+            break;
+          case 'ARROWDOWN':
+            event.preventDefault();
+            itemToFocus =
+              focusedItemIndex < focusableItems.length - 1 ? focusableItems[focusedItemIndex + 1] : focusableItems[0];
+            itemToFocus.focus();
+            break;
+        }
+
+        if (!this.elements.search) return;
+
+        setTimeout(() => {
+          focusedItemIndex = focusableItems.findIndex((item) => item === document.activeElement);
+          if (focusedItemIndex > -1) {
+            this.elements.search.setAttribute('aria-activedescendant', focusableItems[focusedItemIndex].id);
+          } else {
+            this.elements.search.setAttribute('aria-activedescendant', '');
+          }
+        });
       }
 
       onContainerKeyUp(event) {
-        if (event.code.toUpperCase() !== 'ESCAPE') return;
+        event.preventDefault();
 
-        if (this.elements.button.getAttribute('aria-expanded') == 'false') return;
-        this.hidePanel();
-        event.stopPropagation();
-        this.elements.button.focus();
+        switch (event.code.toUpperCase()) {
+          case 'ESCAPE':
+            if (this.elements.button.getAttribute('aria-expanded') == 'false') return;
+            this.hidePanel();
+            event.stopPropagation();
+            this.elements.button.focus();
+            break;
+          case 'SPACE':
+            if (this.elements.button.getAttribute('aria-expanded') == 'true') return;
+            this.openSelector();
+            break;
+        }
       }
 
       onItemClick(event) {
@@ -44,15 +113,78 @@ if (!customElements.get('localization-form')) {
           'aria-expanded',
           (this.elements.button.getAttribute('aria-expanded') === 'false').toString()
         );
+        if (!document.body.classList.contains('overflow-hidden-tablet')) {
+          document.body.classList.add('overflow-hidden-mobile');
+        }
+        document.querySelector('.menu-drawer').classList.add('country-selector-open');
       }
 
       closeSelector(event) {
-        const isChild =
-          this.elements.panel.contains(event.relatedTarget) || this.elements.button.contains(event.relatedTarget);
-        if (!event.relatedTarget || !isChild) {
+        if (
+          event.target.classList.contains('country-selector__overlay') ||
+          !this.contains(event.target) ||
+          !this.contains(event.relatedTarget)
+        ) {
           this.hidePanel();
         }
       }
+
+      filterCountries() {
+        const searchValue = this.elements.search.value.toLowerCase();
+        const popularCountries = this.querySelector('.popular-countries');
+        const allCountries = this.querySelectorAll('a');
+        let visibleCountries = allCountries.length;
+
+        this.elements.resetButton.classList.toggle('hidden', !searchValue);
+
+        if (popularCountries) {
+          popularCountries.classList.toggle('hidden', searchValue);
+        }
+
+        allCountries.forEach((item) => {
+          const countryName = item.querySelector('.country').textContent.toLowerCase();
+          if (countryName.indexOf(searchValue) > -1) {
+            item.parentElement.classList.remove('hidden');
+            visibleCountries++;
+          } else {
+            item.parentElement.classList.add('hidden');
+            visibleCountries--;
+          }
+        });
+
+        if (this.elements.liveRegion) {
+          this.elements.liveRegion.innerHTML = window.accessibilityStrings.countrySelectorSearchCount.replace(
+            '[count]',
+            visibleCountries
+          );
+        }
+
+        this.querySelector('.country-selector').scrollTop = 0;
+        this.querySelector('.country-selector__list').scrollTop = 0;
+      }
+
+      resetFilter(event) {
+        event.stopPropagation();
+        this.elements.search.value = '';
+        this.filterCountries();
+        this.elements.search.focus();
+      }
+
+      onSearchFocus() {
+        this.elements.searchIcon.classList.add('country-filter__search-icon--hidden');
+      }
+
+      onSearchBlur() {
+        if (!this.elements.search.value) {
+          this.elements.searchIcon.classList.remove('country-filter__search-icon--hidden');
+        }
+      }
+
+      onSearchKeyDown(event) {
+        if (event.code.toUpperCase() === 'ENTER') {
+          event.preventDefault();
+        }
+      }
     }
   );
 }
diff --git a/assets/section-footer.css b/assets/section-footer.css
index 11aa7529b2a..9691474db6c 100644
--- a/assets/section-footer.css
+++ b/assets/section-footer.css
@@ -68,6 +68,12 @@
     row-gap: 1.5rem;
     justify-content: center;
   }
+
+  .footer__content-bottom.scroll-trigger.animate--slide-in {
+    animation: none;
+    opacity: 1;
+    transform: inherit;
+  }
 }
 
 .footer__localization:empty + .footer__column--info {
diff --git a/layout/theme.liquid b/layout/theme.liquid
index 31feb21cb81..786ac69eca2 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -342,6 +342,7 @@
         playSlideshow: `{{ 'sections.slideshow.play_slideshow' | t }}`,
         recipientFormExpanded: `{{ 'recipient.form.expanded' | t }}`,
         recipientFormCollapsed: `{{ 'recipient.form.collapsed' | t }}`,
+        countrySelectorSearchCount: `{{ 'localization.country_results_count' | t: count: '[count]' }}`,
       };
     </script>
 
diff --git a/locales/bg-BG.json b/locales/bg-BG.json
index 707695f7eaf..55c1b754a1b 100644
--- a/locales/bg-BG.json
+++ b/locales/bg-BG.json
@@ -365,7 +365,10 @@
     "country_label": "Държава/регион",
     "language_label": "Език",
     "update_language": "Актуализиране на езика",
-    "update_country": "Актуализиране на държава/регион"
+    "update_country": "Актуализиране на държава/регион",
+    "search": "Търсене",
+    "popular_countries_regions": "Популярни страни/региони",
+    "country_results_count": "Открити са {{ count }} страни/региона"
   },
   "customer": {
     "account_fallback": "Профил",
diff --git a/locales/cs.json b/locales/cs.json
index 3da8a96f702..2757d170bd7 100644
--- a/locales/cs.json
+++ b/locales/cs.json
@@ -389,7 +389,10 @@
     "country_label": "Země/oblast",
     "language_label": "Jazyk",
     "update_language": "Aktualizovat jazyk",
-    "update_country": "Aktualizovat zemi/oblast"
+    "update_country": "Aktualizovat zemi/oblast",
+    "search": "Začněte hledat",
+    "popular_countries_regions": "Oblíbené země/oblasti",
+    "country_results_count": "Byl nalezen tento počet zemí/oblastí: {{ count }}"
   },
   "customer": {
     "account": {
diff --git a/locales/da.json b/locales/da.json
index 95973bc35bb..2cca53dd5f2 100644
--- a/locales/da.json
+++ b/locales/da.json
@@ -365,7 +365,10 @@
     "country_label": "Land/område",
     "language_label": "Sprog",
     "update_language": "Opdater sprog",
-    "update_country": "Opdater land/område"
+    "update_country": "Opdater land/område",
+    "search": "Søg",
+    "popular_countries_regions": "Populære lande/områder",
+    "country_results_count": "{{ count }} lande/områder er fundet"
   },
   "customer": {
     "account": {
diff --git a/locales/de.json b/locales/de.json
index 635924c1826..e731a520137 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -365,7 +365,10 @@
     "country_label": "Land/Region",
     "language_label": "Sprache",
     "update_language": "Sprache aktualisieren",
-    "update_country": "Land/Region aktualisieren"
+    "update_country": "Land/Region aktualisieren",
+    "search": "Suchen",
+    "popular_countries_regions": "Beliebte Länder/Regionen",
+    "country_results_count": "{{ count }} Länder/Regionen gefunden"
   },
   "customer": {
     "account": {
diff --git a/locales/el.json b/locales/el.json
index 6a437a30ca2..6c3fa43cbe8 100644
--- a/locales/el.json
+++ b/locales/el.json
@@ -365,7 +365,10 @@
     "country_label": "Χώρα/περιοχή",
     "language_label": "Γλώσσα",
     "update_language": "Ενημέρωση γλώσσας",
-    "update_country": "Ενημερώστε τη χώρα/περιοχή"
+    "update_country": "Ενημερώστε τη χώρα/περιοχή",
+    "search": "Αναζήτηση",
+    "popular_countries_regions": "Δημοφιλείς χώρες/περιοχές",
+    "country_results_count": "Βρέθηκαν {{ count }} χώρες/περιοχές"
   },
   "customer": {
     "account": {
diff --git a/locales/en.default.json b/locales/en.default.json
index 52ffeaee0ac..06fe88bd86f 100644
--- a/locales/en.default.json
+++ b/locales/en.default.json
@@ -366,7 +366,10 @@
     "country_label": "Country/region",
     "language_label": "Language",
     "update_language": "Update language",
-    "update_country": "Update country/region"
+    "update_country": "Update country/region",
+    "search": "Search",
+    "popular_countries_regions": "Popular countries/regions",
+    "country_results_count": "{{ count }} countries/regions found"
   },
   "customer": {
     "account": {
diff --git a/locales/es.json b/locales/es.json
index 39c3dd65cd0..ed2fc5d0d13 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -377,7 +377,10 @@
     "country_label": "País/región",
     "language_label": "Idioma",
     "update_language": "Actualizar idioma",
-    "update_country": "Actualizar país/región"
+    "update_country": "Actualizar país/región",
+    "search": "Buscar",
+    "popular_countries_regions": "Países o regiones populares",
+    "country_results_count": "{{ count }} países o regiones encontrados"
   },
   "customer": {
     "account": {
diff --git a/locales/fi.json b/locales/fi.json
index 70ae6a5f8b8..8ef7d12fa21 100644
--- a/locales/fi.json
+++ b/locales/fi.json
@@ -365,7 +365,10 @@
     "country_label": "Maa/alue",
     "language_label": "Kieli",
     "update_language": "Päivitä kieli",
-    "update_country": "Päivitä maa/alue"
+    "update_country": "Päivitä maa/alue",
+    "search": "Hae",
+    "popular_countries_regions": "Suositut maat/alueet",
+    "country_results_count": "{{ count }} maata/aluetta löytyi"
   },
   "customer": {
     "account": {
diff --git a/locales/fr.json b/locales/fr.json
index 77bdc63218c..d76cff9a9eb 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -377,7 +377,10 @@
     "country_label": "Pays/région",
     "language_label": "Langue",
     "update_language": "Mettre à jour la langue",
-    "update_country": "Mettre à jour le pays/la région"
+    "update_country": "Mettre à jour le pays/la région",
+    "search": "Rechercher",
+    "popular_countries_regions": "Pays/régions populaires",
+    "country_results_count": "{{ count }} pays/régions trouvés"
   },
   "customer": {
     "account": {
diff --git a/locales/hr-HR.json b/locales/hr-HR.json
index 848d266e1e0..291d1f35b5a 100644
--- a/locales/hr-HR.json
+++ b/locales/hr-HR.json
@@ -377,7 +377,10 @@
     "country_label": "Država/regija",
     "language_label": "Jezik",
     "update_language": "Ažuriraj jezik",
-    "update_country": "Ažuriraj državu/regiju"
+    "update_country": "Ažuriraj državu/regiju",
+    "search": "Traži",
+    "popular_countries_regions": "Popularne zemlje/regije",
+    "country_results_count": "Pronađen je sljedeći broj zemalja/regija: {{ count }}"
   },
   "customer": {
     "account": {
diff --git a/locales/hu.json b/locales/hu.json
index 11998f287be..5f5bf078f0d 100644
--- a/locales/hu.json
+++ b/locales/hu.json
@@ -365,7 +365,10 @@
     "country_label": "Ország/régió",
     "language_label": "Nyelv",
     "update_language": "Nyelv módosítása",
-    "update_country": "Ország/régió frissítése"
+    "update_country": "Ország/régió frissítése",
+    "search": "Keresés",
+    "popular_countries_regions": "Népszerű országok/régiók",
+    "country_results_count": "{{ count }} ország/régió található"
   },
   "customer": {
     "account": {
diff --git a/locales/id.json b/locales/id.json
index ffa05031138..b732a2da2dc 100644
--- a/locales/id.json
+++ b/locales/id.json
@@ -365,7 +365,10 @@
     "country_label": "Negara/Wilayah",
     "language_label": "Bahasa",
     "update_language": "Perbarui bahasa",
-    "update_country": "Perbarui negara/wilayah"
+    "update_country": "Perbarui negara/wilayah",
+    "search": "Cari",
+    "popular_countries_regions": "Negara/wilayah populer",
+    "country_results_count": "{{ count }} negara/wilayah ditemukan"
   },
   "customer": {
     "account": {
diff --git a/locales/it.json b/locales/it.json
index cbc6581d1f1..2ff3d78d9a7 100644
--- a/locales/it.json
+++ b/locales/it.json
@@ -377,7 +377,10 @@
     "country_label": "Paese/Area geografica",
     "language_label": "Lingua",
     "update_language": "Aggiorna lingua",
-    "update_country": "Aggiorna paese/area geografica"
+    "update_country": "Aggiorna paese/area geografica",
+    "search": "Cerca",
+    "popular_countries_regions": "Paesi/aree geografiche popolari",
+    "country_results_count": "{{ count }} paesi/aree geografiche trovati"
   },
   "customer": {
     "account": {
diff --git a/locales/ja.json b/locales/ja.json
index f024f8693a0..0e616f78e36 100644
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -365,7 +365,10 @@
     "country_label": "国/地域",
     "language_label": "言語",
     "update_language": "言語を更新する",
-    "update_country": "国/地域を更新する"
+    "update_country": "国/地域を更新する",
+    "search": "検索",
+    "popular_countries_regions": "人気のある国/地域",
+    "country_results_count": "{{ count }}の国/地域が見つかりました"
   },
   "customer": {
     "account": {
diff --git a/locales/ko.json b/locales/ko.json
index 3ebce3b2f55..43619eb8be7 100644
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -365,7 +365,10 @@
     "country_label": "국가/지역",
     "language_label": "언어",
     "update_language": "언어 업데이트",
-    "update_country": "국가/지역 업데이트"
+    "update_country": "국가/지역 업데이트",
+    "search": "검색",
+    "popular_countries_regions": "인기 국가/지역",
+    "country_results_count": "{{ count }}개의 국가/지역 찾음"
   },
   "customer": {
     "account": {
diff --git a/locales/lt-LT.json b/locales/lt-LT.json
index 9a418b04fcd..5414b41f988 100644
--- a/locales/lt-LT.json
+++ b/locales/lt-LT.json
@@ -389,7 +389,10 @@
     "country_label": "Šalis / regionas",
     "language_label": "Kalba",
     "update_language": "Atnaujinti kalbą",
-    "update_country": "Atnaujinti šalį / regioną"
+    "update_country": "Atnaujinti šalį / regioną",
+    "search": "Ieškoti",
+    "popular_countries_regions": "Populiarios valstybės / regionai",
+    "country_results_count": "Rasta valstybių / regionų: {{ count }}"
   },
   "customer": {
     "account": {
diff --git a/locales/nb.json b/locales/nb.json
index b2ca9a75b02..44aa313c9e2 100644
--- a/locales/nb.json
+++ b/locales/nb.json
@@ -365,7 +365,10 @@
     "country_label": "Land/region",
     "language_label": "Språk",
     "update_language": "Oppdater språk",
-    "update_country": "Oppdater land/region"
+    "update_country": "Oppdater land/region",
+    "search": "Søk",
+    "popular_countries_regions": "Populære land/regioner",
+    "country_results_count": "{{ count }} land/regioner funnet"
   },
   "customer": {
     "account": {
diff --git a/locales/nl.json b/locales/nl.json
index e17599b2525..e1514ebbf3c 100644
--- a/locales/nl.json
+++ b/locales/nl.json
@@ -365,7 +365,10 @@
     "country_label": "Land/regio",
     "language_label": "Taal",
     "update_language": "Taal bijwerken",
-    "update_country": "Land/regio bijwerken"
+    "update_country": "Land/regio bijwerken",
+    "search": "Zoeken",
+    "popular_countries_regions": "Populaire landen/regio's",
+    "country_results_count": "{{ count }} landen/regio's gevonden"
   },
   "customer": {
     "account": {
diff --git a/locales/pl.json b/locales/pl.json
index 91636e3d695..73ab5d2567d 100644
--- a/locales/pl.json
+++ b/locales/pl.json
@@ -389,7 +389,10 @@
     "country_label": "Kraj/region",
     "language_label": "Język",
     "update_language": "Aktualizuj język",
-    "update_country": "Aktualizuj kraj/region"
+    "update_country": "Aktualizuj kraj/region",
+    "search": "Szukaj",
+    "popular_countries_regions": "Popularne kraje/regiony",
+    "country_results_count": "Liczba znalezionych krajów/regionów: {{ count }}"
   },
   "customer": {
     "account": {
diff --git a/locales/pt-BR.json b/locales/pt-BR.json
index 6d469d3b33d..0da9954eb96 100644
--- a/locales/pt-BR.json
+++ b/locales/pt-BR.json
@@ -377,7 +377,10 @@
     "country_label": "País/Região",
     "language_label": "Idioma",
     "update_language": "Atualizar idioma",
-    "update_country": "Atualizar país/região"
+    "update_country": "Atualizar país/região",
+    "search": "Pesquisar",
+    "popular_countries_regions": "Países/regiões populares",
+    "country_results_count": "{{ count }} países/regiões encontrados"
   },
   "customer": {
     "account": {
diff --git a/locales/pt-PT.json b/locales/pt-PT.json
index ce5a34d8924..3a199de50cb 100644
--- a/locales/pt-PT.json
+++ b/locales/pt-PT.json
@@ -377,7 +377,10 @@
     "country_label": "País/região",
     "language_label": "Idioma",
     "update_language": "Atualizar idioma",
-    "update_country": "Atualizar país/região"
+    "update_country": "Atualizar país/região",
+    "search": "Pesquisar",
+    "popular_countries_regions": "Países/regiões populares",
+    "country_results_count": "{{ count }} países/regiões encontrados"
   },
   "customer": {
     "account": {
diff --git a/locales/ro-RO.json b/locales/ro-RO.json
index 109951e65f5..ba868f98f7f 100644
--- a/locales/ro-RO.json
+++ b/locales/ro-RO.json
@@ -377,7 +377,10 @@
     "country_label": "Țară/Regiune",
     "language_label": "Limbă",
     "update_language": "Actualizați limba",
-    "update_country": "Actualizați țara/regiunea"
+    "update_country": "Actualizați țara/regiunea",
+    "search": "Caută",
+    "popular_countries_regions": "Țări/regiuni populare",
+    "country_results_count": "{{ count }} țări/regiuni găsite"
   },
   "customer": {
     "account": {
diff --git a/locales/ru.json b/locales/ru.json
index 76935652797..94edd32c189 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -389,7 +389,10 @@
     "country_label": "Страна/регион",
     "language_label": "Язык",
     "update_language": "Изменить язык",
-    "update_country": "Изменить данные о стране/регионе"
+    "update_country": "Изменить данные о стране/регионе",
+    "search": "Поиск",
+    "popular_countries_regions": "Популярные страны / регионы",
+    "country_results_count": "Найдены страны / регионы: {{ count }}"
   },
   "customer": {
     "account": {
diff --git a/locales/sk-SK.json b/locales/sk-SK.json
index 4598c4593a0..662a787f3e1 100644
--- a/locales/sk-SK.json
+++ b/locales/sk-SK.json
@@ -389,7 +389,10 @@
     "country_label": "Krajina/oblasť",
     "language_label": "Jazyk",
     "update_language": "Aktualizovať jazyk",
-    "update_country": "Aktualizovať krajinu/oblasť"
+    "update_country": "Aktualizovať krajinu/oblasť",
+    "search": "Vyhľadať",
+    "popular_countries_regions": "Obľúbené krajiny/oblasti",
+    "country_results_count": "Našiel sa tento počet krajín/oblastí: {{ count }}"
   },
   "customer": {
     "account": {
diff --git a/locales/sl-SI.json b/locales/sl-SI.json
index e695adb41ea..d1fbb3e6bd1 100644
--- a/locales/sl-SI.json
+++ b/locales/sl-SI.json
@@ -389,7 +389,10 @@
     "country_label": "Država/regija",
     "language_label": "Jezik",
     "update_language": "Posodobi jezik",
-    "update_country": "Posodobi državo/regijo"
+    "update_country": "Posodobi državo/regijo",
+    "search": "Išči",
+    "popular_countries_regions": "Priljubljene države/regije",
+    "country_results_count": "Najdene države/regije: {{ count }}"
   },
   "customer": {
     "account": {
diff --git a/locales/sv.json b/locales/sv.json
index 2424c7fd8b0..bbe2868cfef 100644
--- a/locales/sv.json
+++ b/locales/sv.json
@@ -365,7 +365,10 @@
     "country_label": "Land/Region",
     "language_label": "Språk",
     "update_language": "Uppdatera språk",
-    "update_country": "Uppdatera land/region"
+    "update_country": "Uppdatera land/region",
+    "search": "Sök",
+    "popular_countries_regions": "Populära länder/regioner",
+    "country_results_count": "{{ count }} länder/regioner hittades"
   },
   "customer": {
     "account": {
diff --git a/locales/th.json b/locales/th.json
index 64b09cdec86..87abc5823ad 100644
--- a/locales/th.json
+++ b/locales/th.json
@@ -365,7 +365,10 @@
     "country_label": "ประเทศ/ภูมิภาค",
     "language_label": "ภาษา",
     "update_language": "อัปเดตภาษา",
-    "update_country": "อัปเดตประเทศ/ภูมิภาค"
+    "update_country": "อัปเดตประเทศ/ภูมิภาค",
+    "search": "ค้นหา",
+    "popular_countries_regions": "ประเทศ/ภูมิภาคยอดนิยม",
+    "country_results_count": "พบประเทศ/ภูมิภาค {{ count }} แห่ง"
   },
   "customer": {
     "account": {
diff --git a/locales/tr.json b/locales/tr.json
index b218cc58203..8e67a8f7f20 100644
--- a/locales/tr.json
+++ b/locales/tr.json
@@ -365,7 +365,10 @@
     "country_label": "Ülke/bölge",
     "language_label": "Dil",
     "update_language": "Dili güncelle",
-    "update_country": "Ülke/bölge bilgisini güncelle"
+    "update_country": "Ülke/bölge bilgisini güncelle",
+    "search": "Ara",
+    "popular_countries_regions": "Popüler ülkeler/bölgeler",
+    "country_results_count": "{{ count }} ülke/bölge bulundu"
   },
   "customer": {
     "account": {
diff --git a/locales/vi.json b/locales/vi.json
index b2978fdb789..409eccd973e 100644
--- a/locales/vi.json
+++ b/locales/vi.json
@@ -365,7 +365,10 @@
     "country_label": "Quốc gia/khu vực",
     "language_label": "Ngôn ngữ",
     "update_language": "Cập nhật ngôn ngữ",
-    "update_country": "Cập nhật quốc gia/khu vực"
+    "update_country": "Cập nhật quốc gia/khu vực",
+    "search": "Tìm kiếm",
+    "popular_countries_regions": "Quốc gia/khu vực phổ biến",
+    "country_results_count": "Đã tìm thấy {{ count }} quốc gia/khu vực"
   },
   "customer": {
     "account": {
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 036f378fa5e..9ec8f2893cd 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -365,7 +365,10 @@
     "country_label": "国家/地区",
     "language_label": "语言",
     "update_language": "更新语言",
-    "update_country": "更新国家/地区"
+    "update_country": "更新国家/地区",
+    "search": "搜索",
+    "popular_countries_regions": "热门国家/地区",
+    "country_results_count": "找到 {{ count }} 个国家/地区"
   },
   "customer": {
     "account": {
diff --git a/locales/zh-TW.json b/locales/zh-TW.json
index 1318b2d0e27..53bd0cec811 100644
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -365,7 +365,10 @@
     "country_label": "國家/地區",
     "language_label": "語言",
     "update_language": "更新語言",
-    "update_country": "更新國家/地區"
+    "update_country": "更新國家/地區",
+    "search": "搜尋",
+    "popular_countries_regions": "常見國家/地區",
+    "country_results_count": "找到 {{ count }} 個國家/地區"
   },
   "customer": {
     "account": {
diff --git a/snippets/country-localization.liquid b/snippets/country-localization.liquid
index 2cef4f9596d..1672515fb98 100644
--- a/snippets/country-localization.liquid
+++ b/snippets/country-localization.liquid
@@ -5,41 +5,151 @@
     - localPosition: pass in the position in which the form is coming up to create specific IDs
 {%- endcomment -%}
 
+{%- liquid
+  assign currencies = localization.available_countries | map: 'currency' | map: 'iso_code' | uniq
+  assign popular_countries = localization.available_countries | where: 'popular?' | sort: 'name'
+
+  assign show_country_filter = false
+  if localization.available_countries.size > 9
+    assign show_country_filter = true
+  endif
+
+  assign show_popular_countries = false
+  if localization.available_countries.size > 9 and popular_countries.size > 1
+    assign show_popular_countries = true
+  endif
+%}
+
 <div class="disclosure">
   <button
     type="button"
     class="disclosure__button localization-form__select localization-selector link link--text caption-large"
     aria-expanded="false"
-    aria-controls="{{ localPosition }}List"
+    aria-controls="{{ localPosition }}-country-results"
     aria-describedby="{{ localPosition }}Label"
   >
     <span>
-      {{- localization.country.currency.iso_code }}
-      {{ localization.country.currency.symbol }} | {{ localization.country.name -}}
+      {{- localization.country.name }} |
+      {{ localization.country.currency.iso_code }}
+      {{ localization.country.currency.symbol -}}
     </span>
     {% render 'icon-caret' %}
   </button>
-  <div class="disclosure__list-wrapper" hidden>
-    <ul id="{{ localPosition }}List" role="list" class="disclosure__list list-unstyled">
-      {%- for country in localization.available_countries -%}
-        <li class="disclosure__item" tabindex="-1">
-          <a
-            class="link link--text disclosure__link caption-large focus-inset{% if country.iso_code == localization.country.iso_code %} disclosure__link--active{% endif %}"
-            href="#"
-            {% if country.iso_code == localization.country.iso_code %}
-              aria-current="true"
-            {% endif %}
-            data-value="{{ country.iso_code }}"
+  <div class="disclosure__list-wrapper country-selector" hidden>
+    <div class="country-filter{% unless show_country_filter %} country-filter--no-padding{% endunless %}">
+      {% if show_country_filter %}
+        <div class="field">
+          <input
+            class="country-filter__input field__input"
+            id="country-filter-input"
+            type="search"
+            name="country_filter"
+            value=""
+            placeholder="{{ 'localization.search' | t }}"
+            role="combobox"
+            aria-owns="country-results"
+            aria-controls="country-results"
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+            autocorrect="off"
+            autocomplete="off"
+            autocapitalize="off"
+            spellcheck="false"
+          >
+          <label class="field__label" for="country-filter-input">{{ 'localization.search' | t }}</label>
+          <button
+            type="reset"
+            class="country-filter__reset-button field__button hidden"
+            aria-label="{{ 'general.search.reset' | t }}"
           >
-            <span class="localization-form__currency">
-              {{- country.currency.iso_code }}
-              {{ country.currency.symbol }} |</span
+            <svg class="icon icon-close" aria-hidden="true" focusable="false">
+              <use xlink:href="#icon-reset">
+            </svg>
+          </button>
+          <div class="country-filter__search-icon field__button motion-reduce">
+            <svg class="icon icon-search" aria-hidden="true" focusable="false">
+              <use xlink:href="#icon-search">
+            </svg>
+          </div>
+        </div>
+      {% endif %}
+      <button
+        class="country-selector__close-button button--small link"
+        type="button"
+        aria-label="{{ 'accessibility.close' | t }}"
+      >
+        {% render 'icon-close' %}
+      </button>
+    </div>
+    <div id="sr-country-search-results" class="visually-hidden" aria-live="polite"></div>
+    <div
+      class="disclosure__list country-selector__list"
+      id="{{ localPosition }}-country-results"
+    >
+      {% if show_popular_countries %}
+        <ul
+          role="list"
+          class="list-unstyled popular-countries"
+          aria-label="{{ 'localization.popular_countries_regions' | t }}"
+        >
+          {%- for country in popular_countries -%}
+            <li class="disclosure__item" tabindex="-1">
+              <a
+                class="link link--text disclosure__link caption-large focus-inset"
+                href="#"
+                {% if country.iso_code == localization.country.iso_code %}
+                  aria-current="true"
+                {% endif %}
+                data-value="{{ country.iso_code }}"
+                id="{{ country.name }}"
+              >
+                <span
+                  {% if country.iso_code != localization.country.iso_code %}
+                    class="visibility-hidden"
+                  {% endif %}
+                >
+                  {%- render 'icon-checkmark' -%}
+                </span>
+                <span class="country">{{- country.name }}</span>
+                <span class="localization-form__currency motion-reduce {% if currencies.size < 2 %}hidden{% endif %}">
+                  {{ country.currency.iso_code }}
+                  {{ country.currency.symbol -}}
+                </span>
+              </a>
+            </li>
+          {%- endfor -%}
+        </ul>
+      {% endif %}
+      <ul role="list" class="list-unstyled countries">
+        {%- for country in localization.available_countries -%}
+          <li class="disclosure__item" tabindex="-1">
+            <a
+              class="link link--text disclosure__link caption-large focus-inset"
+              href="#"
+              {% if country.iso_code == localization.country.iso_code %}
+                aria-current="true"
+              {% endif %}
+              data-value="{{ country.iso_code }}"
+              id="{{ country.name }}"
             >
-            {{ country.name }}
-          </a>
-        </li>
-      {%- endfor -%}
-    </ul>
+              <span
+                {% if country.iso_code != localization.country.iso_code %}
+                  class="visibility-hidden"
+                {% endif %}
+              >
+                {%- render 'icon-checkmark' -%}
+              </span>
+              <span class="country">{{- country.name }}</span>
+              <span class="localization-form__currency motion-reduce{% if currencies.size < 2 %} hidden{% endif %}">
+                {{ country.currency.iso_code }}
+                {{ country.currency.symbol -}}
+              </span>
+            </a>
+          </li>
+        {%- endfor -%}
+      </ul>
+    </div>
   </div>
+  <div class="country-selector__overlay"></div>
 </div>
 <input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
diff --git a/snippets/language-localization.liquid b/snippets/language-localization.liquid
index 40685845290..204748e66c7 100644
--- a/snippets/language-localization.liquid
+++ b/snippets/language-localization.liquid
@@ -21,7 +21,7 @@
       {%- for language in localization.available_languages -%}
         <li class="disclosure__item" tabindex="-1">
           <a
-            class="link link--text disclosure__link caption-large{% if language.iso_code == localization.language.iso_code %} disclosure__link--active{% endif %} focus-inset"
+            class="link link--text disclosure__link caption-large focus-inset"
             href="#"
             hreflang="{{ language.iso_code }}"
             lang="{{ language.iso_code }}"
@@ -30,7 +30,16 @@
             {% endif %}
             data-value="{{ language.iso_code }}"
           >
-            {{ language.endonym_name | capitalize }}
+            <span
+              {% if language.iso_code != localization.language.iso_code %}
+                class="visibility-hidden"
+              {% endif %}
+            >
+              {%- render 'icon-checkmark' -%}
+            </span>
+            <span>
+              {{ language.endonym_name | capitalize }}
+            </span>
           </a>
         </li>
       {%- endfor -%}

From 9e6f6ca40852fb8a00a4941ff46ddf19047880b8 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 5 Jan 2024 14:43:20 -0500
Subject: [PATCH 39/58] Update inline quantity error styles. (#3150)

---
 assets/component-cart-items.css | 12 +++++++-----
 assets/section-main-product.css | 10 ++++++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/assets/component-cart-items.css b/assets/component-cart-items.css
index 23303e61776..fc1e7e1bb9a 100644
--- a/assets/component-cart-items.css
+++ b/assets/component-cart-items.css
@@ -184,16 +184,18 @@ cart-remove-button .icon-remove {
 }
 
 .cart-item__error-text {
-  font-size: 1.2rem;
-  line-height: calc(1 + 0.2 / var(--font-body-scale));
+  font-size: 1.3rem;
+  line-height: 1.4;
+  letter-spacing: 0.04rem;
   order: 1;
 }
 
 .cart-item__error-text + svg {
   flex-shrink: 0;
-  width: 1.2rem;
-  margin-right: 0.5rem;
-  margin-top: 0.1rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.7rem;
+  margin-top: 0.25rem;
 }
 
 .cart-item__error-text:empty + svg {
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index 7a523d9db72..5f0a37e0d64 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -146,16 +146,18 @@
 .product-form__error-message-wrapper:not([hidden]) {
   display: flex;
   align-items: flex-start;
-  font-size: 1.2rem;
+  font-size: 1.3rem;
+  line-height: 1.4;
+  letter-spacing: 0.04rem;
   margin-bottom: 1.5rem;
 }
 
 .product-form__error-message-wrapper svg {
   flex-shrink: 0;
-  width: 1.2rem;
-  height: 1.2rem;
+  width: 1.5rem;
+  height: 1.5rem;
   margin-right: 0.7rem;
-  margin-top: 0.5rem;
+  margin-top: 0.25rem;
 }
 
 /* Form Elements */

From 144ba4b4f7723a981884180a6785a73d9a145e46 Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Fri, 5 Jan 2024 16:35:15 -0400
Subject: [PATCH 40/58] Update 1 translation file (#3177)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/cs.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/cs.json b/locales/cs.json
index 2757d170bd7..4c646f2d05e 100644
--- a/locales/cs.json
+++ b/locales/cs.json
@@ -510,7 +510,7 @@
       "subtext": "Vaše dárková karta",
       "gift_card_code": "Kód dárkové karty",
       "shop_link": "Navštívit online obchod",
-      "add_to_apple_wallet": "Přidat do Apple Wallet",
+      "add_to_apple_wallet": "Přidat do Apple Peněženky",
       "qr_image_alt": "QR kód: po naskenování můžete uplatnit svou dárkovou kartu",
       "copy_code": "Zkopírovat kód dárkové karty",
       "expired": "Platnost vypršela",

From 0e9938c2ec22a519b4feb0545da88892611827a9 Mon Sep 17 00:00:00 2001
From: Alex Ilea <6627543+alisterdev@users.noreply.github.com>
Date: Fri, 5 Jan 2024 16:08:27 -0500
Subject: [PATCH 41/58] [Variant Picker] Update settings copy (#3173)

---
 locales/cs.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/da.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/de.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/en.default.schema.json | 90 +++++++++++++++++++++++++++-----
 locales/es.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/fi.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/fr.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/it.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/ja.schema.json         | 94 ++++++++++++++++++++++++++++------
 locales/ko.schema.json         | 94 ++++++++++++++++++++++++++++------
 locales/nb.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/nl.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/pl.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/pt-BR.schema.json      | 90 +++++++++++++++++++++++++++-----
 locales/pt-PT.schema.json      | 94 ++++++++++++++++++++++++++++------
 locales/sv.schema.json         | 94 ++++++++++++++++++++++++++++------
 locales/th.schema.json         | 94 ++++++++++++++++++++++++++++------
 locales/tr.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/vi.schema.json         | 90 +++++++++++++++++++++++++++-----
 locales/zh-CN.schema.json      | 94 ++++++++++++++++++++++++++++------
 locales/zh-TW.schema.json      | 94 ++++++++++++++++++++++++++++------
 21 files changed, 1610 insertions(+), 308 deletions(-)

diff --git a/locales/cs.schema.json b/locales/cs.schema.json
index b1a25d0822b..f8a87b6dcba 100644
--- a/locales/cs.schema.json
+++ b/locales/cs.schema.json
@@ -1639,13 +1639,44 @@
         "variant_picker": {
           "name": "Selektor variant",
           "settings": {
-            "picker_type": {
-              "label": "Typ",
-              "options__1": {
-                "label": "Rozevírací nabídka"
-              },
-              "options__2": {
-                "label": "Kulaté přepínače"
+            "options": {
+              "header": "Varianty jen s textem",
+              "picker_type": {
+                "label": "Styl",
+                "options__1": {
+                  "label": "Rozevírací nabídka"
+                },
+                "options__2": {
+                  "label": "Kulaté přepínače"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianty se vzorníky",
+              "info": "Zjistit, jak zobrazit [vzorníky](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Styl",
+                "options__1": {
+                  "label": "Jen vzorník"
+                },
+                "options__2": {
+                  "label": "Rozevírací nabídka"
+                },
+                "options__3": {
+                  "label": "Rozevírací nabídka (bez vzorníku)"
+                },
+                "options__4": {
+                  "label": "Kulaté přepínače (bez vzorníku)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Tvar vzorníku",
+                "options__1": {
+                  "label": "Kruh"
+                },
+                "options__2": {
+                  "label": "Čtverec"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Selektor variant",
           "settings": {
-            "picker_type": {
-              "label": "Typ",
-              "options__1": {
-                "label": "Rozevírací nabídka"
-              },
-              "options__2": {
-                "label": "Kulaté přepínače"
+            "options": {
+              "header": "Varianty jen s textem",
+              "picker_type": {
+                "label": "Styl",
+                "options__1": {
+                  "label": "Rozevírací nabídka"
+                },
+                "options__2": {
+                  "label": "Kulaté přepínače"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianty se vzorníky",
+              "info": "Zjistit, jak zobrazit [vzorníky](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Styl",
+                "options__1": {
+                  "label": "Jen vzorník"
+                },
+                "options__2": {
+                  "label": "Rozevírací nabídka"
+                },
+                "options__3": {
+                  "label": "Rozevírací nabídka (bez vzorníku)"
+                },
+                "options__4": {
+                  "label": "Kulaté přepínače (bez vzorníku)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Tvar vzorníku",
+                "options__1": {
+                  "label": "Kruh"
+                },
+                "options__2": {
+                  "label": "Čtverec"
+                }
               }
             }
           }
diff --git a/locales/da.schema.json b/locales/da.schema.json
index 55d5fdb0401..3f5b987df9e 100644
--- a/locales/da.schema.json
+++ b/locales/da.schema.json
@@ -1639,13 +1639,44 @@
         "variant_picker": {
           "name": "Variantvælger",
           "settings": {
-            "picker_type": {
-              "label": "Type",
-              "options__1": {
-                "label": "Rullemenu"
-              },
-              "options__2": {
-                "label": "Etiketter"
+            "options": {
+              "header": "Kun tekst-varianter",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Rullemenu"
+                },
+                "options__2": {
+                  "label": "Etiketter"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianter med prøvevisning",
+              "info": "Se hvordan du viser [prøver](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Kun prøvevisning"
+                },
+                "options__2": {
+                  "label": "Rullemenu"
+                },
+                "options__3": {
+                  "label": "Rullemenu (ingen prøvevisning)"
+                },
+                "options__4": {
+                  "label": "Etiketter (ingen prøvevisning)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Prøvevisning – form",
+                "options__1": {
+                  "label": "Cirkel"
+                },
+                "options__2": {
+                  "label": "Kvadrat"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Variantvælger",
           "settings": {
-            "picker_type": {
-              "label": "Type",
-              "options__1": {
-                "label": "Rullemenu"
-              },
-              "options__2": {
-                "label": "Etiketter"
+            "options": {
+              "header": "Kun tekst-varianter",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Rullemenu"
+                },
+                "options__2": {
+                  "label": "Etiketter"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianter med prøvevisning",
+              "info": "Se hvordan du viser [prøver](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Kun prøvevisning"
+                },
+                "options__2": {
+                  "label": "Rullemenu"
+                },
+                "options__3": {
+                  "label": "Rullemenu (ingen prøvevisning)"
+                },
+                "options__4": {
+                  "label": "Etiketter (ingen prøvevisning)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Prøvevisning – form",
+                "options__1": {
+                  "label": "Cirkel"
+                },
+                "options__2": {
+                  "label": "Kvadrat"
+                }
               }
             }
           }
diff --git a/locales/de.schema.json b/locales/de.schema.json
index f6bffbd66f2..d3ffdd677a6 100644
--- a/locales/de.schema.json
+++ b/locales/de.schema.json
@@ -1638,13 +1638,44 @@
         "variant_picker": {
           "name": "Variantenauswahl",
           "settings": {
-            "picker_type": {
-              "label": "Art",
-              "options__1": {
-                "label": "Dropdown"
-              },
-              "options__2": {
-                "label": "Kapseln"
+            "options": {
+              "header": "Varianten nur mit Text",
+              "picker_type": {
+                "label": "Optik",
+                "options__1": {
+                  "label": "Dropdown"
+                },
+                "options__2": {
+                  "label": "Kapseln"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianten mit Farbfeldern",
+              "info": "Erfahre mehr zum Anzeigen von [Farbfeldern](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Optik",
+                "options__1": {
+                  "label": "Nur Farbfeld"
+                },
+                "options__2": {
+                  "label": "Dropdown"
+                },
+                "options__3": {
+                  "label": "Dropdown (kein Farbfeld)"
+                },
+                "options__4": {
+                  "label": "Kapseln (kein Farbfeld)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Form des Farbfelds",
+                "options__1": {
+                  "label": "Kreis"
+                },
+                "options__2": {
+                  "label": "Quadrat"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Variantenauswahl",
           "settings": {
-            "picker_type": {
-              "label": "Art",
-              "options__1": {
-                "label": "Dropdown"
-              },
-              "options__2": {
-                "label": "Kapseln"
+            "options": {
+              "header": "Varianten nur mit Text",
+              "picker_type": {
+                "label": "Optik",
+                "options__1": {
+                  "label": "Dropdown"
+                },
+                "options__2": {
+                  "label": "Kapseln"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianten mit Farbfeldern",
+              "info": "Erfahre mehr zum Anzeigen von [Farbfeldern](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Optik",
+                "options__1": {
+                  "label": "Nur Farbfeld"
+                },
+                "options__2": {
+                  "label": "Dropdown"
+                },
+                "options__3": {
+                  "label": "Dropdown (kein Farbfeld)"
+                },
+                "options__4": {
+                  "label": "Kapseln (kein Farbfeld)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Form des Farbfelds",
+                "options__1": {
+                  "label": "Kreis"
+                },
+                "options__2": {
+                  "label": "Quadrat"
+                }
               }
             }
           }
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index 4065f8981f9..e346b687777 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -850,13 +850,44 @@
         "variant_picker": {
           "name": "Variant picker",
           "settings": {
-            "picker_type": {
-              "label": "Type",
-              "options__1": {
-                "label": "Dropdown"
-              },
-              "options__2": {
-                "label": "Pills"
+            "options": {
+              "header": "Text-only variants",
+              "picker_type": {
+                "label": "Style",
+                "options__1": {
+                  "label": "Dropdown"
+                },
+                "options__2": {
+                  "label": "Pills"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Variants with swatches",
+              "info": "Learn how to display [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Style",
+                "options__1": {
+                  "label": "Swatch only"
+                },
+                "options__2": {
+                  "label": "Dropdown"
+                },
+                "options__3": {
+                  "label": "Dropdown (no swatch)"
+                },
+                "options__4": {
+                  "label": "Pills (no swatch)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Swatch shape",
+                "options__1": {
+                  "label": "Circle"
+                },
+                "options__2": {
+                  "label": "Square"
+                }
               }
             }
           }
@@ -1972,13 +2003,44 @@
         "variant_picker": {
           "name": "Variant picker",
           "settings": {
-            "picker_type": {
-              "label": "Type",
-              "options__1": {
-                "label": "Dropdown"
-              },
-              "options__2": {
-                "label": "Pills"
+            "options": {
+              "header": "Text-only variants",
+              "picker_type": {
+                "label": "Style",
+                "options__1": {
+                  "label": "Dropdown"
+                },
+                "options__2": {
+                  "label": "Pills"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Variants with swatches",
+              "info": "Learn how to display [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Style",
+                "options__1": {
+                  "label": "Swatch only"
+                },
+                "options__2": {
+                  "label": "Dropdown"
+                },
+                "options__3": {
+                  "label": "Dropdown (no swatch)"
+                },
+                "options__4": {
+                  "label": "Pills (no swatch)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Swatch shape",
+                "options__1": {
+                  "label": "Circle"
+                },
+                "options__2": {
+                  "label": "Square"
+                }
               }
             }
           }
diff --git a/locales/es.schema.json b/locales/es.schema.json
index be502eb7c27..9f6a46288c1 100644
--- a/locales/es.schema.json
+++ b/locales/es.schema.json
@@ -1639,13 +1639,44 @@
         "variant_picker": {
           "name": "Selector de variante",
           "settings": {
-            "picker_type": {
-              "label": "Tipo",
-              "options__1": {
-                "label": "Desplegable"
-              },
-              "options__2": {
-                "label": "Miniaturas"
+            "options": {
+              "header": "Variantes de solo texto",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Menú desplegable"
+                },
+                "options__2": {
+                  "label": "Botones"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Variantes con muestras",
+              "info": "Obtén información sobre cómo presentar [muestras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Solo muestra"
+                },
+                "options__2": {
+                  "label": "Menú desplegable"
+                },
+                "options__3": {
+                  "label": "Menú desplegable (sin muestra)"
+                },
+                "options__4": {
+                  "label": "Botones (sin muestra)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Forma de la muestra",
+                "options__1": {
+                  "label": "Círculo"
+                },
+                "options__2": {
+                  "label": "Cuadrado"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Selector de variante",
           "settings": {
-            "picker_type": {
-              "label": "Tipo",
-              "options__1": {
-                "label": "Desplegable"
-              },
-              "options__2": {
-                "label": "Botones"
+            "options": {
+              "header": "Variantes de solo texto",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Menú desplegable"
+                },
+                "options__2": {
+                  "label": "Botones"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Variantes con muestras",
+              "info": "Obtén información sobre cómo presentar [muestras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Solo muestra"
+                },
+                "options__2": {
+                  "label": "Menú desplegable"
+                },
+                "options__3": {
+                  "label": "Menú desplegable (sin muestra)"
+                },
+                "options__4": {
+                  "label": "Botones (sin muestra)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Forma de la muestra",
+                "options__1": {
+                  "label": "Círculo"
+                },
+                "options__2": {
+                  "label": "Cuadrado"
+                }
               }
             }
           }
diff --git a/locales/fi.schema.json b/locales/fi.schema.json
index 8aa41cbdccd..aff06d49a83 100644
--- a/locales/fi.schema.json
+++ b/locales/fi.schema.json
@@ -1638,13 +1638,44 @@
         "variant_picker": {
           "name": "Versionvalitsin",
           "settings": {
-            "picker_type": {
-              "label": "Tyyppi",
-              "options__1": {
-                "label": "Pudotusvalikko"
-              },
-              "options__2": {
-                "label": "Pillerit"
+            "options": {
+              "header": "Vain tekstiä sisältävät versiot",
+              "picker_type": {
+                "label": "Tyyli",
+                "options__1": {
+                  "label": "Pudotusvalikko"
+                },
+                "options__2": {
+                  "label": "Pillerikuvakkeet"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Väriruutuja sisältävät versiot",
+              "info": "Lisätietoja siitä, miten näytät [väriruudut](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Tyyli",
+                "options__1": {
+                  "label": "Vain väriruudut"
+                },
+                "options__2": {
+                  "label": "Pudotusvalikko"
+                },
+                "options__3": {
+                  "label": "Pudotusvalikko (ei väriruutua)"
+                },
+                "options__4": {
+                  "label": "Pillerikuvakkeet (ei väriruutua)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Väriruudun muoto",
+                "options__1": {
+                  "label": "Ympyrä"
+                },
+                "options__2": {
+                  "label": "Neliö"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Versionvalitsin",
           "settings": {
-            "picker_type": {
-              "label": "Tyyppi",
-              "options__1": {
-                "label": "Pudotusvalikko"
-              },
-              "options__2": {
-                "label": "Kuvakkeet"
+            "options": {
+              "header": "Vain tekstiä sisältävät versiot",
+              "picker_type": {
+                "label": "Tyyli",
+                "options__1": {
+                  "label": "Pudotusvalikko"
+                },
+                "options__2": {
+                  "label": "Pillerikuvakkeet"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Väriruutuja sisältävät versiot",
+              "info": "Lisätietoja siitä, miten näytät [väriruudut](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Tyyli",
+                "options__1": {
+                  "label": "Vain väriruudut"
+                },
+                "options__2": {
+                  "label": "Pudotusvalikko"
+                },
+                "options__3": {
+                  "label": "Pudotusvalikko (ei väriruutua)"
+                },
+                "options__4": {
+                  "label": "Pillerikuvakkeet (ei väriruutua)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Väriruudun muoto",
+                "options__1": {
+                  "label": "Ympyrä"
+                },
+                "options__2": {
+                  "label": "Neliö"
+                }
               }
             }
           }
diff --git a/locales/fr.schema.json b/locales/fr.schema.json
index 8b0f53108a8..33009ffc84a 100644
--- a/locales/fr.schema.json
+++ b/locales/fr.schema.json
@@ -1638,13 +1638,44 @@
         "variant_picker": {
           "name": "Sélecteur de variante",
           "settings": {
-            "picker_type": {
-              "label": "Type",
-              "options__1": {
-                "label": "Menu déroulant"
-              },
-              "options__2": {
-                "label": "Comprimés"
+            "options": {
+              "header": "Variantes au format texte uniquement",
+              "picker_type": {
+                "label": "Style",
+                "options__1": {
+                  "label": "Menu déroulant"
+                },
+                "options__2": {
+                  "label": "Boutons pilule"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Variantes avec échantillons",
+              "info": "Découvrez comment affichez les [échantillons](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Style",
+                "options__1": {
+                  "label": "Échantillon uniquement"
+                },
+                "options__2": {
+                  "label": "Menu déroulant"
+                },
+                "options__3": {
+                  "label": "Menu déroulant (pas d’échantillon)"
+                },
+                "options__4": {
+                  "label": "Boutons pilules (pas d’échantillon)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Forme d’échantillon",
+                "options__1": {
+                  "label": "Cercle"
+                },
+                "options__2": {
+                  "label": "Carré"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Sélecteur de variante",
           "settings": {
-            "picker_type": {
-              "label": "Type",
-              "options__1": {
-                "label": "Menu déroulant"
-              },
-              "options__2": {
-                "label": "Pilules"
+            "options": {
+              "header": "Variantes au format texte uniquement",
+              "picker_type": {
+                "label": "Style",
+                "options__1": {
+                  "label": "Menu déroulant"
+                },
+                "options__2": {
+                  "label": "Boutons pilule"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Variantes avec échantillons",
+              "info": "Découvrez comment affichez les [échantillons](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Style",
+                "options__1": {
+                  "label": "Échantillon uniquement"
+                },
+                "options__2": {
+                  "label": "Menu déroulant"
+                },
+                "options__3": {
+                  "label": "Menu déroulant (pas d’échantillon)"
+                },
+                "options__4": {
+                  "label": "Boutons pilules (pas d’échantillon)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Forme d’échantillon",
+                "options__1": {
+                  "label": "Cercle"
+                },
+                "options__2": {
+                  "label": "Carré"
+                }
               }
             }
           }
diff --git a/locales/it.schema.json b/locales/it.schema.json
index f61499c05f7..fc4230650e1 100644
--- a/locales/it.schema.json
+++ b/locales/it.schema.json
@@ -1639,13 +1639,44 @@
         "variant_picker": {
           "name": "Selettore di variante",
           "settings": {
-            "picker_type": {
-              "label": "Tipo",
-              "options__1": {
-                "label": "Menu a discesa"
-              },
-              "options__2": {
-                "label": "\"A pillole\""
+            "options": {
+              "header": "Varianti di testo semplice",
+              "picker_type": {
+                "label": "Stile",
+                "options__1": {
+                  "label": "Menu a discesa"
+                },
+                "options__2": {
+                  "label": "\"A pillole\""
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianti con campioni di colore",
+              "info": "Scopri come visualizzare [campioni di colore](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Stile",
+                "options__1": {
+                  "label": "Solo campione di colore"
+                },
+                "options__2": {
+                  "label": "Menu a discesa"
+                },
+                "options__3": {
+                  "label": "Menu a discesa (senza campione di colore)"
+                },
+                "options__4": {
+                  "label": "\"A pillole\" (senza campione di colore)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Forma campione di colore",
+                "options__1": {
+                  "label": "Tonda"
+                },
+                "options__2": {
+                  "label": "Quadrata"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Selettore di variante",
           "settings": {
-            "picker_type": {
-              "label": "Tipo",
-              "options__1": {
-                "label": "Menu a discesa"
-              },
-              "options__2": {
-                "label": "\"A pillole\""
+            "options": {
+              "header": "Varianti di testo semplice",
+              "picker_type": {
+                "label": "Stile",
+                "options__1": {
+                  "label": "Menu a discesa"
+                },
+                "options__2": {
+                  "label": "\"A pillole\""
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianti con campioni di colore",
+              "info": "Scopri come visualizzare [campioni di colore](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Stile",
+                "options__1": {
+                  "label": "Solo campione di colore"
+                },
+                "options__2": {
+                  "label": "Menu a discesa"
+                },
+                "options__3": {
+                  "label": "Menu a discesa (senza campione di colore)"
+                },
+                "options__4": {
+                  "label": "\"A pillole\" (senza campione di colore)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Forma campione di colore",
+                "options__1": {
+                  "label": "Tonda"
+                },
+                "options__2": {
+                  "label": "Quadrata"
+                }
               }
             }
           }
diff --git a/locales/ja.schema.json b/locales/ja.schema.json
index 8feb1e14e4f..d30167b59e5 100644
--- a/locales/ja.schema.json
+++ b/locales/ja.schema.json
@@ -1628,18 +1628,49 @@
           "name": "テキスト"
         },
         "variant_picker": {
+          "name": "バリエーションピッカー",
           "settings": {
-            "picker_type": {
-              "label": "タイプ",
-              "options__1": {
-                "label": "ドロップダウン"
-              },
-              "options__2": {
-                "label": "ピル型ボタン"
+            "options": {
+              "header": "テキストのみのバリエーション",
+              "picker_type": {
+                "label": "スタイル",
+                "options__1": {
+                  "label": "ドロップダウン"
+                },
+                "options__2": {
+                  "label": "ピル型ボタン"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "見本付きのバリエーション",
+              "info": "[見本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) の表示方法はこちら",
+              "picker_type": {
+                "label": "スタイル",
+                "options__1": {
+                  "label": "見本のみ"
+                },
+                "options__2": {
+                  "label": "ドロップダウン"
+                },
+                "options__3": {
+                  "label": "ドロップダウン (見本なし)"
+                },
+                "options__4": {
+                  "label": "ピル型ボタン (見本なし)"
+                }
+              },
+              "swatch_shape": {
+                "label": "見本の形状",
+                "options__1": {
+                  "label": "円形"
+                },
+                "options__2": {
+                  "label": "正方形"
+                }
               }
             }
-          },
-          "name": "バリエーションピッカー"
+          }
         },
         "buy_buttons": {
           "settings": {
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "バリエーションピッカー",
           "settings": {
-            "picker_type": {
-              "label": "タイプ",
-              "options__1": {
-                "label": "ドロップダウン"
-              },
-              "options__2": {
-                "label": "ピル型ボタン"
+            "options": {
+              "header": "テキストのみのバリエーション",
+              "picker_type": {
+                "label": "スタイル",
+                "options__1": {
+                  "label": "ドロップダウン"
+                },
+                "options__2": {
+                  "label": "ピル型ボタン"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "見本付きのバリエーション",
+              "info": "[見本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) の表示方法はこちら",
+              "picker_type": {
+                "label": "スタイル",
+                "options__1": {
+                  "label": "見本のみ"
+                },
+                "options__2": {
+                  "label": "ドロップダウン"
+                },
+                "options__3": {
+                  "label": "ドロップダウン (見本なし)"
+                },
+                "options__4": {
+                  "label": "ピル型ボタン (見本なし)"
+                }
+              },
+              "swatch_shape": {
+                "label": "見本の形状",
+                "options__1": {
+                  "label": "円形"
+                },
+                "options__2": {
+                  "label": "正方形"
+                }
               }
             }
           }
diff --git a/locales/ko.schema.json b/locales/ko.schema.json
index 4aa26ab0c65..367bd88136e 100644
--- a/locales/ko.schema.json
+++ b/locales/ko.schema.json
@@ -1628,18 +1628,49 @@
           "name": "텍스트"
         },
         "variant_picker": {
+          "name": "이형 상품 피커",
           "settings": {
-            "picker_type": {
-              "label": "유형",
-              "options__1": {
-                "label": "드롭다운"
-              },
-              "options__2": {
-                "label": "타원형"
+            "options": {
+              "header": "텍스트 전용 이형 상품",
+              "picker_type": {
+                "label": "스타일",
+                "options__1": {
+                  "label": "드롭다운"
+                },
+                "options__2": {
+                  "label": "타원형"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "견본이 있는 이형 상품",
+              "info": "[견본](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)을 표시할 방법을 알아보세요",
+              "picker_type": {
+                "label": "스타일",
+                "options__1": {
+                  "label": "견본 전용"
+                },
+                "options__2": {
+                  "label": "드롭다운"
+                },
+                "options__3": {
+                  "label": "드롭다운(견본 없음)"
+                },
+                "options__4": {
+                  "label": "타원형(견본 없음)"
+                }
+              },
+              "swatch_shape": {
+                "label": "견본 모양",
+                "options__1": {
+                  "label": "원형"
+                },
+                "options__2": {
+                  "label": "정사각형"
+                }
               }
             }
-          },
-          "name": "이형 상품 피커"
+          }
         },
         "buy_buttons": {
           "settings": {
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "이형 상품 피커",
           "settings": {
-            "picker_type": {
-              "label": "유형",
-              "options__1": {
-                "label": "드롭다운"
-              },
-              "options__2": {
-                "label": "타원형"
+            "options": {
+              "header": "텍스트 전용 이형 상품",
+              "picker_type": {
+                "label": "스타일",
+                "options__1": {
+                  "label": "드롭다운"
+                },
+                "options__2": {
+                  "label": "타원형"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "견본이 있는 이형 상품",
+              "info": "[견본](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)을 표시할 방법을 알아보세요",
+              "picker_type": {
+                "label": "스타일",
+                "options__1": {
+                  "label": "견본 전용"
+                },
+                "options__2": {
+                  "label": "드롭다운"
+                },
+                "options__3": {
+                  "label": "드롭다운(견본 없음)"
+                },
+                "options__4": {
+                  "label": "타원형(견본 없음)"
+                }
+              },
+              "swatch_shape": {
+                "label": "견본 모양",
+                "options__1": {
+                  "label": "원형"
+                },
+                "options__2": {
+                  "label": "정사각형"
+                }
               }
             }
           }
diff --git a/locales/nb.schema.json b/locales/nb.schema.json
index 41038ea40c3..f8756643c8a 100644
--- a/locales/nb.schema.json
+++ b/locales/nb.schema.json
@@ -1638,13 +1638,44 @@
         "variant_picker": {
           "name": "Variantvelger",
           "settings": {
-            "picker_type": {
-              "label": "Type",
-              "options__1": {
-                "label": "Rullegardin"
-              },
-              "options__2": {
-                "label": "Knapper"
+            "options": {
+              "header": "Rene tekstvarianter",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Rullegardin"
+                },
+                "options__2": {
+                  "label": "Knapper"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianter med fargekart",
+              "info": "Finn ut hvordan du viser [fargekart](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Kun fargekart"
+                },
+                "options__2": {
+                  "label": "Rullegardin"
+                },
+                "options__3": {
+                  "label": "Rullegardin (ikke fargekart)"
+                },
+                "options__4": {
+                  "label": "Knapper (ikke fargekart)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Form på fargekart",
+                "options__1": {
+                  "label": "Sirkel"
+                },
+                "options__2": {
+                  "label": "Firkant"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Variantvelger",
           "settings": {
-            "picker_type": {
-              "label": "Type",
-              "options__1": {
-                "label": "Rullegardin"
-              },
-              "options__2": {
-                "label": "Knapper"
+            "options": {
+              "header": "Rene tekstvarianter",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Rullegardin"
+                },
+                "options__2": {
+                  "label": "Knapper"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianter med fargekart",
+              "info": "Finn ut hvordan du viser [fargekart](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Kun fargekart"
+                },
+                "options__2": {
+                  "label": "Rullegardin"
+                },
+                "options__3": {
+                  "label": "Rullegardin (ikke fargekart)"
+                },
+                "options__4": {
+                  "label": "Knapper (ikke fargekart)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Form på fargekart",
+                "options__1": {
+                  "label": "Sirkel"
+                },
+                "options__2": {
+                  "label": "Firkant"
+                }
               }
             }
           }
diff --git a/locales/nl.schema.json b/locales/nl.schema.json
index 4ae878c6733..94d2064d396 100644
--- a/locales/nl.schema.json
+++ b/locales/nl.schema.json
@@ -1639,13 +1639,44 @@
         "variant_picker": {
           "name": "Variantkiezer",
           "settings": {
-            "picker_type": {
-              "label": "Type",
-              "options__1": {
-                "label": "Vervolgkeuzelijst"
-              },
-              "options__2": {
-                "label": "Pillen"
+            "options": {
+              "header": "Varianten met alleen tekst",
+              "picker_type": {
+                "label": "Stijl",
+                "options__1": {
+                  "label": "Vervolgkeuzelijst"
+                },
+                "options__2": {
+                  "label": "Keuzeopties"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianten met stalen",
+              "info": "Ontdek hoe je [stalen](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) weergeeft",
+              "picker_type": {
+                "label": "Stijl",
+                "options__1": {
+                  "label": "Alleen staal"
+                },
+                "options__2": {
+                  "label": "Vervolgkeuzelijst"
+                },
+                "options__3": {
+                  "label": "Vervolgkeuzelijst (geen staal)"
+                },
+                "options__4": {
+                  "label": "Keuzeopties (geen staal)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Vorm van staal",
+                "options__1": {
+                  "label": "Cirkel"
+                },
+                "options__2": {
+                  "label": "Vierkant"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Variantkiezer",
           "settings": {
-            "picker_type": {
-              "label": "Type",
-              "options__1": {
-                "label": "Vervolgkeuzelijst"
-              },
-              "options__2": {
-                "label": "Keuzeopties"
+            "options": {
+              "header": "Varianten met alleen tekst",
+              "picker_type": {
+                "label": "Stijl",
+                "options__1": {
+                  "label": "Vervolgkeuzelijst"
+                },
+                "options__2": {
+                  "label": "Keuzeopties"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianten met stalen",
+              "info": "Ontdek hoe je [stalen](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) weergeeft",
+              "picker_type": {
+                "label": "Stijl",
+                "options__1": {
+                  "label": "Alleen staal"
+                },
+                "options__2": {
+                  "label": "Vervolgkeuzelijst"
+                },
+                "options__3": {
+                  "label": "Vervolgkeuzelijst (geen staal)"
+                },
+                "options__4": {
+                  "label": "Keuzeopties (geen staal)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Vorm van staal",
+                "options__1": {
+                  "label": "Cirkel"
+                },
+                "options__2": {
+                  "label": "Vierkant"
+                }
               }
             }
           }
diff --git a/locales/pl.schema.json b/locales/pl.schema.json
index 40b5172761c..f96c5a63176 100644
--- a/locales/pl.schema.json
+++ b/locales/pl.schema.json
@@ -1639,13 +1639,44 @@
         "variant_picker": {
           "name": "Selektor wariantów",
           "settings": {
-            "picker_type": {
-              "label": "Typ",
-              "options__1": {
-                "label": "Lista rozwijana"
-              },
-              "options__2": {
-                "label": "Okrągłe przełączniki"
+            "options": {
+              "header": "Warianty wyłącznie tekstowe",
+              "picker_type": {
+                "label": "Styl",
+                "options__1": {
+                  "label": "Lista rozwijana"
+                },
+                "options__2": {
+                  "label": "Okrągłe przełączniki"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Warianty z próbkami",
+              "info": "Dowiedz się, jak wyświetlać [próbki](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Styl",
+                "options__1": {
+                  "label": "Tylko próbka"
+                },
+                "options__2": {
+                  "label": "Lista rozwijana"
+                },
+                "options__3": {
+                  "label": "Lista rozwijana (bez próbki)"
+                },
+                "options__4": {
+                  "label": "Okrągły przełącznik (bez próbki)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Kształt próbki",
+                "options__1": {
+                  "label": "Koło"
+                },
+                "options__2": {
+                  "label": "Kwadrat"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Selektor wariantów",
           "settings": {
-            "picker_type": {
-              "label": "Typ",
-              "options__1": {
-                "label": "Lista rozwijana"
-              },
-              "options__2": {
-                "label": "Okrągłe przełączniki"
+            "options": {
+              "header": "Warianty wyłącznie tekstowe",
+              "picker_type": {
+                "label": "Styl",
+                "options__1": {
+                  "label": "Lista rozwijana"
+                },
+                "options__2": {
+                  "label": "Okrągłe przełączniki"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Warianty z próbkami",
+              "info": "Dowiedz się, jak wyświetlać [próbki](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Styl",
+                "options__1": {
+                  "label": "Tylko próbka"
+                },
+                "options__2": {
+                  "label": "Lista rozwijana"
+                },
+                "options__3": {
+                  "label": "Lista rozwijana (bez próbki)"
+                },
+                "options__4": {
+                  "label": "Okrągły przełącznik (bez próbki)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Kształt próbki",
+                "options__1": {
+                  "label": "Koło"
+                },
+                "options__2": {
+                  "label": "Kwadrat"
+                }
               }
             }
           }
diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json
index fae86846814..65e5b78bbfa 100644
--- a/locales/pt-BR.schema.json
+++ b/locales/pt-BR.schema.json
@@ -1638,13 +1638,44 @@
         "variant_picker": {
           "name": "Seletor de variante",
           "settings": {
-            "picker_type": {
-              "label": "Tipo",
-              "options__1": {
-                "label": "Menu suspenso"
-              },
-              "options__2": {
-                "label": "Pílulas"
+            "options": {
+              "header": "Variantes só com texto",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Menu suspenso"
+                },
+                "options__2": {
+                  "label": "Pílulas"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Variantes com amostras",
+              "info": "Saiba como exibir [amostras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Apenas amostra"
+                },
+                "options__2": {
+                  "label": "Menu suspenso"
+                },
+                "options__3": {
+                  "label": "Menu suspenso (sem amostra)"
+                },
+                "options__4": {
+                  "label": "Pílulas (sem amostra)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Formato da amostra",
+                "options__1": {
+                  "label": "Círculo"
+                },
+                "options__2": {
+                  "label": "Quadrado"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Seletor de variante",
           "settings": {
-            "picker_type": {
-              "label": "Tipo",
-              "options__1": {
-                "label": "Menu suspenso"
-              },
-              "options__2": {
-                "label": "Pílulas"
+            "options": {
+              "header": "Variantes só com texto",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Menu suspenso"
+                },
+                "options__2": {
+                  "label": "Pílulas"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Variantes com amostras",
+              "info": "Saiba como exibir [amostras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Apenas amostra"
+                },
+                "options__2": {
+                  "label": "Menu suspenso"
+                },
+                "options__3": {
+                  "label": "Menu suspenso (sem amostra)"
+                },
+                "options__4": {
+                  "label": "Pílulas (sem amostra)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Formato da amostra",
+                "options__1": {
+                  "label": "Círculo"
+                },
+                "options__2": {
+                  "label": "Quadrado"
+                }
               }
             }
           }
diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json
index 8ef6e3f1278..942b3fc8265 100644
--- a/locales/pt-PT.schema.json
+++ b/locales/pt-PT.schema.json
@@ -1628,18 +1628,49 @@
           "name": "Texto"
         },
         "variant_picker": {
+          "name": "Seletor de variante",
           "settings": {
-            "picker_type": {
-              "label": "Tipo",
-              "options__1": {
-                "label": "Pendente"
-              },
-              "options__2": {
-                "label": "Comprimidos"
+            "options": {
+              "header": "Variantes só de texto",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Menu pendente"
+                },
+                "options__2": {
+                  "label": "Forma de comprimidos"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Variantes com paletas",
+              "info": "Saiba como exibir [paletas](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Apenas paleta"
+                },
+                "options__2": {
+                  "label": "Menu pendente"
+                },
+                "options__3": {
+                  "label": "Menu pendente (sem paleta)"
+                },
+                "options__4": {
+                  "label": "Forma de comprimidos (sem paleta)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Forma de paleta",
+                "options__1": {
+                  "label": "Círculo"
+                },
+                "options__2": {
+                  "label": "Quadrado"
+                }
               }
             }
-          },
-          "name": "Seletor de variante"
+          }
         },
         "buy_buttons": {
           "settings": {
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Seletor de variante",
           "settings": {
-            "picker_type": {
-              "label": "Tipo",
-              "options__1": {
-                "label": "Pendente"
-              },
-              "options__2": {
-                "label": "Forma de comprimidos"
+            "options": {
+              "header": "Variantes só de texto",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Menu pendente"
+                },
+                "options__2": {
+                  "label": "Forma de comprimidos"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Variantes com paletas",
+              "info": "Saiba como exibir [paletas](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Estilo",
+                "options__1": {
+                  "label": "Apenas paleta"
+                },
+                "options__2": {
+                  "label": "Menu pendente"
+                },
+                "options__3": {
+                  "label": "Menu pendente (sem paleta)"
+                },
+                "options__4": {
+                  "label": "Forma de comprimidos (sem paleta)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Forma de paleta",
+                "options__1": {
+                  "label": "Círculo"
+                },
+                "options__2": {
+                  "label": "Quadrado"
+                }
               }
             }
           }
diff --git a/locales/sv.schema.json b/locales/sv.schema.json
index 431530de3c4..7975128d9d7 100644
--- a/locales/sv.schema.json
+++ b/locales/sv.schema.json
@@ -1628,18 +1628,49 @@
           "name": "Text"
         },
         "variant_picker": {
+          "name": "Variantväljare",
           "settings": {
-            "picker_type": {
-              "label": "Typ",
-              "options__1": {
-                "label": "Rullgardinsmeny"
-              },
-              "options__2": {
-                "label": "Kapslar"
+            "options": {
+              "header": "Varianter med bara text",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Rullgardinsmeny"
+                },
+                "options__2": {
+                  "label": "Kapslar"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianter med prover",
+              "info": "Läs om hur du visar [prover](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Bara prov"
+                },
+                "options__2": {
+                  "label": "Rullgardinsmeny"
+                },
+                "options__3": {
+                  "label": "Rullgardinsmeny (inget prov)"
+                },
+                "options__4": {
+                  "label": "Kapslar (inget prov)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Provform",
+                "options__1": {
+                  "label": "Cirkel"
+                },
+                "options__2": {
+                  "label": "Fyrkantig"
+                }
               }
             }
-          },
-          "name": "Variantväljare"
+          }
         },
         "buy_buttons": {
           "settings": {
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Variantväljare",
           "settings": {
-            "picker_type": {
-              "label": "Typ",
-              "options__1": {
-                "label": "Rullgardinsmeny"
-              },
-              "options__2": {
-                "label": "Kapslar"
+            "options": {
+              "header": "Varianter med bara text",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Rullgardinsmeny"
+                },
+                "options__2": {
+                  "label": "Kapslar"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Varianter med prover",
+              "info": "Läs om hur du visar [prover](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Bara prov"
+                },
+                "options__2": {
+                  "label": "Rullgardinsmeny"
+                },
+                "options__3": {
+                  "label": "Rullgardinsmeny (inget prov)"
+                },
+                "options__4": {
+                  "label": "Kapslar (inget prov)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Provform",
+                "options__1": {
+                  "label": "Cirkel"
+                },
+                "options__2": {
+                  "label": "Fyrkantig"
+                }
               }
             }
           }
diff --git a/locales/th.schema.json b/locales/th.schema.json
index 2bc0f83156e..a7b000f3204 100644
--- a/locales/th.schema.json
+++ b/locales/th.schema.json
@@ -1628,18 +1628,49 @@
           "name": "ข้อความ"
         },
         "variant_picker": {
+          "name": "รายการตัวเลือกสินค้า",
           "settings": {
-            "picker_type": {
-              "label": "ประเภท",
-              "options__1": {
-                "label": "ดรอปดาวน์"
-              },
-              "options__2": {
-                "label": "ทรงเม็ดยา"
+            "options": {
+              "header": "ตัวเลือกสินค้าแบบข้อความเท่านั้น",
+              "picker_type": {
+                "label": "รูปแบบ",
+                "options__1": {
+                  "label": "ดรอปดาวน์"
+                },
+                "options__2": {
+                  "label": "ทรงเม็ดยา"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "ตัวเลือกสินค้าพร้อมตัวอย่าง",
+              "info": "เรียนรู้เกี่ยวกับวิธีการแสดง [ตัวอย่าง](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "รูปแบบ",
+                "options__1": {
+                  "label": "ตัวอย่างเท่านั้น"
+                },
+                "options__2": {
+                  "label": "ดรอปดาวน์"
+                },
+                "options__3": {
+                  "label": "ดรอปดาวน์ (ไม่มีตัวอย่าง)"
+                },
+                "options__4": {
+                  "label": "ทรงเม็ดยา (ไม่มีตัวอย่าง)"
+                }
+              },
+              "swatch_shape": {
+                "label": "รูปทรงตัวอย่าง",
+                "options__1": {
+                  "label": "วงกลม"
+                },
+                "options__2": {
+                  "label": "สี่เหลี่ยมจัตุรัส"
+                }
               }
             }
-          },
-          "name": "รายการตัวเลือกสินค้า"
+          }
         },
         "buy_buttons": {
           "settings": {
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "รายการตัวเลือกสินค้า",
           "settings": {
-            "picker_type": {
-              "label": "ประเภท",
-              "options__1": {
-                "label": "ดรอปดาวน์"
-              },
-              "options__2": {
-                "label": "ทรงเม็ดยา"
+            "options": {
+              "header": "ตัวเลือกสินค้าแบบข้อความเท่านั้น",
+              "picker_type": {
+                "label": "รูปแบบ",
+                "options__1": {
+                  "label": "ดรอปดาวน์"
+                },
+                "options__2": {
+                  "label": "ทรงเม็ดยา"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "ตัวเลือกสินค้าพร้อมตัวอย่าง",
+              "info": "เรียนรู้เกี่ยวกับวิธีการแสดง [ตัวอย่าง](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "รูปแบบ",
+                "options__1": {
+                  "label": "ตัวอย่างเท่านั้น"
+                },
+                "options__2": {
+                  "label": "ดรอปดาวน์"
+                },
+                "options__3": {
+                  "label": "ดรอปดาวน์ (ไม่มีตัวอย่าง)"
+                },
+                "options__4": {
+                  "label": "ทรงเม็ดยา (ไม่มีตัวอย่าง)"
+                }
+              },
+              "swatch_shape": {
+                "label": "รูปทรงตัวอย่าง",
+                "options__1": {
+                  "label": "วงกลม"
+                },
+                "options__2": {
+                  "label": "สี่เหลี่ยมจัตุรัส"
+                }
               }
             }
           }
diff --git a/locales/tr.schema.json b/locales/tr.schema.json
index 55a129a6406..caf7c5afc05 100644
--- a/locales/tr.schema.json
+++ b/locales/tr.schema.json
@@ -1638,13 +1638,44 @@
         "variant_picker": {
           "name": "Varyasyon seçici",
           "settings": {
-            "picker_type": {
-              "label": "Tür",
-              "options__1": {
-                "label": "Açılır liste"
-              },
-              "options__2": {
-                "label": "Seçenekler"
+            "options": {
+              "header": "Yalnızca metne sahip varyasyonlar",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Açılır menü"
+                },
+                "options__2": {
+                  "label": "Seçenek kutuları"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Numune parçaları olan varyasyonlar",
+              "info": "[Numune parçalarını](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nasıl görüntüleyeceğinizi öğrenin",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Yalnızca numune parça"
+                },
+                "options__2": {
+                  "label": "Açılır menü"
+                },
+                "options__3": {
+                  "label": "Açılır menü (numune parça yok)"
+                },
+                "options__4": {
+                  "label": "Seçenekler (numune parça yok)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Numune parça şekli",
+                "options__1": {
+                  "label": "Yuvarlak"
+                },
+                "options__2": {
+                  "label": "Kare"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Varyasyon seçici",
           "settings": {
-            "picker_type": {
-              "label": "Tür",
-              "options__1": {
-                "label": "Açılır menü"
-              },
-              "options__2": {
-                "label": "Seçenekler"
+            "options": {
+              "header": "Yalnızca metne sahip varyasyonlar",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Açılır menü"
+                },
+                "options__2": {
+                  "label": "Seçenek kutuları"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Numune parçaları olan varyasyonlar",
+              "info": "[Numune parçalarını](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nasıl görüntüleyeceğinizi öğrenin",
+              "picker_type": {
+                "label": "Stil",
+                "options__1": {
+                  "label": "Yalnızca numune parça"
+                },
+                "options__2": {
+                  "label": "Açılır menü"
+                },
+                "options__3": {
+                  "label": "Açılır menü (numune parça yok)"
+                },
+                "options__4": {
+                  "label": "Seçenekler (numune parça yok)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Numune parça şekli",
+                "options__1": {
+                  "label": "Yuvarlak"
+                },
+                "options__2": {
+                  "label": "Kare"
+                }
               }
             }
           }
diff --git a/locales/vi.schema.json b/locales/vi.schema.json
index a3743d3bf23..7679b29ab0a 100644
--- a/locales/vi.schema.json
+++ b/locales/vi.schema.json
@@ -1639,13 +1639,44 @@
         "variant_picker": {
           "name": "Trình chọn mẫu mã",
           "settings": {
-            "picker_type": {
-              "label": "Loại",
-              "options__1": {
-                "label": "Menu thả xuống"
-              },
-              "options__2": {
-                "label": "Góc bo tròn"
+            "options": {
+              "header": "Mẫu mã chỉ gồm văn bản",
+              "picker_type": {
+                "label": "Kiểu",
+                "options__1": {
+                  "label": "Menu thả xuống"
+                },
+                "options__2": {
+                  "label": "Ô chọn"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Mẫu mã có mẫu",
+              "info": "Tìm hiểu cách hiển thị [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Kiểu",
+                "options__1": {
+                  "label": "Chỉ mẫu"
+                },
+                "options__2": {
+                  "label": "Menu thả xuống"
+                },
+                "options__3": {
+                  "label": "Menu thả xuống (không có mẫu)"
+                },
+                "options__4": {
+                  "label": "Ô chọn (không có mẫu)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Hình dạng mẫu",
+                "options__1": {
+                  "label": "Tròn"
+                },
+                "options__2": {
+                  "label": "Vuông"
+                }
               }
             }
           }
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "Trình chọn mẫu mã",
           "settings": {
-            "picker_type": {
-              "label": "Loại",
-              "options__1": {
-                "label": "Menu thả xuống"
-              },
-              "options__2": {
-                "label": "Ô chọn"
+            "options": {
+              "header": "Mẫu mã chỉ gồm văn bản",
+              "picker_type": {
+                "label": "Kiểu",
+                "options__1": {
+                  "label": "Menu thả xuống"
+                },
+                "options__2": {
+                  "label": "Ô chọn"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "Mẫu mã có mẫu",
+              "info": "Tìm hiểu cách hiển thị [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "Kiểu",
+                "options__1": {
+                  "label": "Chỉ mẫu"
+                },
+                "options__2": {
+                  "label": "Menu thả xuống"
+                },
+                "options__3": {
+                  "label": "Menu thả xuống (không có mẫu)"
+                },
+                "options__4": {
+                  "label": "Ô chọn (không có mẫu)"
+                }
+              },
+              "swatch_shape": {
+                "label": "Hình dạng mẫu",
+                "options__1": {
+                  "label": "Tròn"
+                },
+                "options__2": {
+                  "label": "Vuông"
+                }
               }
             }
           }
diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json
index 7b63ff0eacd..299bb50999e 100644
--- a/locales/zh-CN.schema.json
+++ b/locales/zh-CN.schema.json
@@ -1628,18 +1628,49 @@
           "name": "文本"
         },
         "variant_picker": {
+          "name": "多属性选择器",
           "settings": {
-            "picker_type": {
-              "label": "类型",
-              "options__1": {
-                "label": "下拉菜单"
-              },
-              "options__2": {
-                "label": "椭圆形框"
+            "options": {
+              "header": "仅含文本的多属性",
+              "picker_type": {
+                "label": "样式",
+                "options__1": {
+                  "label": "下拉菜单"
+                },
+                "options__2": {
+                  "label": "椭圆形框"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "带样本的多属性",
+              "info": "了解如何显示 [样本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "样式",
+                "options__1": {
+                  "label": "仅样本"
+                },
+                "options__2": {
+                  "label": "下拉菜单"
+                },
+                "options__3": {
+                  "label": "下拉菜单（无样本）"
+                },
+                "options__4": {
+                  "label": "椭圆形框（无样本）"
+                }
+              },
+              "swatch_shape": {
+                "label": "样本形状",
+                "options__1": {
+                  "label": "圆形"
+                },
+                "options__2": {
+                  "label": "方形"
+                }
               }
             }
-          },
-          "name": "多属性选择器"
+          }
         },
         "buy_buttons": {
           "settings": {
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "多属性选择器",
           "settings": {
-            "picker_type": {
-              "label": "类型",
-              "options__1": {
-                "label": "下拉菜单"
-              },
-              "options__2": {
-                "label": "椭圆形框"
+            "options": {
+              "header": "仅含文本的多属性",
+              "picker_type": {
+                "label": "样式",
+                "options__1": {
+                  "label": "下拉菜单"
+                },
+                "options__2": {
+                  "label": "椭圆形框"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "带样本的多属性",
+              "info": "了解如何显示 [样本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "样式",
+                "options__1": {
+                  "label": "仅样本"
+                },
+                "options__2": {
+                  "label": "下拉菜单"
+                },
+                "options__3": {
+                  "label": "下拉菜单（无样本）"
+                },
+                "options__4": {
+                  "label": "椭圆形框（无样本）"
+                }
+              },
+              "swatch_shape": {
+                "label": "样本形状",
+                "options__1": {
+                  "label": "圆形"
+                },
+                "options__2": {
+                  "label": "方形"
+                }
               }
             }
           }
diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json
index 4ccb2e5d14b..5e090f06128 100644
--- a/locales/zh-TW.schema.json
+++ b/locales/zh-TW.schema.json
@@ -1628,18 +1628,49 @@
           "name": "文字"
         },
         "variant_picker": {
+          "name": "子類選擇器",
           "settings": {
-            "picker_type": {
-              "label": "類型",
-              "options__1": {
-                "label": "下拉式選單"
-              },
-              "options__2": {
-                "label": "圓角"
+            "options": {
+              "header": "純文字子類",
+              "picker_type": {
+                "label": "樣式",
+                "options__1": {
+                  "label": "下拉式選單"
+                },
+                "options__2": {
+                  "label": "圓角按鈕"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "子類搭配色樣",
+              "info": "瞭解如何顯示 [色樣](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "樣式",
+                "options__1": {
+                  "label": "僅色樣"
+                },
+                "options__2": {
+                  "label": "下拉式選單"
+                },
+                "options__3": {
+                  "label": "下拉式選單 (無色樣)"
+                },
+                "options__4": {
+                  "label": "圓角按鈕 (無色樣)"
+                }
+              },
+              "swatch_shape": {
+                "label": "色樣形狀",
+                "options__1": {
+                  "label": "圓形"
+                },
+                "options__2": {
+                  "label": "正方形"
+                }
               }
             }
-          },
-          "name": "子類選擇器"
+          }
         },
         "buy_buttons": {
           "settings": {
@@ -2481,13 +2512,44 @@
         "variant_picker": {
           "name": "子類選擇器",
           "settings": {
-            "picker_type": {
-              "label": "類型",
-              "options__1": {
-                "label": "下拉式選單"
-              },
-              "options__2": {
-                "label": "圓角"
+            "options": {
+              "header": "純文字子類",
+              "picker_type": {
+                "label": "樣式",
+                "options__1": {
+                  "label": "下拉式選單"
+                },
+                "options__2": {
+                  "label": "圓角按鈕"
+                }
+              }
+            },
+            "options_with_swatches": {
+              "header": "子類搭配色樣",
+              "info": "瞭解如何顯示 [色樣](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "picker_type": {
+                "label": "樣式",
+                "options__1": {
+                  "label": "僅色樣"
+                },
+                "options__2": {
+                  "label": "下拉式選單"
+                },
+                "options__3": {
+                  "label": "下拉式選單 (無色樣)"
+                },
+                "options__4": {
+                  "label": "圓角按鈕 (無色樣)"
+                }
+              },
+              "swatch_shape": {
+                "label": "色樣形狀",
+                "options__1": {
+                  "label": "圓形"
+                },
+                "options__2": {
+                  "label": "正方形"
+                }
               }
             }
           }

From 57d21dfc1b08311f62299032f38a2e469d47df3e Mon Sep 17 00:00:00 2001
From: CP Clermont <cp.clermont@shopify.com>
Date: Mon, 8 Jan 2024 11:56:01 -0500
Subject: [PATCH 42/58] Bring back the lighthouse-ci-action to v1 (#3181)

This will make sure new releases are automatically used.

Better for forks as well.
---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 5eee9633412..1612552a734 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -7,7 +7,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Lighthouse
-        uses: shopify/lighthouse-ci-action@v1.1.1
+        uses: shopify/lighthouse-ci-action@v1
         with:
           store: ${{ secrets.SHOP_STORE_OS2 }}
           password: ${{ secrets.SHOP_PASSWORD_OS2 }}

From 8ef242b994ddf8e2ba6e10e0521230e0b74bfee6 Mon Sep 17 00:00:00 2001
From: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com>
Date: Mon, 8 Jan 2024 13:52:47 -0500
Subject: [PATCH 43/58] Changed slider to work on tablet for multicolumn
 (#3176)

* Changed slider to work on tablet for multicolumn

* Adjusted to prevent early cutoff on tablet
---
 assets/section-multicolumn.css | 9 +++++++++
 sections/multicolumn.liquid    | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/assets/section-multicolumn.css b/assets/section-multicolumn.css
index 29aa27168dc..ac843b7e967 100644
--- a/assets/section-multicolumn.css
+++ b/assets/section-multicolumn.css
@@ -14,7 +14,9 @@
   .multicolumn .title-wrapper-with-link {
     margin-bottom: 3rem;
   }
+}
 
+@media screen and (max-width: 989px) {
   .multicolumn .page-width {
     padding-left: 0;
     padding-right: 0;
@@ -110,6 +112,13 @@
   }
 }
 
+@media screen and (min-width: 750px) and (max-width: 989px) {
+  .multicolumn-list:not(.slider) {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+}
+
 @media screen and (min-width: 750px) {
   .multicolumn-list.slider,
   .multicolumn-list.grid--4-col-desktop {
diff --git a/sections/multicolumn.liquid b/sections/multicolumn.liquid
index 293780a6306..633e239d991 100644
--- a/sections/multicolumn.liquid
+++ b/sections/multicolumn.liquid
@@ -44,7 +44,7 @@
     {%- endunless -%}
     <slider-component class="slider-mobile-gutter">
       <ul
-        class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--mobile grid--peek{% endif %}"
+        class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--tablet grid--peek{% endif %}"
         id="Slider-{{ section.id }}"
         role="list"
       >
@@ -145,7 +145,7 @@
       </ul>
 
       {%- if show_mobile_slider -%}
-        <div class="slider-buttons no-js-hidden medium-hide">
+        <div class="slider-buttons no-js-hidden large-up-hide">
           <button
             type="button"
             class="slider-button slider-button--prev"

From e6a8f03e213fb5cb318428ffe556264f27962389 Mon Sep 17 00:00:00 2001
From: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com>
Date: Tue, 9 Jan 2024 16:14:00 -0500
Subject: [PATCH 44/58] Adjusted Featured Collection placeholders to work with
 any number of desktop columns (#3182)

* Adjusted featured collection placeholders to work with any number of desktop columns
---
 sections/featured-collection.liquid | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid
index 15049af18d1..047f025e3e3 100644
--- a/sections/featured-collection.liquid
+++ b/sections/featured-collection.liquid
@@ -98,7 +98,7 @@
             %}
           </li>
         {%- else -%}
-          {%- for i in (1..4) -%}
+          {%- for i in (1..section.settings.columns_desktop) -%}
             <li
               class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
               {% if settings.animations_reveal_on_scroll %}
@@ -106,7 +106,13 @@
                 style="--animation-order: {{ forloop.index }};"
               {% endif %}
             >
-              {%- assign placeholder_image = 'product-apparel-' | append: forloop.rindex -%}
+              {% liquid
+                assign ridx = forloop.rindex
+                if ridx == 5
+                  assign ridx = 1
+                endif
+              %}
+              {%- assign placeholder_image = 'product-apparel-' | append: ridx -%}
               {% render 'card-product',
                 show_vendor: section.settings.show_vendor,
                 media_aspect_ratio: section.settings.image_ratio,

From 05e61a33d45358b09b85a089e0dd1b19109320c9 Mon Sep 17 00:00:00 2001
From: Alex Ilea <6627543+alisterdev@users.noreply.github.com>
Date: Tue, 9 Jan 2024 17:01:43 -0500
Subject: [PATCH 45/58] [Variant Picker] Add swatch display type (#3180)

* [VariantPicker] Unify variant selects and radios under new component

* [VariantPicker] Add swatch settings

* [VariantPicker] Move styles to dedicated CSS file

* [Variant Picker] Update settings copy

* [VariantPicker] Add swatch component

* [VariantPicker] Add a swatch to selected dropdown option

* [Variant Picker] Update disabled state

* [Variant Picker] Swatch snippet

* [Variant Picker] Swatch input snippet

* [Variant Picker] Tweak swatch border colors
---
 assets/component-product-variant-picker.css | 157 ++++++++++++++++++++
 assets/component-swatch-input.css           |  69 +++++++++
 assets/component-swatch.css                 |  22 +++
 assets/global.js                            |  74 +++++----
 assets/product-info.js                      |   1 -
 assets/quick-add.js                         |   4 +-
 assets/section-main-product.css             | 108 +-------------
 sections/featured-product.liquid            |  66 +++++++-
 sections/main-product.liquid                |  66 +++++++-
 snippets/product-variant-options.liquid     |  50 ++++++-
 snippets/product-variant-picker.liquid      | 102 ++++++++-----
 snippets/swatch-input.liquid                |  45 ++++++
 snippets/swatch.liquid                      |  31 ++++
 13 files changed, 595 insertions(+), 200 deletions(-)
 create mode 100644 assets/component-product-variant-picker.css
 create mode 100644 assets/component-swatch-input.css
 create mode 100644 assets/component-swatch.css
 create mode 100644 snippets/swatch-input.liquid
 create mode 100644 snippets/swatch.liquid

diff --git a/assets/component-product-variant-picker.css b/assets/component-product-variant-picker.css
new file mode 100644
index 00000000000..aecdafa69e9
--- /dev/null
+++ b/assets/component-product-variant-picker.css
@@ -0,0 +1,157 @@
+variant-selects {
+  display: block;
+}
+
+.product--no-media .product-form__input--pill,
+.product--no-media .product-form__input--swatch,
+.product--no-media .product-form__input--dropdown {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.product--no-media .product-form__input.product-form__input--pill,
+.product--no-media .product-form__input.product-form__input--swatch {
+  flex-wrap: wrap;
+  margin: 0 auto 1.2rem auto;
+}
+
+.product--no-media .product-form__input--dropdown {
+  flex-direction: column;
+  max-width: 100%;
+}
+
+:is(.product-form__input--pill, .product-form__input--swatch) .form__label {
+  margin-bottom: 0.2rem;
+}
+
+.product-form__input input[type='radio'] {
+  clip: rect(0, 0, 0, 0);
+  overflow: hidden;
+  position: absolute;
+  height: 1px;
+  width: 1px;
+}
+
+.product-form__input input[type='radio']:not(.disabled) + label > .label-unavailable {
+  display: none;
+}
+
+.product-form__input--dropdown {
+  --swatch-input--size: 2rem;
+  margin-bottom: 1.6rem;
+}
+
+
+.product-form__input--dropdown .dropdown-swatch + select {
+  padding-left: calc(2.4rem + var(--swatch-input--size));
+}
+
+.product-form__input--dropdown .dropdown-swatch {
+  position: absolute;
+  left: 1.6rem;
+  top: calc(50% - var(--swatch-input--size) / 2);
+  width: var(--swatch-input--size);
+  height: var(--swatch-input--size);
+  z-index: 1;
+}
+
+
+/* Custom styles for Pill display type */
+.product-form__input--pill input[type='radio'] + label {
+  border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
+  background-color: rgb(var(--color-background));
+  color: rgba(var(--color-foreground));
+  border-radius: var(--variant-pills-radius);
+  color: rgb(var(--color-foreground));
+  display: inline-block;
+  margin: 0.7rem 0.5rem 0.2rem 0;
+  padding: 1rem 2rem;
+  font-size: 1.4rem;
+  letter-spacing: 0.1rem;
+  line-height: 1;
+  text-align: center;
+  transition: border var(--duration-short) ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.product-form__input--pill input[type='radio'] + label:before {
+  content: '';
+  position: absolute;
+  top: calc(var(--variant-pills-border-width) * -1);
+  right: calc(var(--variant-pills-border-width) * -1);
+  bottom: calc(var(--variant-pills-border-width) * -1);
+  left: calc(var(--variant-pills-border-width) * -1);
+  z-index: -1;
+  border-radius: var(--variant-pills-radius);
+  box-shadow: var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset)
+    var(--variant-pills-shadow-blur-radius) rgba(var(--color-shadow), var(--variant-pills-shadow-opacity));
+}
+
+.product-form__input--pill input[type='radio'] + label:hover {
+  border-color: rgb(var(--color-foreground));
+}
+
+.product-form__input--pill input[type='radio']:checked + label {
+  background-color: rgb(var(--color-foreground));
+  color: rgb(var(--color-background));
+}
+
+@media screen and (forced-colors: active) {
+  .product-form__input--pill input[type='radio']:checked + label {
+    text-decoration: underline;
+  }
+
+  .product-form__input--pill input[type='radio']:focus-visible + label {
+    outline: transparent solid 1px;
+    outline-offset: 2px;
+  }
+}
+
+.product-form__input--pill input[type='radio']:checked + label::selection {
+  background-color: rgba(var(--color-background), 0.3);
+}
+
+.product-form__input--pill input[type='radio']:disabled + label,
+.product-form__input--pill input[type='radio'].disabled + label {
+  border-color: rgba(var(--color-foreground), 0.1);
+  color: rgba(var(--color-foreground), 0.6);
+  text-decoration: line-through;
+}
+
+.product-form__input--pill input[type='radio'].disabled:checked + label,
+.product-form__input--pill input[type='radio']:disabled:checked + label {
+  color: rgba(var(--color-background), 0.6);
+}
+.product-form__input--pill input[type='radio']:focus-visible + label {
+  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
+}
+
+/* Fallback */
+.product-form__input--pill input[type='radio'].focused + label {
+  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
+}
+
+/* No outline when focus-visible is available in the browser */
+.no-js .product-form__input--pill input[type='radio']:focus:not(:focus-visible) + label {
+  box-shadow: none;
+}
+/* End custom styles for Pill display type  */
+
+/* Custom styles for Swatch display type */
+.product-form__input--swatch {
+  display: flex;
+}
+
+.product-form__input--swatch .swatch-input__input + .swatch-input__label {
+  margin: 0.7rem 1.2rem 0.2rem 0;
+}
+
+@media screen and (min-width: 750px) {
+  .product-form__input--swatch .swatch-input__input + .swatch-input__label {
+    --swatch-input--size: 2.8rem;
+  }
+}
+/* End custom styles for Swatch display type */
diff --git a/assets/component-swatch-input.css b/assets/component-swatch-input.css
new file mode 100644
index 00000000000..61a42b7277c
--- /dev/null
+++ b/assets/component-swatch-input.css
@@ -0,0 +1,69 @@
+/* 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;
+  border-radius: var(--swatch-input--border-radius);
+  cursor: pointer;
+  outline-offset: 0.2rem;
+  forced-color-adjust: none;
+}
+
+.swatch-input__input + .swatch-input__label.swatch-input__label--square {
+  --swatch-input--border-radius: 0.2rem;
+}
+
+.swatch-input__input + .swatch-input__label:hover {
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.4);
+}
+
+.swatch-input__input:active + .swatch-input__label,
+.swatch-input__input:checked + .swatch-input__label {
+  outline: 0.1rem solid rgb(var(--color-foreground));
+}
+
+/* Visually disabled */
+.swatch-input__input.disabled:not(:active):not(:checked) + .swatch-input__label:hover {
+  outline: 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);
+}
+
+/* Overrides for swatch snippet when used inside disabled swatch-input */
+.swatch-input__input:disabled + .swatch-input__label > .swatch,
+.swatch-input__input.disabled + .swatch-input__label > .swatch {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Display white semi-transparent overlay over swatch when input is disabled */
+.swatch-input__input:disabled + .swatch-input__label > .swatch::before,
+.swatch-input__input.disabled + .swatch-input__label > .swatch::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(250, 250, 250, 0.5);
+}
+
+/* Display crossed out line over swatch when input is disabled */
+.swatch-input__input:disabled + .swatch-input__label > .swatch::after,
+.swatch-input__input.disabled + .swatch-input__label > .swatch::after {
+  /* Diagonal of a square = length of the side * sqrt(2)  */
+  --diagonal--size: calc(var(--swatch-input--size) * 1.414);
+  --crossed-line--size: 0.1rem;
+  --crossed-line--color: rgb(0, 0, 0);
+
+  content: '';
+  position: absolute;
+  bottom: calc(var(--crossed-line--size) * -0.5);
+  left: 0;
+  width: var(--diagonal--size);
+  height: var(--crossed-line--size);
+  background-color: var(--crossed-line--color);
+  transform: rotate(-45deg);
+  transform-origin: left;
+}
diff --git a/assets/component-swatch.css b/assets/component-swatch.css
new file mode 100644
index 00000000000..2488d939266
--- /dev/null
+++ b/assets/component-swatch.css
@@ -0,0 +1,22 @@
+/* swatch lives in its own file for reusability of the swatch in swatch-input and dropdown */
+.swatch {
+  --swatch--size: var(--swatch-input--size, 4.4rem);
+  --swatch--border-radius: var(--swatch-input--border-radius, 50%);
+
+  display: block;
+  width: var(--swatch--size);
+  aspect-ratio: 1 / 1;
+  background: var(--swatch--background);
+  background-size: cover;
+  border: 0.1rem solid rgba(var(--color-background-contrast), 0.5);
+  border-radius: var(--swatch--border-radius);
+}
+
+.swatch--square {
+  --swatch--border-radius: var(--swatch-input--border-radius, 0.2rem);
+}
+
+.swatch--unavailable {
+  border-style: dashed;
+  border-color: rgba(var(--color-foreground), 0.5);
+}
diff --git a/assets/global.js b/assets/global.js
index e8d89b149fa..c541c6fb82e 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -959,9 +959,10 @@ class VariantSelects extends HTMLElement {
     this.addEventListener('change', this.onVariantChange);
   }
 
-  onVariantChange() {
+  onVariantChange(event) {
     this.updateOptions();
     this.updateMasterId();
+    this.updateSelectedSwatchValue(event);
     this.toggleAddButton(true, '', false);
     this.updatePickupAvailability();
     this.removeErrorMessage();
@@ -980,7 +981,14 @@ class VariantSelects extends HTMLElement {
   }
 
   updateOptions() {
-    this.options = Array.from(this.querySelectorAll('select'), (select) => select.value);
+    this.options = Array.from(this.querySelectorAll('select, fieldset'), (element) => {
+      if (element.tagName === 'SELECT') {
+        return element.value;
+      }
+      if (element.tagName === 'FIELDSET') {
+        return Array.from(element.querySelectorAll('input')).find((radio) => radio.checked)?.value;
+      }
+    });
   }
 
   updateMasterId() {
@@ -993,6 +1001,26 @@ class VariantSelects extends HTMLElement {
     });
   }
 
+  updateSelectedSwatchValue({ target }) {
+    const { name, value, tagName } = target;
+
+    if (tagName === 'SELECT' && target.selectedOptions.length) {
+      const swatchValue = target.selectedOptions[0].dataset.optionSwatchValue;
+      const selectedDropdownSwatchValue = this.querySelector(`[data-selected-dropdown-swatch="${name}"] > .swatch`);
+      if (!selectedDropdownSwatchValue) return;
+      if (swatchValue) {
+        selectedDropdownSwatchValue.style.setProperty('--swatch--background', swatchValue);
+        selectedDropdownSwatchValue.classList.remove('swatch--unavailable');
+      } else {
+        selectedDropdownSwatchValue.style.setProperty('--swatch--background', 'unset');
+        selectedDropdownSwatchValue.classList.add('swatch--unavailable');
+      }
+    } else if (tagName === 'INPUT' && target.type === 'radio') {
+      const selectedSwatchValue = this.querySelector(`[data-selected-swatch-value="${name}"]`);
+      if (selectedSwatchValue) selectedSwatchValue.innerHTML = value;
+    }
+  }
+
   updateMedia() {
     if (!this.currentVariant) return;
     if (!this.currentVariant.featured_media) return;
@@ -1046,12 +1074,17 @@ class VariantSelects extends HTMLElement {
     });
   }
 
-  setInputAvailability(listOfOptions, listOfAvailableOptions) {
-    listOfOptions.forEach((input) => {
-      if (listOfAvailableOptions.includes(input.getAttribute('value'))) {
-        input.innerText = input.getAttribute('value');
-      } else {
-        input.innerText = window.variantStrings.unavailable_with_option.replace('[value]', input.getAttribute('value'));
+  setInputAvailability(elementList, availableValuesList) {
+    elementList.forEach((element) => {
+      const value = element.getAttribute('value');
+      const availableElement = availableValuesList.includes(value);
+
+      if (element.tagName === 'INPUT') {
+        element.classList.toggle('disabled', !availableElement);
+      } else if (element.tagName === 'OPTION') {
+        element.innerText = availableElement
+          ? value
+          : window.variantStrings.unavailable_with_option.replace('[value]', value);
       }
     });
   }
@@ -1206,31 +1239,6 @@ class VariantSelects extends HTMLElement {
 
 customElements.define('variant-selects', VariantSelects);
 
-class VariantRadios extends VariantSelects {
-  constructor() {
-    super();
-  }
-
-  setInputAvailability(listOfOptions, listOfAvailableOptions) {
-    listOfOptions.forEach((input) => {
-      if (listOfAvailableOptions.includes(input.getAttribute('value'))) {
-        input.classList.remove('disabled');
-      } else {
-        input.classList.add('disabled');
-      }
-    });
-  }
-
-  updateOptions() {
-    const fieldsets = Array.from(this.querySelectorAll('fieldset'));
-    this.options = fieldsets.map((fieldset) => {
-      return Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value;
-    });
-  }
-}
-
-customElements.define('variant-radios', VariantRadios);
-
 class ProductRecommendations extends HTMLElement {
   constructor() {
     super();
diff --git a/assets/product-info.js b/assets/product-info.js
index c78c371ec26..cbdeb9e7d57 100644
--- a/assets/product-info.js
+++ b/assets/product-info.js
@@ -6,7 +6,6 @@ if (!customElements.get('product-info')) {
         super();
         this.input = this.querySelector('.quantity__input');
         this.currentVariant = this.querySelector('.product-variant-id');
-        this.variantSelects = this.querySelector('variant-radios');
         this.submitButton = this.querySelector('[type="submit"]');
       }
 
diff --git a/assets/quick-add.js b/assets/quick-add.js
index 6ac69250594..6a9d5573ce3 100644
--- a/assets/quick-add.js
+++ b/assets/quick-add.js
@@ -67,7 +67,7 @@ if (!customElements.get('quick-add-modal')) {
       }
 
       preventVariantURLSwitching() {
-        const variantPicker = this.modalContent.querySelector('variant-radios,variant-selects');
+        const variantPicker = this.modalContent.querySelector('variant-selects');
         if (!variantPicker) return;
 
         variantPicker.setAttribute('data-update-url', 'false');
@@ -87,7 +87,7 @@ if (!customElements.get('quick-add-modal')) {
       preventDuplicatedIDs() {
         const sectionId = this.productElement.dataset.section;
         this.productElement.innerHTML = this.productElement.innerHTML.replaceAll(sectionId, `quickadd-${sectionId}`);
-        this.productElement.querySelectorAll('variant-selects, variant-radios, product-info').forEach((element) => {
+        this.productElement.querySelectorAll('variant-selects, product-info').forEach((element) => {
           element.dataset.originalSection = sectionId;
         });
       }
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index 5f0a37e0d64..8dd6d10e603 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -170,111 +170,16 @@
   border: none;
 }
 
-variant-radios,
-variant-selects {
-  display: block;
-}
-
-.product-form__input--dropdown {
-  margin-bottom: 1.6rem;
-}
-
 .product-form__input .form__label {
   padding-left: 0;
 }
 
-fieldset.product-form__input .form__label {
-  margin-bottom: 0.2rem;
-}
-
-.product-form__input input[type='radio'] {
-  clip: rect(0, 0, 0, 0);
-  overflow: hidden;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-}
-
-.product-form__input input[type='radio'] + label {
-  border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
-  background-color: rgb(var(--color-background));
-  color: rgba(var(--color-foreground));
-  border-radius: var(--variant-pills-radius);
-  color: rgb(var(--color-foreground));
-  display: inline-block;
-  margin: 0.7rem 0.5rem 0.2rem 0;
-  padding: 1rem 2rem;
-  font-size: 1.4rem;
-  letter-spacing: 0.1rem;
-  line-height: 1;
-  text-align: center;
-  transition: border var(--duration-short) ease;
-  cursor: pointer;
-  position: relative;
-}
-
-.product-form__input input[type='radio'] + label:before {
-  content: '';
-  position: absolute;
-  top: calc(var(--variant-pills-border-width) * -1);
-  right: calc(var(--variant-pills-border-width) * -1);
-  bottom: calc(var(--variant-pills-border-width) * -1);
-  left: calc(var(--variant-pills-border-width) * -1);
-  z-index: -1;
-  border-radius: var(--variant-pills-radius);
-  box-shadow: var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset)
-    var(--variant-pills-shadow-blur-radius) rgba(var(--color-shadow), var(--variant-pills-shadow-opacity));
-}
-
-.product-form__input input[type='radio'] + label:hover {
-  border-color: rgb(var(--color-foreground));
-}
-
-.product-form__input input[type='radio']:checked + label {
-  background-color: rgb(var(--color-foreground));
-  color: rgb(var(--color-background));
-}
-
-.product-form__input input[type='radio']:not(.disabled) + label > .visually-hidden {
-  display: none;
-}
-
-@media screen and (forced-colors: active) {
-  .product-form__input input[type='radio']:checked + label {
-    text-decoration: underline;
-  }
-}
-
-.product-form__input input[type='radio']:checked + label::selection {
-  background-color: rgba(var(--color-background), 0.3);
-}
-
-.product-form__input input[type='radio']:disabled + label,
-.product-form__input input[type='radio'].disabled + label {
-  border-color: rgba(var(--color-foreground), 0.1);
-  color: rgba(var(--color-foreground), 0.6);
-  text-decoration: line-through;
-}
-
-.product-form__input input[type='radio'].disabled:checked + label,
-.product-form__input input[type='radio']:disabled:checked + label {
-  color: rgba(var(--color-background), 0.6);
-}
-.product-form__input input[type='radio']:focus-visible + label {
-  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
-}
 
 /* Fallback */
-.product-form__input input[type='radio'].focused + label,
 .no-js .shopify-payment-button__button [role='button']:focus + label {
   box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
 }
 
-/* No outline when focus-visible is available in the browser */
-.no-js .product-form__input input[type='radio']:focus:not(:focus-visible) + label {
-  box-shadow: none;
-}
-
 .product-form__input .select {
   max-width: 25rem;
 }
@@ -424,9 +329,7 @@ a.product__text {
   max-width: 100%;
 }
 
-.product--no-media fieldset.product-form__input,
 .product--no-media .product-form__quantity,
-.product--no-media .product-form__input--dropdown,
 .product--no-media .share-button,
 .product--no-media .product__view-details,
 .product--no-media .product__pickup-availabilities,
@@ -446,8 +349,7 @@ a.product__text {
   width: 100%;
 }
 
-.product--no-media .product-form__quantity,
-.product--no-media .product-form__input--dropdown {
+.product--no-media .product-form__quantity {
   flex-direction: column;
   max-width: 100%;
 }
@@ -464,11 +366,6 @@ a.product__text {
   margin-bottom: 1.2rem;
 }
 
-.product--no-media fieldset.product-form__input {
-  flex-wrap: wrap;
-  margin: 0 auto 1.2rem auto;
-}
-
 .product-form__buttons {
   max-width: 44rem;
 }
@@ -697,8 +594,7 @@ a.product__text {
 /* outline styling for Windows High Contrast Mode */
 @media (forced-colors: active) {
   .product__media-toggle:focus-visible,
-  .product__media-toggle:focus-visible:after,
-  .product-form__input input[type='radio']:focus-visible + label {
+  .product__media-toggle:focus-visible:after {
     outline: transparent solid 1px;
     outline-offset: 2px;
   }
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 207c97ee24d..511841e5504 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -5,6 +5,11 @@
 {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
 {{ 'component-rating.css' | asset_url | stylesheet_tag }}
 {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
+{% unless section.settings.product.has_only_default_variant %}
+  {{ 'component-product-variant-picker.css' | asset_url | stylesheet_tag }}
+  {{ 'component-swatch.css' | asset_url | stylesheet_tag }}
+  {{ 'component-swatch-input.css' | asset_url | stylesheet_tag }}
+{% endunless %}
 
 {%- style -%}
   .section-{{ section.id }}-padding {
@@ -672,13 +677,11 @@
     if (!isIE()) return;
     const hiddenInput = document.querySelector('#{{ product_form_id }} input[name="id"]');
     const noScriptInputWrapper = document.createElement('div');
-    const variantSwitcher =
-      document.querySelector('variant-radios[data-section="{{ section.id }}"]') ||
-      document.querySelector('variant-selects[data-section="{{ section.id }}"]');
+    const variantPicker = document.querySelector('variant-selects[data-section="{{ section.id }}"]');
     noScriptInputWrapper.innerHTML = document.querySelector(
       '.product-form__noscript-wrapper-{{ section.id }}'
     ).textContent;
-    variantSwitcher.outerHTML = noScriptInputWrapper.outerHTML;
+    variantPicker.outerHTML = noScriptInputWrapper.outerHTML;
 
     document.querySelector('#Variants-{{ section.id }}').addEventListener('change', function (event) {
       hiddenInput.value = event.currentTarget.value;
@@ -804,21 +807,70 @@
       "name": "t:sections.featured-product.blocks.variant_picker.name",
       "limit": 1,
       "settings": [
+        {
+          "type": "header",
+          "content": "t:sections.featured-product.blocks.variant_picker.settings.options.header"
+        },
         {
           "type": "select",
           "id": "picker_type",
           "options": [
             {
               "value": "dropdown",
-              "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.options__1.label"
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.options.picker_type.options__1.label"
             },
             {
               "value": "button",
-              "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.options__2.label"
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.options.picker_type.options__2.label"
             }
           ],
           "default": "button",
-          "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.label"
+          "label": "t:sections.featured-product.blocks.variant_picker.settings.options.picker_type.label"
+        },
+        {
+          "type": "header",
+          "content": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.header",
+          "info": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.info"
+        },
+        {
+          "id": "swatch_picker_type",
+          "type": "select",
+          "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.picker_type.label",
+          "options": [
+            {
+              "value": "swatch",
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__1.label"
+            },
+            {
+              "value": "swatch_dropdown",
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__2.label"
+            },
+            {
+              "value": "dropdown",
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__3.label"
+            },
+            {
+              "value": "button",
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__4.label"
+            }
+          ],
+          "default": "swatch"
+        },
+        {
+          "id": "swatch_shape",
+          "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.label",
+          "type": "select",
+          "options": [
+            {
+              "value": "circle",
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.options__1.label"
+            },
+            {
+              "value": "square",
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.options__2.label"
+            }
+          ],
+          "default": "circle"
         }
       ]
     },
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index a5dd8eb105e..2715caabcd7 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -9,6 +9,11 @@
   {{ 'component-slider.css' | asset_url | stylesheet_tag }}
   {{ 'component-rating.css' | asset_url | stylesheet_tag }}
   {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
+  {% unless product.has_only_default_variant %}
+    {{ 'component-product-variant-picker.css' | asset_url | stylesheet_tag }}
+    {{ 'component-swatch-input.css' | asset_url | stylesheet_tag }}
+    {{ 'component-swatch.css' | asset_url | stylesheet_tag }}
+  {% endunless %}
   {%- if product.quantity_price_breaks_configured? -%}
     {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
   {%- endif -%}
@@ -601,13 +606,11 @@
       if (!isIE()) return;
       const hiddenInput = document.querySelector('#{{ product_form_id }} input[name="id"]');
       const noScriptInputWrapper = document.createElement('div');
-      const variantSwitcher =
-        document.querySelector('variant-radios[data-section="{{ section.id }}"]') ||
-        document.querySelector('variant-selects[data-section="{{ section.id }}"]');
+      const variantPicker = document.querySelector('variant-selects[data-section="{{ section.id }}"]');
       noScriptInputWrapper.innerHTML = document.querySelector(
         '.product-form__noscript-wrapper-{{ section.id }}'
       ).textContent;
-      variantSwitcher.outerHTML = noScriptInputWrapper.outerHTML;
+      variantPicker.outerHTML = noScriptInputWrapper.outerHTML;
 
       document.querySelector('#Variants-{{ section.id }}').addEventListener('change', function (event) {
         hiddenInput.value = event.currentTarget.value;
@@ -801,21 +804,70 @@
       "name": "t:sections.main-product.blocks.variant_picker.name",
       "limit": 1,
       "settings": [
+        {
+          "type": "header",
+          "content": "t:sections.main-product.blocks.variant_picker.settings.options.header"
+        },
         {
           "type": "select",
           "id": "picker_type",
           "options": [
             {
               "value": "dropdown",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label"
+              "label": "t:sections.main-product.blocks.variant_picker.settings.options.picker_type.options__1.label"
             },
             {
               "value": "button",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label"
+              "label": "t:sections.main-product.blocks.variant_picker.settings.options.picker_type.options__2.label"
             }
           ],
           "default": "button",
-          "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
+          "label": "t:sections.main-product.blocks.variant_picker.settings.options.picker_type.label"
+        },
+        {
+          "type": "header",
+          "content": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.header",
+          "info": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.info"
+        },
+        {
+          "id": "swatch_picker_type",
+          "type": "select",
+          "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.picker_type.label",
+          "options": [
+            {
+              "value": "swatch",
+              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__1.label"
+            },
+            {
+              "value": "swatch_dropdown",
+              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__2.label"
+            },
+            {
+              "value": "dropdown",
+              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__3.label"
+            },
+            {
+              "value": "button",
+              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__4.label"
+            }
+          ],
+          "default": "swatch"
+        },
+        {
+          "id": "swatch_shape",
+          "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.label",
+          "type": "select",
+          "options": [
+            {
+              "value": "circle",
+              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.options__1.label"
+            },
+            {
+              "value": "square",
+              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.options__2.label"
+            }
+          ],
+          "default": "circle"
         }
       ]
     },
diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
index 8d65e95c923..3af179ac13b 100644
--- a/snippets/product-variant-options.liquid
+++ b/snippets/product-variant-options.liquid
@@ -5,6 +5,7 @@
   - product: {Object} product object.
   - option: {Object} current product_option object.
   - block: {Object} block object.
+  - picker_type: {String} type of picker to dispay
 
 
   Usage:
@@ -12,6 +13,7 @@
     product: product,
     option: option,
     block: block
+    picker_type: picker_type
   %}
 {% endcomment %}
 {%- liquid
@@ -43,12 +45,47 @@
           endif
       endcase
     endfor
+
+    if value.swatch.image
+      assign image_url = value.swatch.image | image_url: width: 50
+      assign swatch_value = 'url(' | append: image_url | append: ')'
+    elsif value.swatch.color
+      assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
+    else
+      assign swatch_value = nil
+    endif
   -%}
 
-  {%- if block.settings.picker_type == 'button' -%}
+  {%- capture input_id -%}
+    {{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
+  {%- endcapture -%}
+
+  {%- capture label_unavailable %}
+    <span class="visually-hidden label-unavailable">
+      {{- 'products.product.variant_sold_out_or_unavailable' | t -}}
+    </span>
+  {%- endcapture %}
+
+  {%- if picker_type == 'swatch' -%}
+    {% assign checked = false %}
+    {% if option.selected_value == value %}
+      {% assign checked = true %}
+    {% endif %}
+    {%
+      render 'swatch-input',
+      id: input_id,
+      name: option.name,
+      value: value | escape,
+      product_form_id: product_form_id,
+      checked: checked,
+      disabled: option_disabled,
+      shape: block.settings.swatch_shape,
+      help_text: label_unavailable
+    %}
+  {%- elsif picker_type == 'button' -%}
     <input
       type="radio"
-      id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
+      id="{{ input_id }}"
       name="{{ option.name }}"
       value="{{ value | escape }}"
       form="{{ product_form_id }}"
@@ -59,16 +96,19 @@
         class="disabled"
       {% endif %}
     >
-    <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
+    <label for="{{ input_id }}">
       {{ value -}}
-      <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
+      {{ label_unavailable }}
     </label>
-  {%- elsif block.settings.picker_type == 'dropdown' -%}
+  {%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
     <option
       value="{{ value | escape }}"
       {% if option.selected_value == value %}
         selected="selected"
       {% endif %}
+      {% if swatch_value and picker_type == 'swatch_dropdown' %}
+        data-option-swatch-value="{{ swatch_value }}"
+      {% endif %}
     >
       {% if option_disabled -%}
         {{- 'products.product.value_unavailable' | t: option_value: value -}}
diff --git a/snippets/product-variant-picker.liquid b/snippets/product-variant-picker.liquid
index b51497b550d..bd460e4d577 100644
--- a/snippets/product-variant-picker.liquid
+++ b/snippets/product-variant-picker.liquid
@@ -10,62 +10,86 @@
   {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
 {% endcomment %}
 {%- unless product.has_only_default_variant -%}
-  {%- if block.settings.picker_type == 'button' -%}
-    <variant-radios
-      id="variant-radios-{{ section.id }}"
-      class="no-js-hidden"
-      data-section="{{ section.id }}"
-      data-url="{{ product.url }}"
-      {% if update_url == false %}
-        data-update-url="false"
-      {% endif %}
-      {{ block.shopify_attributes }}
-    >
-      {%- for option in product.options_with_values -%}
-        <fieldset class="js product-form__input">
+  <variant-selects
+    id="variant-selects-{{ section.id }}"
+    class="no-js-hidden"
+    data-section="{{ section.id }}"
+    data-url="{{ product.url }}"
+    {% if update_url == false %}
+      data-update-url="false"
+    {% endif %}
+    {{ block.shopify_attributes }}
+  >
+    {%- for option in product.options_with_values -%}
+      {%- liquid
+        assign swatch_count = option.values | map: 'swatch' | compact | size
+        assign picker_type = block.settings.picker_type
+
+        if swatch_count > 0
+          assign picker_type = block.settings.swatch_picker_type
+        endif
+      -%}
+      {%- if picker_type == 'swatch' -%}
+        <fieldset class="js product-form__input product-form__input--swatch">
+          <legend class="form__label">
+            {{ option.name }}:
+            <span data-selected-swatch-value="{{ option.name }}">
+              {{- option.selected_value -}}
+            </span>
+          </legend>
+          {% render 'product-variant-options',
+            product: product,
+            option: option,
+            block: block,
+            picker_type: picker_type
+          %}
+        </fieldset>
+      {%- elsif picker_type == 'button' -%}
+        <fieldset class="js product-form__input product-form__input--pill">
           <legend class="form__label">{{ option.name }}</legend>
-          {% render 'product-variant-options', product: product, option: option, block: block %}
+          {% render 'product-variant-options',
+            product: product,
+            option: option,
+            block: block,
+            picker_type: picker_type
+          %}
         </fieldset>
-      {%- endfor -%}
-      <script type="application/json">
-        {{ product.variants | json }}
-      </script>
-    </variant-radios>
-  {%- else -%}
-    <variant-selects
-      id="variant-selects-{{ section.id }}"
-      class="no-js-hidden"
-      data-section="{{ section.id }}"
-      data-url="{{ product.url }}"
-      {% if update_url == false %}
-        data-update-url="false"
-      {% endif %}
-      {{ block.shopify_attributes }}
-    >
-      {%- for option in product.options_with_values -%}
+      {%- else -%}
         <div class="product-form__input product-form__input--dropdown">
           <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
             {{ option.name }}
           </label>
           <div class="select">
+            {%- if picker_type == 'swatch_dropdown' -%}
+              <span
+                data-selected-dropdown-swatch="options[{{ option.name | escape }}]"
+                class="dropdown-swatch"
+              >
+                {% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %}
+              </span>
+            {%- endif -%}
             <select
               id="Option-{{ section.id }}-{{ forloop.index0 }}"
               class="select__select"
               name="options[{{ option.name | escape }}]"
               form="{{ product_form_id }}"
             >
-              {% render 'product-variant-options', product: product, option: option, block: block %}
+              {% render 'product-variant-options',
+                product: product,
+                option: option,
+                block: block,
+                picker_type: picker_type
+              %}
             </select>
             {% render 'icon-caret' %}
           </div>
         </div>
-      {%- endfor -%}
-
-      <script type="application/json">
-        {{ product.variants | json }}
-      </script>
-    </variant-selects>
-  {%- endif -%}
+      {%- endif -%}
+    {%- endfor -%}
+    <script type="application/json">
+      {{ product.variants | json }}
+    </script>
+  </variant-selects>
 {%- endunless -%}
 
 <noscript class="product-form__noscript-wrapper-{{ section.id }}">
diff --git a/snippets/swatch-input.liquid b/snippets/swatch-input.liquid
new file mode 100644
index 00000000000..c1d6907fdb3
--- /dev/null
+++ b/snippets/swatch-input.liquid
@@ -0,0 +1,45 @@
+{% comment %}
+  Renders a swatch input component.
+  Accepts:
+  - id: {String} unique input id
+  - name: {String} input name,
+  - value: {ProductOptionValueDrop} input value,
+  - product_form_id: {String} id of the form associted with the input
+  - checked: {Boolean} default checked status
+  - disabled: {Boolean} default disabled status
+  - shape: {String} swatch shape. Accepts 'square', defaults to circle.
+  - help_text: {String} additional content to render inside the label
+
+  Usage:
+   {% render 'swatch-input',
+      id: input_id,
+      name: input_name,
+      value: input_value,
+      product_form_id: product_form_id,
+      checked: checked,
+      disabled: disabled,
+      shape: 'square'
+      help_text: 'help text'
+    %}
+{% endcomment %}
+
+<input
+  type="radio"
+  id="{{ id }}"
+  name="{{ name }}"
+  value="{{ value }}"
+  form="{{ product_form_id }}"
+  class="swatch-input__input{% if disabled %} disabled{% endif %}"
+  {% if checked %}
+    checked
+  {% endif %}
+>
+<label
+  for="{{ id }}"
+  title="{{ value }}"
+  class="swatch-input__label{% if shape == 'square' %} swatch-input__label--square{% endif %}"
+>
+  {% render 'swatch', swatch: value.swatch, shape: shape %}
+  <span class="visually-hidden">{{ value }}</span>
+  {{ help_text }}
+</label>
diff --git a/snippets/swatch.liquid b/snippets/swatch.liquid
new file mode 100644
index 00000000000..11cc63d4d04
--- /dev/null
+++ b/snippets/swatch.liquid
@@ -0,0 +1,31 @@
+{% comment %}
+  Renders a swatch component.
+  Accepts:
+  - swatch: {Object} a swatch object
+  - shape: {String} swatch shape. Accepts 'square', defaults to circle.
+
+  Usage:
+  {% render 'swatch',
+    swatch: value.swatch
+    shape: 'square'
+  %}
+{% endcomment %}
+
+{%- liquid
+  assign swatch_value = nil
+  if swatch.image
+    assign image_url = swatch.image | image_url: width: 50
+    assign swatch_value = 'url(' | append: image_url | append: ')'
+  elsif swatch.color
+    assign swatch_value = 'rgb(' | append: swatch.color.rgb | append: ')'
+  endif
+-%}
+
+<span
+  {% if swatch_value %}
+    class="swatch{% if shape == 'square' %} swatch--square{% endif %}"
+    style="--swatch--background: {{ swatch_value }}"
+  {% else %}
+    class="swatch swatch--unavailable{% if shape == 'square' %} swatch--square{% endif %}"
+  {% endif %}
+></span>

From 0de57d445a74c4e388065c2c781a43c8fca32352 Mon Sep 17 00:00:00 2001
From: Alex Ilea <6627543+alisterdev@users.noreply.github.com>
Date: Wed, 10 Jan 2024 14:29:11 -0500
Subject: [PATCH 46/58] Update swatch border (#3184)

---
 assets/component-swatch.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/component-swatch.css b/assets/component-swatch.css
index 2488d939266..7e6d9377527 100644
--- a/assets/component-swatch.css
+++ b/assets/component-swatch.css
@@ -8,6 +8,7 @@
   aspect-ratio: 1 / 1;
   background: var(--swatch--background);
   background-size: cover;
+  background-origin: border-box;
   border: 0.1rem solid rgba(var(--color-background-contrast), 0.5);
   border-radius: var(--swatch--border-radius);
 }

From e43316035f75f5f9b73f93884b5457151e60716a Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:52:55 -0400
Subject: [PATCH 47/58] Update translations: merchant (#3178)

* Update 1 translation file

* Update 1 translation file

* Update 2 translation files

* Update 1 translation file

---------

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/de.schema.json |  4 ++--
 locales/fr.schema.json | 28 ++++++++++++++--------------
 locales/nb.schema.json | 28 ++++++++++++++--------------
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/locales/de.schema.json b/locales/de.schema.json
index d3ffdd677a6..d19785cafda 100644
--- a/locales/de.schema.json
+++ b/locales/de.schema.json
@@ -1459,7 +1459,7 @@
         },
         "enable_filtering": {
           "label": "Filtern aktivieren",
-          "info": "Passe Filter mit der App Search & Discovery an. [Mehr Informationen](https://help.shopify.com/manual/online-store/search-and-discovery/filters)"
+          "info": "Passe Filter mit der Search & Discovery-App an. [Mehr Informationen](https://help.shopify.com/manual/online-store/search-and-discovery/filters)"
         },
         "enable_sorting": {
           "label": "Sortieren aktivieren"
@@ -1490,7 +1490,7 @@
         },
         "enable_tags": {
           "label": "Filtern aktivieren",
-          "info": "Passe Filter mit der App Search & Discovery an. [Mehr Informationen](https://help.shopify.com/manual/online-store/search-and-discovery/filters)"
+          "info": "Passe Filter mit der Search & Discovery-App an. [Mehr Informationen](https://help.shopify.com/manual/online-store/search-and-discovery/filters)"
         },
         "show_rating": {
           "label": "Produktbewertung anzeigen",
diff --git a/locales/fr.schema.json b/locales/fr.schema.json
index 33009ffc84a..af2ffe83d20 100644
--- a/locales/fr.schema.json
+++ b/locales/fr.schema.json
@@ -388,7 +388,7 @@
           "label": "Petit"
         },
         "options__2": {
-          "label": "Moyen"
+          "label": "Moyenne"
         },
         "options__3": {
           "label": "Grand"
@@ -1033,7 +1033,7 @@
             "label": "Petit"
           },
           "options__3": {
-            "label": "Moyen"
+            "label": "Moyenne"
           },
           "info": "Pour optimiser vos résultats, utilisez une image ayant un rapport d'aspect de 3:2. [En savoir plus](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)",
           "options__4": {
@@ -1171,7 +1171,7 @@
             "label": "Petit"
           },
           "options__3": {
-            "label": "Moyen"
+            "label": "Moyenne"
           },
           "label": "Hauteur de l'image",
           "options__4": {
@@ -1193,7 +1193,7 @@
             "label": "Petit"
           },
           "options__2": {
-            "label": "Moyen"
+            "label": "Moyenne"
           },
           "options__3": {
             "label": "Grand"
@@ -1309,7 +1309,7 @@
                 "label": "Petit"
               },
               "options__2": {
-                "label": "Moyen"
+                "label": "Moyenne"
               },
               "options__3": {
                 "label": "Grand"
@@ -1337,7 +1337,7 @@
                 "label": "Petit"
               },
               "options__3": {
-                "label": "Moyen"
+                "label": "Moyenne"
               },
               "info": "Pour optimiser vos résultats, utilisez une image ayant un rapport d'aspect de 16:9. [En savoir plus](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)",
               "options__4": {
@@ -1413,7 +1413,7 @@
             "label": "Petit"
           },
           "options__3": {
-            "label": "Moyen"
+            "label": "Moyenne"
           },
           "options__4": {
             "label": "Grand"
@@ -2052,7 +2052,7 @@
             "label": "Petit"
           },
           "options__2": {
-            "label": "Moyen"
+            "label": "Moyenne"
           },
           "options__3": {
             "label": "Grand"
@@ -2406,7 +2406,7 @@
                 "label": "Petit"
               },
               "options__2": {
-                "label": "Moyen"
+                "label": "Moyenne"
               },
               "options__3": {
                 "label": "Grand"
@@ -2669,7 +2669,7 @@
             "label": "Petit"
           },
           "options__3": {
-            "label": "Moyen"
+            "label": "Moyenne"
           },
           "options__4": {
             "label": "Grand"
@@ -2792,7 +2792,7 @@
             "label": "Petit"
           },
           "options__3": {
-            "label": "Moyen"
+            "label": "Moyenne"
           },
           "options__4": {
             "label": "Grand"
@@ -3233,7 +3233,7 @@
             "label": "Petit"
           },
           "options__3": {
-            "label": "Moyen"
+            "label": "Moyenne"
           },
           "options__4": {
             "label": "Grand"
@@ -3245,7 +3245,7 @@
             "label": "Petit"
           },
           "options__2": {
-            "label": "Moyen"
+            "label": "Moyenne"
           },
           "options__3": {
             "label": "Grand"
@@ -3258,7 +3258,7 @@
             "label": "Petit"
           },
           "options__2": {
-            "label": "Moyen"
+            "label": "Moyenne"
           },
           "options__3": {
             "label": "Grand"
diff --git a/locales/nb.schema.json b/locales/nb.schema.json
index f8756643c8a..de5d30cd036 100644
--- a/locales/nb.schema.json
+++ b/locales/nb.schema.json
@@ -388,7 +388,7 @@
           "label": "Liten"
         },
         "options__2": {
-          "label": "Middels"
+          "label": "Medie"
         },
         "options__3": {
           "label": "Stor"
@@ -1033,7 +1033,7 @@
             "label": "Liten"
           },
           "options__3": {
-            "label": "Middels"
+            "label": "Medie"
           },
           "info": "Bruk et bilde med størrelsesforhold 3:2 for best resultat. [Finn ut mer](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)",
           "options__4": {
@@ -1171,7 +1171,7 @@
             "label": "Liten"
           },
           "options__3": {
-            "label": "Middels"
+            "label": "Medie"
           },
           "label": "Bildehøyde",
           "options__4": {
@@ -1193,7 +1193,7 @@
             "label": "Liten"
           },
           "options__2": {
-            "label": "Middels"
+            "label": "Medie"
           },
           "options__3": {
             "label": "Stor"
@@ -1309,7 +1309,7 @@
                 "label": "Liten"
               },
               "options__2": {
-                "label": "Middels"
+                "label": "Medie"
               },
               "options__3": {
                 "label": "Stor"
@@ -1337,7 +1337,7 @@
                 "label": "Liten"
               },
               "options__3": {
-                "label": "Middels"
+                "label": "Medie"
               },
               "info": "Bruk et bilde med størrelsesforhold 16:9 for best resultat. [Finn ut mer](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)",
               "options__4": {
@@ -1413,7 +1413,7 @@
             "label": "Liten"
           },
           "options__3": {
-            "label": "Middels"
+            "label": "Medie"
           },
           "options__4": {
             "label": "Stor"
@@ -2052,7 +2052,7 @@
             "label": "Liten"
           },
           "options__2": {
-            "label": "Middels"
+            "label": "Medie"
           },
           "options__3": {
             "label": "Stor"
@@ -2406,7 +2406,7 @@
                 "label": "Liten"
               },
               "options__2": {
-                "label": "Middels"
+                "label": "Medie"
               },
               "options__3": {
                 "label": "Stor"
@@ -2669,7 +2669,7 @@
             "label": "Liten"
           },
           "options__3": {
-            "label": "Middels"
+            "label": "Medie"
           },
           "options__4": {
             "label": "Stor"
@@ -2792,7 +2792,7 @@
             "label": "Liten"
           },
           "options__3": {
-            "label": "Middels"
+            "label": "Medie"
           },
           "options__4": {
             "label": "Stor"
@@ -3233,7 +3233,7 @@
             "label": "Liten"
           },
           "options__3": {
-            "label": "Middels"
+            "label": "Medie"
           },
           "options__4": {
             "label": "Stor"
@@ -3245,7 +3245,7 @@
             "label": "Liten"
           },
           "options__2": {
-            "label": "Middels"
+            "label": "Medie"
           },
           "options__3": {
             "label": "Stor"
@@ -3258,7 +3258,7 @@
             "label": "Liten"
           },
           "options__2": {
-            "label": "Middels"
+            "label": "Medie"
           },
           "options__3": {
             "label": "Stor"

From 97bca2e8d4ce725a5403fdae7d7d7da84fcd4499 Mon Sep 17 00:00:00 2001
From: Alex Ilea <6627543+alisterdev@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:05:00 -0500
Subject: [PATCH 48/58] [Variant Picker] Ensure that swatches wrap correctly
 (#3185)

---
 assets/component-product-variant-picker.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/component-product-variant-picker.css b/assets/component-product-variant-picker.css
index aecdafa69e9..f62ef38157f 100644
--- a/assets/component-product-variant-picker.css
+++ b/assets/component-product-variant-picker.css
@@ -143,6 +143,7 @@ variant-selects {
 /* Custom styles for Swatch display type */
 .product-form__input--swatch {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .product-form__input--swatch .swatch-input__input + .swatch-input__label {

From bfd5e92579c917058b0ea6463e375907f0ac130c Mon Sep 17 00:00:00 2001
From: Abdulrahman Hamideh <abdulrahman.hamideh@shopify.com>
Date: Wed, 10 Jan 2024 16:05:10 -0500
Subject: [PATCH 49/58] Focus search on country selector open and fix iOS bug
 (#3183)

* Focus search on country selector open

* Set stacking context
---
 assets/localization-form.js     | 4 ++++
 assets/section-image-banner.css | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/assets/localization-form.js b/assets/localization-form.js
index 82937c799c7..d1f2debd53a 100644
--- a/assets/localization-form.js
+++ b/assets/localization-form.js
@@ -4,6 +4,7 @@ if (!customElements.get('localization-form')) {
     class LocalizationForm extends HTMLElement {
       constructor() {
         super();
+        this.mql = window.matchMedia('(min-width: 750px)');
         this.elements = {
           input: this.querySelector('input[name="locale_code"], input[name="country_code"]'),
           button: this.querySelector('button.localization-form__select'),
@@ -116,6 +117,9 @@ if (!customElements.get('localization-form')) {
         if (!document.body.classList.contains('overflow-hidden-tablet')) {
           document.body.classList.add('overflow-hidden-mobile');
         }
+        if (this.elements.search && this.mql.matches) {
+          this.elements.search.focus();
+        }
         document.querySelector('.menu-drawer').classList.add('country-selector-open');
       }
 
diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css
index 28ed04c2849..355c9e277ca 100644
--- a/assets/section-image-banner.css
+++ b/assets/section-image-banner.css
@@ -2,6 +2,8 @@
   display: flex;
   position: relative;
   flex-direction: column;
+  z-index: auto;
+  isolation: isolate;
 }
 
 .banner__box {

From 27e62053d02bd5d815699986ebc38fb66cf1fb73 Mon Sep 17 00:00:00 2001
From: Abdulrahman Hamideh <abdulrahman.hamideh@shopify.com>
Date: Thu, 11 Jan 2024 12:45:58 -0500
Subject: [PATCH 50/58] Prevent sticky header from hiding when country selector
 is open (#3188)

---
 assets/component-localization-form.css | 1 +
 assets/localization-form.js            | 5 +++++
 sections/header.liquid                 | 4 ++--
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/assets/component-localization-form.css b/assets/component-localization-form.css
index a01bdac8fbe..e607b87bc3f 100644
--- a/assets/component-localization-form.css
+++ b/assets/component-localization-form.css
@@ -257,6 +257,7 @@ noscript .localization-selector.link {
     height: 100%;
     background-color: rgba(var(--color-foreground), 0.5);
     z-index: 3;
+    animation: animateLocalization var(--duration-default) ease;
   }
 
   .disclosure__list-wrapper.country-selector {
diff --git a/assets/localization-form.js b/assets/localization-form.js
index d1f2debd53a..4d532ece621 100644
--- a/assets/localization-form.js
+++ b/assets/localization-form.js
@@ -5,6 +5,7 @@ if (!customElements.get('localization-form')) {
       constructor() {
         super();
         this.mql = window.matchMedia('(min-width: 750px)');
+        this.header = document.querySelector('.header-wrapper');
         this.elements = {
           input: this.querySelector('input[name="locale_code"], input[name="country_code"]'),
           button: this.querySelector('button.localization-form__select'),
@@ -47,6 +48,7 @@ if (!customElements.get('localization-form')) {
         }
         document.body.classList.remove('overflow-hidden-mobile');
         document.querySelector('.menu-drawer').classList.remove('country-selector-open');
+        this.header.preventHide = false;
       }
 
       onContainerKeyDown(event) {
@@ -120,6 +122,9 @@ if (!customElements.get('localization-form')) {
         if (this.elements.search && this.mql.matches) {
           this.elements.search.focus();
         }
+        if (this.hasAttribute('data-prevent-hide')) {
+          this.header.preventHide = true;
+        }
         document.querySelector('.menu-drawer').classList.add('country-selector-open');
       }
 
diff --git a/sections/header.liquid b/sections/header.liquid
index a9551ddccb7..d5f4cfd81ff 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -255,7 +255,7 @@
             {%- endform -%}
           </noscript>
 
-          <localization-form class="small-hide medium-hide no-js-hidden">
+          <localization-form class="small-hide medium-hide no-js-hidden" data-prevent-hide>
             {%- form 'localization', id: 'HeaderCountryForm', class: 'localization-form' -%}
               <div>
                 <h2 class="visually-hidden" id="HeaderCountryLabel">{{ 'localization.country_label' | t }}</h2>
@@ -283,7 +283,7 @@
             {%- endform -%}
           </noscript>
 
-          <localization-form class="small-hide medium-hide no-js-hidden">
+          <localization-form class="small-hide medium-hide no-js-hidden" data-prevent-hide>
             {%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}
               <div>
                 <h2 class="visually-hidden" id="HeaderLanguageLabel">{{ 'localization.language_label' | t }}</h2>

From 767f62f5b5641be1182c1400e2f21fd5a52c6464 Mon Sep 17 00:00:00 2001
From: melissaperreault <melissa.perreault@shopify.com>
Date: Fri, 12 Jan 2024 11:57:15 -0500
Subject: [PATCH 51/58] change to 100% (#3190)

---
 assets/section-main-product.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index 8dd6d10e603..5fb37df78e9 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -181,7 +181,7 @@
 }
 
 .product-form__input .select {
-  max-width: 25rem;
+  max-width: 100%;
 }
 
 .product-form__submit {

From bfa56e0607a924eb5d1a10e5dd8a00ad399ce36e Mon Sep 17 00:00:00 2001
From: Alex Ilea <6627543+alisterdev@users.noreply.github.com>
Date: Mon, 15 Jan 2024 12:13:23 -0500
Subject: [PATCH 52/58] [Variant Picker] Simplify swatch settings (#3189)

* [Variant Picker] Simplify swatch settings

* Update 7 translation files

* Update 12 translation files

* Update 1 translation file

---------

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/cs.schema.json                 | 104 ++++++++----------------
 locales/da.schema.json                 | 108 +++++++++----------------
 locales/de.schema.json                 | 104 ++++++++----------------
 locales/en.default.schema.json         | 104 ++++++++----------------
 locales/es.schema.json                 | 104 ++++++++----------------
 locales/fi.schema.json                 | 108 +++++++++----------------
 locales/fr.schema.json                 | 108 +++++++++----------------
 locales/it.schema.json                 | 108 +++++++++----------------
 locales/ja.schema.json                 | 104 ++++++++----------------
 locales/ko.schema.json                 | 104 ++++++++----------------
 locales/nb.schema.json                 | 104 ++++++++----------------
 locales/nl.schema.json                 | 104 ++++++++----------------
 locales/pl.schema.json                 | 104 ++++++++----------------
 locales/pt-BR.schema.json              | 104 ++++++++----------------
 locales/pt-PT.schema.json              | 104 ++++++++----------------
 locales/sv.schema.json                 | 104 ++++++++----------------
 locales/th.schema.json                 | 104 ++++++++----------------
 locales/tr.schema.json                 | 104 ++++++++----------------
 locales/vi.schema.json                 | 104 ++++++++----------------
 locales/zh-CN.schema.json              | 104 ++++++++----------------
 locales/zh-TW.schema.json              | 104 ++++++++----------------
 sections/featured-product.liquid       |  50 +++---------
 sections/main-product.liquid           |  50 +++---------
 snippets/product-variant-picker.liquid |   8 +-
 24 files changed, 750 insertions(+), 1558 deletions(-)

diff --git a/locales/cs.schema.json b/locales/cs.schema.json
index f8a87b6dcba..98b850f782b 100644
--- a/locales/cs.schema.json
+++ b/locales/cs.schema.json
@@ -1639,44 +1639,26 @@
         "variant_picker": {
           "name": "Selektor variant",
           "settings": {
-            "options": {
-              "header": "Varianty jen s textem",
-              "picker_type": {
-                "label": "Styl",
-                "options__1": {
-                  "label": "Rozevírací nabídka"
-                },
-                "options__2": {
-                  "label": "Kulaté přepínače"
-                }
+            "picker_type": {
+              "label": "Styl",
+              "options__1": {
+                "label": "Rozevírací nabídka"
+              },
+              "options__2": {
+                "label": "Kulaté přepínače"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianty se vzorníky",
+            "swatch_shape": {
+              "label": "Vzorník",
               "info": "Zjistit, jak zobrazit [vzorníky](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Styl",
-                "options__1": {
-                  "label": "Jen vzorník"
-                },
-                "options__2": {
-                  "label": "Rozevírací nabídka"
-                },
-                "options__3": {
-                  "label": "Rozevírací nabídka (bez vzorníku)"
-                },
-                "options__4": {
-                  "label": "Kulaté přepínače (bez vzorníku)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Tvar vzorníku",
-                "options__1": {
-                  "label": "Kruh"
-                },
-                "options__2": {
-                  "label": "Čtverec"
-                }
+              "options__1": {
+                "label": "Kruh"
+              },
+              "options__2": {
+                "label": "Čtverec"
+              },
+              "options__3": {
+                "label": "Žádný"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Selektor variant",
           "settings": {
-            "options": {
-              "header": "Varianty jen s textem",
-              "picker_type": {
-                "label": "Styl",
-                "options__1": {
-                  "label": "Rozevírací nabídka"
-                },
-                "options__2": {
-                  "label": "Kulaté přepínače"
-                }
+            "picker_type": {
+              "label": "Styl",
+              "options__1": {
+                "label": "Rozevírací nabídka"
+              },
+              "options__2": {
+                "label": "Kulaté přepínače"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianty se vzorníky",
+            "swatch_shape": {
+              "label": "Vzorník",
               "info": "Zjistit, jak zobrazit [vzorníky](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Styl",
-                "options__1": {
-                  "label": "Jen vzorník"
-                },
-                "options__2": {
-                  "label": "Rozevírací nabídka"
-                },
-                "options__3": {
-                  "label": "Rozevírací nabídka (bez vzorníku)"
-                },
-                "options__4": {
-                  "label": "Kulaté přepínače (bez vzorníku)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Tvar vzorníku",
-                "options__1": {
-                  "label": "Kruh"
-                },
-                "options__2": {
-                  "label": "Čtverec"
-                }
+              "options__1": {
+                "label": "Kruh"
+              },
+              "options__2": {
+                "label": "Čtverec"
+              },
+              "options__3": {
+                "label": "Žádný"
               }
             }
           }
diff --git a/locales/da.schema.json b/locales/da.schema.json
index 3f5b987df9e..690b1b22cc9 100644
--- a/locales/da.schema.json
+++ b/locales/da.schema.json
@@ -1639,44 +1639,26 @@
         "variant_picker": {
           "name": "Variantvælger",
           "settings": {
-            "options": {
-              "header": "Kun tekst-varianter",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Rullemenu"
-                },
-                "options__2": {
-                  "label": "Etiketter"
-                }
+            "picker_type": {
+              "label": "Stil",
+              "options__1": {
+                "label": "Rullemenu"
+              },
+              "options__2": {
+                "label": "Etiketter"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianter med prøvevisning",
-              "info": "Se hvordan du viser [prøver](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Kun prøvevisning"
-                },
-                "options__2": {
-                  "label": "Rullemenu"
-                },
-                "options__3": {
-                  "label": "Rullemenu (ingen prøvevisning)"
-                },
-                "options__4": {
-                  "label": "Etiketter (ingen prøvevisning)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Prøvevisning – form",
-                "options__1": {
-                  "label": "Cirkel"
-                },
-                "options__2": {
-                  "label": "Kvadrat"
-                }
+            "swatch_shape": {
+              "label": "Prøve",
+              "info": "Se, hvordan du viser [prøver](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "options__1": {
+                "label": "Cirkel"
+              },
+              "options__2": {
+                "label": "Kvadrat"
+              },
+              "options__3": {
+                "label": "Ingen"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Variantvælger",
           "settings": {
-            "options": {
-              "header": "Kun tekst-varianter",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Rullemenu"
-                },
-                "options__2": {
-                  "label": "Etiketter"
-                }
+            "picker_type": {
+              "label": "Stil",
+              "options__1": {
+                "label": "Rullemenu"
+              },
+              "options__2": {
+                "label": "Etiketter"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianter med prøvevisning",
-              "info": "Se hvordan du viser [prøver](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Kun prøvevisning"
-                },
-                "options__2": {
-                  "label": "Rullemenu"
-                },
-                "options__3": {
-                  "label": "Rullemenu (ingen prøvevisning)"
-                },
-                "options__4": {
-                  "label": "Etiketter (ingen prøvevisning)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Prøvevisning – form",
-                "options__1": {
-                  "label": "Cirkel"
-                },
-                "options__2": {
-                  "label": "Kvadrat"
-                }
+            "swatch_shape": {
+              "label": "Prøve",
+              "info": "Se, hvordan du viser [prøver](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "options__1": {
+                "label": "Cirkel"
+              },
+              "options__2": {
+                "label": "Kvadrat"
+              },
+              "options__3": {
+                "label": "Ingen"
               }
             }
           }
diff --git a/locales/de.schema.json b/locales/de.schema.json
index d19785cafda..15b8ff7ed61 100644
--- a/locales/de.schema.json
+++ b/locales/de.schema.json
@@ -1638,44 +1638,26 @@
         "variant_picker": {
           "name": "Variantenauswahl",
           "settings": {
-            "options": {
-              "header": "Varianten nur mit Text",
-              "picker_type": {
-                "label": "Optik",
-                "options__1": {
-                  "label": "Dropdown"
-                },
-                "options__2": {
-                  "label": "Kapseln"
-                }
+            "picker_type": {
+              "label": "Optik",
+              "options__1": {
+                "label": "Dropdown"
+              },
+              "options__2": {
+                "label": "Kapseln"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianten mit Farbfeldern",
+            "swatch_shape": {
+              "label": "Farbfeld",
               "info": "Erfahre mehr zum Anzeigen von [Farbfeldern](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Optik",
-                "options__1": {
-                  "label": "Nur Farbfeld"
-                },
-                "options__2": {
-                  "label": "Dropdown"
-                },
-                "options__3": {
-                  "label": "Dropdown (kein Farbfeld)"
-                },
-                "options__4": {
-                  "label": "Kapseln (kein Farbfeld)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Form des Farbfelds",
-                "options__1": {
-                  "label": "Kreis"
-                },
-                "options__2": {
-                  "label": "Quadrat"
-                }
+              "options__1": {
+                "label": "Kreis"
+              },
+              "options__2": {
+                "label": "Quadrat"
+              },
+              "options__3": {
+                "label": "Keine"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Variantenauswahl",
           "settings": {
-            "options": {
-              "header": "Varianten nur mit Text",
-              "picker_type": {
-                "label": "Optik",
-                "options__1": {
-                  "label": "Dropdown"
-                },
-                "options__2": {
-                  "label": "Kapseln"
-                }
+            "picker_type": {
+              "label": "Optik",
+              "options__1": {
+                "label": "Dropdown"
+              },
+              "options__2": {
+                "label": "Kapseln"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianten mit Farbfeldern",
+            "swatch_shape": {
+              "label": "Farbfeld",
               "info": "Erfahre mehr zum Anzeigen von [Farbfeldern](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Optik",
-                "options__1": {
-                  "label": "Nur Farbfeld"
-                },
-                "options__2": {
-                  "label": "Dropdown"
-                },
-                "options__3": {
-                  "label": "Dropdown (kein Farbfeld)"
-                },
-                "options__4": {
-                  "label": "Kapseln (kein Farbfeld)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Form des Farbfelds",
-                "options__1": {
-                  "label": "Kreis"
-                },
-                "options__2": {
-                  "label": "Quadrat"
-                }
+              "options__1": {
+                "label": "Kreis"
+              },
+              "options__2": {
+                "label": "Quadrat"
+              },
+              "options__3": {
+                "label": "Keine"
               }
             }
           }
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index e346b687777..cfb28a1a44d 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -850,44 +850,26 @@
         "variant_picker": {
           "name": "Variant picker",
           "settings": {
-            "options": {
-              "header": "Text-only variants",
-              "picker_type": {
-                "label": "Style",
-                "options__1": {
-                  "label": "Dropdown"
-                },
-                "options__2": {
-                  "label": "Pills"
-                }
+            "picker_type": {
+              "label": "Style",
+              "options__1": {
+                "label": "Dropdown"
+              },
+              "options__2": {
+                "label": "Pills"
               }
             },
-            "options_with_swatches": {
-              "header": "Variants with swatches",
+            "swatch_shape": {
+              "label": "Swatch",
               "info": "Learn how to display [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Style",
-                "options__1": {
-                  "label": "Swatch only"
-                },
-                "options__2": {
-                  "label": "Dropdown"
-                },
-                "options__3": {
-                  "label": "Dropdown (no swatch)"
-                },
-                "options__4": {
-                  "label": "Pills (no swatch)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Swatch shape",
-                "options__1": {
-                  "label": "Circle"
-                },
-                "options__2": {
-                  "label": "Square"
-                }
+              "options__1": {
+                "label": "Circle"
+              },
+              "options__2": {
+                "label": "Square"
+              },
+              "options__3": {
+                "label": "None"
               }
             }
           }
@@ -2003,44 +1985,26 @@
         "variant_picker": {
           "name": "Variant picker",
           "settings": {
-            "options": {
-              "header": "Text-only variants",
-              "picker_type": {
-                "label": "Style",
-                "options__1": {
-                  "label": "Dropdown"
-                },
-                "options__2": {
-                  "label": "Pills"
-                }
+            "picker_type": {
+              "label": "Style",
+              "options__1": {
+                "label": "Dropdown"
+              },
+              "options__2": {
+                "label": "Pills"
               }
             },
-            "options_with_swatches": {
-              "header": "Variants with swatches",
+            "swatch_shape": {
+              "label": "Swatch",
               "info": "Learn how to display [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Style",
-                "options__1": {
-                  "label": "Swatch only"
-                },
-                "options__2": {
-                  "label": "Dropdown"
-                },
-                "options__3": {
-                  "label": "Dropdown (no swatch)"
-                },
-                "options__4": {
-                  "label": "Pills (no swatch)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Swatch shape",
-                "options__1": {
-                  "label": "Circle"
-                },
-                "options__2": {
-                  "label": "Square"
-                }
+              "options__1": {
+                "label": "Circle"
+              },
+              "options__2": {
+                "label": "Square"
+              },
+              "options__3": {
+                "label": "None"
               }
             }
           }
diff --git a/locales/es.schema.json b/locales/es.schema.json
index 9f6a46288c1..1788debd3ea 100644
--- a/locales/es.schema.json
+++ b/locales/es.schema.json
@@ -1639,44 +1639,26 @@
         "variant_picker": {
           "name": "Selector de variante",
           "settings": {
-            "options": {
-              "header": "Variantes de solo texto",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Menú desplegable"
-                },
-                "options__2": {
-                  "label": "Botones"
-                }
+            "picker_type": {
+              "label": "Estilo",
+              "options__1": {
+                "label": "Desplegable"
+              },
+              "options__2": {
+                "label": "Miniaturas"
               }
             },
-            "options_with_swatches": {
-              "header": "Variantes con muestras",
+            "swatch_shape": {
+              "label": "Muestra",
               "info": "Obtén información sobre cómo presentar [muestras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Solo muestra"
-                },
-                "options__2": {
-                  "label": "Menú desplegable"
-                },
-                "options__3": {
-                  "label": "Menú desplegable (sin muestra)"
-                },
-                "options__4": {
-                  "label": "Botones (sin muestra)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Forma de la muestra",
-                "options__1": {
-                  "label": "Círculo"
-                },
-                "options__2": {
-                  "label": "Cuadrado"
-                }
+              "options__1": {
+                "label": "Círculo"
+              },
+              "options__2": {
+                "label": "Cuadrado"
+              },
+              "options__3": {
+                "label": "Ninguna"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Selector de variante",
           "settings": {
-            "options": {
-              "header": "Variantes de solo texto",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Menú desplegable"
-                },
-                "options__2": {
-                  "label": "Botones"
-                }
+            "picker_type": {
+              "label": "Estilo",
+              "options__1": {
+                "label": "Desplegable"
+              },
+              "options__2": {
+                "label": "Botones"
               }
             },
-            "options_with_swatches": {
-              "header": "Variantes con muestras",
+            "swatch_shape": {
+              "label": "Muestra",
               "info": "Obtén información sobre cómo presentar [muestras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Solo muestra"
-                },
-                "options__2": {
-                  "label": "Menú desplegable"
-                },
-                "options__3": {
-                  "label": "Menú desplegable (sin muestra)"
-                },
-                "options__4": {
-                  "label": "Botones (sin muestra)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Forma de la muestra",
-                "options__1": {
-                  "label": "Círculo"
-                },
-                "options__2": {
-                  "label": "Cuadrado"
-                }
+              "options__1": {
+                "label": "Círculo"
+              },
+              "options__2": {
+                "label": "Cuadrado"
+              },
+              "options__3": {
+                "label": "Ninguna"
               }
             }
           }
diff --git a/locales/fi.schema.json b/locales/fi.schema.json
index aff06d49a83..0db07100b0e 100644
--- a/locales/fi.schema.json
+++ b/locales/fi.schema.json
@@ -1638,44 +1638,26 @@
         "variant_picker": {
           "name": "Versionvalitsin",
           "settings": {
-            "options": {
-              "header": "Vain tekstiä sisältävät versiot",
-              "picker_type": {
-                "label": "Tyyli",
-                "options__1": {
-                  "label": "Pudotusvalikko"
-                },
-                "options__2": {
-                  "label": "Pillerikuvakkeet"
-                }
+            "picker_type": {
+              "label": "Tyyli",
+              "options__1": {
+                "label": "Pudotusvalikko"
+              },
+              "options__2": {
+                "label": "Pillerit"
               }
             },
-            "options_with_swatches": {
-              "header": "Väriruutuja sisältävät versiot",
-              "info": "Lisätietoja siitä, miten näytät [väriruudut](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Tyyli",
-                "options__1": {
-                  "label": "Vain väriruudut"
-                },
-                "options__2": {
-                  "label": "Pudotusvalikko"
-                },
-                "options__3": {
-                  "label": "Pudotusvalikko (ei väriruutua)"
-                },
-                "options__4": {
-                  "label": "Pillerikuvakkeet (ei väriruutua)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Väriruudun muoto",
-                "options__1": {
-                  "label": "Ympyrä"
-                },
-                "options__2": {
-                  "label": "Neliö"
-                }
+            "swatch_shape": {
+              "label": "Väriruutu",
+              "info": "Lisätietoja siitä, miten voit näyttää [väriruudut](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "options__1": {
+                "label": "Ympyrä"
+              },
+              "options__2": {
+                "label": "Neliö"
+              },
+              "options__3": {
+                "label": "Ei mitään"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Versionvalitsin",
           "settings": {
-            "options": {
-              "header": "Vain tekstiä sisältävät versiot",
-              "picker_type": {
-                "label": "Tyyli",
-                "options__1": {
-                  "label": "Pudotusvalikko"
-                },
-                "options__2": {
-                  "label": "Pillerikuvakkeet"
-                }
+            "picker_type": {
+              "label": "Tyyli",
+              "options__1": {
+                "label": "Pudotusvalikko"
+              },
+              "options__2": {
+                "label": "Kuvakkeet"
               }
             },
-            "options_with_swatches": {
-              "header": "Väriruutuja sisältävät versiot",
-              "info": "Lisätietoja siitä, miten näytät [väriruudut](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Tyyli",
-                "options__1": {
-                  "label": "Vain väriruudut"
-                },
-                "options__2": {
-                  "label": "Pudotusvalikko"
-                },
-                "options__3": {
-                  "label": "Pudotusvalikko (ei väriruutua)"
-                },
-                "options__4": {
-                  "label": "Pillerikuvakkeet (ei väriruutua)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Väriruudun muoto",
-                "options__1": {
-                  "label": "Ympyrä"
-                },
-                "options__2": {
-                  "label": "Neliö"
-                }
+            "swatch_shape": {
+              "label": "Väriruutu",
+              "info": "Lisätietoja siitä, miten voit näyttää [väriruudut](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "options__1": {
+                "label": "Ympyrä"
+              },
+              "options__2": {
+                "label": "Neliö"
+              },
+              "options__3": {
+                "label": "Ei mitään"
               }
             }
           }
diff --git a/locales/fr.schema.json b/locales/fr.schema.json
index af2ffe83d20..1818ab7ee69 100644
--- a/locales/fr.schema.json
+++ b/locales/fr.schema.json
@@ -1638,44 +1638,26 @@
         "variant_picker": {
           "name": "Sélecteur de variante",
           "settings": {
-            "options": {
-              "header": "Variantes au format texte uniquement",
-              "picker_type": {
-                "label": "Style",
-                "options__1": {
-                  "label": "Menu déroulant"
-                },
-                "options__2": {
-                  "label": "Boutons pilule"
-                }
+            "picker_type": {
+              "label": "Style",
+              "options__1": {
+                "label": "Menu déroulant"
+              },
+              "options__2": {
+                "label": "Comprimés"
               }
             },
-            "options_with_swatches": {
-              "header": "Variantes avec échantillons",
-              "info": "Découvrez comment affichez les [échantillons](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Style",
-                "options__1": {
-                  "label": "Échantillon uniquement"
-                },
-                "options__2": {
-                  "label": "Menu déroulant"
-                },
-                "options__3": {
-                  "label": "Menu déroulant (pas d’échantillon)"
-                },
-                "options__4": {
-                  "label": "Boutons pilules (pas d’échantillon)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Forme d’échantillon",
-                "options__1": {
-                  "label": "Cercle"
-                },
-                "options__2": {
-                  "label": "Carré"
-                }
+            "swatch_shape": {
+              "label": "Échantillon",
+              "info": "Découvrez comment afficher les [échantillons](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "options__1": {
+                "label": "Cercle"
+              },
+              "options__2": {
+                "label": "Carré"
+              },
+              "options__3": {
+                "label": "Aucun"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Sélecteur de variante",
           "settings": {
-            "options": {
-              "header": "Variantes au format texte uniquement",
-              "picker_type": {
-                "label": "Style",
-                "options__1": {
-                  "label": "Menu déroulant"
-                },
-                "options__2": {
-                  "label": "Boutons pilule"
-                }
+            "picker_type": {
+              "label": "Style",
+              "options__1": {
+                "label": "Menu déroulant"
+              },
+              "options__2": {
+                "label": "Pilules"
               }
             },
-            "options_with_swatches": {
-              "header": "Variantes avec échantillons",
-              "info": "Découvrez comment affichez les [échantillons](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Style",
-                "options__1": {
-                  "label": "Échantillon uniquement"
-                },
-                "options__2": {
-                  "label": "Menu déroulant"
-                },
-                "options__3": {
-                  "label": "Menu déroulant (pas d’échantillon)"
-                },
-                "options__4": {
-                  "label": "Boutons pilules (pas d’échantillon)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Forme d’échantillon",
-                "options__1": {
-                  "label": "Cercle"
-                },
-                "options__2": {
-                  "label": "Carré"
-                }
+            "swatch_shape": {
+              "label": "Échantillon",
+              "info": "Découvrez comment afficher les [échantillons](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "options__1": {
+                "label": "Cercle"
+              },
+              "options__2": {
+                "label": "Carré"
+              },
+              "options__3": {
+                "label": "Aucun"
               }
             }
           }
diff --git a/locales/it.schema.json b/locales/it.schema.json
index fc4230650e1..cd28302907b 100644
--- a/locales/it.schema.json
+++ b/locales/it.schema.json
@@ -1639,44 +1639,26 @@
         "variant_picker": {
           "name": "Selettore di variante",
           "settings": {
-            "options": {
-              "header": "Varianti di testo semplice",
-              "picker_type": {
-                "label": "Stile",
-                "options__1": {
-                  "label": "Menu a discesa"
-                },
-                "options__2": {
-                  "label": "\"A pillole\""
-                }
+            "picker_type": {
+              "label": "Stile",
+              "options__1": {
+                "label": "Menu a discesa"
+              },
+              "options__2": {
+                "label": "\"A pillole\""
               }
             },
-            "options_with_swatches": {
-              "header": "Varianti con campioni di colore",
-              "info": "Scopri come visualizzare [campioni di colore](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Stile",
-                "options__1": {
-                  "label": "Solo campione di colore"
-                },
-                "options__2": {
-                  "label": "Menu a discesa"
-                },
-                "options__3": {
-                  "label": "Menu a discesa (senza campione di colore)"
-                },
-                "options__4": {
-                  "label": "\"A pillole\" (senza campione di colore)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Forma campione di colore",
-                "options__1": {
-                  "label": "Tonda"
-                },
-                "options__2": {
-                  "label": "Quadrata"
-                }
+            "swatch_shape": {
+              "label": "Campione di colore",
+              "info": "Scopri come visualizzare i [campioni di colore](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "options__1": {
+                "label": "Tondo"
+              },
+              "options__2": {
+                "label": "Quadrato"
+              },
+              "options__3": {
+                "label": "Nessuno"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Selettore di variante",
           "settings": {
-            "options": {
-              "header": "Varianti di testo semplice",
-              "picker_type": {
-                "label": "Stile",
-                "options__1": {
-                  "label": "Menu a discesa"
-                },
-                "options__2": {
-                  "label": "\"A pillole\""
-                }
+            "picker_type": {
+              "label": "Stile",
+              "options__1": {
+                "label": "Menu a discesa"
+              },
+              "options__2": {
+                "label": "\"A pillole\""
               }
             },
-            "options_with_swatches": {
-              "header": "Varianti con campioni di colore",
-              "info": "Scopri come visualizzare [campioni di colore](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Stile",
-                "options__1": {
-                  "label": "Solo campione di colore"
-                },
-                "options__2": {
-                  "label": "Menu a discesa"
-                },
-                "options__3": {
-                  "label": "Menu a discesa (senza campione di colore)"
-                },
-                "options__4": {
-                  "label": "\"A pillole\" (senza campione di colore)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Forma campione di colore",
-                "options__1": {
-                  "label": "Tonda"
-                },
-                "options__2": {
-                  "label": "Quadrata"
-                }
+            "swatch_shape": {
+              "label": "Campione di colore",
+              "info": "Scopri come visualizzare i [campioni di colore](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "options__1": {
+                "label": "Tondo"
+              },
+              "options__2": {
+                "label": "Quadrato"
+              },
+              "options__3": {
+                "label": "Nessuno"
               }
             }
           }
diff --git a/locales/ja.schema.json b/locales/ja.schema.json
index d30167b59e5..771f58f604a 100644
--- a/locales/ja.schema.json
+++ b/locales/ja.schema.json
@@ -1630,44 +1630,26 @@
         "variant_picker": {
           "name": "バリエーションピッカー",
           "settings": {
-            "options": {
-              "header": "テキストのみのバリエーション",
-              "picker_type": {
-                "label": "スタイル",
-                "options__1": {
-                  "label": "ドロップダウン"
-                },
-                "options__2": {
-                  "label": "ピル型ボタン"
-                }
+            "picker_type": {
+              "label": "スタイル",
+              "options__1": {
+                "label": "ドロップダウン"
+              },
+              "options__2": {
+                "label": "ピル型ボタン"
               }
             },
-            "options_with_swatches": {
-              "header": "見本付きのバリエーション",
+            "swatch_shape": {
+              "label": "見本",
               "info": "[見本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) の表示方法はこちら",
-              "picker_type": {
-                "label": "スタイル",
-                "options__1": {
-                  "label": "見本のみ"
-                },
-                "options__2": {
-                  "label": "ドロップダウン"
-                },
-                "options__3": {
-                  "label": "ドロップダウン (見本なし)"
-                },
-                "options__4": {
-                  "label": "ピル型ボタン (見本なし)"
-                }
-              },
-              "swatch_shape": {
-                "label": "見本の形状",
-                "options__1": {
-                  "label": "円形"
-                },
-                "options__2": {
-                  "label": "正方形"
-                }
+              "options__1": {
+                "label": "円形"
+              },
+              "options__2": {
+                "label": "正方形"
+              },
+              "options__3": {
+                "label": "なし"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "バリエーションピッカー",
           "settings": {
-            "options": {
-              "header": "テキストのみのバリエーション",
-              "picker_type": {
-                "label": "スタイル",
-                "options__1": {
-                  "label": "ドロップダウン"
-                },
-                "options__2": {
-                  "label": "ピル型ボタン"
-                }
+            "picker_type": {
+              "label": "スタイル",
+              "options__1": {
+                "label": "ドロップダウン"
+              },
+              "options__2": {
+                "label": "ピル型ボタン"
               }
             },
-            "options_with_swatches": {
-              "header": "見本付きのバリエーション",
+            "swatch_shape": {
+              "label": "見本",
               "info": "[見本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) の表示方法はこちら",
-              "picker_type": {
-                "label": "スタイル",
-                "options__1": {
-                  "label": "見本のみ"
-                },
-                "options__2": {
-                  "label": "ドロップダウン"
-                },
-                "options__3": {
-                  "label": "ドロップダウン (見本なし)"
-                },
-                "options__4": {
-                  "label": "ピル型ボタン (見本なし)"
-                }
-              },
-              "swatch_shape": {
-                "label": "見本の形状",
-                "options__1": {
-                  "label": "円形"
-                },
-                "options__2": {
-                  "label": "正方形"
-                }
+              "options__1": {
+                "label": "円形"
+              },
+              "options__2": {
+                "label": "正方形"
+              },
+              "options__3": {
+                "label": "なし"
               }
             }
           }
diff --git a/locales/ko.schema.json b/locales/ko.schema.json
index 367bd88136e..263997389fd 100644
--- a/locales/ko.schema.json
+++ b/locales/ko.schema.json
@@ -1630,44 +1630,26 @@
         "variant_picker": {
           "name": "이형 상품 피커",
           "settings": {
-            "options": {
-              "header": "텍스트 전용 이형 상품",
-              "picker_type": {
-                "label": "스타일",
-                "options__1": {
-                  "label": "드롭다운"
-                },
-                "options__2": {
-                  "label": "타원형"
-                }
+            "picker_type": {
+              "label": "스타일",
+              "options__1": {
+                "label": "드롭다운"
+              },
+              "options__2": {
+                "label": "타원형"
               }
             },
-            "options_with_swatches": {
-              "header": "견본이 있는 이형 상품",
+            "swatch_shape": {
+              "label": "견본",
               "info": "[견본](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)을 표시할 방법을 알아보세요",
-              "picker_type": {
-                "label": "스타일",
-                "options__1": {
-                  "label": "견본 전용"
-                },
-                "options__2": {
-                  "label": "드롭다운"
-                },
-                "options__3": {
-                  "label": "드롭다운(견본 없음)"
-                },
-                "options__4": {
-                  "label": "타원형(견본 없음)"
-                }
-              },
-              "swatch_shape": {
-                "label": "견본 모양",
-                "options__1": {
-                  "label": "원형"
-                },
-                "options__2": {
-                  "label": "정사각형"
-                }
+              "options__1": {
+                "label": "원형"
+              },
+              "options__2": {
+                "label": "정사각형"
+              },
+              "options__3": {
+                "label": "없음"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "이형 상품 피커",
           "settings": {
-            "options": {
-              "header": "텍스트 전용 이형 상품",
-              "picker_type": {
-                "label": "스타일",
-                "options__1": {
-                  "label": "드롭다운"
-                },
-                "options__2": {
-                  "label": "타원형"
-                }
+            "picker_type": {
+              "label": "스타일",
+              "options__1": {
+                "label": "드롭다운"
+              },
+              "options__2": {
+                "label": "타원형"
               }
             },
-            "options_with_swatches": {
-              "header": "견본이 있는 이형 상품",
+            "swatch_shape": {
+              "label": "견본",
               "info": "[견본](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)을 표시할 방법을 알아보세요",
-              "picker_type": {
-                "label": "스타일",
-                "options__1": {
-                  "label": "견본 전용"
-                },
-                "options__2": {
-                  "label": "드롭다운"
-                },
-                "options__3": {
-                  "label": "드롭다운(견본 없음)"
-                },
-                "options__4": {
-                  "label": "타원형(견본 없음)"
-                }
-              },
-              "swatch_shape": {
-                "label": "견본 모양",
-                "options__1": {
-                  "label": "원형"
-                },
-                "options__2": {
-                  "label": "정사각형"
-                }
+              "options__1": {
+                "label": "원형"
+              },
+              "options__2": {
+                "label": "정사각형"
+              },
+              "options__3": {
+                "label": "없음"
               }
             }
           }
diff --git a/locales/nb.schema.json b/locales/nb.schema.json
index de5d30cd036..d2e7b17f78b 100644
--- a/locales/nb.schema.json
+++ b/locales/nb.schema.json
@@ -1638,44 +1638,26 @@
         "variant_picker": {
           "name": "Variantvelger",
           "settings": {
-            "options": {
-              "header": "Rene tekstvarianter",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Rullegardin"
-                },
-                "options__2": {
-                  "label": "Knapper"
-                }
+            "picker_type": {
+              "label": "Stil",
+              "options__1": {
+                "label": "Rullegardin"
+              },
+              "options__2": {
+                "label": "Knapper"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianter med fargekart",
+            "swatch_shape": {
+              "label": "Fargekart",
               "info": "Finn ut hvordan du viser [fargekart](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Kun fargekart"
-                },
-                "options__2": {
-                  "label": "Rullegardin"
-                },
-                "options__3": {
-                  "label": "Rullegardin (ikke fargekart)"
-                },
-                "options__4": {
-                  "label": "Knapper (ikke fargekart)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Form på fargekart",
-                "options__1": {
-                  "label": "Sirkel"
-                },
-                "options__2": {
-                  "label": "Firkant"
-                }
+              "options__1": {
+                "label": "Sirkel"
+              },
+              "options__2": {
+                "label": "Firkant"
+              },
+              "options__3": {
+                "label": "Ingen"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Variantvelger",
           "settings": {
-            "options": {
-              "header": "Rene tekstvarianter",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Rullegardin"
-                },
-                "options__2": {
-                  "label": "Knapper"
-                }
+            "picker_type": {
+              "label": "Stil",
+              "options__1": {
+                "label": "Rullegardin"
+              },
+              "options__2": {
+                "label": "Knapper"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianter med fargekart",
+            "swatch_shape": {
+              "label": "Fargekart",
               "info": "Finn ut hvordan du viser [fargekart](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Kun fargekart"
-                },
-                "options__2": {
-                  "label": "Rullegardin"
-                },
-                "options__3": {
-                  "label": "Rullegardin (ikke fargekart)"
-                },
-                "options__4": {
-                  "label": "Knapper (ikke fargekart)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Form på fargekart",
-                "options__1": {
-                  "label": "Sirkel"
-                },
-                "options__2": {
-                  "label": "Firkant"
-                }
+              "options__1": {
+                "label": "Sirkel"
+              },
+              "options__2": {
+                "label": "Firkant"
+              },
+              "options__3": {
+                "label": "Ingen"
               }
             }
           }
diff --git a/locales/nl.schema.json b/locales/nl.schema.json
index 94d2064d396..3f0146ba34a 100644
--- a/locales/nl.schema.json
+++ b/locales/nl.schema.json
@@ -1639,44 +1639,26 @@
         "variant_picker": {
           "name": "Variantkiezer",
           "settings": {
-            "options": {
-              "header": "Varianten met alleen tekst",
-              "picker_type": {
-                "label": "Stijl",
-                "options__1": {
-                  "label": "Vervolgkeuzelijst"
-                },
-                "options__2": {
-                  "label": "Keuzeopties"
-                }
+            "picker_type": {
+              "label": "Stijl",
+              "options__1": {
+                "label": "Vervolgkeuzelijst"
+              },
+              "options__2": {
+                "label": "Pillen"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianten met stalen",
+            "swatch_shape": {
+              "label": "Staal",
               "info": "Ontdek hoe je [stalen](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) weergeeft",
-              "picker_type": {
-                "label": "Stijl",
-                "options__1": {
-                  "label": "Alleen staal"
-                },
-                "options__2": {
-                  "label": "Vervolgkeuzelijst"
-                },
-                "options__3": {
-                  "label": "Vervolgkeuzelijst (geen staal)"
-                },
-                "options__4": {
-                  "label": "Keuzeopties (geen staal)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Vorm van staal",
-                "options__1": {
-                  "label": "Cirkel"
-                },
-                "options__2": {
-                  "label": "Vierkant"
-                }
+              "options__1": {
+                "label": "Cirkel"
+              },
+              "options__2": {
+                "label": "Vierkant"
+              },
+              "options__3": {
+                "label": "Geen"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Variantkiezer",
           "settings": {
-            "options": {
-              "header": "Varianten met alleen tekst",
-              "picker_type": {
-                "label": "Stijl",
-                "options__1": {
-                  "label": "Vervolgkeuzelijst"
-                },
-                "options__2": {
-                  "label": "Keuzeopties"
-                }
+            "picker_type": {
+              "label": "Stijl",
+              "options__1": {
+                "label": "Vervolgkeuzelijst"
+              },
+              "options__2": {
+                "label": "Keuzeopties"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianten met stalen",
+            "swatch_shape": {
+              "label": "Staal",
               "info": "Ontdek hoe je [stalen](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) weergeeft",
-              "picker_type": {
-                "label": "Stijl",
-                "options__1": {
-                  "label": "Alleen staal"
-                },
-                "options__2": {
-                  "label": "Vervolgkeuzelijst"
-                },
-                "options__3": {
-                  "label": "Vervolgkeuzelijst (geen staal)"
-                },
-                "options__4": {
-                  "label": "Keuzeopties (geen staal)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Vorm van staal",
-                "options__1": {
-                  "label": "Cirkel"
-                },
-                "options__2": {
-                  "label": "Vierkant"
-                }
+              "options__1": {
+                "label": "Cirkel"
+              },
+              "options__2": {
+                "label": "Vierkant"
+              },
+              "options__3": {
+                "label": "Geen"
               }
             }
           }
diff --git a/locales/pl.schema.json b/locales/pl.schema.json
index f96c5a63176..af61e7eb49d 100644
--- a/locales/pl.schema.json
+++ b/locales/pl.schema.json
@@ -1639,44 +1639,26 @@
         "variant_picker": {
           "name": "Selektor wariantów",
           "settings": {
-            "options": {
-              "header": "Warianty wyłącznie tekstowe",
-              "picker_type": {
-                "label": "Styl",
-                "options__1": {
-                  "label": "Lista rozwijana"
-                },
-                "options__2": {
-                  "label": "Okrągłe przełączniki"
-                }
+            "picker_type": {
+              "label": "Styl",
+              "options__1": {
+                "label": "Lista rozwijana"
+              },
+              "options__2": {
+                "label": "Okrągłe przełączniki"
               }
             },
-            "options_with_swatches": {
-              "header": "Warianty z próbkami",
+            "swatch_shape": {
+              "label": "Próbka",
               "info": "Dowiedz się, jak wyświetlać [próbki](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Styl",
-                "options__1": {
-                  "label": "Tylko próbka"
-                },
-                "options__2": {
-                  "label": "Lista rozwijana"
-                },
-                "options__3": {
-                  "label": "Lista rozwijana (bez próbki)"
-                },
-                "options__4": {
-                  "label": "Okrągły przełącznik (bez próbki)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Kształt próbki",
-                "options__1": {
-                  "label": "Koło"
-                },
-                "options__2": {
-                  "label": "Kwadrat"
-                }
+              "options__1": {
+                "label": "Koło"
+              },
+              "options__2": {
+                "label": "Kwadrat"
+              },
+              "options__3": {
+                "label": "Brak"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Selektor wariantów",
           "settings": {
-            "options": {
-              "header": "Warianty wyłącznie tekstowe",
-              "picker_type": {
-                "label": "Styl",
-                "options__1": {
-                  "label": "Lista rozwijana"
-                },
-                "options__2": {
-                  "label": "Okrągłe przełączniki"
-                }
+            "picker_type": {
+              "label": "Styl",
+              "options__1": {
+                "label": "Lista rozwijana"
+              },
+              "options__2": {
+                "label": "Okrągłe przełączniki"
               }
             },
-            "options_with_swatches": {
-              "header": "Warianty z próbkami",
+            "swatch_shape": {
+              "label": "Próbka",
               "info": "Dowiedz się, jak wyświetlać [próbki](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Styl",
-                "options__1": {
-                  "label": "Tylko próbka"
-                },
-                "options__2": {
-                  "label": "Lista rozwijana"
-                },
-                "options__3": {
-                  "label": "Lista rozwijana (bez próbki)"
-                },
-                "options__4": {
-                  "label": "Okrągły przełącznik (bez próbki)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Kształt próbki",
-                "options__1": {
-                  "label": "Koło"
-                },
-                "options__2": {
-                  "label": "Kwadrat"
-                }
+              "options__1": {
+                "label": "Koło"
+              },
+              "options__2": {
+                "label": "Kwadrat"
+              },
+              "options__3": {
+                "label": "Brak"
               }
             }
           }
diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json
index 65e5b78bbfa..11af56c5e79 100644
--- a/locales/pt-BR.schema.json
+++ b/locales/pt-BR.schema.json
@@ -1638,44 +1638,26 @@
         "variant_picker": {
           "name": "Seletor de variante",
           "settings": {
-            "options": {
-              "header": "Variantes só com texto",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Menu suspenso"
-                },
-                "options__2": {
-                  "label": "Pílulas"
-                }
+            "picker_type": {
+              "label": "Estilo",
+              "options__1": {
+                "label": "Menu suspenso"
+              },
+              "options__2": {
+                "label": "Pílulas"
               }
             },
-            "options_with_swatches": {
-              "header": "Variantes com amostras",
+            "swatch_shape": {
+              "label": "Amostra",
               "info": "Saiba como exibir [amostras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Apenas amostra"
-                },
-                "options__2": {
-                  "label": "Menu suspenso"
-                },
-                "options__3": {
-                  "label": "Menu suspenso (sem amostra)"
-                },
-                "options__4": {
-                  "label": "Pílulas (sem amostra)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Formato da amostra",
-                "options__1": {
-                  "label": "Círculo"
-                },
-                "options__2": {
-                  "label": "Quadrado"
-                }
+              "options__1": {
+                "label": "Círculo"
+              },
+              "options__2": {
+                "label": "Quadrado"
+              },
+              "options__3": {
+                "label": "Nenhuma"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Seletor de variante",
           "settings": {
-            "options": {
-              "header": "Variantes só com texto",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Menu suspenso"
-                },
-                "options__2": {
-                  "label": "Pílulas"
-                }
+            "picker_type": {
+              "label": "Estilo",
+              "options__1": {
+                "label": "Menu suspenso"
+              },
+              "options__2": {
+                "label": "Pílulas"
               }
             },
-            "options_with_swatches": {
-              "header": "Variantes com amostras",
+            "swatch_shape": {
+              "label": "Amostra",
               "info": "Saiba como exibir [amostras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Apenas amostra"
-                },
-                "options__2": {
-                  "label": "Menu suspenso"
-                },
-                "options__3": {
-                  "label": "Menu suspenso (sem amostra)"
-                },
-                "options__4": {
-                  "label": "Pílulas (sem amostra)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Formato da amostra",
-                "options__1": {
-                  "label": "Círculo"
-                },
-                "options__2": {
-                  "label": "Quadrado"
-                }
+              "options__1": {
+                "label": "Círculo"
+              },
+              "options__2": {
+                "label": "Quadrado"
+              },
+              "options__3": {
+                "label": "Nenhuma"
               }
             }
           }
diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json
index 942b3fc8265..762f5fd1cf3 100644
--- a/locales/pt-PT.schema.json
+++ b/locales/pt-PT.schema.json
@@ -1630,44 +1630,26 @@
         "variant_picker": {
           "name": "Seletor de variante",
           "settings": {
-            "options": {
-              "header": "Variantes só de texto",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Menu pendente"
-                },
-                "options__2": {
-                  "label": "Forma de comprimidos"
-                }
+            "picker_type": {
+              "label": "Estilo",
+              "options__1": {
+                "label": "Pendente"
+              },
+              "options__2": {
+                "label": "Comprimidos"
               }
             },
-            "options_with_swatches": {
-              "header": "Variantes com paletas",
+            "swatch_shape": {
+              "label": "Paleta",
               "info": "Saiba como exibir [paletas](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Apenas paleta"
-                },
-                "options__2": {
-                  "label": "Menu pendente"
-                },
-                "options__3": {
-                  "label": "Menu pendente (sem paleta)"
-                },
-                "options__4": {
-                  "label": "Forma de comprimidos (sem paleta)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Forma de paleta",
-                "options__1": {
-                  "label": "Círculo"
-                },
-                "options__2": {
-                  "label": "Quadrado"
-                }
+              "options__1": {
+                "label": "Círculo"
+              },
+              "options__2": {
+                "label": "Quadrado"
+              },
+              "options__3": {
+                "label": "Nenhum"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Seletor de variante",
           "settings": {
-            "options": {
-              "header": "Variantes só de texto",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Menu pendente"
-                },
-                "options__2": {
-                  "label": "Forma de comprimidos"
-                }
+            "picker_type": {
+              "label": "Estilo",
+              "options__1": {
+                "label": "Pendente"
+              },
+              "options__2": {
+                "label": "Forma de comprimidos"
               }
             },
-            "options_with_swatches": {
-              "header": "Variantes com paletas",
+            "swatch_shape": {
+              "label": "Paleta",
               "info": "Saiba como exibir [paletas](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Estilo",
-                "options__1": {
-                  "label": "Apenas paleta"
-                },
-                "options__2": {
-                  "label": "Menu pendente"
-                },
-                "options__3": {
-                  "label": "Menu pendente (sem paleta)"
-                },
-                "options__4": {
-                  "label": "Forma de comprimidos (sem paleta)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Forma de paleta",
-                "options__1": {
-                  "label": "Círculo"
-                },
-                "options__2": {
-                  "label": "Quadrado"
-                }
+              "options__1": {
+                "label": "Círculo"
+              },
+              "options__2": {
+                "label": "Quadrado"
+              },
+              "options__3": {
+                "label": "Nenhum"
               }
             }
           }
diff --git a/locales/sv.schema.json b/locales/sv.schema.json
index 7975128d9d7..f4bf2af050b 100644
--- a/locales/sv.schema.json
+++ b/locales/sv.schema.json
@@ -1630,44 +1630,26 @@
         "variant_picker": {
           "name": "Variantväljare",
           "settings": {
-            "options": {
-              "header": "Varianter med bara text",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Rullgardinsmeny"
-                },
-                "options__2": {
-                  "label": "Kapslar"
-                }
+            "picker_type": {
+              "label": "Stil",
+              "options__1": {
+                "label": "Rullgardinsmeny"
+              },
+              "options__2": {
+                "label": "Kapslar"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianter med prover",
+            "swatch_shape": {
+              "label": "Prov",
               "info": "Läs om hur du visar [prover](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Bara prov"
-                },
-                "options__2": {
-                  "label": "Rullgardinsmeny"
-                },
-                "options__3": {
-                  "label": "Rullgardinsmeny (inget prov)"
-                },
-                "options__4": {
-                  "label": "Kapslar (inget prov)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Provform",
-                "options__1": {
-                  "label": "Cirkel"
-                },
-                "options__2": {
-                  "label": "Fyrkantig"
-                }
+              "options__1": {
+                "label": "Cirkel"
+              },
+              "options__2": {
+                "label": "Fyrkantig"
+              },
+              "options__3": {
+                "label": "Ingen"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Variantväljare",
           "settings": {
-            "options": {
-              "header": "Varianter med bara text",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Rullgardinsmeny"
-                },
-                "options__2": {
-                  "label": "Kapslar"
-                }
+            "picker_type": {
+              "label": "Stil",
+              "options__1": {
+                "label": "Rullgardinsmeny"
+              },
+              "options__2": {
+                "label": "Kapslar"
               }
             },
-            "options_with_swatches": {
-              "header": "Varianter med prover",
+            "swatch_shape": {
+              "label": "Prov",
               "info": "Läs om hur du visar [prover](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Bara prov"
-                },
-                "options__2": {
-                  "label": "Rullgardinsmeny"
-                },
-                "options__3": {
-                  "label": "Rullgardinsmeny (inget prov)"
-                },
-                "options__4": {
-                  "label": "Kapslar (inget prov)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Provform",
-                "options__1": {
-                  "label": "Cirkel"
-                },
-                "options__2": {
-                  "label": "Fyrkantig"
-                }
+              "options__1": {
+                "label": "Cirkel"
+              },
+              "options__2": {
+                "label": "Fyrkantig"
+              },
+              "options__3": {
+                "label": "Ingen"
               }
             }
           }
diff --git a/locales/th.schema.json b/locales/th.schema.json
index a7b000f3204..346f177f050 100644
--- a/locales/th.schema.json
+++ b/locales/th.schema.json
@@ -1630,44 +1630,26 @@
         "variant_picker": {
           "name": "รายการตัวเลือกสินค้า",
           "settings": {
-            "options": {
-              "header": "ตัวเลือกสินค้าแบบข้อความเท่านั้น",
-              "picker_type": {
-                "label": "รูปแบบ",
-                "options__1": {
-                  "label": "ดรอปดาวน์"
-                },
-                "options__2": {
-                  "label": "ทรงเม็ดยา"
-                }
+            "picker_type": {
+              "label": "รูปแบบ",
+              "options__1": {
+                "label": "ดรอปดาวน์"
+              },
+              "options__2": {
+                "label": "ทรงเม็ดยา"
               }
             },
-            "options_with_swatches": {
-              "header": "ตัวเลือกสินค้าพร้อมตัวอย่าง",
+            "swatch_shape": {
+              "label": "ตัวอย่าง",
               "info": "เรียนรู้เกี่ยวกับวิธีการแสดง [ตัวอย่าง](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "รูปแบบ",
-                "options__1": {
-                  "label": "ตัวอย่างเท่านั้น"
-                },
-                "options__2": {
-                  "label": "ดรอปดาวน์"
-                },
-                "options__3": {
-                  "label": "ดรอปดาวน์ (ไม่มีตัวอย่าง)"
-                },
-                "options__4": {
-                  "label": "ทรงเม็ดยา (ไม่มีตัวอย่าง)"
-                }
-              },
-              "swatch_shape": {
-                "label": "รูปทรงตัวอย่าง",
-                "options__1": {
-                  "label": "วงกลม"
-                },
-                "options__2": {
-                  "label": "สี่เหลี่ยมจัตุรัส"
-                }
+              "options__1": {
+                "label": "วงกลม"
+              },
+              "options__2": {
+                "label": "สี่เหลี่ยมจัตุรัส"
+              },
+              "options__3": {
+                "label": "ไม่มี"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "รายการตัวเลือกสินค้า",
           "settings": {
-            "options": {
-              "header": "ตัวเลือกสินค้าแบบข้อความเท่านั้น",
-              "picker_type": {
-                "label": "รูปแบบ",
-                "options__1": {
-                  "label": "ดรอปดาวน์"
-                },
-                "options__2": {
-                  "label": "ทรงเม็ดยา"
-                }
+            "picker_type": {
+              "label": "รูปแบบ",
+              "options__1": {
+                "label": "ดรอปดาวน์"
+              },
+              "options__2": {
+                "label": "ทรงเม็ดยา"
               }
             },
-            "options_with_swatches": {
-              "header": "ตัวเลือกสินค้าพร้อมตัวอย่าง",
+            "swatch_shape": {
+              "label": "ตัวอย่าง",
               "info": "เรียนรู้เกี่ยวกับวิธีการแสดง [ตัวอย่าง](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "รูปแบบ",
-                "options__1": {
-                  "label": "ตัวอย่างเท่านั้น"
-                },
-                "options__2": {
-                  "label": "ดรอปดาวน์"
-                },
-                "options__3": {
-                  "label": "ดรอปดาวน์ (ไม่มีตัวอย่าง)"
-                },
-                "options__4": {
-                  "label": "ทรงเม็ดยา (ไม่มีตัวอย่าง)"
-                }
-              },
-              "swatch_shape": {
-                "label": "รูปทรงตัวอย่าง",
-                "options__1": {
-                  "label": "วงกลม"
-                },
-                "options__2": {
-                  "label": "สี่เหลี่ยมจัตุรัส"
-                }
+              "options__1": {
+                "label": "วงกลม"
+              },
+              "options__2": {
+                "label": "สี่เหลี่ยมจัตุรัส"
+              },
+              "options__3": {
+                "label": "ไม่มี"
               }
             }
           }
diff --git a/locales/tr.schema.json b/locales/tr.schema.json
index caf7c5afc05..aeeb1fe0b04 100644
--- a/locales/tr.schema.json
+++ b/locales/tr.schema.json
@@ -1638,44 +1638,26 @@
         "variant_picker": {
           "name": "Varyasyon seçici",
           "settings": {
-            "options": {
-              "header": "Yalnızca metne sahip varyasyonlar",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Açılır menü"
-                },
-                "options__2": {
-                  "label": "Seçenek kutuları"
-                }
+            "picker_type": {
+              "label": "Stil",
+              "options__1": {
+                "label": "Açılır liste"
+              },
+              "options__2": {
+                "label": "Seçenekler"
               }
             },
-            "options_with_swatches": {
-              "header": "Numune parçaları olan varyasyonlar",
+            "swatch_shape": {
+              "label": "Numune parça",
               "info": "[Numune parçalarını](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nasıl görüntüleyeceğinizi öğrenin",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Yalnızca numune parça"
-                },
-                "options__2": {
-                  "label": "Açılır menü"
-                },
-                "options__3": {
-                  "label": "Açılır menü (numune parça yok)"
-                },
-                "options__4": {
-                  "label": "Seçenekler (numune parça yok)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Numune parça şekli",
-                "options__1": {
-                  "label": "Yuvarlak"
-                },
-                "options__2": {
-                  "label": "Kare"
-                }
+              "options__1": {
+                "label": "Yuvarlak"
+              },
+              "options__2": {
+                "label": "Kare"
+              },
+              "options__3": {
+                "label": "Yok"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Varyasyon seçici",
           "settings": {
-            "options": {
-              "header": "Yalnızca metne sahip varyasyonlar",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Açılır menü"
-                },
-                "options__2": {
-                  "label": "Seçenek kutuları"
-                }
+            "picker_type": {
+              "label": "Stil",
+              "options__1": {
+                "label": "Açılır menü"
+              },
+              "options__2": {
+                "label": "Seçenekler"
               }
             },
-            "options_with_swatches": {
-              "header": "Numune parçaları olan varyasyonlar",
+            "swatch_shape": {
+              "label": "Numune parça",
               "info": "[Numune parçalarını](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nasıl görüntüleyeceğinizi öğrenin",
-              "picker_type": {
-                "label": "Stil",
-                "options__1": {
-                  "label": "Yalnızca numune parça"
-                },
-                "options__2": {
-                  "label": "Açılır menü"
-                },
-                "options__3": {
-                  "label": "Açılır menü (numune parça yok)"
-                },
-                "options__4": {
-                  "label": "Seçenekler (numune parça yok)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Numune parça şekli",
-                "options__1": {
-                  "label": "Yuvarlak"
-                },
-                "options__2": {
-                  "label": "Kare"
-                }
+              "options__1": {
+                "label": "Yuvarlak"
+              },
+              "options__2": {
+                "label": "Kare"
+              },
+              "options__3": {
+                "label": "Yok"
               }
             }
           }
diff --git a/locales/vi.schema.json b/locales/vi.schema.json
index 7679b29ab0a..cf831256b82 100644
--- a/locales/vi.schema.json
+++ b/locales/vi.schema.json
@@ -1639,44 +1639,26 @@
         "variant_picker": {
           "name": "Trình chọn mẫu mã",
           "settings": {
-            "options": {
-              "header": "Mẫu mã chỉ gồm văn bản",
-              "picker_type": {
-                "label": "Kiểu",
-                "options__1": {
-                  "label": "Menu thả xuống"
-                },
-                "options__2": {
-                  "label": "Ô chọn"
-                }
+            "picker_type": {
+              "label": "Kiểu",
+              "options__1": {
+                "label": "Menu thả xuống"
+              },
+              "options__2": {
+                "label": "Góc bo tròn"
               }
             },
-            "options_with_swatches": {
-              "header": "Mẫu mã có mẫu",
+            "swatch_shape": {
+              "label": "Mẫu",
               "info": "Tìm hiểu cách hiển thị [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Kiểu",
-                "options__1": {
-                  "label": "Chỉ mẫu"
-                },
-                "options__2": {
-                  "label": "Menu thả xuống"
-                },
-                "options__3": {
-                  "label": "Menu thả xuống (không có mẫu)"
-                },
-                "options__4": {
-                  "label": "Ô chọn (không có mẫu)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Hình dạng mẫu",
-                "options__1": {
-                  "label": "Tròn"
-                },
-                "options__2": {
-                  "label": "Vuông"
-                }
+              "options__1": {
+                "label": "Tròn"
+              },
+              "options__2": {
+                "label": "Vuông"
+              },
+              "options__3": {
+                "label": "Không"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "Trình chọn mẫu mã",
           "settings": {
-            "options": {
-              "header": "Mẫu mã chỉ gồm văn bản",
-              "picker_type": {
-                "label": "Kiểu",
-                "options__1": {
-                  "label": "Menu thả xuống"
-                },
-                "options__2": {
-                  "label": "Ô chọn"
-                }
+            "picker_type": {
+              "label": "Kiểu",
+              "options__1": {
+                "label": "Menu thả xuống"
+              },
+              "options__2": {
+                "label": "Ô chọn"
               }
             },
-            "options_with_swatches": {
-              "header": "Mẫu mã có mẫu",
+            "swatch_shape": {
+              "label": "Mẫu",
               "info": "Tìm hiểu cách hiển thị [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "Kiểu",
-                "options__1": {
-                  "label": "Chỉ mẫu"
-                },
-                "options__2": {
-                  "label": "Menu thả xuống"
-                },
-                "options__3": {
-                  "label": "Menu thả xuống (không có mẫu)"
-                },
-                "options__4": {
-                  "label": "Ô chọn (không có mẫu)"
-                }
-              },
-              "swatch_shape": {
-                "label": "Hình dạng mẫu",
-                "options__1": {
-                  "label": "Tròn"
-                },
-                "options__2": {
-                  "label": "Vuông"
-                }
+              "options__1": {
+                "label": "Tròn"
+              },
+              "options__2": {
+                "label": "Vuông"
+              },
+              "options__3": {
+                "label": "Không"
               }
             }
           }
diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json
index 299bb50999e..f12eefe5c27 100644
--- a/locales/zh-CN.schema.json
+++ b/locales/zh-CN.schema.json
@@ -1630,44 +1630,26 @@
         "variant_picker": {
           "name": "多属性选择器",
           "settings": {
-            "options": {
-              "header": "仅含文本的多属性",
-              "picker_type": {
-                "label": "样式",
-                "options__1": {
-                  "label": "下拉菜单"
-                },
-                "options__2": {
-                  "label": "椭圆形框"
-                }
+            "picker_type": {
+              "label": "样式",
+              "options__1": {
+                "label": "下拉菜单"
+              },
+              "options__2": {
+                "label": "椭圆形框"
               }
             },
-            "options_with_swatches": {
-              "header": "带样本的多属性",
+            "swatch_shape": {
+              "label": "样本",
               "info": "了解如何显示 [样本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "样式",
-                "options__1": {
-                  "label": "仅样本"
-                },
-                "options__2": {
-                  "label": "下拉菜单"
-                },
-                "options__3": {
-                  "label": "下拉菜单（无样本）"
-                },
-                "options__4": {
-                  "label": "椭圆形框（无样本）"
-                }
-              },
-              "swatch_shape": {
-                "label": "样本形状",
-                "options__1": {
-                  "label": "圆形"
-                },
-                "options__2": {
-                  "label": "方形"
-                }
+              "options__1": {
+                "label": "圆形"
+              },
+              "options__2": {
+                "label": "方形"
+              },
+              "options__3": {
+                "label": "无"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "多属性选择器",
           "settings": {
-            "options": {
-              "header": "仅含文本的多属性",
-              "picker_type": {
-                "label": "样式",
-                "options__1": {
-                  "label": "下拉菜单"
-                },
-                "options__2": {
-                  "label": "椭圆形框"
-                }
+            "picker_type": {
+              "label": "样式",
+              "options__1": {
+                "label": "下拉菜单"
+              },
+              "options__2": {
+                "label": "椭圆形框"
               }
             },
-            "options_with_swatches": {
-              "header": "带样本的多属性",
+            "swatch_shape": {
+              "label": "样本",
               "info": "了解如何显示 [样本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "样式",
-                "options__1": {
-                  "label": "仅样本"
-                },
-                "options__2": {
-                  "label": "下拉菜单"
-                },
-                "options__3": {
-                  "label": "下拉菜单（无样本）"
-                },
-                "options__4": {
-                  "label": "椭圆形框（无样本）"
-                }
-              },
-              "swatch_shape": {
-                "label": "样本形状",
-                "options__1": {
-                  "label": "圆形"
-                },
-                "options__2": {
-                  "label": "方形"
-                }
+              "options__1": {
+                "label": "圆形"
+              },
+              "options__2": {
+                "label": "方形"
+              },
+              "options__3": {
+                "label": "无"
               }
             }
           }
diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json
index 5e090f06128..8f2e2bc6f71 100644
--- a/locales/zh-TW.schema.json
+++ b/locales/zh-TW.schema.json
@@ -1630,44 +1630,26 @@
         "variant_picker": {
           "name": "子類選擇器",
           "settings": {
-            "options": {
-              "header": "純文字子類",
-              "picker_type": {
-                "label": "樣式",
-                "options__1": {
-                  "label": "下拉式選單"
-                },
-                "options__2": {
-                  "label": "圓角按鈕"
-                }
+            "picker_type": {
+              "label": "樣式",
+              "options__1": {
+                "label": "下拉式選單"
+              },
+              "options__2": {
+                "label": "圓角"
               }
             },
-            "options_with_swatches": {
-              "header": "子類搭配色樣",
+            "swatch_shape": {
+              "label": "色樣",
               "info": "瞭解如何顯示 [色樣](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "樣式",
-                "options__1": {
-                  "label": "僅色樣"
-                },
-                "options__2": {
-                  "label": "下拉式選單"
-                },
-                "options__3": {
-                  "label": "下拉式選單 (無色樣)"
-                },
-                "options__4": {
-                  "label": "圓角按鈕 (無色樣)"
-                }
-              },
-              "swatch_shape": {
-                "label": "色樣形狀",
-                "options__1": {
-                  "label": "圓形"
-                },
-                "options__2": {
-                  "label": "正方形"
-                }
+              "options__1": {
+                "label": "圓形"
+              },
+              "options__2": {
+                "label": "正方形"
+              },
+              "options__3": {
+                "label": "無"
               }
             }
           }
@@ -2512,44 +2494,26 @@
         "variant_picker": {
           "name": "子類選擇器",
           "settings": {
-            "options": {
-              "header": "純文字子類",
-              "picker_type": {
-                "label": "樣式",
-                "options__1": {
-                  "label": "下拉式選單"
-                },
-                "options__2": {
-                  "label": "圓角按鈕"
-                }
+            "picker_type": {
+              "label": "樣式",
+              "options__1": {
+                "label": "下拉式選單"
+              },
+              "options__2": {
+                "label": "圓角"
               }
             },
-            "options_with_swatches": {
-              "header": "子類搭配色樣",
+            "swatch_shape": {
+              "label": "色樣",
               "info": "瞭解如何顯示 [色樣](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
-              "picker_type": {
-                "label": "樣式",
-                "options__1": {
-                  "label": "僅色樣"
-                },
-                "options__2": {
-                  "label": "下拉式選單"
-                },
-                "options__3": {
-                  "label": "下拉式選單 (無色樣)"
-                },
-                "options__4": {
-                  "label": "圓角按鈕 (無色樣)"
-                }
-              },
-              "swatch_shape": {
-                "label": "色樣形狀",
-                "options__1": {
-                  "label": "圓形"
-                },
-                "options__2": {
-                  "label": "正方形"
-                }
+              "options__1": {
+                "label": "圓形"
+              },
+              "options__2": {
+                "label": "正方形"
+              },
+              "options__3": {
+                "label": "無"
               }
             }
           }
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 511841e5504..94e122224fb 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -807,67 +807,39 @@
       "name": "t:sections.featured-product.blocks.variant_picker.name",
       "limit": 1,
       "settings": [
-        {
-          "type": "header",
-          "content": "t:sections.featured-product.blocks.variant_picker.settings.options.header"
-        },
         {
           "type": "select",
           "id": "picker_type",
           "options": [
             {
               "value": "dropdown",
-              "label": "t:sections.featured-product.blocks.variant_picker.settings.options.picker_type.options__1.label"
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.options__1.label"
             },
             {
               "value": "button",
-              "label": "t:sections.featured-product.blocks.variant_picker.settings.options.picker_type.options__2.label"
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.options__2.label"
             }
           ],
           "default": "button",
-          "label": "t:sections.featured-product.blocks.variant_picker.settings.options.picker_type.label"
-        },
-        {
-          "type": "header",
-          "content": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.header",
-          "info": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.info"
-        },
-        {
-          "id": "swatch_picker_type",
-          "type": "select",
-          "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.picker_type.label",
-          "options": [
-            {
-              "value": "swatch",
-              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__1.label"
-            },
-            {
-              "value": "swatch_dropdown",
-              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__2.label"
-            },
-            {
-              "value": "dropdown",
-              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__3.label"
-            },
-            {
-              "value": "button",
-              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__4.label"
-            }
-          ],
-          "default": "swatch"
+          "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.label"
         },
         {
           "id": "swatch_shape",
-          "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.label",
+          "label": "t:sections.featured-product.blocks.variant_picker.settings.swatch_shape.label",
           "type": "select",
+          "info": "t:sections.main-product.blocks.variant_picker.settings.swatch_shape.info",
           "options": [
             {
               "value": "circle",
-              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.options__1.label"
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.swatch_shape.options__1.label"
             },
             {
               "value": "square",
-              "label": "t:sections.featured-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.options__2.label"
+              "label": "t:sections.featured-product.blocks.variant_picker.settings.swatch_shape.options__2.label"
+            },
+            {
+              "value": "none",
+              "label": "t:sections.main-product.blocks.variant_picker.settings.swatch_shape.options__3.label"
             }
           ],
           "default": "circle"
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 2715caabcd7..be03b3103aa 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -804,67 +804,39 @@
       "name": "t:sections.main-product.blocks.variant_picker.name",
       "limit": 1,
       "settings": [
-        {
-          "type": "header",
-          "content": "t:sections.main-product.blocks.variant_picker.settings.options.header"
-        },
         {
           "type": "select",
           "id": "picker_type",
           "options": [
             {
               "value": "dropdown",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.options.picker_type.options__1.label"
+              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label"
             },
             {
               "value": "button",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.options.picker_type.options__2.label"
+              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label"
             }
           ],
           "default": "button",
-          "label": "t:sections.main-product.blocks.variant_picker.settings.options.picker_type.label"
-        },
-        {
-          "type": "header",
-          "content": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.header",
-          "info": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.info"
-        },
-        {
-          "id": "swatch_picker_type",
-          "type": "select",
-          "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.picker_type.label",
-          "options": [
-            {
-              "value": "swatch",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__1.label"
-            },
-            {
-              "value": "swatch_dropdown",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__2.label"
-            },
-            {
-              "value": "dropdown",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__3.label"
-            },
-            {
-              "value": "button",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.picker_type.options__4.label"
-            }
-          ],
-          "default": "swatch"
+          "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
         },
         {
           "id": "swatch_shape",
-          "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.label",
+          "label": "t:sections.main-product.blocks.variant_picker.settings.swatch_shape.label",
           "type": "select",
+          "info": "t:sections.main-product.blocks.variant_picker.settings.swatch_shape.info",
           "options": [
             {
               "value": "circle",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.options__1.label"
+              "label": "t:sections.main-product.blocks.variant_picker.settings.swatch_shape.options__1.label"
             },
             {
               "value": "square",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.options_with_swatches.swatch_shape.options__2.label"
+              "label": "t:sections.main-product.blocks.variant_picker.settings.swatch_shape.options__2.label"
+            },
+            {
+              "value": "none",
+              "label": "t:sections.main-product.blocks.variant_picker.settings.swatch_shape.options__3.label"
             }
           ],
           "default": "circle"
diff --git a/snippets/product-variant-picker.liquid b/snippets/product-variant-picker.liquid
index bd460e4d577..c840d428ae2 100644
--- a/snippets/product-variant-picker.liquid
+++ b/snippets/product-variant-picker.liquid
@@ -25,8 +25,12 @@
         assign swatch_count = option.values | map: 'swatch' | compact | size
         assign picker_type = block.settings.picker_type
 
-        if swatch_count > 0
-          assign picker_type = block.settings.swatch_picker_type
+        if swatch_count > 0 and block.settings.swatch_shape != 'none'
+          if block.settings.picker_type == 'dropdown'
+            assign picker_type = 'swatch_dropdown'
+          else
+            assign picker_type = 'swatch'
+          endif
         endif
       -%}
       {%- if picker_type == 'swatch' -%}

From b700fc970ac5a7499c967995b4c20c7c0716a8af Mon Sep 17 00:00:00 2001
From: Ludo <ludo.segura@shopify.com>
Date: Mon, 15 Jan 2024 15:17:54 -0400
Subject: [PATCH 53/58] Escape filter label consistently (#3192)

---
 snippets/facets.liquid | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/snippets/facets.liquid b/snippets/facets.liquid
index 8a5269d4c82..88ad351eecb 100644
--- a/snippets/facets.liquid
+++ b/snippets/facets.liquid
@@ -75,7 +75,7 @@
                     <facet-remove>
                       <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                         <span class="active-facets__button-inner button button--tertiary">
-                          {{ filter.label }}: {{ value.label | escape }}
+                          {{ filter.label | escape }}: {{ value.label | escape }}
                           {% render 'icon-close-small' %}
                           <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                         </span>
@@ -138,7 +138,7 @@
                   >
                     <summary
                       class="facets__summary caption-large focus-offset"
-                      aria-label="{{ filter.label }} ({{ 'products.facets.filters_selected.one' | t: count: filter.active_values.size }})"
+                      aria-label="{{ filter.label | escape }} ({{ 'products.facets.filters_selected.one' | t: count: filter.active_values.size }})"
                     >
                       <div>
                         <span class="facets__summary-label">
@@ -470,7 +470,7 @@
                   <facet-remove>
                     <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                       <span class="active-facets__button-inner button button--tertiary">
-                        {{ filter.label }}: {{ value.label | escape }}
+                        {{ filter.label | escape }}: {{ value.label | escape }}
                         {% render 'icon-close-small' %}
                         <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                       </span>
@@ -1033,7 +1033,7 @@
         <facet-remove>
           <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
             <span class="active-facets__button-inner button button--tertiary">
-              {{ filter.label }}: {{ value.label | escape }}
+              {{ filter.label | escape }}: {{ value.label | escape }}
               {% render 'icon-close-small' %}
               <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
             </span>
@@ -1150,7 +1150,7 @@
               <facet-remove>
                 <a href="{{ value.url_to_remove }}" class="active-facets__button active-facets__button--light">
                   <span class="active-facets__button-inner button button--tertiary">
-                    {{ filter.label }}: {{ value.label | escape }}
+                    {{ filter.label | escape }}: {{ value.label | escape }}
                     {% render 'icon-close-small' %}
                     <span class="visually-hidden">{{ 'products.facets.clear_filter' | t }}</span>
                   </span>

From 436e1045db73d1dec121dc4f1151984fab516c86 Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Wed, 24 Jan 2024 10:17:33 -0400
Subject: [PATCH 54/58] Update 1 translation file (#3202)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/de.schema.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/de.schema.json b/locales/de.schema.json
index 15b8ff7ed61..153d125aa55 100644
--- a/locales/de.schema.json
+++ b/locales/de.schema.json
@@ -264,7 +264,7 @@
         "cart_drawer": {
           "header": "Warenkorbeinschub",
           "collection": {
-            "label": "Kategorie",
+            "label": "Kollektion",
             "info": "Sichtbar, wenn der Warenkorbeinschub leer ist."
           }
         }

From c77ebf5e86756831e1bc85cc24881ea8ae9eca98 Mon Sep 17 00:00:00 2001
From: Ludo <ludo.segura@shopify.com>
Date: Wed, 31 Jan 2024 14:15:25 -0400
Subject: [PATCH 55/58] Pull update from release branch and update version
 number and release notes (#3229)

* Fix translation path (#3198)

* Change product variant swatches' border color (#3204)

* change color reference

* remove character

* increase to meet contrast ratio of 3

* Update swatch setting info text (#3205)

* Update info text

* remove duplication

* add space

* clean up language and association

* add to second place

* Update 9 translation files

* Update 4 translation files

* Update 6 translation files

* Update 1 translation file

---------

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

* [Quick order list] Change 'plural' string to 'singular' when removing '1 item' on 'Remove all' confirmation (#3203)

* Change the message when removing only one item from the QOL

* Update 20 translation files

* Update 6 translation files

* Update 4 translation files

---------

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

* Update 1 translation file (#3202)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

* update version number and release notes

---------

Co-authored-by: melissaperreault <melissa.perreault@shopify.com>
Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
---
 assets/component-swatch.css      |  2 +-
 config/settings_schema.json      |  2 +-
 locales/bg-BG.json               |  3 ++-
 locales/cs.json                  |  3 ++-
 locales/cs.schema.json           |  4 ++--
 locales/da.json                  |  3 ++-
 locales/da.schema.json           |  4 ++--
 locales/de.json                  |  3 ++-
 locales/de.schema.json           |  4 ++--
 locales/el.json                  |  3 ++-
 locales/en.default.json          |  1 +
 locales/en.default.schema.json   |  4 ++--
 locales/es.json                  |  3 ++-
 locales/es.schema.json           |  4 ++--
 locales/fi.json                  |  3 ++-
 locales/fi.schema.json           |  4 ++--
 locales/fr.json                  |  3 ++-
 locales/fr.schema.json           |  4 ++--
 locales/hr-HR.json               |  3 ++-
 locales/hu.json                  |  3 ++-
 locales/id.json                  |  3 ++-
 locales/it.json                  |  3 ++-
 locales/it.schema.json           |  4 ++--
 locales/ja.json                  |  3 ++-
 locales/ja.schema.json           |  4 ++--
 locales/ko.json                  |  3 ++-
 locales/ko.schema.json           |  4 ++--
 locales/lt-LT.json               |  3 ++-
 locales/nb.json                  |  3 ++-
 locales/nb.schema.json           |  4 ++--
 locales/nl.json                  |  3 ++-
 locales/nl.schema.json           |  4 ++--
 locales/pl.json                  |  3 ++-
 locales/pl.schema.json           |  4 ++--
 locales/pt-BR.json               |  3 ++-
 locales/pt-BR.schema.json        |  4 ++--
 locales/pt-PT.json               |  3 ++-
 locales/pt-PT.schema.json        |  4 ++--
 locales/ro-RO.json               |  3 ++-
 locales/ru.json                  |  3 ++-
 locales/sk-SK.json               |  3 ++-
 locales/sl-SI.json               |  3 ++-
 locales/sv.json                  |  3 ++-
 locales/sv.schema.json           |  4 ++--
 locales/th.json                  |  3 ++-
 locales/th.schema.json           |  4 ++--
 locales/tr.json                  |  3 ++-
 locales/tr.schema.json           |  4 ++--
 locales/vi.json                  |  3 ++-
 locales/vi.schema.json           |  4 ++--
 locales/zh-CN.json               |  3 ++-
 locales/zh-CN.schema.json        |  4 ++--
 locales/zh-TW.json               |  3 ++-
 locales/zh-TW.schema.json        |  4 ++--
 release-notes.md                 | 32 ++++++++++++--------------------
 sections/featured-product.liquid |  2 +-
 sections/quick-order-list.liquid |  6 +++++-
 sections/related-products.liquid |  2 +-
 58 files changed, 124 insertions(+), 97 deletions(-)

diff --git a/assets/component-swatch.css b/assets/component-swatch.css
index 7e6d9377527..75d91b50f0e 100644
--- a/assets/component-swatch.css
+++ b/assets/component-swatch.css
@@ -9,7 +9,7 @@
   background: var(--swatch--background);
   background-size: cover;
   background-origin: border-box;
-  border: 0.1rem solid rgba(var(--color-background-contrast), 0.5);
+  border: 0.1rem solid rgba(var(--color-foreground), 0.45);
   border-radius: var(--swatch--border-radius);
 }
 
diff --git a/config/settings_schema.json b/config/settings_schema.json
index 4b30279b1ab..b06a9fc7047 100644
--- a/config/settings_schema.json
+++ b/config/settings_schema.json
@@ -2,7 +2,7 @@
   {
     "name": "theme_info",
     "theme_name": "Dawn",
-    "theme_version": "12.0.0",
+    "theme_version": "13.0.0",
     "theme_author": "Shopify",
     "theme_documentation_url": "https://help.shopify.com/manual/online-store/themes",
     "theme_support_url": "https://support.shopify.com/"
diff --git a/locales/bg-BG.json b/locales/bg-BG.json
index 55c1b754a1b..52e3f400046 100644
--- a/locales/bg-BG.json
+++ b/locales/bg-BG.json
@@ -358,7 +358,8 @@
       "total_items": "Общо артикули",
       "remove_all_items_confirmation": "Премахване на всички {{ quantity }} артикула от количката?",
       "remove_all": "Премахване на всички",
-      "cancel": "Отказ"
+      "cancel": "Отказ",
+      "remove_all_single_item_confirmation": "Премахване на 1 артикул от количката?"
     }
   },
   "localization": {
diff --git a/locales/cs.json b/locales/cs.json
index 4c646f2d05e..65dbbef6638 100644
--- a/locales/cs.json
+++ b/locales/cs.json
@@ -382,7 +382,8 @@
       "total_items": "Celkový počet položek",
       "remove_all_items_confirmation": "Chcete z košíku odebrat všechny položky ({{ quantity }})?",
       "remove_all": "Odebrat vše",
-      "cancel": "Zrušit"
+      "cancel": "Zrušit",
+      "remove_all_single_item_confirmation": "Chcete odebrat 1 položku z košíku?"
     }
   },
   "localization": {
diff --git a/locales/cs.schema.json b/locales/cs.schema.json
index 98b850f782b..cfebc445590 100644
--- a/locales/cs.schema.json
+++ b/locales/cs.schema.json
@@ -1650,7 +1650,7 @@
             },
             "swatch_shape": {
               "label": "Vzorník",
-              "info": "Zjistit, jak zobrazit [vzorníky](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Zapněte [vzorníky](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) u možností produktů.",
               "options__1": {
                 "label": "Kruh"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Vzorník",
-              "info": "Zjistit, jak zobrazit [vzorníky](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Zapněte [vzorníky](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) u možností produktů.",
               "options__1": {
                 "label": "Kruh"
               },
diff --git a/locales/da.json b/locales/da.json
index 2cca53dd5f2..2d2ab019b3b 100644
--- a/locales/da.json
+++ b/locales/da.json
@@ -358,7 +358,8 @@
       "total_items": "Varer i alt",
       "remove_all_items_confirmation": "Vil du fjerne alle {{ quantity }} varer fra din indkøbskurv?",
       "remove_all": "Fjern alle",
-      "cancel": "Annuller"
+      "cancel": "Annuller",
+      "remove_all_single_item_confirmation": "Vil du fjerne 1 vare fra din indkøbskurv?"
     }
   },
   "localization": {
diff --git a/locales/da.schema.json b/locales/da.schema.json
index 690b1b22cc9..b199756246f 100644
--- a/locales/da.schema.json
+++ b/locales/da.schema.json
@@ -1650,7 +1650,7 @@
             },
             "swatch_shape": {
               "label": "Prøve",
-              "info": "Se, hvordan du viser [prøver](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Aktivér [prøver](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) for produktmuligheder.",
               "options__1": {
                 "label": "Cirkel"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Prøve",
-              "info": "Se, hvordan du viser [prøver](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Aktivér [prøver](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) for produktmuligheder.",
               "options__1": {
                 "label": "Cirkel"
               },
diff --git a/locales/de.json b/locales/de.json
index e731a520137..bdef57efc8b 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -358,7 +358,8 @@
       "total_items": "Artikel gesamt",
       "remove_all_items_confirmation": "Alle {{ quantity }} Artikel aus deinem Warenkorb entfernen?",
       "remove_all": "Alle entfernen",
-      "cancel": "Abbrechen"
+      "cancel": "Abbrechen",
+      "remove_all_single_item_confirmation": "1 Artikel aus dem Warenkorb entfernen?"
     }
   },
   "localization": {
diff --git a/locales/de.schema.json b/locales/de.schema.json
index 153d125aa55..e6943b81602 100644
--- a/locales/de.schema.json
+++ b/locales/de.schema.json
@@ -1649,7 +1649,7 @@
             },
             "swatch_shape": {
               "label": "Farbfeld",
-              "info": "Erfahre mehr zum Anzeigen von [Farbfeldern](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Aktiviere [Farbfelder](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) für Produktoptionen.",
               "options__1": {
                 "label": "Kreis"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Farbfeld",
-              "info": "Erfahre mehr zum Anzeigen von [Farbfeldern](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Aktiviere [Farbfelder](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) für Produktoptionen.",
               "options__1": {
                 "label": "Kreis"
               },
diff --git a/locales/el.json b/locales/el.json
index 6c3fa43cbe8..a2804fdfad9 100644
--- a/locales/el.json
+++ b/locales/el.json
@@ -358,7 +358,8 @@
       "total_items": "Σύνολο προϊόντων",
       "remove_all_items_confirmation": "Να καταργηθούν και τα {{ quantity }} προϊόντα από το καλάθι σας;",
       "remove_all": "Κατάργηση όλων",
-      "cancel": "Ακύρωση"
+      "cancel": "Ακύρωση",
+      "remove_all_single_item_confirmation": "Να καταργηθεί 1 προϊόν από το καλάθι σας;"
     }
   },
   "localization": {
diff --git a/locales/en.default.json b/locales/en.default.json
index 06fe88bd86f..97cfd212ba2 100644
--- a/locales/en.default.json
+++ b/locales/en.default.json
@@ -357,6 +357,7 @@
       },
       "product_variants": "Product variants",
       "total_items": "Total items",
+      "remove_all_single_item_confirmation": "Remove 1 item from your cart?",
       "remove_all_items_confirmation": "Remove all {{ quantity }} items from your cart?",
       "remove_all": "Remove all",
       "cancel": "Cancel"
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index cfb28a1a44d..93b5ba28958 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -861,7 +861,7 @@
             },
             "swatch_shape": {
               "label": "Swatch",
-              "info": "Learn how to display [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Enable [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) on product options.",
               "options__1": {
                 "label": "Circle"
               },
@@ -1996,7 +1996,7 @@
             },
             "swatch_shape": {
               "label": "Swatch",
-              "info": "Learn how to display [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Enable [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) on product options.",
               "options__1": {
                 "label": "Circle"
               },
diff --git a/locales/es.json b/locales/es.json
index ed2fc5d0d13..603b85f9003 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -370,7 +370,8 @@
       "total_items": "Total de artículos",
       "remove_all_items_confirmation": "¿Eliminar los {{ quantity }} artículos del carrito?",
       "remove_all": "Eliminar todos",
-      "cancel": "Cancelar"
+      "cancel": "Cancelar",
+      "remove_all_single_item_confirmation": "¿Eliminar 1 artículo de tu carrito?"
     }
   },
   "localization": {
diff --git a/locales/es.schema.json b/locales/es.schema.json
index 1788debd3ea..cf478d33f1c 100644
--- a/locales/es.schema.json
+++ b/locales/es.schema.json
@@ -1650,7 +1650,7 @@
             },
             "swatch_shape": {
               "label": "Muestra",
-              "info": "Obtén información sobre cómo presentar [muestras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Habilita [muestras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) en las opciones de producto.",
               "options__1": {
                 "label": "Círculo"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Muestra",
-              "info": "Obtén información sobre cómo presentar [muestras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Habilita [muestras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) en las opciones de producto.",
               "options__1": {
                 "label": "Círculo"
               },
diff --git a/locales/fi.json b/locales/fi.json
index 8ef7d12fa21..395d2cbdfe9 100644
--- a/locales/fi.json
+++ b/locales/fi.json
@@ -358,7 +358,8 @@
       "total_items": "Tuotteita yhteensä",
       "remove_all_items_confirmation": "Poistetaanko kaikki {{ quantity }} tuotetta ostoskorista?",
       "remove_all": "Poista kaikki",
-      "cancel": "Peruuta"
+      "cancel": "Peruuta",
+      "remove_all_single_item_confirmation": "Poistetaanko 1 tuote ostoskorista?"
     }
   },
   "localization": {
diff --git a/locales/fi.schema.json b/locales/fi.schema.json
index 0db07100b0e..c4bae3690d9 100644
--- a/locales/fi.schema.json
+++ b/locales/fi.schema.json
@@ -1649,7 +1649,7 @@
             },
             "swatch_shape": {
               "label": "Väriruutu",
-              "info": "Lisätietoja siitä, miten voit näyttää [väriruudut](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Ota [väriruudut](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) käyttöön tuotevaihtoehtoihin.",
               "options__1": {
                 "label": "Ympyrä"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Väriruutu",
-              "info": "Lisätietoja siitä, miten voit näyttää [väriruudut](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Ota [väriruudut](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) käyttöön tuotevaihtoehtoihin.",
               "options__1": {
                 "label": "Ympyrä"
               },
diff --git a/locales/fr.json b/locales/fr.json
index d76cff9a9eb..a80acc3cfbe 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -370,7 +370,8 @@
       "total_items": "Total des articles",
       "remove_all_items_confirmation": "Retirer les {{ quantity }} articles de votre panier ?",
       "remove_all": "Tout retirer",
-      "cancel": "Annuler"
+      "cancel": "Annuler",
+      "remove_all_single_item_confirmation": "Supprimer 1 article de votre panier ?"
     }
   },
   "localization": {
diff --git a/locales/fr.schema.json b/locales/fr.schema.json
index 1818ab7ee69..c731d60e07f 100644
--- a/locales/fr.schema.json
+++ b/locales/fr.schema.json
@@ -1649,7 +1649,7 @@
             },
             "swatch_shape": {
               "label": "Échantillon",
-              "info": "Découvrez comment afficher les [échantillons](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Activez [échantillons](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) sur les options produits.",
               "options__1": {
                 "label": "Cercle"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Échantillon",
-              "info": "Découvrez comment afficher les [échantillons](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Activez [échantillons](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) sur les options produits.",
               "options__1": {
                 "label": "Cercle"
               },
diff --git a/locales/hr-HR.json b/locales/hr-HR.json
index 291d1f35b5a..85d20d8db51 100644
--- a/locales/hr-HR.json
+++ b/locales/hr-HR.json
@@ -370,7 +370,8 @@
       "total_items": "Ukupni broj artikala",
       "remove_all_items_confirmation": "Želite li ukloniti sve artikle ({{ quantity }}) iz svoje košarice?",
       "remove_all": "Ukloni sve",
-      "cancel": "Odustani"
+      "cancel": "Odustani",
+      "remove_all_single_item_confirmation": "Želite li ukloniti 1 artikl iz košarice?"
     }
   },
   "localization": {
diff --git a/locales/hu.json b/locales/hu.json
index 5f5bf078f0d..7abc318b1b2 100644
--- a/locales/hu.json
+++ b/locales/hu.json
@@ -358,7 +358,8 @@
       "total_items": "Összes termék",
       "remove_all_items_confirmation": "Eltávolítod mind a(z) {{ quantity }} terméket a kosárból?",
       "remove_all": "Az összes eltávolítása",
-      "cancel": "Mégse"
+      "cancel": "Mégse",
+      "remove_all_single_item_confirmation": "Eltávolítod ezt a(z) 1 terméket a kosárból?"
     }
   },
   "localization": {
diff --git a/locales/id.json b/locales/id.json
index b732a2da2dc..d107274596e 100644
--- a/locales/id.json
+++ b/locales/id.json
@@ -358,7 +358,8 @@
       "total_items": "Total item",
       "remove_all_items_confirmation": "Hapus semua item yang berjumlah {{ quantity }} dari keranjang Anda?",
       "remove_all": "Hapus semuanya",
-      "cancel": "Batalkan"
+      "cancel": "Batalkan",
+      "remove_all_single_item_confirmation": "Hapus 1 item dari keranjang Anda?"
     }
   },
   "localization": {
diff --git a/locales/it.json b/locales/it.json
index 2ff3d78d9a7..65b7398e6d8 100644
--- a/locales/it.json
+++ b/locales/it.json
@@ -370,7 +370,8 @@
       "total_items": "Articoli totali",
       "remove_all_items_confirmation": "Rimuovere tutti i {{ quantity }} articoli dal tuo carrello?",
       "remove_all": "Rimuovi tutto",
-      "cancel": "Annulla"
+      "cancel": "Annulla",
+      "remove_all_single_item_confirmation": "Rimuovere un articolo dal carrello?"
     }
   },
   "localization": {
diff --git a/locales/it.schema.json b/locales/it.schema.json
index cd28302907b..fe4d0a7e08b 100644
--- a/locales/it.schema.json
+++ b/locales/it.schema.json
@@ -1650,7 +1650,7 @@
             },
             "swatch_shape": {
               "label": "Campione di colore",
-              "info": "Scopri come visualizzare i [campioni di colore](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Abilita i [campioni di colore](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nelle opzioni del prodotto.",
               "options__1": {
                 "label": "Tondo"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Campione di colore",
-              "info": "Scopri come visualizzare i [campioni di colore](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Abilita i [campioni di colore](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nelle opzioni del prodotto.",
               "options__1": {
                 "label": "Tondo"
               },
diff --git a/locales/ja.json b/locales/ja.json
index 0e616f78e36..6695f987398 100644
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -358,7 +358,8 @@
       "total_items": "アイテムの総数",
       "remove_all_items_confirmation": "カートから{{ quantity }}個のアイテムすべてを削除しますか？",
       "remove_all": "すべてを削除",
-      "cancel": "キャンセル"
+      "cancel": "キャンセル",
+      "remove_all_single_item_confirmation": "カートからアイテムを1個削除しますか？"
     }
   },
   "localization": {
diff --git a/locales/ja.schema.json b/locales/ja.schema.json
index 771f58f604a..93c4a976532 100644
--- a/locales/ja.schema.json
+++ b/locales/ja.schema.json
@@ -1641,7 +1641,7 @@
             },
             "swatch_shape": {
               "label": "見本",
-              "info": "[見本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) の表示方法はこちら",
+              "info": "商品オプションの[見本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)を有効にする。",
               "options__1": {
                 "label": "円形"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "見本",
-              "info": "[見本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) の表示方法はこちら",
+              "info": "商品オプションの[見本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)を有効にする。",
               "options__1": {
                 "label": "円形"
               },
diff --git a/locales/ko.json b/locales/ko.json
index 43619eb8be7..fa0edaf0763 100644
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -358,7 +358,8 @@
       "total_items": "총 품목 수",
       "remove_all_items_confirmation": "카트에서 {{ quantity }}개 품목을 모두 제거하시겠습니까?",
       "remove_all": "모두 제거",
-      "cancel": "취소"
+      "cancel": "취소",
+      "remove_all_single_item_confirmation": "카트에서 1개의 품목을 제거하시겠습니까?"
     }
   },
   "localization": {
diff --git a/locales/ko.schema.json b/locales/ko.schema.json
index 263997389fd..4cf6b90c5e7 100644
--- a/locales/ko.schema.json
+++ b/locales/ko.schema.json
@@ -1641,7 +1641,7 @@
             },
             "swatch_shape": {
               "label": "견본",
-              "info": "[견본](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)을 표시할 방법을 알아보세요",
+              "info": "제품 옵션에서 [견본](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)을 활성화합니다.",
               "options__1": {
                 "label": "원형"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "견본",
-              "info": "[견본](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)을 표시할 방법을 알아보세요",
+              "info": "제품 옵션에서 [견본](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)을 활성화합니다.",
               "options__1": {
                 "label": "원형"
               },
diff --git a/locales/lt-LT.json b/locales/lt-LT.json
index 5414b41f988..a9d0eaac350 100644
--- a/locales/lt-LT.json
+++ b/locales/lt-LT.json
@@ -382,7 +382,8 @@
       "total_items": "Prekių iš viso",
       "remove_all_items_confirmation": "Pašalinti visas {{ quantity }} prekes (-ių) iš krepšelio?",
       "remove_all": "Pašalinti viską",
-      "cancel": "Atšaukti"
+      "cancel": "Atšaukti",
+      "remove_all_single_item_confirmation": "Pašalinti 1 prekę iš krepšelio?"
     }
   },
   "localization": {
diff --git a/locales/nb.json b/locales/nb.json
index 44aa313c9e2..26aa2878457 100644
--- a/locales/nb.json
+++ b/locales/nb.json
@@ -358,7 +358,8 @@
       "total_items": "Totalt antall varer",
       "remove_all_items_confirmation": "Vil du fjerne alle {{ quantity }} varer fra handlekurven?",
       "remove_all": "Fjern alle",
-      "cancel": "Avbryt"
+      "cancel": "Avbryt",
+      "remove_all_single_item_confirmation": "Vil du fjerne én vare fra handlekurven?"
     }
   },
   "localization": {
diff --git a/locales/nb.schema.json b/locales/nb.schema.json
index d2e7b17f78b..9c1a8eb8c32 100644
--- a/locales/nb.schema.json
+++ b/locales/nb.schema.json
@@ -1649,7 +1649,7 @@
             },
             "swatch_shape": {
               "label": "Fargekart",
-              "info": "Finn ut hvordan du viser [fargekart](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Aktiver [fargekart](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) på produktalternativer.",
               "options__1": {
                 "label": "Sirkel"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Fargekart",
-              "info": "Finn ut hvordan du viser [fargekart](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Aktiver [fargekart](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) på produktalternativer.",
               "options__1": {
                 "label": "Sirkel"
               },
diff --git a/locales/nl.json b/locales/nl.json
index e1514ebbf3c..76575edd32c 100644
--- a/locales/nl.json
+++ b/locales/nl.json
@@ -358,7 +358,8 @@
       "total_items": "Totaal aantal artikelen",
       "remove_all_items_confirmation": "Alle {{ quantity }} artikelen uit je winkelwagen verwijderen?",
       "remove_all": "Alles verwijderen",
-      "cancel": "Annuleren"
+      "cancel": "Annuleren",
+      "remove_all_single_item_confirmation": "1 artikel uit je winkelwagen verwijderen?"
     }
   },
   "localization": {
diff --git a/locales/nl.schema.json b/locales/nl.schema.json
index 3f0146ba34a..ed5ff22b3e0 100644
--- a/locales/nl.schema.json
+++ b/locales/nl.schema.json
@@ -1650,7 +1650,7 @@
             },
             "swatch_shape": {
               "label": "Staal",
-              "info": "Ontdek hoe je [stalen](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) weergeeft",
+              "info": "Schakel [stalen](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) in bij productopties.",
               "options__1": {
                 "label": "Cirkel"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Staal",
-              "info": "Ontdek hoe je [stalen](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) weergeeft",
+              "info": "Schakel [stalen](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) in bij productopties.",
               "options__1": {
                 "label": "Cirkel"
               },
diff --git a/locales/pl.json b/locales/pl.json
index 73ab5d2567d..d288e780edc 100644
--- a/locales/pl.json
+++ b/locales/pl.json
@@ -382,7 +382,8 @@
       "total_items": "Pozycje łącznie",
       "remove_all_items_confirmation": "Usunąć wszystkie {{ quantity }} pozycje(-i) z koszyka?",
       "remove_all": "Usuń wszystko",
-      "cancel": "Anuluj"
+      "cancel": "Anuluj",
+      "remove_all_single_item_confirmation": "Czy usunąć 1 pozycję z Twojego koszyka?"
     }
   },
   "localization": {
diff --git a/locales/pl.schema.json b/locales/pl.schema.json
index af61e7eb49d..c037fa11cfa 100644
--- a/locales/pl.schema.json
+++ b/locales/pl.schema.json
@@ -1650,7 +1650,7 @@
             },
             "swatch_shape": {
               "label": "Próbka",
-              "info": "Dowiedz się, jak wyświetlać [próbki](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Włącz [próbki](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) w opcjach produktu.",
               "options__1": {
                 "label": "Koło"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Próbka",
-              "info": "Dowiedz się, jak wyświetlać [próbki](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Włącz [próbki](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) w opcjach produktu.",
               "options__1": {
                 "label": "Koło"
               },
diff --git a/locales/pt-BR.json b/locales/pt-BR.json
index 0da9954eb96..d511ceee4b2 100644
--- a/locales/pt-BR.json
+++ b/locales/pt-BR.json
@@ -370,7 +370,8 @@
       "total_items": "Total de itens",
       "remove_all_items_confirmation": "Remover todos os {{ quantity }} itens do carrinho?",
       "remove_all": "Remover tudo",
-      "cancel": "Cancelar"
+      "cancel": "Cancelar",
+      "remove_all_single_item_confirmation": "Remover 1 item do carrinho?"
     }
   },
   "localization": {
diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json
index 11af56c5e79..63f7c29c08a 100644
--- a/locales/pt-BR.schema.json
+++ b/locales/pt-BR.schema.json
@@ -1649,7 +1649,7 @@
             },
             "swatch_shape": {
               "label": "Amostra",
-              "info": "Saiba como exibir [amostras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Habilite [amostras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nas opções de produtos.",
               "options__1": {
                 "label": "Círculo"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Amostra",
-              "info": "Saiba como exibir [amostras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Habilite [amostras](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nas opções de produtos.",
               "options__1": {
                 "label": "Círculo"
               },
diff --git a/locales/pt-PT.json b/locales/pt-PT.json
index 3a199de50cb..3571271d922 100644
--- a/locales/pt-PT.json
+++ b/locales/pt-PT.json
@@ -370,7 +370,8 @@
       "total_items": "Total de itens",
       "remove_all_items_confirmation": "Remover todos os {{ quantity }} itens do seu carrinho?",
       "remove_all": "Remover tudo",
-      "cancel": "Cancelar"
+      "cancel": "Cancelar",
+      "remove_all_single_item_confirmation": "Remover 1 item do seu carrinho?"
     }
   },
   "localization": {
diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json
index 762f5fd1cf3..793d0b8d7f1 100644
--- a/locales/pt-PT.schema.json
+++ b/locales/pt-PT.schema.json
@@ -1641,7 +1641,7 @@
             },
             "swatch_shape": {
               "label": "Paleta",
-              "info": "Saiba como exibir [paletas](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Ative [paletas](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nas opções de produto.",
               "options__1": {
                 "label": "Círculo"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Paleta",
-              "info": "Saiba como exibir [paletas](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Ative [paletas](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nas opções de produto.",
               "options__1": {
                 "label": "Círculo"
               },
diff --git a/locales/ro-RO.json b/locales/ro-RO.json
index ba868f98f7f..0437bf2b1fa 100644
--- a/locales/ro-RO.json
+++ b/locales/ro-RO.json
@@ -370,7 +370,8 @@
       "total_items": "Total articole",
       "remove_all_items_confirmation": "Elimini toate cele {{ quantity }} articole din coș?",
       "remove_all": "Elimină tot",
-      "cancel": "Anulează"
+      "cancel": "Anulează",
+      "remove_all_single_item_confirmation": "Elimini 1 articol din coș?"
     }
   },
   "localization": {
diff --git a/locales/ru.json b/locales/ru.json
index 94edd32c189..3a11073ec78 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -382,7 +382,8 @@
       "total_items": "Общее количество товаров",
       "remove_all_items_confirmation": "Удалить все товары ({{ quantity }}) из корзины?",
       "remove_all": "Удалить все",
-      "cancel": "Отменить"
+      "cancel": "Отменить",
+      "remove_all_single_item_confirmation": "Удалить 1 товар из корзины?"
     }
   },
   "localization": {
diff --git a/locales/sk-SK.json b/locales/sk-SK.json
index 662a787f3e1..65c0f523152 100644
--- a/locales/sk-SK.json
+++ b/locales/sk-SK.json
@@ -382,7 +382,8 @@
       "total_items": "Celkový počet položiek",
       "remove_all_items_confirmation": "Chcete z košíka odobrať všetky položky ({{ quantity }})?",
       "remove_all": "Odobrať všetky",
-      "cancel": "Zrušiť"
+      "cancel": "Zrušiť",
+      "remove_all_single_item_confirmation": "Chcete z košíka odobrať 1 položku?"
     }
   },
   "localization": {
diff --git a/locales/sl-SI.json b/locales/sl-SI.json
index d1fbb3e6bd1..bc70f76a484 100644
--- a/locales/sl-SI.json
+++ b/locales/sl-SI.json
@@ -382,7 +382,8 @@
       "total_items": "Skupno število izdelkov",
       "remove_all_items_confirmation": "Ali želite iz košarice odstraniti vse izdelke ({{ quantity }})?",
       "remove_all": "Odstrani vse",
-      "cancel": "Prekliči"
+      "cancel": "Prekliči",
+      "remove_all_single_item_confirmation": "Ali želite iz košarice odstraniti 1 izdelek?"
     }
   },
   "localization": {
diff --git a/locales/sv.json b/locales/sv.json
index bbe2868cfef..1d096a05327 100644
--- a/locales/sv.json
+++ b/locales/sv.json
@@ -358,7 +358,8 @@
       "total_items": "Totalt antal artiklar",
       "remove_all_items_confirmation": "Ta bort alla {{ quantity }} artiklar från din varukorg?",
       "remove_all": "Ta bort alla",
-      "cancel": "Avbryt"
+      "cancel": "Avbryt",
+      "remove_all_single_item_confirmation": "Vill du ta bort 1 artikel från varukorgen?"
     }
   },
   "localization": {
diff --git a/locales/sv.schema.json b/locales/sv.schema.json
index f4bf2af050b..c75880a52ad 100644
--- a/locales/sv.schema.json
+++ b/locales/sv.schema.json
@@ -1641,7 +1641,7 @@
             },
             "swatch_shape": {
               "label": "Prov",
-              "info": "Läs om hur du visar [prover](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Aktivera [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) på produktalternativ.",
               "options__1": {
                 "label": "Cirkel"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Prov",
-              "info": "Läs om hur du visar [prover](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Aktivera [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) på produktalternativ.",
               "options__1": {
                 "label": "Cirkel"
               },
diff --git a/locales/th.json b/locales/th.json
index 87abc5823ad..df180889ec2 100644
--- a/locales/th.json
+++ b/locales/th.json
@@ -358,7 +358,8 @@
       "total_items": "รายการสินค้าทั้งหมด",
       "remove_all_items_confirmation": "ต้องการลบสินค้าทั้งหมด {{ quantity }} รายการออกจากตะกร้าสินค้าหรือไม่",
       "remove_all": "ลบออกทั้งหมด",
-      "cancel": "ยกเลิก"
+      "cancel": "ยกเลิก",
+      "remove_all_single_item_confirmation": "ต้องการลบ 1 รายการออกจากตะกร้าสินค้าหรือไม่"
     }
   },
   "localization": {
diff --git a/locales/th.schema.json b/locales/th.schema.json
index 346f177f050..2a11d6be833 100644
--- a/locales/th.schema.json
+++ b/locales/th.schema.json
@@ -1641,7 +1641,7 @@
             },
             "swatch_shape": {
               "label": "ตัวอย่าง",
-              "info": "เรียนรู้เกี่ยวกับวิธีการแสดง [ตัวอย่าง](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "เปิดใช้งาน [แผงสี](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) ในตัวเลือกสินค้า",
               "options__1": {
                 "label": "วงกลม"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "ตัวอย่าง",
-              "info": "เรียนรู้เกี่ยวกับวิธีการแสดง [ตัวอย่าง](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "เปิดใช้งาน [แผงสี](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) ในตัวเลือกสินค้า",
               "options__1": {
                 "label": "วงกลม"
               },
diff --git a/locales/tr.json b/locales/tr.json
index 8e67a8f7f20..06dc5bd4ec5 100644
--- a/locales/tr.json
+++ b/locales/tr.json
@@ -358,7 +358,8 @@
       "total_items": "Toplam ürün sayısı",
       "remove_all_items_confirmation": "{{ quantity }} ürünün tamamı sepetten kaldırılsın mı?",
       "remove_all": "Tümünü kaldır",
-      "cancel": "İptal"
+      "cancel": "İptal",
+      "remove_all_single_item_confirmation": "1 ürün sepetten kaldırılsın mı?"
     }
   },
   "localization": {
diff --git a/locales/tr.schema.json b/locales/tr.schema.json
index aeeb1fe0b04..4ab43ff930f 100644
--- a/locales/tr.schema.json
+++ b/locales/tr.schema.json
@@ -1649,7 +1649,7 @@
             },
             "swatch_shape": {
               "label": "Numune parça",
-              "info": "[Numune parçalarını](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nasıl görüntüleyeceğinizi öğrenin",
+              "info": "Ürün seçeneklerinde [numune parçaları](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) etkinleştirin.",
               "options__1": {
                 "label": "Yuvarlak"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Numune parça",
-              "info": "[Numune parçalarını](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) nasıl görüntüleyeceğinizi öğrenin",
+              "info": "Ürün seçeneklerinde [numune parçaları](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) etkinleştirin.",
               "options__1": {
                 "label": "Yuvarlak"
               },
diff --git a/locales/vi.json b/locales/vi.json
index 409eccd973e..1062edacd8a 100644
--- a/locales/vi.json
+++ b/locales/vi.json
@@ -358,7 +358,8 @@
       "total_items": "Tổng số mặt hàng",
       "remove_all_items_confirmation": "Xóa tất cả {{ quantity }} mặt hàng khỏi giỏ hàng của bạn?",
       "remove_all": "Xóa tất cả",
-      "cancel": "Hủy"
+      "cancel": "Hủy",
+      "remove_all_single_item_confirmation": "Xóa 1 mặt hàng khỏi giỏ hàng?"
     }
   },
   "localization": {
diff --git a/locales/vi.schema.json b/locales/vi.schema.json
index cf831256b82..38fcb70cb2f 100644
--- a/locales/vi.schema.json
+++ b/locales/vi.schema.json
@@ -1650,7 +1650,7 @@
             },
             "swatch_shape": {
               "label": "Mẫu",
-              "info": "Tìm hiểu cách hiển thị [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Bật [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) cho tùy chọn sản phẩm.",
               "options__1": {
                 "label": "Tròn"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "Mẫu",
-              "info": "Tìm hiểu cách hiển thị [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "Bật [swatches](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches) cho tùy chọn sản phẩm.",
               "options__1": {
                 "label": "Tròn"
               },
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 9ec8f2893cd..8b457221c6b 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -358,7 +358,8 @@
       "total_items": "商品总数",
       "remove_all_items_confirmation": "删除您购物车中的全部 {{ quantity }} 件商品？",
       "remove_all": "全部删除",
-      "cancel": "取消"
+      "cancel": "取消",
+      "remove_all_single_item_confirmation": "从购物车中删除 1 件商品？"
     }
   },
   "localization": {
diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json
index f12eefe5c27..c447e167167 100644
--- a/locales/zh-CN.schema.json
+++ b/locales/zh-CN.schema.json
@@ -1641,7 +1641,7 @@
             },
             "swatch_shape": {
               "label": "样本",
-              "info": "了解如何显示 [样本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "在产品选项上启用[样本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)。",
               "options__1": {
                 "label": "圆形"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "样本",
-              "info": "了解如何显示 [样本](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "在产品选项上启用[样本功能](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)。",
               "options__1": {
                 "label": "圆形"
               },
diff --git a/locales/zh-TW.json b/locales/zh-TW.json
index 53bd0cec811..1c765daa746 100644
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -358,7 +358,8 @@
       "total_items": "品項總數",
       "remove_all_items_confirmation": "是否要從購物車移除全部 {{ quantity }} 個品項？",
       "remove_all": "全部移除",
-      "cancel": "取消"
+      "cancel": "取消",
+      "remove_all_single_item_confirmation": "是否要從您的購物車移除 1 個品項？"
     }
   },
   "localization": {
diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json
index 8f2e2bc6f71..03d76e065c3 100644
--- a/locales/zh-TW.schema.json
+++ b/locales/zh-TW.schema.json
@@ -1641,7 +1641,7 @@
             },
             "swatch_shape": {
               "label": "色樣",
-              "info": "瞭解如何顯示 [色樣](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "為商品選項啟用 [色樣](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)。",
               "options__1": {
                 "label": "圓形"
               },
@@ -2505,7 +2505,7 @@
             },
             "swatch_shape": {
               "label": "色樣",
-              "info": "瞭解如何顯示 [色樣](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)",
+              "info": "為商品選項啟用 [色樣](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings#options-with-swatches)。",
               "options__1": {
                 "label": "圓形"
               },
diff --git a/release-notes.md b/release-notes.md
index ee0a2c2505f..f76b02c748e 100644
--- a/release-notes.md
+++ b/release-notes.md
@@ -1,23 +1,15 @@
-Dawn 12.0.0 introduces additional customization options by adding color scheme pickers to new areas, and new ways to visually display product filters. It also introduces some performance improvements related to image loading. 
-
+Dawn 13.0.0 adds support for color swatches, improvements to the country selector, and tweaks and fixes to other sections. It also includes a breaking change to Color Schemes; see the Changed notes below for details.
 ### Added
-- Important: If you use a gradient as a main background, the look of your cart drawer and product modal (quick add) will be affected. 
-- You can now select a color scheme for the Image with text section, Collection template (Product grid section), Product information section, Cart drawer, and Cart page.
-
+- The Variant Picker now supports color swatches! This depends on the [Product Taxonomy](help.shopify.com/manual/products/details/product-category) feature, which is rolling out gradually over the coming weeks.
+- We reworked the country selector, which now includes search, a new “popular countries” section, and a generally improved look and feel especially on smaller screens.
 ### Changed
-- If you are using the Search & Discovery app, you can now change the logical operator for facet filter values between OR and AND.
-- If you are using the Search & Discovery app, you can now choose to apply a swatch visual style for certain filter types (references to metaobjects).
-
+- **Important**: If you use Color Schemes, they will reset to their default values due to an internal change to the feature.
+- If you are using the Search & Discovery app, you can now change how dynamic facet lists treat filters with no product matches.
 ### Fixes and improvements
-- We fixed an issue with facet filters that affected currencies that use comma separators.
-- We fixed a formatting issue with metadata that is used for SEO purposes.
-- We fixed a visual bug that was affecting the collage section.
-- We fixed an issue with the “compare at” price to ensure more predictable behavior.
-- We’ve improved the experience of adding items to cart on slower connections.
-- We fixed a styling issue affecting collections in empty cart drawers.
-- We fixed an issue in the Slideshow section where the next slide flashes before coming into view. 
-- We’ve improved various visual elements on the Quick order list including font consistency, alignment, and spacing. 
-- We fixed an issue affecting Quick order list on iOS, removing the need to double tap the info icon to open it.
-
-### Removed
-- Removed image tag attribute that indicated which images to load first. We will now allow the platform to determine this, which will improve performance.
\ No newline at end of file
+- We added a default font for input fields, they now inherit the body font instead of falling back to a system default font.
+- We fixed an issue when adding cart notes that would prevent them from showing during checkout.
+- We fixed an accessibility bug where filter colors were displaying incorrectly in high contrast mode.
+- We updated the Multicolumn Section to provide a slider on tablet-sized screens, like it does on phone-sized screens.
+- We fixed a bug where the Localization Selector was slightly obscured when using Sticky Header and scrolling while the selector was open.
+- We fixed a bug that prevented the Product Grid Section from using the correct Image Shape in its Product Cards.
+- We subtly increased the font size for inline quantity errors on product pages to make them more readable.
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 94e122224fb..4c920b73657 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -827,7 +827,7 @@
           "id": "swatch_shape",
           "label": "t:sections.featured-product.blocks.variant_picker.settings.swatch_shape.label",
           "type": "select",
-          "info": "t:sections.main-product.blocks.variant_picker.settings.swatch_shape.info",
+          "info": "t:sections.featured-product.blocks.variant_picker.settings.swatch_shape.info",
           "options": [
             {
               "value": "circle",
diff --git a/sections/quick-order-list.liquid b/sections/quick-order-list.liquid
index af5f1070ba0..2009789823f 100644
--- a/sections/quick-order-list.liquid
+++ b/sections/quick-order-list.liquid
@@ -228,7 +228,11 @@
         </div>
         <div class="quick-order-list-total__confirmation hidden">
           <span class="text-body">
-            {{ 'sections.quick_order_list.remove_all_items_confirmation' | t: quantity: items_in_cart }}
+            {%- if items_in_cart == 1 -%}
+              {{ 'sections.quick_order_list.remove_all_single_item_confirmation' | t }}
+            {%- else -%}
+              {{ 'sections.quick_order_list.remove_all_items_confirmation' | t: quantity: items_in_cart }}
+            {%- endif -%}
           </span>
           <quick-order-list-remove-all-button
             data-action="remove"
diff --git a/sections/related-products.liquid b/sections/related-products.liquid
index 683668bc9c0..b06a7233b80 100644
--- a/sections/related-products.liquid
+++ b/sections/related-products.liquid
@@ -111,7 +111,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "info": "t:sections.image-banner.settings.color_scheme.info",
+      "info": "t:sections.all.colors.has_cards_info",
       "default": "scheme-1"
     },
     {

From 7aa16a8da85849ff5b24ba80020d6540a55ef08c Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Mon, 5 Feb 2024 10:23:49 -0400
Subject: [PATCH 56/58] Update 1 translation file (#3232)

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 locales/cs.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/locales/cs.json b/locales/cs.json
index 65dbbef6638..25ea583e756 100644
--- a/locales/cs.json
+++ b/locales/cs.json
@@ -66,7 +66,7 @@
     "skip_to_text": "Přejít k obsahu",
     "close": "Zavřít",
     "unit_price_separator": "za",
-    "vendor": "Dodavatel:",
+    "vendor": "Vendor:",
     "error": "Chyba",
     "refresh_page": "Po volbě výběru se obnoví celá stránka.",
     "loading": "Načítání...",
@@ -114,7 +114,7 @@
       "share": "Sdílet tento produkt",
       "sold_out": "Vyprodáno",
       "unavailable": "Není k dispozici",
-      "vendor": "Dodavatel",
+      "vendor": "Vendor",
       "video_exit_message": "{{ title }} otevře ve stejném okně video na celé obrazovce.",
       "xr_button": "Zobrazit ve vašem prostoru",
       "xr_button_label": "Zobrazit ve vašem prostoru: Umožňuje načíst položku v okně rozšířené reality",

From 9309102f80eb9f08069e35daf376aea9f6667b20 Mon Sep 17 00:00:00 2001
From: Benjamin Sehl <ben@sehl.ca>
Date: Wed, 7 Feb 2024 14:21:03 -0500
Subject: [PATCH 57/58] Update README.md (#3128)

* Update README.md

* fix url formatting

---------

Co-authored-by: Ludo <ludo.segura@shopify.com>
---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index dca149e5b6b..73132fa909f 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ Dawn represents a HTML-first, JavaScript-only-as-needed approach to theme develo
 You can find a more detailed version of our theme code principles in the [contribution guide](https://github.com/Shopify/dawn/blob/main/.github/CONTRIBUTING.md#theme-code-principles).
 
 ## Getting started
-We recommend using Dawn as a starting point for theme development. [Learn more on Shopify.dev](https://shopify.dev/themes/getting-started/create). 
+We recommend using Dawn as a starting point for theme development. [Learn more on Shopify.dev](https://shopify.dev/themes/getting-started/create).
 
 > If you're building a theme for the Shopify Theme Store, then you can use Dawn as a starting point. However, the theme that you submit needs to be [substantively different from Dawn](https://shopify.dev/themes/store/requirements#uniqueness) so that it provides added value for merchants. Learn about the [ways that you can use Dawn](https://shopify.dev/themes/tools/dawn#ways-to-use-dawn).
 
@@ -55,7 +55,7 @@ There are a number of really useful tools that the Shopify Themes team uses duri
 
 [Shopify CLI](https://github.com/Shopify/shopify-cli) helps you build Shopify themes faster and is used to automate and enhance your local development workflow. It comes bundled with a suite of commands for developing Shopify themes—everything from working with themes on a Shopify store (e.g. creating, publishing, deleting themes) or launching a development server for local theme development.
 
-You can follow this [quick start guide for theme developers](https://github.com/Shopify/shopify-cli#quick-start-guide-for-theme-developers) to get started.
+You can follow this [quick start guide for theme developers](https://shopify.dev/docs/themes/tools/cli) to get started.
 
 ### Theme Check
 

From a42f2349fe36127e7d89d449e469742d22e1f2e2 Mon Sep 17 00:00:00 2001
From: Kai <KaichenWang@users.noreply.github.com>
Date: Fri, 16 Feb 2024 16:14:22 +0000
Subject: [PATCH 58/58] Fix Theme Check offences (#3283)

* Fix schema JSON formatting

Co-authored-by: Abhishek Jani <abhishekdarshanjani@gmail.com>

* Add loading=eager attribute to gift card page img

* Use liquid tag to combine successive liquid statements

Co-authored-by: Abhishek Jani <abhishekdarshanjani@gmail.com>

* Remove snippet to avoid > 3 levels of nested snippets

* Ignore AssetPreload theme check for font links

---------

Co-authored-by: Abhishek Jani <abhishekdarshanjani@gmail.com>
---
 layout/password.liquid                  |  4 +++
 layout/theme.liquid                     |  4 +++
 sections/announcement-bar.liquid        |  4 ++-
 sections/collage.liquid                 | 10 ++++--
 sections/collapsible-content.liquid     |  5 ++-
 sections/collection-list.liquid         |  5 ++-
 sections/contact-form.liquid            |  5 ++-
 sections/email-signup-banner.liquid     |  4 ++-
 sections/featured-blog.liquid           |  5 ++-
 sections/featured-collection.liquid     |  5 ++-
 sections/featured-product.liquid        | 11 ++++--
 sections/header.liquid                  |  2 +-
 sections/image-banner.liquid            |  5 ++-
 sections/image-with-text.liquid         |  5 ++-
 sections/main-product.liquid            |  8 ++---
 sections/multicolumn.liquid             |  5 ++-
 sections/multirow.liquid                |  5 ++-
 sections/newsletter.liquid              |  4 ++-
 sections/page.liquid                    |  5 ++-
 sections/quick-order-list.liquid        |  4 ++-
 sections/rich-text.liquid               |  5 ++-
 sections/slideshow.liquid               |  5 ++-
 sections/video.liquid                   | 10 ++++--
 snippets/product-variant-options.liquid | 42 +++++++++++++++--------
 snippets/swatch-input.liquid            | 45 -------------------------
 templates/gift_card.liquid              |  5 +++
 26 files changed, 129 insertions(+), 88 deletions(-)
 delete mode 100644 snippets/swatch-input.liquid

diff --git a/layout/password.liquid b/layout/password.liquid
index c03433ab92f..a6238c03b65 100644
--- a/layout/password.liquid
+++ b/layout/password.liquid
@@ -175,10 +175,14 @@
     {% endstyle %}
 
     {%- unless settings.type_body_font.system? -%}
+      {% comment %}theme-check-disable AssetPreload{% endcomment %}
       <link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
+      {% comment %}theme-check-enable AssetPreload{% endcomment %}
     {%- endunless -%}
     {%- unless settings.type_header_font.system? -%}
+      {% comment %}theme-check-disable AssetPreload{% endcomment %}
       <link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
+      {% comment %}theme-check-enable AssetPreload{% endcomment %}
     {%- endunless -%}
 
     {{ 'section-password.css' | asset_url | stylesheet_tag }}
diff --git a/layout/theme.liquid b/layout/theme.liquid
index 786ac69eca2..3da0fb6799c 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -254,10 +254,14 @@
     {{ 'base.css' | asset_url | stylesheet_tag }}
 
     {%- unless settings.type_body_font.system? -%}
+      {% comment %}theme-check-disable AssetPreload{% endcomment %}
       <link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
+      {% comment %}theme-check-enable AssetPreload{% endcomment %}
     {%- endunless -%}
     {%- unless settings.type_header_font.system? -%}
+      {% comment %}theme-check-disable AssetPreload{% endcomment %}
       <link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
+      {% comment %}theme-check-enable AssetPreload{% endcomment %}
     {%- endunless -%}
 
     {%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%}
diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid
index 31db1f58257..ecc45376f50 100644
--- a/sections/announcement-bar.liquid
+++ b/sections/announcement-bar.liquid
@@ -224,7 +224,9 @@
   "max_blocks": 12,
   "class": "announcement-bar-section",
   "enabled_on": {
-    "groups": ["header"]
+    "groups": [
+      "header"
+    ]
   },
   "settings": [
     {
diff --git a/sections/collage.liquid b/sections/collage.liquid
index ae7da8c9b3a..05adc698d6e 100644
--- a/sections/collage.liquid
+++ b/sections/collage.liquid
@@ -250,7 +250,10 @@
   "tag": "section",
   "class": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
@@ -412,7 +415,10 @@
         {
           "type": "video_url",
           "id": "video_url",
-          "accept": ["youtube", "vimeo"],
+          "accept": [
+            "youtube",
+            "vimeo"
+          ],
           "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
           "label": "t:sections.collage.blocks.video.settings.video_url.label",
           "placeholder": "t:sections.collage.blocks.video.settings.video_url.placeholder",
diff --git a/sections/collapsible-content.liquid b/sections/collapsible-content.liquid
index a2d923d2c0c..c5f23f748ba 100644
--- a/sections/collapsible-content.liquid
+++ b/sections/collapsible-content.liquid
@@ -112,7 +112,10 @@
   "tag": "section",
   "class": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid
index 828f9f7e448..362ab8c2454 100644
--- a/sections/collection-list.liquid
+++ b/sections/collection-list.liquid
@@ -136,7 +136,10 @@
   "class": "section section-collection-list",
   "max_blocks": 15,
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/contact-form.liquid b/sections/contact-form.liquid
index e545933c533..1c04f0c1dfe 100644
--- a/sections/contact-form.liquid
+++ b/sections/contact-form.liquid
@@ -139,7 +139,10 @@
   "tag": "section",
   "class": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/email-signup-banner.liquid b/sections/email-signup-banner.liquid
index 464637c9ea2..143d08a99be 100644
--- a/sections/email-signup-banner.liquid
+++ b/sections/email-signup-banner.liquid
@@ -385,6 +385,8 @@
       ]
     }
   ],
-  "templates": ["password"]
+  "templates": [
+    "password"
+  ]
 }
 {% endschema %}
diff --git a/sections/featured-blog.liquid b/sections/featured-blog.liquid
index d96a8762f10..d19875e58f0 100644
--- a/sections/featured-blog.liquid
+++ b/sections/featured-blog.liquid
@@ -187,7 +187,10 @@
   "name": "t:sections.featured-blog.name",
   "tag": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid
index 047f025e3e3..4a2af497cd2 100644
--- a/sections/featured-collection.liquid
+++ b/sections/featured-collection.liquid
@@ -176,7 +176,10 @@
   "tag": "section",
   "class": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 4c920b73657..a7208069209 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -446,8 +446,10 @@
                   {%- endif -%}
                 </div>
               {%- when 'share' -%}
-                {% assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin %}
-                {% render 'share-button', block: block, share_link: share_url %}
+                {% liquid 
+                  assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin 
+                  render 'share-button', block: block, share_link: share_url
+                %}
               {%- when 'variant_picker' -%}
                 {% render 'product-variant-picker',
                   product: product,
@@ -700,7 +702,10 @@
   "tag": "section",
   "class": "section section-featured-product",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "blocks": [
     {
diff --git a/sections/header.liquid b/sections/header.liquid
index d5f4cfd81ff..c8ecd2afc5a 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -593,7 +593,7 @@
       "label": "t:sections.all.colors.label",
       "default": "scheme-1"
     },
-      {
+    {
       "type": "color_scheme",
       "id": "menu_color_scheme",
       "label": "t:sections.header.settings.menu_color_scheme.label",
diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid
index 126dad84f85..50f4bbf7151 100644
--- a/sections/image-banner.liquid
+++ b/sections/image-banner.liquid
@@ -172,7 +172,10 @@
   "tag": "section",
   "class": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid
index 0a24e48a351..5064234ef84 100644
--- a/sections/image-with-text.liquid
+++ b/sections/image-with-text.liquid
@@ -112,7 +112,10 @@
   "name": "t:sections.image-with-text.name",
   "class": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index be03b3103aa..217e9ff403a 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -406,12 +406,10 @@
                 {{- block.settings.text -}}
               </a>
             {%- when 'share' -%}
-              {% assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin %}
-              {% render 'share-button',
-                block: block,
-                share_link: share_url
+              {% liquid 
+                assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin
+                render 'share-button', block: block, share_link: share_url
               %}
-
             {%- when 'variant_picker' -%}
               {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
             {%- when 'buy_buttons' -%}
diff --git a/sections/multicolumn.liquid b/sections/multicolumn.liquid
index 633e239d991..9327bafaad3 100644
--- a/sections/multicolumn.liquid
+++ b/sections/multicolumn.liquid
@@ -194,7 +194,10 @@
   "class": "section",
   "tag": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/multirow.liquid b/sections/multirow.liquid
index 2d242bd05a4..d7053efcd8a 100644
--- a/sections/multirow.liquid
+++ b/sections/multirow.liquid
@@ -112,7 +112,10 @@
   "name": "t:sections.multirow.name",
   "class": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/newsletter.liquid b/sections/newsletter.liquid
index d9e510dc6e1..90013a57d62 100644
--- a/sections/newsletter.liquid
+++ b/sections/newsletter.liquid
@@ -120,7 +120,9 @@
   "tag": "section",
   "class": "section",
   "disabled_on": {
-    "groups": ["header"]
+    "groups": [
+      "header"
+    ]
   },
   "settings": [
     {
diff --git a/sections/page.liquid b/sections/page.liquid
index 24eccbc68b0..5bdddaa6095 100644
--- a/sections/page.liquid
+++ b/sections/page.liquid
@@ -41,7 +41,10 @@
   "tag": "section",
   "class": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/quick-order-list.liquid b/sections/quick-order-list.liquid
index 2009789823f..b4c1c424a51 100644
--- a/sections/quick-order-list.liquid
+++ b/sections/quick-order-list.liquid
@@ -279,7 +279,9 @@
   "name": "t:sections.quick-order-list.name",
   "limit": 1,
   "enabled_on": {
-    "templates": ["product"]
+    "templates": [
+      "product"
+    ]
   },
   "settings": [
     {
diff --git a/sections/rich-text.liquid b/sections/rich-text.liquid
index 4a2914ce57b..60fc6fc5775 100644
--- a/sections/rich-text.liquid
+++ b/sections/rich-text.liquid
@@ -100,7 +100,10 @@
   "tag": "section",
   "class": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/slideshow.liquid b/sections/slideshow.liquid
index 0b5738076a1..b8ad17f8417 100644
--- a/sections/slideshow.liquid
+++ b/sections/slideshow.liquid
@@ -281,7 +281,10 @@
   "tag": "section",
   "class": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
diff --git a/sections/video.liquid b/sections/video.liquid
index 17b14532c9c..3df8f7c3527 100644
--- a/sections/video.liquid
+++ b/sections/video.liquid
@@ -154,7 +154,10 @@
   "tag": "section",
   "class": "section",
   "disabled_on": {
-    "groups": ["header", "footer"]
+    "groups": [
+      "header",
+      "footer"
+    ]
   },
   "settings": [
     {
@@ -209,7 +212,10 @@
     {
       "type": "video_url",
       "id": "video_url",
-      "accept": ["youtube", "vimeo"],
+      "accept": [
+        "youtube",
+        "vimeo"
+      ],
       "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
       "label": "t:sections.video.settings.video_url.label",
       "info": "t:sections.video.settings.video_url.info"
diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
index 3af179ac13b..453a4a386cc 100644
--- a/snippets/product-variant-options.liquid
+++ b/snippets/product-variant-options.liquid
@@ -67,21 +67,35 @@
   {%- endcapture %}
 
   {%- if picker_type == 'swatch' -%}
-    {% assign checked = false %}
-    {% if option.selected_value == value %}
-      {% assign checked = true %}
-    {% endif %}
-    {%
-      render 'swatch-input',
-      id: input_id,
-      name: option.name,
-      value: value | escape,
-      product_form_id: product_form_id,
-      checked: checked,
-      disabled: option_disabled,
-      shape: block.settings.swatch_shape,
-      help_text: label_unavailable
+    {% liquid
+      assign checked = false
+
+      if option.selected_value == value
+        assign checked = true
+      endif
+
+      assign value_text = value | escape
     %}
+    <input
+      type="radio"
+      id="{{ input_id }}"
+      name="{{ option.name }}"
+      value="{{ value_text }}"
+      form="{{ product_form_id }}"
+      class="swatch-input__input{% if option_disabled %} disabled{% endif %}"
+      {% if checked %}
+        checked
+      {% endif %}
+    >
+    <label
+      for="{{ input_id }}"
+      title="{{ value_text }}"
+      class="swatch-input__label{% if block.settings.swatch_shape == 'square' %} swatch-input__label--square{% endif %}"
+    >
+      {% render 'swatch', swatch: value.swatch, shape: block.settings.swatch_shape %}
+      <span class="visually-hidden">{{ value_text }}</span>
+      {{ label_unavailable }}
+    </label>
   {%- elsif picker_type == 'button' -%}
     <input
       type="radio"
diff --git a/snippets/swatch-input.liquid b/snippets/swatch-input.liquid
deleted file mode 100644
index c1d6907fdb3..00000000000
--- a/snippets/swatch-input.liquid
+++ /dev/null
@@ -1,45 +0,0 @@
-{% comment %}
-  Renders a swatch input component.
-  Accepts:
-  - id: {String} unique input id
-  - name: {String} input name,
-  - value: {ProductOptionValueDrop} input value,
-  - product_form_id: {String} id of the form associted with the input
-  - checked: {Boolean} default checked status
-  - disabled: {Boolean} default disabled status
-  - shape: {String} swatch shape. Accepts 'square', defaults to circle.
-  - help_text: {String} additional content to render inside the label
-
-  Usage:
-   {% render 'swatch-input',
-      id: input_id,
-      name: input_name,
-      value: input_value,
-      product_form_id: product_form_id,
-      checked: checked,
-      disabled: disabled,
-      shape: 'square'
-      help_text: 'help text'
-    %}
-{% endcomment %}
-
-<input
-  type="radio"
-  id="{{ id }}"
-  name="{{ name }}"
-  value="{{ value }}"
-  form="{{ product_form_id }}"
-  class="swatch-input__input{% if disabled %} disabled{% endif %}"
-  {% if checked %}
-    checked
-  {% endif %}
->
-<label
-  for="{{ id }}"
-  title="{{ value }}"
-  class="swatch-input__label{% if shape == 'square' %} swatch-input__label--square{% endif %}"
->
-  {% render 'swatch', swatch: value.swatch, shape: shape %}
-  <span class="visually-hidden">{{ value }}</span>
-  {{ help_text }}
-</label>
diff --git a/templates/gift_card.liquid b/templates/gift_card.liquid
index 4a2838a1069..652f4ac8fcf 100644
--- a/templates/gift_card.liquid
+++ b/templates/gift_card.liquid
@@ -92,10 +92,14 @@
     {% endstyle %}
 
     {%- unless settings.type_body_font.system? -%}
+      {% comment %}theme-check-disable AssetPreload{% endcomment %}
       <link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
+      {% comment %}theme-check-enable AssetPreload{% endcomment %}
     {%- endunless -%}
     {%- unless settings.type_header_font.system? -%}
+      {% comment %}theme-check-disable AssetPreload{% endcomment %}
       <link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
+      {% comment %}theme-check-enable AssetPreload{% endcomment %}
     {%- endunless -%}
 
     {{ 'template-giftcard.css' | asset_url | stylesheet_tag }}
@@ -135,6 +139,7 @@
             alt=""
             height="{{ 570 | divided_by: 1.5 }}"
             width="570"
+            loading="eager"
           >
         {%- endif %}
       </div>