Fix first image lazy load on main product section (#1286)

* Make sure first image is not lazy loaded * Use a single liquid tag * Update sections/main-product.liquid Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>
Shopify · Apr 27, 2022 · af58b34 · af58b34
1 parent cc2cf29
commit af58b34
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -65,8 +65,14 @@
             {%- for media in product.media -%}
               {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
                 <li id="Slide-{{ section.id }}-{{ media.id }}" class="product__media-item grid__item slider__slide{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
-                  {%- assign media_position = media_position | default: 0 | plus: 1 -%}
-                  {% render 'product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: true %}
+                  {%- liquid
+                    assign media_position = media_position | default: 0 | plus: 1
+                    assign lazy_load = false
+                    if media_position > 1
+                      assign lazy_load = true
+                    endif
+                    render 'product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: lazy_load
+                  -%}
                 </li>
               {%- endunless -%}
             {%- endfor -%}