From 1b0a538fc3f0d54d9251b5d4b1c16ca91eed3e26 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Wed, 8 May 2024 13:51:30 -0600
Subject: [PATCH 01/11] fix: :pencil2: rename function naming typo

---
 assets/product-info.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/product-info.js b/assets/product-info.js
index 1fa35239125..e38e8da7974 100644
--- a/assets/product-info.js
+++ b/assets/product-info.js
@@ -16,7 +16,7 @@ if (!customElements.get('product-info')) {
         if (!this.input) return;
         this.quantityForm = this.querySelector('.product-form__quantity');
         if (!this.quantityForm) return;
-        this.setQuantityBoundries();
+        this.setQuantityBoundaries();
         if (!this.dataset.originalSection) {
           this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, this.fetchQuantityRules.bind(this));
         }
@@ -24,7 +24,7 @@ if (!customElements.get('product-info')) {
           const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section;
           if (event.data.sectionId !== sectionId) return;
           this.updateQuantityRules(event.data.sectionId, event.data.html);
-          this.setQuantityBoundries();
+          this.setQuantityBoundaries();
         });
       }
 
@@ -37,7 +37,7 @@ if (!customElements.get('product-info')) {
         }
       }
 
-      setQuantityBoundries() {
+      setQuantityBoundaries() {
         const data = {
           cartQuantity: this.input.dataset.cartQuantity ? parseInt(this.input.dataset.cartQuantity) : 0,
           min: this.input.dataset.min ? parseInt(this.input.dataset.min) : 1,
@@ -70,7 +70,7 @@ if (!customElements.get('product-info')) {
           .then((responseText) => {
             const html = new DOMParser().parseFromString(responseText, 'text/html');
             this.updateQuantityRules(this.dataset.section, html);
-            this.setQuantityBoundries();
+            this.setQuantityBoundaries();
           })
           .catch((e) => {
             console.error(e);

From 9e2a4f0dfe5f865f657ea4aba8500ddffe68b9fa Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Thu, 9 May 2024 09:26:17 -0600
Subject: [PATCH 02/11] feat: :sparkles: initial auto variant disable

TODO: When no variant is selected, the selected options still show the first value as selected
---
 locales/en.default.schema.json          |  4 ++++
 sections/featured-product.liquid        |  7 +++++++
 sections/main-product.liquid            | 20 +++++++++++++++++---
 snippets/buy-buttons.liquid             | 24 ++++++++++++++++--------
 snippets/product-variant-options.liquid | 10 +++++++---
 snippets/product-variant-picker.liquid  |  1 +
 6 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index 0957b3a22d3..1514cec3629 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -2415,6 +2415,10 @@
         "hide_variants": {
           "label": "Hide other variants’ media after selecting a variant"
         },
+        "auto_select_variant": {
+          "label": "Auto-select first available variant?",
+          "info": "If enabled, the first available variant will be selected by default."
+        },
         "enable_video_looping": {
           "label": "Enable video looping"
         }
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 3c31b962d02..693c6752b83 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -1450,6 +1450,13 @@
       "default": false,
       "label": "t:sections.main-product.settings.hide_variants.label"
     },
+    {
+      "id": "auto_select_variant",
+      "label": "t:sections.main-product.settings.auto_select_variant.label",
+      "type": "checkbox",
+      "default": true,
+      "info": "t:sections.main-product.settings.auto_select_variant.info"
+    },
     {
       "type": "checkbox",
       "id": "enable_video_looping",
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index e57d05f1b72..2dc965ae270 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -66,7 +66,14 @@
     >
   {%- endif -%}
 
-  {% assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' %}
+  {% liquid
+    assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
+    assign selected_variant = product.selected_variant
+    if section.settings.auto_select_variant or product.variants.size == 1
+      assign selected_variant = product.selected_or_first_available_variant
+    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">
@@ -191,7 +198,7 @@
                     {{ product.description }}
                   </div>
                 {%- endif -%}
-              {%- when 'sku' -%}
+              {%- when 'sku' and selected_variant -%}
                 <p
                   class="product__sku{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.sku.size == 0 %} visibility-hidden{% endif %}"
                   id="Sku-{{ section.id }}"
@@ -199,7 +206,7 @@
                   {{ block.shopify_attributes }}
                 >
                   <span class="visually-hidden">{{ 'products.product.sku' | t }}:</span>
-                  {{- product.selected_or_first_available_variant.sku -}}
+                  {{- selected_variant.sku -}}
                 </p>
               {%- when 'custom_liquid' -%}
                 {{ block.settings.custom_liquid }}
@@ -2247,6 +2254,13 @@
       "default": false,
       "label": "t:sections.main-product.settings.hide_variants.label"
     },
+    {
+      "id": "auto_select_variant",
+      "label": "t:sections.main-product.settings.auto_select_variant.label",
+      "type": "checkbox",
+      "default": true,
+      "info": "t:sections.main-product.settings.auto_select_variant.info"
+    },
     {
       "type": "checkbox",
       "id": "enable_video_looping",
diff --git a/snippets/buy-buttons.liquid b/snippets/buy-buttons.liquid
index 1cb004a8974..6d4e338e2fd 100644
--- a/snippets/buy-buttons.liquid
+++ b/snippets/buy-buttons.liquid
@@ -10,6 +10,14 @@
   Usage:
   {% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true %}
 {% endcomment %}
+
+{% liquid
+  assign selected_variant = product.selected_variant
+  if section.settings.auto_select_variant or product.variants.size == 1
+    assign selected_variant = product.selected_or_first_available_variant
+  endif
+%}
+
 <div {{ block.shopify_attributes }}>
   {%- if product != blank -%}
     {%- liquid
@@ -54,8 +62,8 @@
         <input
           type="hidden"
           name="id"
-          value="{{ product.selected_or_first_available_variant.id }}"
-          {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
+          value="{{ selected_variant.id }}"
+          {% if selected_variant.available == false or quantity_rule_soldout %}
             disabled
           {% endif %}
           class="product-variant-id"
@@ -68,10 +76,10 @@
         <div class="product-form__buttons">
           {%- liquid
             assign check_against_inventory = true
-            if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
+            if selected_variant.inventory_management != 'shopify' or selected_variant.inventory_policy == 'continue'
               assign check_against_inventory = false
             endif
-            if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
+            if selected_variant.quantity_rule.min > selected_variant.inventory_quantity and check_against_inventory
               assign quantity_rule_soldout = true
             endif
           -%}
@@ -80,12 +88,12 @@
             type="submit"
             name="add"
             class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
-            {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
+            {% if selected_variant.available == false or quantity_rule_soldout or selected_variant == blank %}
               disabled
             {% endif %}
           >
             <span>
-              {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
+              {%- if selected_variant.available == false or quantity_rule_soldout -%}
                 {{ 'products.product.sold_out' | t }}
               {%- else -%}
                 {{ 'products.product.add_to_cart' | t }}
@@ -117,13 +125,13 @@
   {%- if show_pickup_availability -%}
     {{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}
 
-    {%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities
+    {%- assign pick_up_availabilities = selected_variant.store_availabilities
       | where: 'pick_up_enabled', true
     -%}
 
     <pickup-availability
       class="product__pickup-availabilities quick-add-hidden"
-      {% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %}
+      {% if selected_variant.available and pick_up_availabilities.size > 0 %}
         available
       {% endif %}
       data-root-url="{{ routes.root_url }}"
diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
index 67def0ec294..fb594bf6634 100644
--- a/snippets/product-variant-options.liquid
+++ b/snippets/product-variant-options.liquid
@@ -7,7 +7,6 @@
   - block: {Object} block object.
   - picker_type: {String} type of picker to dispay
 
-
   Usage:
   {% render 'product-variant-options',
     product: product,
@@ -29,6 +28,11 @@
   {%- liquid
     assign option_disabled = true
 
+    assign selected_variant = product.selected_variant
+    if section.settings.auto_select_variant or product.variants.size == 1
+      assign selected_variant = product.selected_or_first_available_variant
+    endif
+
     for option1_name in variants_option1_arr
       case option.position
         when 1
@@ -36,11 +40,11 @@
             assign option_disabled = false
           endif
         when 2
-          if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
+          if option1_name == selected_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
             assign option_disabled = false
           endif
         when 3
-          if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
+          if option1_name == selected_variant.option1 and variants_option2_arr[forloop.index0] == selected_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
             assign option_disabled = false
           endif
       endcase
diff --git a/snippets/product-variant-picker.liquid b/snippets/product-variant-picker.liquid
index 0ef83da1d22..bfe8c0ca5ba 100644
--- a/snippets/product-variant-picker.liquid
+++ b/snippets/product-variant-picker.liquid
@@ -6,6 +6,7 @@
   - block: {Object} passing the block information.
   - product_form_id: {String} Id of the product form to which the variant picker is associated.
   - update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
+
   Usage:
   {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
 {% endcomment %}

From 126245cad7495f8c272d727a46326d328e97d389 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Thu, 9 May 2024 11:04:56 -0600
Subject: [PATCH 03/11] feat: :sparkles: use `selected_variant` on product page

---
 sections/main-product.liquid            | 74 ++++++++++++-------------
 snippets/product-variant-options.liquid |  6 +-
 2 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 2dc965ae270..faa262086f6 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -133,7 +133,7 @@
                 <div {{ block.shopify_attributes }}>
                   {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
                   {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
-                    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+                    <input type="hidden" name="id" value="{{ selected_variant.id }}">
                     {{ form | payment_terms }}
                   {%- endform -%}
                 </div>
@@ -144,9 +144,9 @@
                   id="Inventory-{{ section.id }}"
                   role="status"
                 >
-                  {%- if product.selected_or_first_available_variant.inventory_management == 'shopify' -%}
-                    {%- if product.selected_or_first_available_variant.inventory_quantity > 0 -%}
-                      {%- if product.selected_or_first_available_variant.inventory_quantity
+                  {%- if selected_variant.inventory_management == 'shopify' -%}
+                    {%- if selected_variant.inventory_quantity > 0 -%}
+                      {%- if selected_variant.inventory_quantity
                           <= block.settings.inventory_threshold
                       -%}
                         <svg width="15" height="15" aria-hidden="true">
@@ -156,7 +156,7 @@
                         {%- if block.settings.show_inventory_quantity -%}
                           {{-
                             'products.product.inventory_low_stock_show_count'
-                            | t: quantity: product.selected_or_first_available_variant.inventory_quantity
+                            | t: quantity: selected_variant.inventory_quantity
                           -}}
                         {%- else -%}
                           {{- 'products.product.inventory_low_stock' | t -}}
@@ -169,14 +169,14 @@
                         {%- if block.settings.show_inventory_quantity -%}
                           {{-
                             'products.product.inventory_in_stock_show_count'
-                            | t: quantity: product.selected_or_first_available_variant.inventory_quantity
+                            | t: quantity: selected_variant.inventory_quantity
                           -}}
                         {%- else -%}
                           {{- 'products.product.inventory_in_stock' | t -}}
                         {%- endif -%}
                       {%- endif -%}
                     {%- else -%}
-                      {%- if product.selected_or_first_available_variant.inventory_policy == 'continue' -%}
+                      {%- if selected_variant.inventory_policy == 'continue' -%}
                         <svg width="15" height="15" aria-hidden="true">
                           <circle cx="7.5" cy="7.5" r="7.5" fill="rgb(62,214,96, 0.3)"/>
                           <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(62,214,96)"/>
@@ -200,7 +200,7 @@
                 {%- endif -%}
               {%- when 'sku' and selected_variant -%}
                 <p
-                  class="product__sku{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.sku.size == 0 %} visibility-hidden{% endif %}"
+                  class="product__sku{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if selected_variant.sku.size == 0 %} visibility-hidden{% endif %}"
                   id="Sku-{{ section.id }}"
                   role="status"
                   {{ block.shopify_attributes }}
@@ -237,7 +237,7 @@
                   {% comment %} TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter {% endcomment %}
                   {% # theme-check-disable %}
                   {%- assign cart_qty = cart
-                    | item_count_for_variant: product.selected_or_first_available_variant.id
+                    | item_count_for_variant: selected_variant.id
                   -%}
                   {% # theme-check-enable %}
                   <label class="quantity__label form__label" for="Quantity-{{ section.id }}">
@@ -265,14 +265,14 @@
                         name="quantity"
                         id="Quantity-{{ section.id }}"
                         data-cart-quantity="{{ cart_qty }}"
-                        data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
-                        min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
-                        {% if product.selected_or_first_available_variant.quantity_rule.max != null %}
-                          data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
-                          max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
+                        data-min="{{ selected_variant.quantity_rule.min }}"
+                        min="{{ selected_variant.quantity_rule.min }}"
+                        {% if selected_variant.quantity_rule.max != null %}
+                          data-max="{{ selected_variant.quantity_rule.max }}"
+                          max="{{ selected_variant.quantity_rule.max }}"
                         {% endif %}
-                        step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"
-                        value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
+                        step="{{ selected_variant.quantity_rule.increment }}"
+                        value="{{ selected_variant.quantity_rule.min }}"
                         form="{{ product_form_id }}"
                       >
                       <button class="quantity__button" name="plus" type="button">
@@ -283,20 +283,20 @@
                       </button>
                     </quantity-input>
                     {%- liquid
-                      assign volume_pricing_array = product.selected_or_first_available_variant.quantity_price_breaks | sort: 'quantity' | reverse
-                      assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.min
+                      assign volume_pricing_array = selected_variant.quantity_price_breaks | sort: 'quantity' | reverse
+                      assign current_qty_for_volume_pricing = cart_qty | plus: selected_variant.quantity_rule.min
                       if cart_qty > 0
-                        assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.increment
+                        assign current_qty_for_volume_pricing = cart_qty | plus: selected_variant.quantity_rule.increment
                       endif
                     -%}
                     {%- if product.quantity_price_breaks_configured? -%}
                       <price-per-item
                         id="Price-Per-Item-{{ section.id }}"
                         data-section-id="{{ section.id }}"
-                        data-variant-id="{{ product.selected_or_first_available_variant.id }}"
+                        data-variant-id="{{ selected_variant.id }}"
                       >
-                        {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
-                          {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
+                        {%- if selected_variant.quantity_price_breaks.size > 0 -%}
+                          {%- assign variant_price_compare = selected_variant.compare_at_price -%}
                           <div class="price-per-item">
                             {%- if variant_price_compare -%}
                               <dl class="price-per-item--current">
@@ -311,7 +311,7 @@
                               </dl>
                             {%- endif -%}
                             {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
-                              {%- assign variant_price = product.selected_or_first_available_variant.price
+                              {%- assign variant_price = selected_variant.price
                                 | money_with_currency
                               -%}
                               <span class="price-per-item--current">
@@ -333,10 +333,10 @@
                             {%- endif -%}
                           </div>
                         {%- else -%}
-                          {%- assign variant_price = product.selected_or_first_available_variant.price
+                          {%- assign variant_price = selected_variant.price
                             | money_with_currency
                           -%}
-                          {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
+                          {%- assign variant_price_compare = selected_variant.compare_at_price -%}
                           <div class="price-per-item">
                             {%- if variant_price_compare -%}
                               <dl class="price-per-item--current">
@@ -368,46 +368,46 @@
                     {%- endif -%}
                   </div>
                   <div class="quantity__rules caption" id="Quantity-Rules-{{ section.id }}">
-                    {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
+                    {%- if selected_variant.quantity_rule.increment > 1 -%}
                       <span class="divider">
                         {{-
                           'products.product.quantity.multiples_of'
-                          | t: quantity: product.selected_or_first_available_variant.quantity_rule.increment
+                          | t: quantity: selected_variant.quantity_rule.increment
                         -}}
                       </span>
                     {%- endif -%}
-                    {%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
+                    {%- if selected_variant.quantity_rule.min > 1 -%}
                       <span class="divider">
                         {{-
                           'products.product.quantity.minimum_of'
-                          | t: quantity: product.selected_or_first_available_variant.quantity_rule.min
+                          | t: quantity: selected_variant.quantity_rule.min
                         -}}
                       </span>
                     {%- endif -%}
-                    {%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
+                    {%- if selected_variant.quantity_rule.max != null -%}
                       <span class="divider">
                         {{-
                           'products.product.quantity.maximum_of'
-                          | t: quantity: product.selected_or_first_available_variant.quantity_rule.max
+                          | t: quantity: selected_variant.quantity_rule.max
                         -}}
                       </span>
                     {%- endif -%}
                   </div>
                   {%- if product.quantity_price_breaks_configured? -%}
                     <volume-pricing class="parent-display" id="Volume-{{ section.id }}">
-                      {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
+                      {%- if selected_variant.quantity_price_breaks.size > 0 -%}
                         <span class="caption-large">{{ 'products.product.volume_pricing.title' | t }}</span>
                         <ul class="list-unstyled">
                           <li>
-                            <span>{{ product.selected_or_first_available_variant.quantity_rule.min }}+</span>
-                            {%- assign price = product.selected_or_first_available_variant.price
+                            <span>{{ selected_variant.quantity_rule.min }}+</span>
+                            {%- assign price = selected_variant.price
                               | money_with_currency
                             -%}
                             <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}">
                               {{- 'sections.quick_order_list.each' | t: money: price -}}
                             </span>
                           </li>
-                          {%- for price_break in product.selected_or_first_available_variant.quantity_price_breaks -%}
+                          {%- for price_break in selected_variant.quantity_price_breaks -%}
                             {%- assign price_break_price = price_break.price | money_with_currency -%}
                             <li class="{%- if forloop.index >= 3 -%}show-more-item hidden{%- endif -%}">
                               <span>
@@ -420,7 +420,7 @@
                             </li>
                           {%- endfor -%}
                         </ul>
-                        {%- if product.selected_or_first_available_variant.quantity_price_breaks.size >= 3 -%}
+                        {%- if selected_variant.quantity_price_breaks.size >= 3 -%}
                           <show-more-button>
                             <button
                               class="button-show-more link underlined-link"
@@ -454,7 +454,7 @@
                 </modal-opener>
               {%- when 'share' -%}
                 {% liquid
-                  assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin
+                  assign share_url = selected_variant.url | default: product.url | prepend: request.origin
                   render 'share-button', block: block, share_link: share_url
                 %}
 
diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
index fb594bf6634..72d9df52f1c 100644
--- a/snippets/product-variant-options.liquid
+++ b/snippets/product-variant-options.liquid
@@ -75,7 +75,7 @@
   {%- if picker_type == 'swatch' -%}
     {% liquid
       assign checked = false
-      if option.selected_value == value
+      if selected_varianr and option.selected_value == value
         assign checked = true
       endif
     %}
@@ -102,7 +102,7 @@
       name="{{ option.name }}"
       value="{{ value | escape }}"
       form="{{ product_form_id }}"
-      {% if option.selected_value == value %}
+      {% if selected_variant and option.selected_value == value %}
         checked
       {% endif %}
       {% if option_disabled %}
@@ -116,7 +116,7 @@
   {%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
     <option
       value="{{ value | escape }}"
-      {% if option.selected_value == value %}
+      {% if selected_variant and option.selected_value == value %}
         selected="selected"
       {% endif %}
       {% if swatch_value and picker_type == 'swatch_dropdown' %}

From 783f17943a59e2aac2ce82a9ea68a2881775ef8d Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Thu, 9 May 2024 13:36:37 -0600
Subject: [PATCH 04/11] feat: :sparkles: add auto variant toggle to featured
 product

---
 sections/featured-product.liquid | 70 +++++++++++++++++---------------
 sections/main-product.liquid     |  2 +-
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 693c6752b83..42f3296f5db 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -31,6 +31,12 @@
 
 {%- liquid
   assign product = section.settings.product
+
+  assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
+  assign selected_variant = product.selected_variant
+  if section.settings.auto_select_variant or product.variants.size == 1
+    assign selected_variant = product.selected_or_first_available_variant
+  endif
 -%}
 
 {% comment %} TODO: assign `product.selected_or_first_available_variant` to variable and replace usage to reduce verbosity {% endcomment %}
@@ -54,8 +60,6 @@
   >
 {%- endif -%}
 
-{% assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' %}
-
 <section class="color-{{ section.settings.color_scheme }} {% if section.settings.secondary_background %}background-secondary{% else %}gradient{% endif %}">
   <div class="page-width section-{{ section.id }}-padding{% if section.settings.secondary_background %} isolate{% endif %}">
     <div class="featured-product product product--{{ section.settings.media_size }} grid grid--1-col gradient color-{{ section.settings.color_scheme }} product--{{ section.settings.media_position }}{% if section.settings.secondary_background == false %} isolate{% endif %} {% if product.media.size > 0 or section.settings.product == blank %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
@@ -128,20 +132,20 @@
                 {%- if product != blank -%}
                   <div {{ block.shopify_attributes }}>
                     {%- form 'product', product -%}
-                      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+                      <input type="hidden" name="id" value="{{ selected_variant.id }}">
                       {{ form | payment_terms }}
                     {%- endform -%}
                   </div>
                 {%- endif -%}
               {%- when 'sku' -%}
                 <p
-                  class="product__sku{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.sku.size == 0 %} visibility-hidden{% endif %}"
+                  class="product__sku{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if selected_variant.sku.size == 0 %} visibility-hidden{% endif %}"
                   id="Sku-{{ section.id }}"
                   role="status"
                   {{ block.shopify_attributes }}
                 >
                   <span class="visually-hidden">{{ 'products.product.sku' | t }}:</span>
-                  {{- product.selected_or_first_available_variant.sku -}}
+                  {{- selected_variant.sku -}}
                 </p>
               {%- when 'quantity_selector' -%}
                 <div
@@ -152,7 +156,7 @@
                   {% comment %} TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter {% endcomment %}
                   {% # theme-check-disable %}
                   {%- assign cart_qty = cart
-                    | item_count_for_variant: product.selected_or_first_available_variant.id
+                    | item_count_for_variant: selected_variant.id
                   -%}
                   {% # theme-check-enable %}
                   <label class="quantity__label form__label" for="Quantity-{{ section.id }}">
@@ -180,14 +184,14 @@
                         name="quantity"
                         id="Quantity-{{ section.id }}"
                         data-cart-quantity="{{ cart_qty }}"
-                        data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
-                        min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
-                        {% if product.selected_or_first_available_variant.quantity_rule.max != null %}
-                          data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
-                          max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
+                        data-min="{{ selected_variant.quantity_rule.min }}"
+                        min="{{ selected_variant.quantity_rule.min }}"
+                        {% if selected_variant.quantity_rule.max != null %}
+                          data-max="{{ selected_variant.quantity_rule.max }}"
+                          max="{{ selected_variant.quantity_rule.max }}"
                         {% endif %}
-                        step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"
-                        value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
+                        step="{{ selected_variant.quantity_rule.increment }}"
+                        value="{{ selected_variant.quantity_rule.min }}"
                         form="{{ product_form_id }}"
                       >
                       <button class="quantity__button" name="plus" type="button">
@@ -198,20 +202,20 @@
                       </button>
                     </quantity-input>
                     {%- liquid
-                      assign volume_pricing_array = product.selected_or_first_available_variant.quantity_price_breaks | sort: 'quantity' | reverse
-                      assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.min
+                      assign volume_pricing_array = selected_variant.quantity_price_breaks | sort: 'quantity' | reverse
+                      assign current_qty_for_volume_pricing = cart_qty | plus: selected_variant.quantity_rule.min
                       if cart_qty > 0
-                        assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.increment
+                        assign current_qty_for_volume_pricing = cart_qty | plus: selected_variant.quantity_rule.increment
                       endif
                     -%}
                     {%- if product.quantity_price_breaks_configured? -%}
                       <price-per-item
                         id="Price-Per-Item-{{ section.id }}"
                         data-section-id="{{ section.id }}"
-                        data-variant-id="{{ product.selected_or_first_available_variant.id }}"
+                        data-variant-id="{{ selected_variant.id }}"
                       >
-                        {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
-                          {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
+                        {%- if selected_variant.quantity_price_breaks.size > 0 -%}
+                          {%- assign variant_price_compare = selected_variant.compare_at_price -%}
                           <div class="price-per-item">
                             {%- if variant_price_compare -%}
                               <dl class="price-per-item--current">
@@ -226,7 +230,7 @@
                               </dl>
                             {%- endif -%}
                             {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
-                              {%- assign variant_price = product.selected_or_first_available_variant.price
+                              {%- assign variant_price = selected_variant.price
                                 | money_with_currency
                               -%}
                               <span class="price-per-item--current">
@@ -248,10 +252,10 @@
                             {%- endif -%}
                           </div>
                         {%- else -%}
-                          {%- assign variant_price = product.selected_or_first_available_variant.price
+                          {%- assign variant_price = selected_variant.price
                             | money_with_currency
                           -%}
-                          {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
+                          {%- assign variant_price_compare = selected_variant.compare_at_price -%}
                           <div class="price-per-item">
                             {%- if variant_price_compare -%}
                               <dl class="price-per-item--current">
@@ -283,46 +287,46 @@
                     {%- endif -%}
                   </div>
                   <div class="quantity__rules caption" id="Quantity-Rules-{{ section.id }}">
-                    {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
+                    {%- if selected_variant.quantity_rule.increment > 1 -%}
                       <span class="divider">
                         {{-
                           'products.product.quantity.multiples_of'
-                          | t: quantity: product.selected_or_first_available_variant.quantity_rule.increment
+                          | t: quantity: selected_variant.quantity_rule.increment
                         -}}
                       </span>
                     {%- endif -%}
-                    {%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
+                    {%- if selected_variant.quantity_rule.min > 1 -%}
                       <span class="divider">
                         {{-
                           'products.product.quantity.minimum_of'
-                          | t: quantity: product.selected_or_first_available_variant.quantity_rule.min
+                          | t: quantity: selected_variant.quantity_rule.min
                         -}}
                       </span>
                     {%- endif -%}
-                    {%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
+                    {%- if selected_variant.quantity_rule.max != null -%}
                       <span class="divider">
                         {{-
                           'products.product.quantity.maximum_of'
-                          | t: quantity: product.selected_or_first_available_variant.quantity_rule.max
+                          | t: quantity: selected_variant.quantity_rule.max
                         -}}
                       </span>
                     {%- endif -%}
                   </div>
                   {%- if product.quantity_price_breaks_configured? -%}
                     <volume-pricing class="parent-display" id="Volume-{{ section.id }}">
-                      {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
+                      {%- if selected_variant.quantity_price_breaks.size > 0 -%}
                         <span class="caption-large">{{ 'products.product.volume_pricing.title' | t }}</span>
                         <ul class="list-unstyled">
                           <li>
-                            <span>{{ product.selected_or_first_available_variant.quantity_rule.min }}+</span>
-                            {%- assign price = product.selected_or_first_available_variant.price
+                            <span>{{ selected_variant.quantity_rule.min }}+</span>
+                            {%- assign price = selected_variant.price
                               | money_with_currency
                             -%}
                             <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}">
                               {{ 'sections.quick_order_list.each' | t: money: price -}}
                             </span>
                           </li>
-                          {%- for price_break in product.selected_or_first_available_variant.quantity_price_breaks -%}
+                          {%- for price_break in selected_variant.quantity_price_breaks -%}
                             {%- assign price_break_price = price_break.price | money_with_currency -%}
                             <li class="{%- if forloop.index >= 3 -%}show-more-item hidden{%- endif -%}">
                               <span>
@@ -336,7 +340,7 @@
                             </li>
                           {%- endfor -%}
                         </ul>
-                        {%- if product.selected_or_first_available_variant.quantity_price_breaks.size >= 3 -%}
+                        {%- if selected_variant.quantity_price_breaks.size >= 3 -%}
                           <show-more-button>
                             <button
                               class="button-show-more link underlined-link"
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index faa262086f6..757879ba84b 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -198,7 +198,7 @@
                     {{ product.description }}
                   </div>
                 {%- endif -%}
-              {%- when 'sku' and selected_variant -%}
+              {%- when 'sku' -%}
                 <p
                   class="product__sku{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if selected_variant.sku.size == 0 %} visibility-hidden{% endif %}"
                   id="Sku-{{ section.id }}"

From f778205fc7219d91021a7cec26ba51366e4675be Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Thu, 9 May 2024 13:42:12 -0600
Subject: [PATCH 05/11] feat: :sparkles: show select options text when no
 variant selected

---
 snippets/buy-buttons.liquid | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/snippets/buy-buttons.liquid b/snippets/buy-buttons.liquid
index 6d4e338e2fd..82f585ff119 100644
--- a/snippets/buy-buttons.liquid
+++ b/snippets/buy-buttons.liquid
@@ -95,6 +95,8 @@
             <span>
               {%- if selected_variant.available == false or quantity_rule_soldout -%}
                 {{ 'products.product.sold_out' | t }}
+              {% elsif selected_variant == blank %}
+                {{ 'products.product.choose_options' | t }}
               {%- else -%}
                 {{ 'products.product.add_to_cart' | t }}
               {%- endif -%}

From c09564c008724e6bffc42f8d41a970a6a2e12ef5 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Fri, 10 May 2024 00:28:13 +0000
Subject: [PATCH 06/11] fix :bug: correct a typo

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

diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
index 72d9df52f1c..02adf936980 100644
--- a/snippets/product-variant-options.liquid
+++ b/snippets/product-variant-options.liquid
@@ -75,7 +75,7 @@
   {%- if picker_type == 'swatch' -%}
     {% liquid
       assign checked = false
-      if selected_varianr and option.selected_value == value
+      if selected_variant and option.selected_value == value
         assign checked = true
       endif
     %}

From eca054199acad47272f6e003308a417980d72ad8 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Fri, 10 May 2024 08:20:53 -0600
Subject: [PATCH 07/11] feat: :sparkles: Display unselected option name in add
 to cart button

---
 locales/en.default.json     | 1 +
 snippets/buy-buttons.liquid | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/locales/en.default.json b/locales/en.default.json
index 523714e5c47..58b46b7a49d 100644
--- a/locales/en.default.json
+++ b/locales/en.default.json
@@ -108,6 +108,7 @@
     "product": {
       "add_to_cart": "Add to cart",
       "choose_options": "Choose options",
+      "choose_option_named": "Choose {{ option_name }}",
       "choose_product_options": "Choose options for {{ product_name }}",
       "description": "Description",
       "inventory_in_stock": "In stock",
diff --git a/snippets/buy-buttons.liquid b/snippets/buy-buttons.liquid
index 82f585ff119..affe38deae9 100644
--- a/snippets/buy-buttons.liquid
+++ b/snippets/buy-buttons.liquid
@@ -96,7 +96,11 @@
               {%- if selected_variant.available == false or quantity_rule_soldout -%}
                 {{ 'products.product.sold_out' | t }}
               {% elsif selected_variant == blank %}
-                {{ 'products.product.choose_options' | t }}
+                {% if product.options.size == 1 %}
+                  {{ 'products.product.choose_option_named' | t: option_name: product.options_with_values.first.name }}
+                {% else %}
+                  {{ 'products.product.choose_options' | t }}
+                {% endif %}
               {%- else -%}
                 {{ 'products.product.add_to_cart' | t }}
               {%- endif -%}

From cbb3c6641295af4b7de1276c120740b23b1d3052 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Fri, 10 May 2024 09:52:45 -0600
Subject: [PATCH 08/11] feat: :sparkles: disable quantity input when no variant
 selected

---
 assets/global.js                 | 42 +++++++++++++++++++++++---------
 sections/featured-product.liquid |  1 +
 sections/main-product.liquid     |  1 +
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/assets/global.js b/assets/global.js
index 3ccdd967de9..85e6640ff99 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -156,27 +156,36 @@ class QuantityInput extends HTMLElement {
   constructor() {
     super();
     this.input = this.querySelector('input');
+    this.variantId = this.input.dataset.variantId;
     this.changeEvent = new Event('change', { bubbles: true });
     this.input.addEventListener('change', this.onInputChange.bind(this));
     this.querySelectorAll('button').forEach((button) =>
       button.addEventListener('click', this.onButtonClick.bind(this))
     );
+
+    this.buttonMinus = this.querySelector('.quantity__button[name="minus"]') || undefined;
+    this.buttonPlus = this.querySelector('.quantity__button[name="plus"]') || undefined;
   }
 
   quantityUpdateUnsubscriber = undefined;
+  variantUpdateUnsubscriber = undefined;
 
   connectedCallback() {
     this.validateQtyRules();
+    this.validateVariantSelection(this.variantId);
     this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this));
+    this.variantUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.variantChange, (event) => {
+      this.variantId = event.data.variant.id.toString();
+      this.validateVariantSelection(this.variantId);
+    });
   }
 
   disconnectedCallback() {
-    if (this.quantityUpdateUnsubscriber) {
-      this.quantityUpdateUnsubscriber();
-    }
+    this.quantityUpdateUnsubscriber?.();
+    this.variantUpdateUnsubscriber?.();
   }
 
-  onInputChange(event) {
+  onInputChange() {
     this.validateQtyRules();
   }
 
@@ -201,16 +210,28 @@ class QuantityInput extends HTMLElement {
     }
   }
 
+  validateVariantSelection(variantId) {
+    if (!variantId?.length) {
+      this.input.disabled = true;
+      this.buttonMinus?.classList.add('disabled');
+      this.buttonPlus?.classList.add('disabled');
+    } else {
+      this.validateQtyRules();
+      if (!this.input.max) {
+        this.buttonPlus?.classList.remove('disabled');
+      }
+      this.input.removeAttribute('disabled');
+    }
+  }
+
   validateQtyRules() {
     const value = parseInt(this.input.value);
     if (this.input.min) {
-      const buttonMinus = this.querySelector(".quantity__button[name='minus']");
-      buttonMinus.classList.toggle('disabled', parseInt(value) <= parseInt(this.input.min));
+      this.buttonMinus?.classList.toggle('disabled', parseInt(value) <= parseInt(this.input.min));
     }
     if (this.input.max) {
       const max = parseInt(this.input.max);
-      const buttonPlus = this.querySelector(".quantity__button[name='plus']");
-      buttonPlus.classList.toggle('disabled', value >= max);
+      this.buttonPlus?.classList.toggle('disabled', value >= max);
     }
   }
 }
@@ -948,7 +969,7 @@ class SlideshowComponent extends SliderComponent {
     const slideScrollPosition =
       this.slider.scrollLeft +
       this.sliderFirstItemNode.clientWidth *
-        (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage);
+      (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage);
     this.slider.scrollTo({
       left: slideScrollPosition,
     });
@@ -1172,8 +1193,7 @@ class VariantSelects extends HTMLElement {
     const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section;
 
     fetch(
-      `${this.dataset.url}?variant=${requestedVariantId}&section_id=${
-        this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section
+      `${this.dataset.url}?variant=${requestedVariantId}&section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section
       }`
     )
       .then((response) => response.text())
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 42f3296f5db..6286c62ac18 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -184,6 +184,7 @@
                         name="quantity"
                         id="Quantity-{{ section.id }}"
                         data-cart-quantity="{{ cart_qty }}"
+                        data-variant-id="{{ selected_variant.id }}"
                         data-min="{{ selected_variant.quantity_rule.min }}"
                         min="{{ selected_variant.quantity_rule.min }}"
                         {% if selected_variant.quantity_rule.max != null %}
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 757879ba84b..6aac7611acd 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -265,6 +265,7 @@
                         name="quantity"
                         id="Quantity-{{ section.id }}"
                         data-cart-quantity="{{ cart_qty }}"
+                        data-variant-id="{{ selected_variant.id }}"
                         data-min="{{ selected_variant.quantity_rule.min }}"
                         min="{{ selected_variant.quantity_rule.min }}"
                         {% if selected_variant.quantity_rule.max != null %}

From 64954e675c2f5f9bd84d2cb9208ac9e8c28dcc6d Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Fri, 10 May 2024 09:55:43 -0600
Subject: [PATCH 09/11] refactor: :recycle: rename to `auto_set_variant`

---
 locales/en.default.schema.json          | 2 +-
 sections/featured-product.liquid        | 8 ++++----
 sections/main-product.liquid            | 8 ++++----
 snippets/buy-buttons.liquid             | 2 +-
 snippets/product-variant-options.liquid | 2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index 1514cec3629..5641a878d9d 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -2415,7 +2415,7 @@
         "hide_variants": {
           "label": "Hide other variants’ media after selecting a variant"
         },
-        "auto_select_variant": {
+        "auto_set_variant": {
           "label": "Auto-select first available variant?",
           "info": "If enabled, the first available variant will be selected by default."
         },
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 6286c62ac18..799b1d5f38b 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -34,7 +34,7 @@
 
   assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
   assign selected_variant = product.selected_variant
-  if section.settings.auto_select_variant or product.variants.size == 1
+  if section.settings.auto_set_variant or product.variants.size == 1
     assign selected_variant = product.selected_or_first_available_variant
   endif
 -%}
@@ -1456,11 +1456,11 @@
       "label": "t:sections.main-product.settings.hide_variants.label"
     },
     {
-      "id": "auto_select_variant",
-      "label": "t:sections.main-product.settings.auto_select_variant.label",
+      "id": "auto_set_variant",
+      "label": "t:sections.main-product.settings.auto_set_variant.label",
       "type": "checkbox",
       "default": true,
-      "info": "t:sections.main-product.settings.auto_select_variant.info"
+      "info": "t:sections.main-product.settings.auto_set_variant.info"
     },
     {
       "type": "checkbox",
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 6aac7611acd..466f6e7fe0d 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -69,7 +69,7 @@
   {% liquid
     assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
     assign selected_variant = product.selected_variant
-    if section.settings.auto_select_variant or product.variants.size == 1
+    if section.settings.auto_set_variant or product.variants.size == 1
       assign selected_variant = product.selected_or_first_available_variant
     endif
   %}
@@ -2256,11 +2256,11 @@
       "label": "t:sections.main-product.settings.hide_variants.label"
     },
     {
-      "id": "auto_select_variant",
-      "label": "t:sections.main-product.settings.auto_select_variant.label",
+      "id": "auto_set_variant",
+      "label": "t:sections.main-product.settings.auto_set_variant.label",
       "type": "checkbox",
       "default": true,
-      "info": "t:sections.main-product.settings.auto_select_variant.info"
+      "info": "t:sections.main-product.settings.auto_set_variant.info"
     },
     {
       "type": "checkbox",
diff --git a/snippets/buy-buttons.liquid b/snippets/buy-buttons.liquid
index affe38deae9..c4c44ccda09 100644
--- a/snippets/buy-buttons.liquid
+++ b/snippets/buy-buttons.liquid
@@ -13,7 +13,7 @@
 
 {% liquid
   assign selected_variant = product.selected_variant
-  if section.settings.auto_select_variant or product.variants.size == 1
+  if section.settings.auto_set_variant or product.variants.size == 1
     assign selected_variant = product.selected_or_first_available_variant
   endif
 %}
diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
index 02adf936980..09a7822059e 100644
--- a/snippets/product-variant-options.liquid
+++ b/snippets/product-variant-options.liquid
@@ -29,7 +29,7 @@
     assign option_disabled = true
 
     assign selected_variant = product.selected_variant
-    if section.settings.auto_select_variant or product.variants.size == 1
+    if section.settings.auto_set_variant or product.variants.size == 1
       assign selected_variant = product.selected_or_first_available_variant
     endif
 

From fd800c8c2c5bdbbad303b6b583d5c8be4262f0fe Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Fri, 10 May 2024 10:56:18 -0600
Subject: [PATCH 10/11] refactor: :recycle: remove `?` `auto_set_variant`
 translation

---
 locales/en.default.schema.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index 5641a878d9d..5b5c460db83 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -2416,7 +2416,7 @@
           "label": "Hide other variants’ media after selecting a variant"
         },
         "auto_set_variant": {
-          "label": "Auto-select first available variant?",
+          "label": "Auto-select first available variant",
           "info": "If enabled, the first available variant will be selected by default."
         },
         "enable_video_looping": {

From 8ce8ff1afa518f175b58950c6db884daa1c6913f Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Fri, 10 May 2024 11:02:56 -0600
Subject: [PATCH 11/11] fix: :bug: quantity inputs broke elsewhere

---
 sections/main-cart-items.liquid | 1 +
 snippets/cart-drawer.liquid     | 1 +
 snippets/quantity-input.liquid  | 1 +
 3 files changed, 3 insertions(+)

diff --git a/sections/main-cart-items.liquid b/sections/main-cart-items.liquid
index 1eb3f480aad..53ef985368e 100644
--- a/sections/main-cart-items.liquid
+++ b/sections/main-cart-items.liquid
@@ -255,6 +255,7 @@
                                 value="{{ item.quantity }}"
                                 {% # theme-check-disable %}
                                 data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
+                                data-variant-id="{{ item.variant.id }}"
                                 min="0"
                                 data-min="{{ item.variant.quantity_rule.min }}"
                                 {% if item.variant.quantity_rule.max != null %}
diff --git a/snippets/cart-drawer.liquid b/snippets/cart-drawer.liquid
index 62533d38d99..5ddb00f844a 100644
--- a/snippets/cart-drawer.liquid
+++ b/snippets/cart-drawer.liquid
@@ -296,6 +296,7 @@
                                     value="{{ item.quantity }}"
                                     {% # theme-check-disable %}
                                     data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
+                                    data-variant-id="{{ item.variant.id }}"
                                     min="0"
                                     data-min="{{ item.variant.quantity_rule.min }}"
                                     {% if item.variant.quantity_rule.max != null %}
diff --git a/snippets/quantity-input.liquid b/snippets/quantity-input.liquid
index 73f9b2dbd32..818a7d185e1 100644
--- a/snippets/quantity-input.liquid
+++ b/snippets/quantity-input.liquid
@@ -25,6 +25,7 @@
     {% # theme-check-disable %}
     value="{{ cart | item_count_for_variant: variant.id }}"
     data-cart-quantity="{{ cart | item_count_for_variant: variant.id }}"
+    data-variant-id="{{ variant_id | default: variant.id }}"
     min="{{ min }}"
     data-min="{{ variant.quantity_rule.min }}"
     {% if variant.quantity_rule.max != null %}