zz-shopify-components 0.0.27 → 0.0.28-beta.2

package/blocks/zz-flex-layout-block.liquid

@@ -1,549 +1,549 @@
-{% schema %}
-{
-  "name": "ZZ Flex Layout Block",
-  "class": "flex-layout-block",
-  "settings": [
-    {
-      "type": "color_background",
-      "id": "background_color",
-      "label": "背景颜色",
-      "default": "rgba(0,0,0,0)"
-    },
-    {
-      "type": "header",
-      "content": "💻 PC端布局设置"
-    },
-    {
-      "type": "select",
-      "id": "pc_direction",
-      "label": "PC方向 (Direction)",
-      "options": [
-        { "value": "row", "label": "横向 (Horizontal)" },
-        { "value": "column", "label": "纵向 (Vertical)" },
-        { "value": "row-reverse", "label": "横向反向 (Horizontal Reverse)" },
-        { "value": "column-reverse", "label": "纵向反向 (Vertical Reverse)" }
-      ],
-      "default": "row"
-    },
-    {
-      "type": "number",
-      "id": "pc_gap",
-      "label": "区块间距 (Gap)",
-      "default": 40
-    },
-    
-    {
-      "type": "select",
-      "id": "pc_justify",
-      "label": "PC主轴对齐 (Justify Content)",
-      "options": [
-        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
-        { "value": "center", "label": "居中对齐 (Center)" },
-        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
-        { "value": "space-between", "label": "两端对齐 (Space Between)" },
-        { "value": "space-around", "label": "平均间距 (Space Around)" }
-      ],
-      "default": "flex-start"
-    },
-    {
-      "type": "select",
-      "id": "pc_align",
-      "label": "PC交叉轴对齐 (Align Items)",
-      "options": [
-        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
-        { "value": "center", "label": "居中对齐 (Center)" },
-        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
-        { "value": "stretch", "label": "拉伸对齐 (Stretch)" }
-      ],
-      "default": "center"
-    },
-    {
-      "type": "number",
-      "id": "pc_padding_x",
-      "label": "PC端左右内边距",
-      "default": 0,
-      "info": "单位：px"
-    },
-    {
-      "type": "number",
-      "id": "pc_padding_top",
-      "label": "PC端顶部内边距 (px)",
-      "default": 0
-    },
-    {
-      "type": "number",
-      "id": "pc_padding_bottom",
-      "label": "PC端底部内边距 (px)",
-      "default": 0
-    },
-    {
-      "type": "number",
-      "id": "pc_border_radius",
-      "label": "PC端圆角 (px)",
-      "default": 0
-    },
-    {
-      "type": "checkbox",
-      "id": "pc_full_width",
-      "label": "是否全屏展示",
-      "default": true
-    },
-    {
-      "type": "number",
-      "id": "pc_xl_width",
-      "label": "XL屏幕内容区域宽度 (px)",
-      "default": 1200,
-      "visible_if": "{{ block.settings.pc_full_width == false }}",
-      "info": "非全屏展示时有效"
-    },
-    {
-      "type": "number",
-      "id": "pc_lg_width",
-      "label": "LG屏幕内容区域宽度 (vw)",
-      "default": 90,
-      "visible_if": "{{ block.settings.pc_full_width == false }}",
-      "info": "非全屏展示时有效"
-    },
-    {
-      "type": "header",
-      "content": "📱 移动端布局设置"
-    },
-    {
-      "type": "select",
-      "id": "mobile_direction",
-      "label": "移动方向 (Direction)",
-      "options": [
-        { "value": "row", "label": "横向 (Horizontal)" },
-        { "value": "column", "label": "纵向 (Vertical)" },
-        { "value": "row-reverse", "label": "横向反向 (Horizontal Reverse)" },
-        { "value": "column-reverse", "label": "纵向反向 (Vertical Reverse)" }
-      ],
-      "default": "column"
-    },
-    {
-      "type": "number",
-      "id": "mobile_gap",
-      "label": "移动区块间距 (Gap)",
-      "default": 20
-    },
-    {
-      "type": "select",
-      "id": "mobile_justify",
-      "label": "移动主轴对齐 (Justify Content)",
-      "options": [
-        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
-        { "value": "center", "label": "居中对齐 (Center)" },
-        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
-        { "value": "space-between", "label": "两端对齐 (Space Between)" },
-        { "value": "space-around", "label": "平均间距 (Space Around)" }
-      ],
-      "default": "flex-start"
-    },
-    {
-      "type": "select",
-      "id": "mobile_align",
-      "label": "移动交叉轴对齐 (Align Items)",
-      "options": [
-        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
-        { "value": "center", "label": "居中对齐 (Center)" },
-        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
-        { "value": "stretch", "label": "拉伸对齐 (Stretch)" }
-      ],
-      "default": "center"
-    },
-    {
-      "type": "number",
-      "id": "mobile_padding_x",
-      "label": "移动端左右内边距",
-      "default": 0,
-      "info": "单位：px"
-    },
-    {
-      "type": "number",
-      "id": "mobile_padding_top",
-      "label": "移动端顶部内边距 (px)",
-      "default": 0
-    },
-    {
-      "type": "number",
-      "id": "mobile_padding_bottom",
-      "label": "移动端底部内边距 (px)",
-      "default": 0
-    },
-    {
-      "type": "number",
-      "id": "mobile_border_radius",
-      "label": "移动端圆角 (px)",
-      "default": 0
-    },
-    {
-      "type": "header",
-      "content": "动画设置"
-    },
-    {
-      "type": "select",
-      "id": "child_animation",
-      "label": "子元素动画",
-      "options": [
-        { "value": "none-animation", "label": "无动画" },
-        { "value": "fade-in-box", "label": "按序从下往上显示" },
-        { "value": "fade-in-from-left", "label": "按序从左进入显示" },
-        { "value": "fade-in-from-right", "label": "按序从右进入显示" },
-        { "value": "slow-reveal", "label": "跟随页面滚动缓慢显示" }
-      ],
-      "default": "none-animation"
-    },
-    {
-      "type": "select",
-      "id": "self_animation",
-      "label": "自身动画",
-      "options": [
-        { "value": "none-animation", "label": "无动画" },
-        { "value": "fade-in-content", "label": "从下往上显示" },
-        { "value": "fade-in-from-left-content", "label": "从左往右显示" },
-        { "value": "fade-in-from-right-content", "label": "从右往左显示" },
-        { "value": "slow-reveal-content", "label": "跟随页面滚动缓慢显示" }
-      ],
-      "default": "none-animation"
-    },
-   
-  ],
-  "blocks": [
-    {
-        "type": "@theme",
-    }
-  ],
-  "presets": [
-    {
-      "name": "弹性布局",
-    },
-    {
-      "name": "ZZ Flex Layout Block"
-    },
-    {
-      "name": "左右布局图文，手机端上下结构",
-      "settings": {
-            "pc_direction": "row",
-            "pc_gap": 40,
-            "pc_justify": "flex-start",
-            "pc_align": "center",
-            "pc_padding_top": 0,
-            "pc_padding_bottom": 0,
-            "pc_full_width": true,
-            "mobile_direction": "column",
-            "mobile_gap": 20,
-            "mobile_justify": "flex-start",
-            "mobile_align": "center",
-            "mobile_padding_x": 0,
-            "mobile_padding_top": 0,
-            "mobile_padding_bottom": 0,
-       },
-       "blocks": [
-        {
-          "type": "zz-responsive-width-image",
-          "settings": {
-                "desktop_image": "shopify://shop_images/preset_pc_picture_info_pic.png",
-                "desktop_width_xl": 698,
-                "desktop_width_lg": 600,
-                "desktop_border_radius": 16,
-                "mobile_image": "shopify://shop_images/preset_mob_picture_info_pic.png",
-                "mobile_padding_x": 0,
-                "mobile_width": 100,
-                "mobile_border_radius": 10,
-                "alt": "image loading"
-
-          }
-        },
-        {
-          "type": "zz-flex-layout-widget",
-          "settings": {
-                "pc_width": 0,
-                "pc_direction": "column",
-                "pc_gap": 40,
-                "pc_justify": "flex-start",
-                "pc_align": "flex-start",
-                "mobile_direction": "column",
-                "mobile_gap": 20,
-                "mobile_justify": "flex-start",
-                "mobile_align": "flex-start",
-                "child_animation": "fade-in-from-right",
-
-           },
-          "blocks": [
-            {
-              "type": "zz-title",
-              "settings": {
-                "pc_title": "<p>title is here</p>",
-                "mb_title": "<p>title is here</p>",
-                "tag": "h3",
-                "text_color": "#000000",
-              }
-            },
-            {
-              "type": "zz-content-description-html",
-              "settings": {
-                "text_color": "#333333",
-                "highlight_color": "#000000",
-                "pc_content": "<p>normal content is here and <strong> highlight the key features </strong></p>",
-                "mobile_content": "<p>normal content is here and <strong> highlight the key features </strong></p>",
-           
-              }
-            }
-          ]
-        }
-
-       ]
-      
-       
-    },
-    {
-      "name": "左右对称卡片布局,手机端上下",
-      "settings": {
-        "pc_direction": "row",
-        "pc_gap": 32,
-        "pc_justify": "flex-start",
-        "pc_align": "center",
-        "pc_full_width": true,
-        "mobile_direction": "column",
-        "mobile_gap": 20,
-        "mobile_justify": "flex-start",
-        "mobile_align": "center",
-      },
-      "blocks": [
-        {
-          "type": "zz-flex-layout-widget",
-          "settings": {
-            "pc_direction": "column",
-            "pc_gap": 0,
-            "pc_justify": "flex-start",
-            "pc_align": "flex-start",
-            "mobile_direction": "column",
-            "mobile_gap": 0,
-            "mobile_justify": "flex-start",
-            "mobile_align": "flex-start",
-          },
-          "blocks": [
-            {
-              "type": "zz-ratio-image",
-              "settings": {
-                "desktop_image": "shopify://shop_images/preset_pc_middle_pic.png",
-                "pc_width": 100,
-                "desktop_border_radius": 16,
-                "mobile_image": "shopify://shop_images/preset_mobile_middle_pic.png",
-                "mobile_width": 100,
-                "mobile_border_radius": 10,
-                "alt": "image loading",
-                "has_link": false,
-                "function_type": "link",
-                "url": "",
-                "links": ""
-              },
-            },
-            {
-              "type": "zz-title",
-              "name": "标题 h2-h4",
-              "settings": {
-                "pc_title": "<p>这里是标题</p>",
-                "mb_title": "<p>这里是标题</p>",
-                "tag": "h4",
-                "italic": true,
-                "text_color": "#000000",
-                "text_gradient": "",
-                "pc_align": "left",
-                "pc_margin_top": 30,
-                "pc_margin_bottom": 20,
-                "mobile_align": "left",
-                "mobile_margin_top": 20,
-                "mobile_margin_bottom": 12,
-              },
-            },
-            {
-              "type": "zz-content-description-html",
-              "name": "内容描述 html",
-              "settings": {
-                "text_color": "#333333",
-                "pc_content": "Ideal for tight trails or mountain roads. The camera mirrors your movement, reducing the chance of collisions.",
-                "pc_text_align": "left",
-                "mobile_content": "<p>This is a detailed product description <strong> highlights the key features. </strong></p>",
-                "mobile_text_align": "left",
-              },
-            }
-            
-          ]
-        },
-        {
-          "type": "zz-flex-layout-widget",
-          "settings": {
-            "pc_direction": "column",
-            "pc_gap": 0,
-            "pc_justify": "flex-start",
-            "pc_align": "flex-start",
-            "mobile_direction": "column",
-            "mobile_gap": 0,
-            "mobile_justify": "flex-start",
-            "mobile_align": "flex-start",
-          },
-          "blocks": [
-            {
-              "type": "zz-ratio-image",
-              "settings": {
-                "desktop_image": "shopify://shop_images/preset_pc_middle_pic.png",
-                "pc_width": 100,
-                "desktop_border_radius": 16,
-                "mobile_image": "shopify://shop_images/preset_mobile_middle_pic.png",
-                "mobile_width": 100,
-                "mobile_border_radius": 10,
-                "alt": "image loading",
-                "has_link": false,
-                "function_type": "link",
-                "url": "",
-                "links": ""
-              },
-            },
-            {
-              "type": "zz-title",
-              "name": "标题 h2-h4",
-              "settings": {
-                "pc_title": "<p>这里是标题</p>",
-                "mb_title": "<p>这里是标题</p>",
-                "tag": "h4",
-                "italic": true,
-                "text_color": "#000000",
-                "text_gradient": "",
-                "pc_align": "left",
-                "pc_margin_top": 30,
-                "pc_margin_bottom": 20,
-                "mobile_align": "left",
-                "mobile_margin_top": 20,
-                "mobile_margin_bottom": 12,
-              },
-            },
-            {
-              "type": "zz-content-description-html",
-              "name": "内容描述 html",
-              "settings": {
-                "text_color": "#333333",
-                "pc_content": "Ideal for tight trails or mountain roads. The camera mirrors your movement, reducing the chance of collisions.",
-                "pc_text_align": "left",
-                "mobile_content": "<p>This is a detailed product description <strong> highlights the key features. </strong></p>",
-                "mobile_text_align": "left",
-              },
-            }
-            
-          ]
-        }
-        
-      ]
-    },
-    {
-      "name": "上下结构布局",
-      "settings": {
-        "background_color": "rgba(0,0,0,0)",
-        "pc_direction": "column",
-        "pc_justify": "flex-start",
-        "pc_align": "center",
-        "mobile_direction": "column",
-        "mobile_justify": "flex-start",
-        "mobile_align": "center",
-      },
-      "blocks": [
-        {
-          "type": "zz-title",
-          "settings": {
-            "pc_title": "<p>上下结构布局</p>",
-            "mb_title": "<p>上下结构布局</p>",
-            "text_color": "#000000",
-            "pc_align": "center",
-            "mobile_align": "center",
-          },
-        },
-        {
-          "type": "zz-ratio-image",
-          "name": "宽度比例图片",
-          "settings": {
-            "desktop_image": "shopify://shop_images/preset_pc_swiper_video_poster_1.png",
-            "pc_width": 100,
-            "mobile_image": "shopify://shop_images/preset_mobile_swiper_video_poster_1.png",
-            "mobile_width": 100,
-          },
-        },
-        {
-          "type": "zz-content-description",
-          "settings": {
-            "text_color": "#000000",
-            "pc_content": "<p>Find new lines with the HOVERAir X1 PRO and PROMAX. Talk about chemistry. Challenge everyone in your crew to a game of “How close can you get?” Good times are guaranteed, and you’ll have the footage to prove it.</p>",
-            "pc_text_align": "center",
-            "mobile_content": "<p>Find new lines with the HOVERAir X1 PRO and PROMAX. Talk about chemistry. Challenge everyone in your crew to a game of “How close can you get?” Good times are guaranteed, and you’ll have the footage to prove it.</p>",
-            "mobile_text_align": "left",
-          },
-        }
-
-      ]
-    }
-  ]
-}
-{% endschema %}
-
-<style>
-  #shopify-block-{{ block.id }} {
-    width: 100%;
-    overflow-x: hidden;
-  }
-
-  #shopify-block-{{ block.id }}.flex-layout-block{
-    display: flex;
-  }
-
-  #shopify-block-{{ block.id }} .flex-layout-block-container {
-    box-sizing: border-box;
-    width: 100%;
-    display: flex;
-    flex-direction: {{ block.settings.mobile_direction }};
-    justify-content: {{ block.settings.mobile_justify }};
-    align-items: {{ block.settings.mobile_align }};
-    gap: {{ block.settings.mobile_gap }}px;
-    background-color: {{ block.settings.background_color }};
-    padding-top: {{ block.settings.mobile_padding_top }}px;
-    padding-bottom: {{ block.settings.mobile_padding_bottom }}px;
-    padding-left: {{ block.settings.mobile_padding_x }}px;
-    padding-right: {{ block.settings.mobile_padding_x }}px;
-    border-radius: {{ block.settings.mobile_border_radius  }}px;
-  }
-
-  @media (min-width: 1024px) {
-    #shopify-block-{{ block.id }} .flex-layout-block-container {
-      flex-direction: {{ block.settings.pc_direction }};
-      justify-content: {{ block.settings.pc_justify }};
-      align-items: {{ block.settings.pc_align }};
-      gap: {{ block.settings.pc_gap }}px;
-      padding-top: {{ block.settings.pc_padding_top }}px;
-      padding-bottom: {{ block.settings.pc_padding_bottom }}px;
-      padding-left: {{ block.settings.pc_padding_x }}px;
-      padding-right: {{ block.settings.pc_padding_x }}px;
-      border-radius: {{ block.settings.pc_border_radius  }}px;
-      
-      {% if block.settings.pc_full_width %}
-        width: 100%;
-      {% else %}
-        width: {{ block.settings.pc_lg_width }}vw;
-        margin: 0 auto;
-      {% endif %}
-    }
-  }
-
-  @media (min-width: 1280px) {
-    #shopify-block-{{ block.id }} .flex-layout-block-container {
-      {% if block.settings.pc_full_width %}
-        width: 100%;
-      {% else %}
-        width: {{ block.settings.pc_xl_width }}px;
-        margin: 0 auto;
-      {% endif %}
-    }
-  }
-</style>
-
-<div class="flex-layout-block-container {{ block.settings.self_animation }} {{ block.settings.child_animation }}">
-    {% content_for 'blocks' %}
-</div>
-
+{% schema %}
+{
+  "name": "ZZ Flex Layout Block",
+  "class": "flex-layout-block",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "rgba(0,0,0,0)"
+    },
+    {
+      "type": "header",
+      "content": "💻 PC端布局设置"
+    },
+    {
+      "type": "select",
+      "id": "pc_direction",
+      "label": "PC方向 (Direction)",
+      "options": [
+        { "value": "row", "label": "横向 (Horizontal)" },
+        { "value": "column", "label": "纵向 (Vertical)" },
+        { "value": "row-reverse", "label": "横向反向 (Horizontal Reverse)" },
+        { "value": "column-reverse", "label": "纵向反向 (Vertical Reverse)" }
+      ],
+      "default": "row"
+    },
+    {
+      "type": "number",
+      "id": "pc_gap",
+      "label": "区块间距 (Gap)",
+      "default": 40
+    },
+    
+    {
+      "type": "select",
+      "id": "pc_justify",
+      "label": "PC主轴对齐 (Justify Content)",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
+        { "value": "space-between", "label": "两端对齐 (Space Between)" },
+        { "value": "space-around", "label": "平均间距 (Space Around)" }
+      ],
+      "default": "flex-start"
+    },
+    {
+      "type": "select",
+      "id": "pc_align",
+      "label": "PC交叉轴对齐 (Align Items)",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
+        { "value": "stretch", "label": "拉伸对齐 (Stretch)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_x",
+      "label": "PC端左右内边距",
+      "default": 0,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_top",
+      "label": "PC端顶部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_bottom",
+      "label": "PC端底部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "pc_border_radius",
+      "label": "PC端圆角 (px)",
+      "default": 0
+    },
+    {
+      "type": "checkbox",
+      "id": "pc_full_width",
+      "label": "是否全屏展示",
+      "default": true
+    },
+    {
+      "type": "number",
+      "id": "pc_xl_width",
+      "label": "XL屏幕内容区域宽度 (px)",
+      "default": 1200,
+      "visible_if": "{{ block.settings.pc_full_width == false }}",
+      "info": "非全屏展示时有效"
+    },
+    {
+      "type": "number",
+      "id": "pc_lg_width",
+      "label": "LG屏幕内容区域宽度 (vw)",
+      "default": 90,
+      "visible_if": "{{ block.settings.pc_full_width == false }}",
+      "info": "非全屏展示时有效"
+    },
+    {
+      "type": "header",
+      "content": "📱 移动端布局设置"
+    },
+    {
+      "type": "select",
+      "id": "mobile_direction",
+      "label": "移动方向 (Direction)",
+      "options": [
+        { "value": "row", "label": "横向 (Horizontal)" },
+        { "value": "column", "label": "纵向 (Vertical)" },
+        { "value": "row-reverse", "label": "横向反向 (Horizontal Reverse)" },
+        { "value": "column-reverse", "label": "纵向反向 (Vertical Reverse)" }
+      ],
+      "default": "column"
+    },
+    {
+      "type": "number",
+      "id": "mobile_gap",
+      "label": "移动区块间距 (Gap)",
+      "default": 20
+    },
+    {
+      "type": "select",
+      "id": "mobile_justify",
+      "label": "移动主轴对齐 (Justify Content)",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
+        { "value": "space-between", "label": "两端对齐 (Space Between)" },
+        { "value": "space-around", "label": "平均间距 (Space Around)" }
+      ],
+      "default": "flex-start"
+    },
+    {
+      "type": "select",
+      "id": "mobile_align",
+      "label": "移动交叉轴对齐 (Align Items)",
+      "options": [
+        { "value": "flex-start", "label": "起始对齐 (Flex Start)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "flex-end", "label": "末尾对齐 (Flex End)" },
+        { "value": "stretch", "label": "拉伸对齐 (Stretch)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_x",
+      "label": "移动端左右内边距",
+      "default": 0,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_top",
+      "label": "移动端顶部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_bottom",
+      "label": "移动端底部内边距 (px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "mobile_border_radius",
+      "label": "移动端圆角 (px)",
+      "default": 0
+    },
+    {
+      "type": "header",
+      "content": "动画设置"
+    },
+    {
+      "type": "select",
+      "id": "child_animation",
+      "label": "子元素动画",
+      "options": [
+        { "value": "none-animation", "label": "无动画" },
+        { "value": "fade-in-box", "label": "按序从下往上显示" },
+        { "value": "fade-in-from-left", "label": "按序从左进入显示" },
+        { "value": "fade-in-from-right", "label": "按序从右进入显示" },
+        { "value": "slow-reveal", "label": "跟随页面滚动缓慢显示" }
+      ],
+      "default": "none-animation"
+    },
+    {
+      "type": "select",
+      "id": "self_animation",
+      "label": "自身动画",
+      "options": [
+        { "value": "none-animation", "label": "无动画" },
+        { "value": "fade-in-content", "label": "从下往上显示" },
+        { "value": "fade-in-from-left-content", "label": "从左往右显示" },
+        { "value": "fade-in-from-right-content", "label": "从右往左显示" },
+        { "value": "slow-reveal-content", "label": "跟随页面滚动缓慢显示" }
+      ],
+      "default": "none-animation"
+    },
+   
+  ],
+  "blocks": [
+    {
+        "type": "@theme",
+    }
+  ],
+  "presets": [
+    {
+      "name": "弹性布局",
+    },
+    {
+      "name": "ZZ Flex Layout Block"
+    },
+    {
+      "name": "左右布局图文，手机端上下结构",
+      "settings": {
+            "pc_direction": "row",
+            "pc_gap": 40,
+            "pc_justify": "flex-start",
+            "pc_align": "center",
+            "pc_padding_top": 0,
+            "pc_padding_bottom": 0,
+            "pc_full_width": true,
+            "mobile_direction": "column",
+            "mobile_gap": 20,
+            "mobile_justify": "flex-start",
+            "mobile_align": "center",
+            "mobile_padding_x": 0,
+            "mobile_padding_top": 0,
+            "mobile_padding_bottom": 0,
+       },
+       "blocks": [
+        {
+          "type": "zz-responsive-width-image",
+          "settings": {
+                "desktop_image": "shopify://shop_images/preset_pc_picture_info_pic.png",
+                "desktop_width_xl": 698,
+                "desktop_width_lg": 600,
+                "desktop_border_radius": 16,
+                "mobile_image": "shopify://shop_images/preset_mob_picture_info_pic.png",
+                "mobile_padding_x": 0,
+                "mobile_width": 100,
+                "mobile_border_radius": 10,
+                "alt": "image loading"
+
+          }
+        },
+        {
+          "type": "zz-flex-layout-widget",
+          "settings": {
+                "pc_width": 0,
+                "pc_direction": "column",
+                "pc_gap": 40,
+                "pc_justify": "flex-start",
+                "pc_align": "flex-start",
+                "mobile_direction": "column",
+                "mobile_gap": 20,
+                "mobile_justify": "flex-start",
+                "mobile_align": "flex-start",
+                "child_animation": "fade-in-from-right",
+
+           },
+          "blocks": [
+            {
+              "type": "zz-title",
+              "settings": {
+                "pc_title": "<p>title is here</p>",
+                "mb_title": "<p>title is here</p>",
+                "tag": "h3",
+                "text_color": "#000000",
+              }
+            },
+            {
+              "type": "zz-content-description-html",
+              "settings": {
+                "text_color": "#333333",
+                "highlight_color": "#000000",
+                "pc_content": "<p>normal content is here and <strong> highlight the key features </strong></p>",
+                "mobile_content": "<p>normal content is here and <strong> highlight the key features </strong></p>",
+           
+              }
+            }
+          ]
+        }
+
+       ]
+      
+       
+    },
+    {
+      "name": "左右对称卡片布局,手机端上下",
+      "settings": {
+        "pc_direction": "row",
+        "pc_gap": 32,
+        "pc_justify": "flex-start",
+        "pc_align": "center",
+        "pc_full_width": true,
+        "mobile_direction": "column",
+        "mobile_gap": 20,
+        "mobile_justify": "flex-start",
+        "mobile_align": "center",
+      },
+      "blocks": [
+        {
+          "type": "zz-flex-layout-widget",
+          "settings": {
+            "pc_direction": "column",
+            "pc_gap": 0,
+            "pc_justify": "flex-start",
+            "pc_align": "flex-start",
+            "mobile_direction": "column",
+            "mobile_gap": 0,
+            "mobile_justify": "flex-start",
+            "mobile_align": "flex-start",
+          },
+          "blocks": [
+            {
+              "type": "zz-ratio-image",
+              "settings": {
+                "desktop_image": "shopify://shop_images/preset_pc_middle_pic.png",
+                "pc_width": 100,
+                "desktop_border_radius": 16,
+                "mobile_image": "shopify://shop_images/preset_mobile_middle_pic.png",
+                "mobile_width": 100,
+                "mobile_border_radius": 10,
+                "alt": "image loading",
+                "has_link": false,
+                "function_type": "link",
+                "url": "",
+                "links": ""
+              },
+            },
+            {
+              "type": "zz-title",
+              "name": "标题 h2-h4",
+              "settings": {
+                "pc_title": "<p>这里是标题</p>",
+                "mb_title": "<p>这里是标题</p>",
+                "tag": "h4",
+                "italic": true,
+                "text_color": "#000000",
+                "text_gradient": "",
+                "pc_align": "left",
+                "pc_margin_top": 30,
+                "pc_margin_bottom": 20,
+                "mobile_align": "left",
+                "mobile_margin_top": 20,
+                "mobile_margin_bottom": 12,
+              },
+            },
+            {
+              "type": "zz-content-description-html",
+              "name": "内容描述 html",
+              "settings": {
+                "text_color": "#333333",
+                "pc_content": "Ideal for tight trails or mountain roads. The camera mirrors your movement, reducing the chance of collisions.",
+                "pc_text_align": "left",
+                "mobile_content": "<p>This is a detailed product description <strong> highlights the key features. </strong></p>",
+                "mobile_text_align": "left",
+              },
+            }
+            
+          ]
+        },
+        {
+          "type": "zz-flex-layout-widget",
+          "settings": {
+            "pc_direction": "column",
+            "pc_gap": 0,
+            "pc_justify": "flex-start",
+            "pc_align": "flex-start",
+            "mobile_direction": "column",
+            "mobile_gap": 0,
+            "mobile_justify": "flex-start",
+            "mobile_align": "flex-start",
+          },
+          "blocks": [
+            {
+              "type": "zz-ratio-image",
+              "settings": {
+                "desktop_image": "shopify://shop_images/preset_pc_middle_pic.png",
+                "pc_width": 100,
+                "desktop_border_radius": 16,
+                "mobile_image": "shopify://shop_images/preset_mobile_middle_pic.png",
+                "mobile_width": 100,
+                "mobile_border_radius": 10,
+                "alt": "image loading",
+                "has_link": false,
+                "function_type": "link",
+                "url": "",
+                "links": ""
+              },
+            },
+            {
+              "type": "zz-title",
+              "name": "标题 h2-h4",
+              "settings": {
+                "pc_title": "<p>这里是标题</p>",
+                "mb_title": "<p>这里是标题</p>",
+                "tag": "h4",
+                "italic": true,
+                "text_color": "#000000",
+                "text_gradient": "",
+                "pc_align": "left",
+                "pc_margin_top": 30,
+                "pc_margin_bottom": 20,
+                "mobile_align": "left",
+                "mobile_margin_top": 20,
+                "mobile_margin_bottom": 12,
+              },
+            },
+            {
+              "type": "zz-content-description-html",
+              "name": "内容描述 html",
+              "settings": {
+                "text_color": "#333333",
+                "pc_content": "Ideal for tight trails or mountain roads. The camera mirrors your movement, reducing the chance of collisions.",
+                "pc_text_align": "left",
+                "mobile_content": "<p>This is a detailed product description <strong> highlights the key features. </strong></p>",
+                "mobile_text_align": "left",
+              },
+            }
+            
+          ]
+        }
+        
+      ]
+    },
+    {
+      "name": "上下结构布局",
+      "settings": {
+        "background_color": "rgba(0,0,0,0)",
+        "pc_direction": "column",
+        "pc_justify": "flex-start",
+        "pc_align": "center",
+        "mobile_direction": "column",
+        "mobile_justify": "flex-start",
+        "mobile_align": "center",
+      },
+      "blocks": [
+        {
+          "type": "zz-title",
+          "settings": {
+            "pc_title": "<p>上下结构布局</p>",
+            "mb_title": "<p>上下结构布局</p>",
+            "text_color": "#000000",
+            "pc_align": "center",
+            "mobile_align": "center",
+          },
+        },
+        {
+          "type": "zz-ratio-image",
+          "name": "宽度比例图片",
+          "settings": {
+            "desktop_image": "shopify://shop_images/preset_pc_swiper_video_poster_1.png",
+            "pc_width": 100,
+            "mobile_image": "shopify://shop_images/preset_mobile_swiper_video_poster_1.png",
+            "mobile_width": 100,
+          },
+        },
+        {
+          "type": "zz-content-description",
+          "settings": {
+            "text_color": "#000000",
+            "pc_content": "<p>Find new lines with the HOVERAir X1 PRO and PROMAX. Talk about chemistry. Challenge everyone in your crew to a game of “How close can you get?” Good times are guaranteed, and you’ll have the footage to prove it.</p>",
+            "pc_text_align": "center",
+            "mobile_content": "<p>Find new lines with the HOVERAir X1 PRO and PROMAX. Talk about chemistry. Challenge everyone in your crew to a game of “How close can you get?” Good times are guaranteed, and you’ll have the footage to prove it.</p>",
+            "mobile_text_align": "left",
+          },
+        }
+
+      ]
+    }
+  ]
+}
+{% endschema %}
+
+<style>
+  #shopify-block-{{ block.id }} {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+  #shopify-block-{{ block.id }}.flex-layout-block{
+    display: flex;
+  }
+
+  #shopify-block-{{ block.id }} .flex-layout-block-container {
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: {{ block.settings.mobile_direction }};
+    justify-content: {{ block.settings.mobile_justify }};
+    align-items: {{ block.settings.mobile_align }};
+    gap: {{ block.settings.mobile_gap }}px;
+    background-color: {{ block.settings.background_color }};
+    padding-top: {{ block.settings.mobile_padding_top }}px;
+    padding-bottom: {{ block.settings.mobile_padding_bottom }}px;
+    padding-left: {{ block.settings.mobile_padding_x }}px;
+    padding-right: {{ block.settings.mobile_padding_x }}px;
+    border-radius: {{ block.settings.mobile_border_radius  }}px;
+  }
+
+  @media (min-width: 1024px) {
+    #shopify-block-{{ block.id }} .flex-layout-block-container {
+      flex-direction: {{ block.settings.pc_direction }};
+      justify-content: {{ block.settings.pc_justify }};
+      align-items: {{ block.settings.pc_align }};
+      gap: {{ block.settings.pc_gap }}px;
+      padding-top: {{ block.settings.pc_padding_top }}px;
+      padding-bottom: {{ block.settings.pc_padding_bottom }}px;
+      padding-left: {{ block.settings.pc_padding_x }}px;
+      padding-right: {{ block.settings.pc_padding_x }}px;
+      border-radius: {{ block.settings.pc_border_radius  }}px;
+      
+      {% if block.settings.pc_full_width %}
+        width: 100%;
+      {% else %}
+        width: {{ block.settings.pc_lg_width }}vw;
+        margin: 0 auto;
+      {% endif %}
+    }
+  }
+
+  @media (min-width: 1280px) {
+    #shopify-block-{{ block.id }} .flex-layout-block-container {
+      {% if block.settings.pc_full_width %}
+        width: 100%;
+      {% else %}
+        width: {{ block.settings.pc_xl_width }}px;
+        margin: 0 auto;
+      {% endif %}
+    }
+  }
+</style>
+
+<div class="flex-layout-block-container {{ block.settings.self_animation }} {{ block.settings.child_animation }}">
+    {% content_for 'blocks' %}
+</div>
+