zz-shopify-components 0.0.21 → 0.0.22

package/sections/zz-navigation-tab-v3.liquid

@@ -1,408 +1,408 @@
-
-{% schema %}
-{
-  "name": "Navigation Tab V3",
-  "class": "zz-navigation-tab-section",
-  "settings": [
-    {
-      "type": "color_background",
-      "id": "background_color",
-      "label": "背景颜色",
-      "default": "#000000"
-    },
-    {
-      "type": "image_picker",
-      "id": "icon",
-      "label": "icon 图标"
-    },
-    {
-      "type": "text",
-      "id": "btn_text",
-      "label": "按钮文字",
-      "default": "Buy Now"
-    },
-    {
-      "type": "select",
-      "id": "btn_function_type",
-      "label": "功能类型",
-      "options": [
-        {
-          "value": "link",
-          "label": "链接"
-        },
-        {
-          "value": "link_map",
-          "label": "多国家映射"
-        },
-      ],
-      "default": "link"
-    },
-    {
-      "type": "url",
-      "id": "url",
-      "label": "按钮链接",
-      "visible_if": "{{ section.settings.btn_function_type == 'link' }}"
-    },
-    {
-      "type": "textarea",
-      "id": "links",
-      "label": "Sites Link Map",
-      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ ",
-      "visible_if": "{{ section.settings.btn_function_type == 'link_map' }}"
-    },
-    {
-      "type": "text",
-      "id": "buy_now_click_event_class_name",
-      "label": "buy now 点击事件统计 classname",
-    },
-
-
-  ],
-  "blocks": [
-
-    {
-      "type": "module_name",
-      "name": "模块名称",
-      "settings": [
-        {
-          "type": "text",
-          "id": "text",
-          "label": "模块名称",
-        },
-        {
-          "type": "text",
-          "id": "module_name",
-          "label": "模块id",
-          "info": "用于定位模块"
-        },
-        {
-          "type": "color",
-          "id": "text_color",
-          "label": "文字颜色",
-          "default": "#000000"
-        },
-       
-      ]
-    },
-
-  ],
-  "presets": [
-    {
-      "name": "Navigation Tab V3"
-    },
-    {
-      "name": "模块导航定位tab栏 V3",
-    },
-
-  ]
-}
-{% endschema %}
-
-{% assign btn_class = 'zz-button' | append: section.id %}
-
-<div class="tw-w-full tw-px-8">
-  <div class="zz-navigation-pc-tab max-lg:tw-hidden lg:tw-h-[64px] tw-flex tw-items-center tw-justify-between tw-max-w-[1660px] lg:tw-px-[20px] tw-w-full tw-mx-auto">
-    <img 
-      class="tw-w-[134px] tw-h-[12px]"
-      src="{{ section.settings.icon | image_url: width: 200 }}" alt="{{ section.settings.icon.alt }}" width="134" height="12">
-    <div class="zz-navigation-pc-item-box tw-flex tw-items-center  tw-overflow-x-scroll tw-ml-[40px] tw-pr-[60px]">
-      {% for block in section.blocks %}
-        <div class="pc-tab-item tw-flex-shrink-0 tw-px-[30px]">
-          
-            <span 
-              class="zz-navigation-tab-item-text tw-cursor-pointer tw-text-[#9E9E9E] tw-text-[14px] tw-leading-[14px] tw-font-[400]"
-               data-target="{{ block.settings.module_name }}"
-            >{{ block.settings.text }}</span>
-       
-        </div>
-        {% unless forloop.last %}
-          <div class="pc-tab-item-last tw-w-[1px] tw-h-[16px] tw-bg-[#9E9E9E]">&nbsp;</div>
-        {% endunless %}
-      {% endfor %}
-    </div>
-      <div class="tw-flex-shrink-0 tw-relative">
-        <div class="cover-box tw-absolute tw-top-0 tw-left-[-50px] tw-w-[50px] tw-h-full">&nbsp;</div>
-        {% render 'zz-button',
-          href: section.settings.url,
-          type: 'primary',
-          color: 'white',
-          text: section.settings.btn_text,
-          size: 'medium',
-          class_name: btn_class
-      
-        %}
-      </div>
-  
-  
-  </div>
-</div>
-
-<div class="zz-navigation-mobile-tab lg:tw-hidden tw-h-[52px] tw-flex tw-items-center tw-justify-between tw-px-8">
-  <div class="mb-navigation-box-item zz-navigation-mb-item-box tw-flex tw-items-center tw-gap-[24px] tw-pr-[120px]  tw-h-[52px] tw-overflow-x-scroll">
-    {% for block in section.blocks %}
-      <div class="pc-tab-item tw-flex-shrink-0">
-        
-          <span 
-            class="zz-navigation-tab-item-text tw-cursor-pointer tw-text-[#9E9E9E] tw-text-[13px] tw-leading-[13px] tw-font-[400]"
-             data-target="{{ block.settings.module_name }}"
-          >{{ block.settings.text }}</span>
-     
-      </div>
-    {% endfor %}
-  </div>
-  <div class="tw-flex-shrink-0 tw-relative">
-    <div class="cover-box tw-absolute tw-top-0 tw-left-[-40px] tw-w-[40px] tw-h-full">&nbsp;</div>
-    {% render 'zz-button',
-      href: section.settings.url,
-      type: 'primary',
-      color: 'white',
-      text: section.settings.btn_text,
-      size: 'small',
-      class_name: btn_class
-    %}
-  </div>
-</div>
-
-  <script>
-    document.addEventListener('DOMContentLoaded', (event) => {
-      const isDesktop = window.innerWidth > 1024;
-
-      function scrollPaginationToCenter() {
-        // 获取当前section
-        const section = document.getElementById(
-          'shopify-section-{{section.id}}'
-        );
-        const paginationContainer = isDesktop ? section.querySelector('.zz-navigation-pc-item-box') : section.querySelector('.zz-navigation-mb-item-box');
-        const activeBullet = paginationContainer.querySelector('.zz-navigation-active-text');
-  
-        if (activeBullet) {
-          const containerWidth = paginationContainer.offsetWidth;
-          const bulletLeft = activeBullet.offsetLeft;
-          const bulletWidth = activeBullet.offsetWidth;
-  
-          // 计算需要滚动的位置，使当前bullet居中
-          const scrollPosition = bulletLeft - (containerWidth / 2) + (bulletWidth / 2);
-  
-          paginationContainer.scrollTo({
-            left: scrollPosition,
-            behavior: 'smooth'
-          });
-        }
-      }
-
-      const currentSection = document.getElementById(
-        'shopify-section-{{section.id}}'
-      );
-      // 获取通知栏以及顶部弹窗 调整sticky的top。id="IPTipsBox"，id="zz-quick-announcement-bar-container"
-      const iptipsBox = document.getElementById('IPTipsBox');
-      const pcDropdowns = document.querySelectorAll('.menu-wrapper');
-      const tabs = currentSection.querySelectorAll('.zz-navigation-tab-item-text');
-      
-      const sections = document.querySelectorAll('[data-zz-module-name]');//document.querySelectorAll('.zz-navigation-moudule');
-      let showPcDropdowns = []
-      // 点击 tab 滚动
-      tabs.forEach(tab => {
-        tab.addEventListener('click', () => {
-          const id = tab.dataset.target;
-          const target = document.querySelector(`[data-zz-module-name="${id}"]`);
-          const headerHeight = isDesktop ? 64 : 44;
-          const offsetTop = target.offsetTop - headerHeight;
-          scrollPaginationToCenter();
-          window.scrollTo(0, offsetTop);
-          dataLayer.push({
-            event: "141_productpage_click_header_tab_item",
-            timestamp: new Date().toISOString(),
-            header_module_name: id,
-          });
-        });
-      });
-  
-      // 监听滚动，高亮 tab
-      const observerOptions = {
-        root: null,
-        rootMargin: '0px 0px 0px 0px',
-        threshold: 0.1
-      };
-  
-      const observer = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            const id = entry.target.dataset.zzModuleName;
-            tabs.forEach(tab => {
-                tab.classList.toggle('zz-navigation-active-text', tab.dataset.target === id);
-                scrollPaginationToCenter();
-
-            });
-          }
-          
-        });
-      }, observerOptions);
-      const headerObserver = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.target == iptipsBox) {
-            
-            if (entry.isIntersecting) {
-              // 计算iptipsBox的高度，并设置sticky的top
-              const iptipsBoxHeight = entry.target.offsetHeight;
-              if(isDesktop) {
-                currentSection.style.top = iptipsBoxHeight + 'px';
-              } else {
-                // 后期移动端要加上导航栏的高度 44
-                currentSection.style.top = iptipsBoxHeight  + 44 + 'px';
-              }
-              
-            } else {
-              
-               if(isDesktop) {
-                currentSection.style.top = '0px';
-               } else {
-                currentSection.style.top = '44px';
-               }
-            }
-          } else {
-            if(entry.isIntersecting) {
-              if(!showPcDropdowns.includes(entry.target)) {
-                showPcDropdowns.push(entry.target);
-              }
-            } else {
-              showPcDropdowns = showPcDropdowns.filter(dropdown => dropdown !== entry.target);
-            }
-            if(isDesktop) {
-              if(showPcDropdowns.length > 0) {
-                currentSection.style.zIndex = '490';
-              } else {
-                currentSection.style.zIndex = '501';
-              }
-            }
-          }
-          
-        });
-      }, {
-        root: null,
-        rootMargin: '0px 0px 0px 0px',
-        threshold: 0
-      });
-
-  
-      sections.forEach(section => observer.observe(section));
-      headerObserver.observe(iptipsBox);
-      pcDropdowns.forEach(dropdown => headerObserver.observe(dropdown));
-      function handlePCTouchScroll () {
-        const el = document.querySelector('.zz-navigation-pc-item-box');
-        let isDown = false;
-        let startX, scrollLeft;
-
-        el.addEventListener('mousedown', e => {
-          isDown = true;
-          el.classList.add('dragging');
-          startX = e.pageX;
-          scrollLeft = el.scrollLeft;
-        });
-
-        el.addEventListener('mouseleave', () => isDown = false);
-        el.addEventListener('mouseup', () => isDown = false);
-        el.addEventListener('mousemove', e => {
-          if (!isDown) return;
-          e.preventDefault();
-          const x = e.pageX;
-          const walk = x - startX;
-          el.scrollLeft = scrollLeft - walk;
-        });
-
-      }
-      handlePCTouchScroll();
-
-      const btns = document.querySelectorAll('.{{ btn_class }}');
-      btns.forEach(btn => {
-        btn.addEventListener('click', (event) => {
-          dataLayer.push({
-            event: "{{ section.settings.buy_now_click_event_class_name }}",
-            timestamp: new Date().toISOString(),
-          });
-        });
-        {% if section.settings.btn_function_type == 'link_map' %}
-          if(window.bindSiteJump) {
-            bindSiteJump(btn, {{ section.settings.links | json }})
-          }
-        {% endif %} 
-      })
-
-    })
-  </script>
-<style>
-  #shopify-section-{{ section.id }} {
-    position: sticky;
-    width: 100%;
-    background-color: {{ section.settings.background_color }};
-  }
-  
-  #shopify-section-{{ section.id }} .zz-navigation-mobile-tab {
-    
-  }
-  #shopify-section-{{ section.id }} .zz-navigation-pc-tab {
-    width: 100%;
-    box-sizing: border-box;
-
-    
-  }
-  #shopify-section-{{ section.id }} .cover-box {
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
-
-  }
-  #shopify-section-{{ section.id }}  .zz-navigation-active-text {
-    font-weight: 700;
-    color: #FFFFFF;
-  }
-  #shopify-section-{{ section.id }}  .zz-navigation-mobile-tab {
-    border-bottom: 0.5px solid #FFFFFF26;
-  }
-  #shopify-section-{{ section.id }} .{{ btn_class }} {
-    flex-shrink: 0;
-  }
-  @media screen and (min-width: 1024px) {
-    #shopify-section-{{ section.id }} {
-      z-index: 501;
-      top: 0;
-    }
-
-  }
-   @media screen and (max-width: 1024px) {
-    #shopify-section-{{ section.id }} {
-      z-index: 499;
-      top: 44px;
-    }
-    #shopify-section-{{ section.id }} .{{ btn_class }} {
-      height: 28px;
-      padding: 0 16px;
-    }
-  } 
-
-  .zz-navigation-pc-item-box {
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-  }
-  html {
-    scroll-behavior: auto;
-  }
-  .zz-navigation-pc-item-box::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    display: none; /* Chrome/Safari/Edge */
-  }
-  .zz-navigation-mb-item-box {
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-  }
-  
-  .zz-navigation-mb-item-box::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    display: none; /* Chrome/Safari/Edge */
-  }
-
- 
+
+{% schema %}
+{
+  "name": "Navigation Tab V3",
+  "class": "zz-navigation-tab-section",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "#000000"
+    },
+    {
+      "type": "image_picker",
+      "id": "icon",
+      "label": "icon 图标"
+    },
+    {
+      "type": "text",
+      "id": "btn_text",
+      "label": "按钮文字",
+      "default": "Buy Now"
+    },
+    {
+      "type": "select",
+      "id": "btn_function_type",
+      "label": "功能类型",
+      "options": [
+        {
+          "value": "link",
+          "label": "链接"
+        },
+        {
+          "value": "link_map",
+          "label": "多国家映射"
+        },
+      ],
+      "default": "link"
+    },
+    {
+      "type": "url",
+      "id": "url",
+      "label": "按钮链接",
+      "visible_if": "{{ section.settings.btn_function_type == 'link' }}"
+    },
+    {
+      "type": "textarea",
+      "id": "links",
+      "label": "Sites Link Map",
+      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ ",
+      "visible_if": "{{ section.settings.btn_function_type == 'link_map' }}"
+    },
+    {
+      "type": "text",
+      "id": "buy_now_click_event_class_name",
+      "label": "buy now 点击事件统计 classname",
+    },
+
+
+  ],
+  "blocks": [
+
+    {
+      "type": "module_name",
+      "name": "模块名称",
+      "settings": [
+        {
+          "type": "text",
+          "id": "text",
+          "label": "模块名称",
+        },
+        {
+          "type": "text",
+          "id": "module_name",
+          "label": "模块id",
+          "info": "用于定位模块"
+        },
+        {
+          "type": "color",
+          "id": "text_color",
+          "label": "文字颜色",
+          "default": "#000000"
+        },
+       
+      ]
+    },
+
+  ],
+  "presets": [
+    {
+      "name": "Navigation Tab V3"
+    },
+    {
+      "name": "模块导航定位tab栏 V3",
+    },
+
+  ]
+}
+{% endschema %}
+
+{% assign btn_class = 'zz-button' | append: section.id %}
+
+<div class="tw-w-full tw-px-8">
+  <div class="zz-navigation-pc-tab max-lg:tw-hidden lg:tw-h-[64px] tw-flex tw-items-center tw-justify-between tw-max-w-[1660px] lg:tw-px-[20px] tw-w-full tw-mx-auto">
+    <img 
+      class="tw-w-[134px] tw-h-[12px]"
+      src="{{ section.settings.icon | image_url: width: 200 }}" alt="{{ section.settings.icon.alt }}" width="134" height="12">
+    <div class="zz-navigation-pc-item-box tw-flex tw-items-center  tw-overflow-x-scroll tw-ml-[40px] tw-pr-[60px]">
+      {% for block in section.blocks %}
+        <div class="pc-tab-item tw-flex-shrink-0 tw-px-[30px]">
+          
+            <span 
+              class="zz-navigation-tab-item-text tw-cursor-pointer tw-text-[#9E9E9E] tw-text-[14px] tw-leading-[14px] tw-font-[400]"
+               data-target="{{ block.settings.module_name }}"
+            >{{ block.settings.text }}</span>
+       
+        </div>
+        {% unless forloop.last %}
+          <div class="pc-tab-item-last tw-w-[1px] tw-h-[16px] tw-bg-[#9E9E9E]">&nbsp;</div>
+        {% endunless %}
+      {% endfor %}
+    </div>
+      <div class="tw-flex-shrink-0 tw-relative">
+        <div class="cover-box tw-absolute tw-top-0 tw-left-[-50px] tw-w-[50px] tw-h-full">&nbsp;</div>
+        {% render 'zz-button',
+          href: section.settings.url,
+          type: 'primary',
+          color: 'white',
+          text: section.settings.btn_text,
+          size: 'medium',
+          class_name: btn_class
+      
+        %}
+      </div>
+  
+  
+  </div>
+</div>
+
+<div class="zz-navigation-mobile-tab lg:tw-hidden tw-h-[52px] tw-flex tw-items-center tw-justify-between tw-px-8">
+  <div class="mb-navigation-box-item zz-navigation-mb-item-box tw-flex tw-items-center tw-gap-[24px] tw-pr-[120px]  tw-h-[52px] tw-overflow-x-scroll">
+    {% for block in section.blocks %}
+      <div class="pc-tab-item tw-flex-shrink-0">
+        
+          <span 
+            class="zz-navigation-tab-item-text tw-cursor-pointer tw-text-[#9E9E9E] tw-text-[13px] tw-leading-[13px] tw-font-[400]"
+             data-target="{{ block.settings.module_name }}"
+          >{{ block.settings.text }}</span>
+     
+      </div>
+    {% endfor %}
+  </div>
+  <div class="tw-flex-shrink-0 tw-relative">
+    <div class="cover-box tw-absolute tw-top-0 tw-left-[-40px] tw-w-[40px] tw-h-full">&nbsp;</div>
+    {% render 'zz-button',
+      href: section.settings.url,
+      type: 'primary',
+      color: 'white',
+      text: section.settings.btn_text,
+      size: 'small',
+      class_name: btn_class
+    %}
+  </div>
+</div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const isDesktop = window.innerWidth > 1024;
+
+      function scrollPaginationToCenter() {
+        // 获取当前section
+        const section = document.getElementById(
+          'shopify-section-{{section.id}}'
+        );
+        const paginationContainer = isDesktop ? section.querySelector('.zz-navigation-pc-item-box') : section.querySelector('.zz-navigation-mb-item-box');
+        const activeBullet = paginationContainer.querySelector('.zz-navigation-active-text');
+  
+        if (activeBullet) {
+          const containerWidth = paginationContainer.offsetWidth;
+          const bulletLeft = activeBullet.offsetLeft;
+          const bulletWidth = activeBullet.offsetWidth;
+  
+          // 计算需要滚动的位置，使当前bullet居中
+          const scrollPosition = bulletLeft - (containerWidth / 2) + (bulletWidth / 2);
+  
+          paginationContainer.scrollTo({
+            left: scrollPosition,
+            behavior: 'smooth'
+          });
+        }
+      }
+
+      const currentSection = document.getElementById(
+        'shopify-section-{{section.id}}'
+      );
+      // 获取通知栏以及顶部弹窗 调整sticky的top。id="IPTipsBox"，id="zz-quick-announcement-bar-container"
+      const iptipsBox = document.getElementById('IPTipsBox');
+      const pcDropdowns = document.querySelectorAll('.menu-wrapper');
+      const tabs = currentSection.querySelectorAll('.zz-navigation-tab-item-text');
+      
+      const sections = document.querySelectorAll('[data-zz-module-name]');//document.querySelectorAll('.zz-navigation-moudule');
+      let showPcDropdowns = []
+      // 点击 tab 滚动
+      tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+          const id = tab.dataset.target;
+          const target = document.querySelector(`[data-zz-module-name="${id}"]`);
+          const headerHeight = isDesktop ? 64 : 44;
+          const offsetTop = target.offsetTop - headerHeight;
+          scrollPaginationToCenter();
+          window.scrollTo(0, offsetTop);
+          dataLayer.push({
+            event: "141_productpage_click_header_tab_item",
+            timestamp: new Date().toISOString(),
+            header_module_name: id,
+          });
+        });
+      });
+  
+      // 监听滚动，高亮 tab
+      const observerOptions = {
+        root: null,
+        rootMargin: '0px 0px 0px 0px',
+        threshold: 0.1
+      };
+  
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const id = entry.target.dataset.zzModuleName;
+            tabs.forEach(tab => {
+                tab.classList.toggle('zz-navigation-active-text', tab.dataset.target === id);
+                scrollPaginationToCenter();
+
+            });
+          }
+          
+        });
+      }, observerOptions);
+      const headerObserver = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.target == iptipsBox) {
+            
+            if (entry.isIntersecting) {
+              // 计算iptipsBox的高度，并设置sticky的top
+              const iptipsBoxHeight = entry.target.offsetHeight;
+              if(isDesktop) {
+                currentSection.style.top = iptipsBoxHeight + 'px';
+              } else {
+                // 后期移动端要加上导航栏的高度 44
+                currentSection.style.top = iptipsBoxHeight  + 44 + 'px';
+              }
+              
+            } else {
+              
+               if(isDesktop) {
+                currentSection.style.top = '0px';
+               } else {
+                currentSection.style.top = '44px';
+               }
+            }
+          } else {
+            if(entry.isIntersecting) {
+              if(!showPcDropdowns.includes(entry.target)) {
+                showPcDropdowns.push(entry.target);
+              }
+            } else {
+              showPcDropdowns = showPcDropdowns.filter(dropdown => dropdown !== entry.target);
+            }
+            if(isDesktop) {
+              if(showPcDropdowns.length > 0) {
+                currentSection.style.zIndex = '490';
+              } else {
+                currentSection.style.zIndex = '501';
+              }
+            }
+          }
+          
+        });
+      }, {
+        root: null,
+        rootMargin: '0px 0px 0px 0px',
+        threshold: 0
+      });
+
+  
+      sections.forEach(section => observer.observe(section));
+      headerObserver.observe(iptipsBox);
+      pcDropdowns.forEach(dropdown => headerObserver.observe(dropdown));
+      function handlePCTouchScroll () {
+        const el = document.querySelector('.zz-navigation-pc-item-box');
+        let isDown = false;
+        let startX, scrollLeft;
+
+        el.addEventListener('mousedown', e => {
+          isDown = true;
+          el.classList.add('dragging');
+          startX = e.pageX;
+          scrollLeft = el.scrollLeft;
+        });
+
+        el.addEventListener('mouseleave', () => isDown = false);
+        el.addEventListener('mouseup', () => isDown = false);
+        el.addEventListener('mousemove', e => {
+          if (!isDown) return;
+          e.preventDefault();
+          const x = e.pageX;
+          const walk = x - startX;
+          el.scrollLeft = scrollLeft - walk;
+        });
+
+      }
+      handlePCTouchScroll();
+
+      const btns = document.querySelectorAll('.{{ btn_class }}');
+      btns.forEach(btn => {
+        btn.addEventListener('click', (event) => {
+          dataLayer.push({
+            event: "{{ section.settings.buy_now_click_event_class_name }}",
+            timestamp: new Date().toISOString(),
+          });
+        });
+        {% if section.settings.btn_function_type == 'link_map' %}
+          if(window.bindSiteJump) {
+            bindSiteJump(btn, {{ section.settings.links | json }})
+          }
+        {% endif %} 
+      })
+
+    })
+  </script>
+<style>
+  #shopify-section-{{ section.id }} {
+    position: sticky;
+    width: 100%;
+    background-color: {{ section.settings.background_color }};
+  }
+  
+  #shopify-section-{{ section.id }} .zz-navigation-mobile-tab {
+    
+  }
+  #shopify-section-{{ section.id }} .zz-navigation-pc-tab {
+    width: 100%;
+    box-sizing: border-box;
+
+    
+  }
+  #shopify-section-{{ section.id }} .cover-box {
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+
+  }
+  #shopify-section-{{ section.id }}  .zz-navigation-active-text {
+    font-weight: 700;
+    color: #FFFFFF;
+  }
+  #shopify-section-{{ section.id }}  .zz-navigation-mobile-tab {
+    border-bottom: 0.5px solid #FFFFFF26;
+  }
+  #shopify-section-{{ section.id }} .{{ btn_class }} {
+    flex-shrink: 0;
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-section-{{ section.id }} {
+      z-index: 501;
+      top: 0;
+    }
+
+  }
+   @media screen and (max-width: 1024px) {
+    #shopify-section-{{ section.id }} {
+      z-index: 499;
+      top: 44px;
+    }
+    #shopify-section-{{ section.id }} .{{ btn_class }} {
+      height: 28px;
+      padding: 0 16px;
+    }
+  } 
+
+  .zz-navigation-pc-item-box {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+  }
+  html {
+    scroll-behavior: auto;
+  }
+  .zz-navigation-pc-item-box::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none; /* Chrome/Safari/Edge */
+  }
+  .zz-navigation-mb-item-box {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+  }
+  
+  .zz-navigation-mb-item-box::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none; /* Chrome/Safari/Edge */
+  }
+
+ 
 </style>