St/predictive search lazyload

assets/header.js

@@ -192,7 +192,7 @@ class HeaderComponent extends Component {
       this.#observeStickyPosition(stickyMode === 'always');
 
       if (stickyMode === 'scroll-up' || stickyMode === 'always') {
-        document.addEventListener('scroll', this.#handleWindowScroll);
+        document.addEventListener('scroll', this.#handleWindowScroll, { passive: true });
       }
     }
   }

assets/localization.js

@@ -24,7 +24,7 @@ class LocalizationFormComponent extends Component {
 
     this.refs.search && this.refs.search.addEventListener('keydown', this.#onSearchKeyDown);
     this.refs.countryList && this.refs.countryList.addEventListener('keydown', this.#onContainerKeyDown);
-    this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll);
+    this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true });
 
     // Resizing the language input can be expensive for browsers that don't support field-sizing: content.
     // Spliting it into separate tasks at least helps when there are multiple localization forms on the page.
@@ -515,7 +515,7 @@ class DrawerLocalizationComponent extends Component {
     const countryList = localizationForm.querySelector('.country-selector-form__wrapper');
 
     if (target.open) {
-      if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll);
+      if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true });
       onAnimationEnd(target, localizationForm.focusSearchInput);
     } else {
       countryList?.removeEventListener('scroll', this.#onCountryListScroll);

assets/scrolling.js

@@ -89,7 +89,7 @@ export class Scroller {
     this.#onScrollEnd = options.onScrollEnd;
 
     this.element = element;
-    this.element.addEventListener('scroll', this.#handleScroll);
+    this.element.addEventListener('scroll', this.#handleScroll, { passive: true });
   }
 
   /**
@@ -342,25 +342,25 @@ export function scrollIntoView(element, { ancestor, behavior = 'smooth', block =
   const scrollTop =
     ancestor.scrollHeight > ancestor.clientHeight
       ? calculateScrollOffset(
-          block,
-          ancestorRect.top,
-          ancestor.clientHeight,
-          elemRect.top,
-          elemRect.height,
-          ancestor.scrollTop
-        )
+        block,
+        ancestorRect.top,
+        ancestor.clientHeight,
+        elemRect.top,
+        elemRect.height,
+        ancestor.scrollTop
+      )
       : ancestor.scrollTop;
 
   const scrollLeft =
     ancestor.scrollWidth > ancestor.clientWidth
       ? calculateScrollOffset(
-          inline,
-          ancestorRect.left,
-          ancestor.clientWidth,
-          elemRect.left,
-          elemRect.width,
-          ancestor.scrollLeft
-        )
+        inline,
+        ancestorRect.left,
+        ancestor.clientWidth,
+        elemRect.left,
+        elemRect.width,
+        ancestor.scrollLeft
+      )
       : ancestor.scrollLeft;
 
   ancestor.scrollTo({ top: scrollTop, left: scrollLeft, behavior });
@@ -372,7 +372,7 @@ class ScrollHint extends HTMLElement {
   #rafId = null;
 
   connectedCallback() {
-    this.addEventListener('scroll', this.#handleScroll);
+    this.addEventListener('scroll', this.#handleScroll, { passive: true });
     this.#resizeObserver.observe(this);
   }
 

assets/zoom-dialog.js

@@ -28,7 +28,7 @@ export class ZoomDialog extends Component {
 
   connectedCallback() {
     super.connectedCallback();
-    this.refs.dialog.addEventListener('scroll', this.handleScroll);
+    this.refs.dialog.addEventListener('scroll', this.handleScroll, { passive: true });
   }
 
   disconnectedCallback() {
@@ -275,7 +275,7 @@ function getMostVisibleElement(elements) {
           current.intersectionRatio > prev.intersectionRatio ? current : prev
         );
         observer.disconnect();
-        resolve(/** @type {HTMLElement} */ (mostVisible.target));
+        resolve(/** @type {HTMLElement} */(mostVisible.target));
       },
       {
         threshold: Array.from({ length: 100 }, (_, i) => i / 100),

config/settings_schema.json

@@ -1403,6 +1403,13 @@
         "label": "t:settings.add_to_cart_animation",
         "default": true
       },
+      {
+        "type": "checkbox",
+        "id": "disable_animations_mobile",
+        "label": "Disable animations on mobile",
+        "info": "Improves performance by disabling scroll reveals and page transitions on small screens.",
+        "default": true
+      },
       {
         "type": "select",
         "id": "card_hover_effect",

layout/theme.liquid

@@ -38,7 +38,7 @@
     {{ content_for_header }}
   </head>
 
-  <body class="page-width-{{ settings.page_width }} card-hover-effect-{{ settings.card_hover_effect }}">
+  <body class="page-width-{{ settings.page_width }} card-hover-effect-{{ settings.card_hover_effect }}{% if settings.disable_animations_mobile %} animations-disabled-mobile{% endif %}">
     {% render 'skip-to-content-link', href: '#MainContent', text: 'accessibility.skip_to_text' %}
     <div id="header-group">
       {% sections 'header-group' %}

sections/hero.liquid

@@ -102,7 +102,7 @@
   assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
   assign widths = '832, 1200, 1600, 1920, 2560, 3840'
   assign sizes_mobile = media_width_mobile
-  assign mobile_widths = '416, 600, 800, 1200, 1600'
+  assign mobile_widths = '165, 360, 535, 750, 1070, 1500'
   assign mobile_widths_array = mobile_widths | split: ', '
 
   assign fetch_priority = 'auto'

snippets/card-gallery.liquid

@@ -11,7 +11,7 @@
 {% liquid
   assign product = closest.product
   assign block_settings = block.settings
-  assign image_sizes = '(min-width: 750px) 50vw, 100vw'
+  assign image_sizes = '(min-width: 750px) 50vw, 50vw'
 
   # Check if product has badges and determine position
   assign has_badges = false
@@ -39,7 +39,7 @@
     assign image_sizes = sizes_attribute | strip
   elsif section.settings.columns and section.settings.layout_type != 'editorial'
     assign viewport_width = 100.0 | divided_by: section.settings.columns
-    assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 100vw' | replace: '[viewport_width]', viewport_width
+    assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 50vw' | replace: '[viewport_width]', viewport_width
     assign image_sizes = sizes_attribute | strip
   endif
 

snippets/product-media.liquid

@@ -18,7 +18,7 @@
 {%- enddoc -%}
 
 {% liquid
-  assign widths = widths | default: '240, 352, 832, 1200, 1600, 1920, 2560, 3840'
+  assign widths = widths | default: '165, 360, 535, 750, 1070, 1500, 1920, 2560, 3840'
   assign ref_image_to_transition = ''
   if settings.transition_to_main_product
     assign ref_image_to_transition = 'imagesToTransition[]'

snippets/resource-card.liquid

@@ -18,7 +18,7 @@
     assign ratio = image_aspect_ratio
   endif
   assign image_width = image_width | default: 1200
-  assign widths = '240, 352, 832, 1200'
+  assign widths = '165, 360, 535, 750, 1070, 1500'
   assign image_sizes = image_sizes | default: 'auto'
   assign single_thumbnail_collection = false
   if resource_type == 'collection' and collection_thumbnails != 'multiple'

snippets/search-modal.liquid

@@ -3,12 +3,6 @@
   type="module"
 ></script>
 
-<script
-  src="{{ 'predictive-search.js' | asset_url }}"
-  type="module"
-  fetchpriority="low"
-></script>
-
 <dialog-component
   id="search-modal"
   class="search-modal"
@@ -126,10 +120,55 @@
           </div>
         </div>
       </form>
-    </predictive-search-component>
-  </dialog>
 </dialog-component>
 
+<script>
+  (function() {
+    let predictiveSearchLoaded = false;
+    const url = "{{ 'predictive-search.js' | asset_url }}";
+
+    function loadPredictiveSearch() {
+      if (predictiveSearchLoaded) return;
+      predictiveSearchLoaded = true;
+      const script = document.createElement('script');
+      script.src = url;
+      script.type = 'module';
+      document.body.appendChild(script);
+
+      // Clean up listeners
+      removeListeners();
+    }
+
+    function addListeners() {
+      const triggers = document.querySelectorAll('.search-action, #search-modal, .search-input, .predictive-search__search-button');
+      triggers.forEach(trigger => {
+        trigger.addEventListener('mouseover', loadPredictiveSearch, { once: true });
+        trigger.addEventListener('focus', loadPredictiveSearch, { once: true });
+        trigger.addEventListener('touchstart', loadPredictiveSearch, { once: true, passive: true });
+        trigger.addEventListener('click', loadPredictiveSearch, { once: true });
+      });
+    }
+
+    function removeListeners() {
+      const triggers = document.querySelectorAll('.search-action, #search-modal, .search-input, .predictive-search__search-button');
+      triggers.forEach(trigger => {
+        trigger.removeEventListener('mouseover', loadPredictiveSearch);
+        trigger.removeEventListener('focus', loadPredictiveSearch);
+        trigger.removeEventListener('touchstart', loadPredictiveSearch);
+        trigger.removeEventListener('click', loadPredictiveSearch);
+      });
+    }
+
+    addListeners();
+    // Also bind to any new search actions that might be injected (like cart drawers or predictive search triggers)
+    document.addEventListener('mouseover', function(e) {
+      if (!predictiveSearchLoaded && e.target.closest && (e.target.closest('.search-action') || e.target.closest('.search-input') || e.target.closest('#search-modal'))) {
+        loadPredictiveSearch();
+      }
+    });
+  })();
+</script>
+
 {% stylesheet %}
   /* Search modal style */
   .search-modal {

snippets/util-autofill-img-size-attr.liquid

@@ -66,7 +66,7 @@
   endif
   assign sizes_attr = sizes_attr | append: '(min-width: ' | append: min_breakpoint | append: 'px) 50vw'
 
-  assign sizes_attr = sizes_attr | append: ', 100vw'
+  assign sizes_attr = sizes_attr | append: ', 50vw'
 
   # Echo the sizes attribute
   echo sizes_attr

snippets/util-product-media-sizes-attr.liquid

@@ -50,16 +50,16 @@
   if calculate_single_column
     # Default for carousel or single column grid (or first image in large_first_image mode)
     if section.settings.equal_columns == false
-      assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), 100vw' | replace: '[gap_half]', gap_half
+      assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half
     else
-      assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), 100vw' | replace: '[gap_half]', gap_half
+      assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half
     endif
   else
     # Default for two column grid - includes image gap and quarter section gap
     if section.settings.equal_columns == false
-      assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
+      assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
     else
-      assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
+      assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
     endif
   endif
 
@@ -116,7 +116,7 @@
       else
         assign medium_size = 'calc([medium_base] - [page_margin] - [gap_quarter] - [image_gap_half])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
       endif
-      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
+      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
     else
       # Single column calculation
       if block_settings.extend_media
@@ -130,7 +130,7 @@
       else
         assign medium_size = 'calc([medium_base] - [page_margin] - [gap_half] - [page_margin])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_half]', gap_half
       endif
-      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
+      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
     endif
   else
     # Use default sizes

themes.txt

@@ -0,0 +1 @@
+��

themes_utf8.txt

@@ -0,0 +1 @@
+

tmp_log.txt

@@ -0,0 +1 @@
+��

tmp_log_utf8.txt

@@ -0,0 +1 @@
+