zz-shopify-components 0.0.21 → 0.0.22

package/blocks/zz-full-screen-swiper.liquid

@@ -1,447 +1,447 @@
-{% assign block_size = block.blocks.size %}
-
-
-
-<style>
-  #shopify-block-{{block.id}} {
-    background: {{ block.settings.bg_color }};
-    width: 100vw;
-    height: 100vh;
-    box-sizing: border-box;
-    overflow: hidden;
-    position: relative;
-  }
-  #shopify-block-{{block.id}} .zz-full-screen-swiper {
-    width: 100vw;
-    height: 100vh;
-    box-sizing: border-box;
-    overflow: hidden;
-    height: fit-content;
-    position: relative;
-    letter-spacing: 0;
-  }
- 
-  
-  #shopify-block-{{block.id}} .swiper-button-next:after,
-  #shopify-block-{{block.id}} .swiper-button-prev:after {
-    display: none;
-  }
-  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets {
-    bottom: 30px;
-  }
- 
-  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
-    margin: 0 4px;
-    width: 24px;
-    height: 3px;
-    border-radius: 3px;
-    background: {{ block.settings.pagination_color | color_modify: 'alpha', 0.3 }};
-    opacity: 1;
-    transition: 0.3s;
-  }
-  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
-    position: relative;
-    width: 48px;
-  }
-  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 0;
-    background-color: {{ block.settings.pagination_color }};
-    border-radius: 3px;
-    height: 3px;
-  }
-
-  @media screen and (max-width: 1023px) {
-    #shopify-block-{{block.id}} .swiper-button-next,
-    #shopify-block-{{block.id}} .swiper-button-prev {
-      display: none;
-    }
-  }
-  @media screen and (min-width: 1024px) {
-   
-    #shopify-block-{{block.id}} .swiper-button-next,
-    #shopify-block-{{block.id}} .swiper-button-prev {
-      width: 48px;
-      height: 48px;
-    }
-    #shopify-block-{{block.id}} .swiper-button-prev {
-      left: 20px;
-      top: 50%;
-      right: unset;
-      transform:translateY(-50%);
-    }
-    #shopify-block-{{block.id}} .swiper-button-next {
-      right: 20px;
-      left: unset;
-      top: 50%;
-      transform:translateY(-50%);
-    }
-    #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
-      margin: 0 8px;
-      width: 48px;
-      height: 4px;
-      border-radius: 3px;
-    }
-    #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
-      width: 120px;
-    }
-    #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
-      height: 4px;
-      border-radius: 3px;
-    }
-  }
-
-</style>
-
-
- 
-  <div 
-    class='zz-full-screen-swiper zz-full-screen-swiper-{{ block.id }}'
-  >
-    <div class='zz-swiper-wrapper'>
-      {% content_for 'blocks' %}
-    </div>
-
-    <!-- If we need navigation buttons -->
-    <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
-
-        {% render 'zz-prev-next-btn', type: 'prev', color_type: block.settings.prev_next_type %}
-    </div>
-    <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
-      {% render 'zz-prev-next-btn', type: 'next', color_type: block.settings.prev_next_type %}
-    </div>
-
-    <!-- Pagination indicator -->
-    <div class='swiper-pagination'></div>
-  </div>
-
-
-<script>
-  
-  document.addEventListener('DOMContentLoaded', function () {
-    const block = document.getElementById(
-      'shopify-block-{{block.id}}'
-    );
-
-    const swiperWrapper = block.querySelector('.zz-swiper-wrapper');
-    // 获取当前 swiper-wrapper 下面 所有 第一层 div 
-    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
-    // 给每个 swiper-slide 添加 class swiper-slide
-    swiperSlides.forEach(slide => {
-      slide.classList.add('swiper-slide');
-    });
-    swiperWrapper.classList.add('swiper-wrapper');
-    let progressTimer = null;
-    const swiperClassName = '.zz-full-screen-swiper-{{ block.id }}';
-    const fullScreenSwiper = new Swiper(swiperClassName, {
-      loop: true,
-      slidesPerView: 1,
-      centeredSlides: true,
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      },
-      pagination: {
-        el: '.swiper-pagination',
-        clickable: true,
-        renderBullet: function (index, className) {
-          return `
-          <span class="${className}">
-            <span class="progress-line"></span>
-          </span>`;
-        },
-      },
-      effect: 'slide',
-      on: {
-        slideChangeTransitionEnd: function () {
-          block.querySelectorAll(".swiper-pagination-bullet").forEach((bullet) => {
-            console.log('do reset')
-            const progressBar = bullet.querySelector(".progress-line");
-            progressBar.style.transition = "none";
-            progressBar.style.width = "0";
-          });
-          handleVideoOnSlideChange();
-        },
-        slideChangeTransitionStart: function () {
-          console.log('do slideChangeTransitionStart')
-          if (progressTimer) {
-            clearInterval(progressTimer);
-          }
-        },
-      },
-    });
-    handleVideoOnSlideChange();
-    
-    
-    function getVisibleDisplayMedias(container) {
-      const videos = container.querySelectorAll('video');
-      const video = Array.from(videos).find((video) => {
-        const style = window.getComputedStyle(video);
-        return style.display !== 'none';
-      });
-      if (video) {
-        return {
-          video,
-          type: 'video'
-        }
-      } else {
-        const images = container.querySelectorAll('img');
-        const image = Array.from(images).find((image) => {
-          const style = window.getComputedStyle(image);
-          return style.display !== 'none';
-        });
-        if (image) {
-          return {
-            image,
-            type: 'image'
-          }
-        }
-      }
-      return null;
-    }
-    const endedHandler = function() {
-
-        fullScreenSwiper.slideNext();
-        if (progressTimer) {
-          clearInterval(progressTimer);
-        }
-        this.removeEventListener('ended', endedHandler);
-    };
-
-    function updataMediaProgress(type, videoDom) {
-      console.log('do updataMediaProgress')
-      const activeBullet = block.querySelector(".swiper-pagination-bullet-active");
-      const progressBar = activeBullet.querySelector(".progress-line");
-      if (progressBar) {
-        if (type === 'video') {
-          if (progressTimer) {
-            clearInterval(progressTimer);
-          }
-          // 添加新的事件监听器
-            progressTimer = setInterval(() => {
-              const progress = videoDom.currentTime / videoDom.duration;
-              progressBar.style.transition = "0.2s";
-              progressBar.style.width = `${progress * 100}%`;
-            }, 100);
-          videoDom.addEventListener('ended', endedHandler);
-        } else if (type === 'image') {
-          console.log('do animate')
-          progressBar.style.transition = "15s";
-          progressBar.style.width = "100%";
-          setTimeout(() => {
-            fullScreenSwiper.slideNext();
-          }, 15000);
-        }
-      }
-    }
-
-    function handleVideoOnSlideChange() {
-      
-      const activeSlide = block.querySelector('.swiper-slide-active');
-      const media = getVisibleDisplayMedias(activeSlide);
-      const activeBullet = block.querySelector(".swiper-pagination-bullet-active");
-      const progressBar = activeBullet.querySelector(".progress-line");
-      if (progressBar) {
-        console.log('do reset 1')
-          progressBar.style.transition = "none";
-          progressBar.style.width = "0";
-       }
-      if (media.type === 'video') {
-            media.video.currentTime = 0;
-            updataMediaProgress('video', media.video);
-      } else if (media.type === 'image') {
-        // 处理图片的情况
-        updataMediaProgress('image', media.image);
-      }
-    }
-  });
-</script>
-
-{% schema %}
-{
-  "name": "Full Screen Swiper",
-  "class": "zz-full-screen-swiper-block",
-  "settings": [
-    {
-      "type": "color",
-      "id": "bg_color",
-      "default": "#ffffff",
-      "label": "背景色"
-    },
-   
-    {
-      "type": "color",
-      "id": "pagination_color",
-      "default": "#ffffff",
-      "label": "轮播导航圆圈颜色"
-    },
-    {
-      "type": "select",
-      "id": "prev_next_type",
-      "label": "prev next 颜色",
-      "options": [
-        { "value": "dark", "label": "黑色" },
-        { "value": "light", "label": "白色" },
-      ],
-      "default": "dark"
-    },
-  ],
-  "blocks": [
-    {
-      "type": "zz-flex-layout-bg-block",
-    }
-  ],
-  "presets": [
-    {
-      "name": "Full Screen Swiper",
-    },
-    {
-      "name": "全屏轮播组件",
-      "settings": {
-        "bg_color": "#ffffff",
-        "pagination_color": "#ffffff",
-        "prev_next_type": "dark"
-      },
-      "blocks": [
-        {
-          "type": "zz-flex-layout-bg-block",
-          "settings": {
-            "background_color": "rgba(0,0,0,0)",
-            "bg_type": "image",
-            "full_screen_bg": true,
-            "pc_background_image": "shopify://shop_images/preset_pc_full_bg_pic.png",
-            "mobile_background_image": "shopify://shop_images/preset_mobile_full_bg_pic.png",
-            "pc_background_video_url": "",
-            "video_loop": false,
-            "pc_direction": "column",
-            "pc_gap": 40,
-            "pc_justify": "center",
-            "pc_align": "flex-start",
-            "pc_padding_top": 0,
-            "pc_padding_bottom": 0,
-            "pc_full_width": false,
-            "pc_xl_width": 1200,
-            "pc_lg_width": 90,
-            "mobile_direction": "column",
-            "mobile_gap": 20,
-            "mobile_justify": "flex-end",
-            "mobile_align": "center",
-            "mobile_padding_bottom": 100,
-          },
-          "blocks": [
-            {
-              "type": "zz-responsive-width-image",
-              "settings": {
-                "desktop_image": "shopify://shop_images/1_521b8e7f-8da9-4df0-9ee1-10a25ee62323.png",
-                "desktop_width_xl": 322,
-                "desktop_width_lg": 322,
-                "desktop_border_radius": 0,
-                "mobile_image": "shopify://shop_images/12_5bbff2ea-19fe-46e1-944b-f78a79ae2d4a.png",
-                "mb_width_type": "mb_use_padding",
-                "mobile_padding_x": 60,
-                "mobile_width": 60,
-                "mb_width_px": 100,
-                "mobile_border_radius": 0,
-                "alt": "image loading",
-              },
-            },
-            {
-              "type": "zz-title",
-              "settings": {
-                "pc_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
-                "mb_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
-                "tag": "h3",
-                "text_color": "#ffffff",
-                "pc_align": "left",
-                "mobile_align": "center",
-    
-              },
-            },
-            {
-              "type": "zz-button",
-              "settings": {
-                "text": "Buy Now",
-                "function_type": "link_map",
-                "type": "primary",
-                "color": "white",
-                "size": "medium"
-              },
-            },
-            
-          ]
-        },
-        {
-          "type": "zz-flex-layout-bg-block",
-          "settings": {
-            "background_color": "rgba(0,0,0,0)",
-            "bg_type": "image",
-            "full_screen_bg": true,
-            "pc_background_image": "shopify://shop_images/preset_pc_full_bg_pic.png",
-            "mobile_background_image": "shopify://shop_images/preset_mobile_full_bg_pic.png",
-            "pc_background_video_url": "",
-            "video_loop": false,
-            "pc_direction": "column",
-            "pc_gap": 40,
-            "pc_justify": "center",
-            "pc_align": "flex-start",
-            "pc_padding_top": 0,
-            "pc_padding_bottom": 0,
-            "pc_full_width": false,
-            "pc_xl_width": 1200,
-            "pc_lg_width": 90,
-            "mobile_direction": "column",
-            "mobile_gap": 20,
-            "mobile_justify": "flex-end",
-            "mobile_align": "center",
-            "mobile_padding_bottom": 100,
-          },
-          "blocks": [
-            {
-              "type": "zz-responsive-width-image",
-              "settings": {
-                "desktop_image": "shopify://shop_images/1_521b8e7f-8da9-4df0-9ee1-10a25ee62323.png",
-                "desktop_width_xl": 322,
-                "desktop_width_lg": 322,
-                "desktop_border_radius": 0,
-                "mobile_image": "shopify://shop_images/12_5bbff2ea-19fe-46e1-944b-f78a79ae2d4a.png",
-                "mb_width_type": "mb_use_padding",
-                "mobile_padding_x": 60,
-                "mobile_width": 60,
-                "mb_width_px": 100,
-                "mobile_border_radius": 0,
-                "alt": "image loading",
-              },
-            },
-            {
-              "type": "zz-title",
-              "settings": {
-                "pc_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
-                "mb_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
-                "tag": "h3",
-                "text_color": "#ffffff",
-                "pc_align": "left",
-                "mobile_align": "center",
-    
-              },
-            },
-            {
-              "type": "zz-button",
-              "settings": {
-                "text": "Buy Now",
-                "function_type": "link_map",
-                "type": "primary",
-                "color": "white",
-                "size": "medium"
-              },
-            },
-            
-          ]
-        }
-      ]
-    }
-  ]
-}
-{% endschema %}
+{% assign block_size = block.blocks.size %}
+
+
+
+<style>
+  #shopify-block-{{block.id}} {
+    background: {{ block.settings.bg_color }};
+    width: 100vw;
+    height: 100vh;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+  }
+  #shopify-block-{{block.id}} .zz-full-screen-swiper {
+    width: 100vw;
+    height: 100vh;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: fit-content;
+    position: relative;
+    letter-spacing: 0;
+  }
+ 
+  
+  #shopify-block-{{block.id}} .swiper-button-next:after,
+  #shopify-block-{{block.id}} .swiper-button-prev:after {
+    display: none;
+  }
+  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets {
+    bottom: 30px;
+  }
+ 
+  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 4px;
+    width: 24px;
+    height: 3px;
+    border-radius: 3px;
+    background: {{ block.settings.pagination_color | color_modify: 'alpha', 0.3 }};
+    opacity: 1;
+    transition: 0.3s;
+  }
+  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+    position: relative;
+    width: 48px;
+  }
+  #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    background-color: {{ block.settings.pagination_color }};
+    border-radius: 3px;
+    height: 3px;
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      display: none;
+    }
+  }
+  @media screen and (min-width: 1024px) {
+   
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      width: 48px;
+      height: 48px;
+    }
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      left: 20px;
+      top: 50%;
+      right: unset;
+      transform:translateY(-50%);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next {
+      right: 20px;
+      left: unset;
+      top: 50%;
+      transform:translateY(-50%);
+    }
+    #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+      margin: 0 8px;
+      width: 48px;
+      height: 4px;
+      border-radius: 3px;
+    }
+    #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+      width: 120px;
+    }
+    #shopify-block-{{block.id}} .zz-full-screen-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
+      height: 4px;
+      border-radius: 3px;
+    }
+  }
+
+</style>
+
+
+ 
+  <div 
+    class='zz-full-screen-swiper zz-full-screen-swiper-{{ block.id }}'
+  >
+    <div class='zz-swiper-wrapper'>
+      {% content_for 'blocks' %}
+    </div>
+
+    <!-- If we need navigation buttons -->
+    <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
+
+        {% render 'zz-prev-next-btn', type: 'prev', color_type: block.settings.prev_next_type %}
+    </div>
+    <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
+      {% render 'zz-prev-next-btn', type: 'next', color_type: block.settings.prev_next_type %}
+    </div>
+
+    <!-- Pagination indicator -->
+    <div class='swiper-pagination'></div>
+  </div>
+
+
+<script>
+  
+  document.addEventListener('DOMContentLoaded', function () {
+    const block = document.getElementById(
+      'shopify-block-{{block.id}}'
+    );
+
+    const swiperWrapper = block.querySelector('.zz-swiper-wrapper');
+    // 获取当前 swiper-wrapper 下面 所有 第一层 div 
+    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
+    // 给每个 swiper-slide 添加 class swiper-slide
+    swiperSlides.forEach(slide => {
+      slide.classList.add('swiper-slide');
+    });
+    swiperWrapper.classList.add('swiper-wrapper');
+    let progressTimer = null;
+    const swiperClassName = '.zz-full-screen-swiper-{{ block.id }}';
+    const fullScreenSwiper = new Swiper(swiperClassName, {
+      loop: true,
+      slidesPerView: 1,
+      centeredSlides: true,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        renderBullet: function (index, className) {
+          return `
+          <span class="${className}">
+            <span class="progress-line"></span>
+          </span>`;
+        },
+      },
+      effect: 'slide',
+      on: {
+        slideChangeTransitionEnd: function () {
+          block.querySelectorAll(".swiper-pagination-bullet").forEach((bullet) => {
+            console.log('do reset')
+            const progressBar = bullet.querySelector(".progress-line");
+            progressBar.style.transition = "none";
+            progressBar.style.width = "0";
+          });
+          handleVideoOnSlideChange();
+        },
+        slideChangeTransitionStart: function () {
+          console.log('do slideChangeTransitionStart')
+          if (progressTimer) {
+            clearInterval(progressTimer);
+          }
+        },
+      },
+    });
+    handleVideoOnSlideChange();
+    
+    
+    function getVisibleDisplayMedias(container) {
+      const videos = container.querySelectorAll('video');
+      const video = Array.from(videos).find((video) => {
+        const style = window.getComputedStyle(video);
+        return style.display !== 'none';
+      });
+      if (video) {
+        return {
+          video,
+          type: 'video'
+        }
+      } else {
+        const images = container.querySelectorAll('img');
+        const image = Array.from(images).find((image) => {
+          const style = window.getComputedStyle(image);
+          return style.display !== 'none';
+        });
+        if (image) {
+          return {
+            image,
+            type: 'image'
+          }
+        }
+      }
+      return null;
+    }
+    const endedHandler = function() {
+
+        fullScreenSwiper.slideNext();
+        if (progressTimer) {
+          clearInterval(progressTimer);
+        }
+        this.removeEventListener('ended', endedHandler);
+    };
+
+    function updataMediaProgress(type, videoDom) {
+      console.log('do updataMediaProgress')
+      const activeBullet = block.querySelector(".swiper-pagination-bullet-active");
+      const progressBar = activeBullet.querySelector(".progress-line");
+      if (progressBar) {
+        if (type === 'video') {
+          if (progressTimer) {
+            clearInterval(progressTimer);
+          }
+          // 添加新的事件监听器
+            progressTimer = setInterval(() => {
+              const progress = videoDom.currentTime / videoDom.duration;
+              progressBar.style.transition = "0.2s";
+              progressBar.style.width = `${progress * 100}%`;
+            }, 100);
+          videoDom.addEventListener('ended', endedHandler);
+        } else if (type === 'image') {
+          console.log('do animate')
+          progressBar.style.transition = "15s";
+          progressBar.style.width = "100%";
+          setTimeout(() => {
+            fullScreenSwiper.slideNext();
+          }, 15000);
+        }
+      }
+    }
+
+    function handleVideoOnSlideChange() {
+      
+      const activeSlide = block.querySelector('.swiper-slide-active');
+      const media = getVisibleDisplayMedias(activeSlide);
+      const activeBullet = block.querySelector(".swiper-pagination-bullet-active");
+      const progressBar = activeBullet.querySelector(".progress-line");
+      if (progressBar) {
+        console.log('do reset 1')
+          progressBar.style.transition = "none";
+          progressBar.style.width = "0";
+       }
+      if (media.type === 'video') {
+            media.video.currentTime = 0;
+            updataMediaProgress('video', media.video);
+      } else if (media.type === 'image') {
+        // 处理图片的情况
+        updataMediaProgress('image', media.image);
+      }
+    }
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Full Screen Swiper",
+  "class": "zz-full-screen-swiper-block",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#ffffff",
+      "label": "背景色"
+    },
+   
+    {
+      "type": "color",
+      "id": "pagination_color",
+      "default": "#ffffff",
+      "label": "轮播导航圆圈颜色"
+    },
+    {
+      "type": "select",
+      "id": "prev_next_type",
+      "label": "prev next 颜色",
+      "options": [
+        { "value": "dark", "label": "黑色" },
+        { "value": "light", "label": "白色" },
+      ],
+      "default": "dark"
+    },
+  ],
+  "blocks": [
+    {
+      "type": "zz-flex-layout-bg-block",
+    }
+  ],
+  "presets": [
+    {
+      "name": "Full Screen Swiper",
+    },
+    {
+      "name": "全屏轮播组件",
+      "settings": {
+        "bg_color": "#ffffff",
+        "pagination_color": "#ffffff",
+        "prev_next_type": "dark"
+      },
+      "blocks": [
+        {
+          "type": "zz-flex-layout-bg-block",
+          "settings": {
+            "background_color": "rgba(0,0,0,0)",
+            "bg_type": "image",
+            "full_screen_bg": true,
+            "pc_background_image": "shopify://shop_images/preset_pc_full_bg_pic.png",
+            "mobile_background_image": "shopify://shop_images/preset_mobile_full_bg_pic.png",
+            "pc_background_video_url": "",
+            "video_loop": false,
+            "pc_direction": "column",
+            "pc_gap": 40,
+            "pc_justify": "center",
+            "pc_align": "flex-start",
+            "pc_padding_top": 0,
+            "pc_padding_bottom": 0,
+            "pc_full_width": false,
+            "pc_xl_width": 1200,
+            "pc_lg_width": 90,
+            "mobile_direction": "column",
+            "mobile_gap": 20,
+            "mobile_justify": "flex-end",
+            "mobile_align": "center",
+            "mobile_padding_bottom": 100,
+          },
+          "blocks": [
+            {
+              "type": "zz-responsive-width-image",
+              "settings": {
+                "desktop_image": "shopify://shop_images/1_521b8e7f-8da9-4df0-9ee1-10a25ee62323.png",
+                "desktop_width_xl": 322,
+                "desktop_width_lg": 322,
+                "desktop_border_radius": 0,
+                "mobile_image": "shopify://shop_images/12_5bbff2ea-19fe-46e1-944b-f78a79ae2d4a.png",
+                "mb_width_type": "mb_use_padding",
+                "mobile_padding_x": 60,
+                "mobile_width": 60,
+                "mb_width_px": 100,
+                "mobile_border_radius": 0,
+                "alt": "image loading",
+              },
+            },
+            {
+              "type": "zz-title",
+              "settings": {
+                "pc_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
+                "mb_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
+                "tag": "h3",
+                "text_color": "#ffffff",
+                "pc_align": "left",
+                "mobile_align": "center",
+    
+              },
+            },
+            {
+              "type": "zz-button",
+              "settings": {
+                "text": "Buy Now",
+                "function_type": "link_map",
+                "type": "primary",
+                "color": "white",
+                "size": "medium"
+              },
+            },
+            
+          ]
+        },
+        {
+          "type": "zz-flex-layout-bg-block",
+          "settings": {
+            "background_color": "rgba(0,0,0,0)",
+            "bg_type": "image",
+            "full_screen_bg": true,
+            "pc_background_image": "shopify://shop_images/preset_pc_full_bg_pic.png",
+            "mobile_background_image": "shopify://shop_images/preset_mobile_full_bg_pic.png",
+            "pc_background_video_url": "",
+            "video_loop": false,
+            "pc_direction": "column",
+            "pc_gap": 40,
+            "pc_justify": "center",
+            "pc_align": "flex-start",
+            "pc_padding_top": 0,
+            "pc_padding_bottom": 0,
+            "pc_full_width": false,
+            "pc_xl_width": 1200,
+            "pc_lg_width": 90,
+            "mobile_direction": "column",
+            "mobile_gap": 20,
+            "mobile_justify": "flex-end",
+            "mobile_align": "center",
+            "mobile_padding_bottom": 100,
+          },
+          "blocks": [
+            {
+              "type": "zz-responsive-width-image",
+              "settings": {
+                "desktop_image": "shopify://shop_images/1_521b8e7f-8da9-4df0-9ee1-10a25ee62323.png",
+                "desktop_width_xl": 322,
+                "desktop_width_lg": 322,
+                "desktop_border_radius": 0,
+                "mobile_image": "shopify://shop_images/12_5bbff2ea-19fe-46e1-944b-f78a79ae2d4a.png",
+                "mb_width_type": "mb_use_padding",
+                "mobile_padding_x": 60,
+                "mobile_width": 60,
+                "mb_width_px": 100,
+                "mobile_border_radius": 0,
+                "alt": "image loading",
+              },
+            },
+            {
+              "type": "zz-title",
+              "settings": {
+                "pc_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
+                "mb_title": "<p>OFFICIAL FLYING CAMERA OF<br/>USA CYCLING TEAM</p>",
+                "tag": "h3",
+                "text_color": "#ffffff",
+                "pc_align": "left",
+                "mobile_align": "center",
+    
+              },
+            },
+            {
+              "type": "zz-button",
+              "settings": {
+                "text": "Buy Now",
+                "function_type": "link_map",
+                "type": "primary",
+                "color": "white",
+                "size": "medium"
+              },
+            },
+            
+          ]
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}