zz-shopify-components 0.0.21 → 0.0.22

package/snippets/zz-button.liquid

@@ -1,71 +1,71 @@
-{% comment %} 
-按钮配置选项：
-type：按钮类型
-  - primary：主要按钮
-  - default：默认按钮
-  - round：圆角按钮
-  - link：链接按钮
-
-color：按钮颜色
-  - black：黑色
-  - white：白色
-  - orange：橙色
-
-size：按钮尺寸
-  - large：大号
-  - medium：中号（默认）
-  - small：小号
-
-其他参数：
-- href：链接地址
-- backdrop_filter：毛玻璃效果 true/false
-- icon：图标名称
-- text：按钮文字
-- class_name：自定义类名
-{% endcomment %}
-
-{% assign btn_type = type | default: 'primary' %}
-{% assign btn_color = color | default: 'black' %}
-{% assign btn_size = size | default: 'medium' %}
-{% assign icon_size = icon_size | default: 15 %}
-{% assign width = width | default: 'auto' %}
-
-<style>
-  .zz-btn-icon {
-    display: flex;
-  }
-</style>
-  
-{% if href %}
-  {% if btn_type == 'link' %}
-    <a href="{{ href | default: '#' }}" class="zz-btn-link tw-text-[#378DDD] tw-inline-flex tw-items-center tw-text-[12px] lg:tw-text-[14px] tw-no-underline zz-btn-link-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}">
-      <span class="zz-btn-text">{{ text }}</span>
-      {% if postfix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
-        {% render 'zz-icon', icon_name: postfix_icon, icon_size: icon_size %}
-      </span>{% endif %}
-    </a>
-  {% else %}
-    <a
-      href="{{ href | default: '#' }}"
-      class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}"
-      {% if backdrop_filter %}
-        style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
-      {% endif %}
-    >
-      {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
-      <span class="zz-btn-text">{{ text }}</span>
-    </a>
-  {% endif %}
-
-{% else %}
-
-<button
-  class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ width }} {{ class_name }}"
-  {% if backdrop_filter %}
-    style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
-  {% endif %}
->
-  {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
-  <span class="zz-btn-text">{{ text }}</span>
-</button>
+{% comment %} 
+按钮配置选项：
+type：按钮类型
+  - primary：主要按钮
+  - default：默认按钮
+  - round：圆角按钮
+  - link：链接按钮
+
+color：按钮颜色
+  - black：黑色
+  - white：白色
+  - orange：橙色
+
+size：按钮尺寸
+  - large：大号
+  - medium：中号（默认）
+  - small：小号
+
+其他参数：
+- href：链接地址
+- backdrop_filter：毛玻璃效果 true/false
+- icon：图标名称
+- text：按钮文字
+- class_name：自定义类名
+{% endcomment %}
+
+{% assign btn_type = type | default: 'primary' %}
+{% assign btn_color = color | default: 'black' %}
+{% assign btn_size = size | default: 'medium' %}
+{% assign icon_size = icon_size | default: 15 %}
+{% assign width = width | default: 'auto' %}
+
+<style>
+  .zz-btn-icon {
+    display: flex;
+  }
+</style>
+  
+{% if href %}
+  {% if btn_type == 'link' %}
+    <a href="{{ href | default: '#' }}" class="zz-btn-link tw-text-[#378DDD] tw-inline-flex tw-items-center tw-text-[12px] lg:tw-text-[14px] tw-no-underline zz-btn-link-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}">
+      <span class="zz-btn-text">{{ text }}</span>
+      {% if postfix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
+        {% render 'zz-icon', icon_name: postfix_icon, icon_size: icon_size %}
+      </span>{% endif %}
+    </a>
+  {% else %}
+    <a
+      href="{{ href | default: '#' }}"
+      class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}"
+      {% if backdrop_filter %}
+        style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
+      {% endif %}
+    >
+      {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
+      <span class="zz-btn-text">{{ text }}</span>
+    </a>
+  {% endif %}
+
+{% else %}
+
+<button
+  class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ width }} {{ class_name }}"
+  {% if backdrop_filter %}
+    style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
+  {% endif %}
+>
+  {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
+  <span class="zz-btn-text">{{ text }}</span>
+</button>
 {% endif %}

package/snippets/zz-content-h3.liquid

@@ -1,15 +1,15 @@
-{%- capture heading_color -%}
-  {%- if title_color_gradient != blank %} 
-    background-image: {{ title_color_gradient }};
-    -webkit-background-clip: text;
-    color: transparent;
-  {%- else -%} 
-    color: {{ title_color }};
-  {%- endif %}
-{%- endcapture %}
-<h3
-  class='{{ class_name }} content-title tw-m-0 tw-w-[full] {% if italic != false %} tw-italic {% endif %} tw-text-[21px] lg:tw-text-[40px] tw-leading-[1.2] tw-tracking-normal'
-  style='{{ heading_color }}'
->
-  {{ title }}
-</h3>
+{%- capture heading_color -%}
+  {%- if title_color_gradient != blank %} 
+    background-image: {{ title_color_gradient }};
+    -webkit-background-clip: text;
+    color: transparent;
+  {%- else -%} 
+    color: {{ title_color }};
+  {%- endif %}
+{%- endcapture %}
+<h3
+  class='{{ class_name }} content-title tw-m-0 tw-w-[full] {% if italic != false %} tw-italic {% endif %} tw-text-[21px] lg:tw-text-[40px] tw-leading-[1.2] tw-tracking-normal'
+  style='{{ heading_color }}'
+>
+  {{ title }}
+</h3>

package/snippets/zz-content-text.liquid

@@ -1,56 +1,56 @@
-{% comment %}
-  text: 内容
-  mb_text: 移动端内容
-  color: 标题颜色
-  highlight_color: 高亮颜色
-  link_color: 链接颜色
-  class_name: 增加类名
-  pc_font_size: pc端字体大小
-  mobile_font_size: 移动端字体大小
-  pc_text_align: pc端对齐方式
-  font_weight: 字体粗细
-  mobile_text_align: 移动端对齐方式
-{% endcomment %}
-
-{% if text != blank %}
-  <div class="content-text content-text-pc max-lg:tw-hidden tw-text-[#170B01B2] tw-text-[16px] tw-leading-[1.5] tw-text-left {{ class_name }} " 
-    style="color: {{ text_color }};font-weight: {{ font_weight }};
-    font-size: {{ pc_font_size }}px;
-    text-align: {{ pc_text_align }}; 
-    {% if pc_font_line_height %}line-height: {{ pc_font_line_height }};{% endif %}"
->
-    {{ text }}
-</div>
-{% endif %}
-
-{% if mb_text != blank %}
-<div 
-    class="content-text content-text-mobile lg:tw-hidden tw-text-[#170B01B2] tw-text-[14px] tw-leading-[1.5] tw-text-left {{ class_name }}" 
-    style="color: {{ text_color }};font-weight: {{ font_weight }};
-    font-size: {{ mobile_font_size }}px;
-    text-align: {{ mobile_text_align }}; 
-    {% if mobile_font_line_height %}line-height: {{ mobile_font_line_height }};{% endif %}"
->
-    {{ mb_text | default: text }}
-</div>
-{% endif %}
-
-
-
-
-<style>
-
-  {% if highlight_color %}
-  #shopify-section-{{ section.id }} .content-text strong {
-    color: {{ highlight_color }};
-    font-weight: inherit;
-  }
-  {% endif %}
-  {% if link_color %}
-  #shopify-section-{{ section.id }} .content-text a {
-    color: {{ link_color }};
-    text-decoration: underline;
-  }
-  {% endif %}
-
-</style>
+{% comment %}
+  text: 内容
+  mb_text: 移动端内容
+  color: 标题颜色
+  highlight_color: 高亮颜色
+  link_color: 链接颜色
+  class_name: 增加类名
+  pc_font_size: pc端字体大小
+  mobile_font_size: 移动端字体大小
+  pc_text_align: pc端对齐方式
+  font_weight: 字体粗细
+  mobile_text_align: 移动端对齐方式
+{% endcomment %}
+
+{% if text != blank %}
+  <div class="content-text content-text-pc max-lg:tw-hidden tw-text-[#170B01B2] tw-text-[16px] tw-leading-[1.5] tw-text-left {{ class_name }} " 
+    style="color: {{ text_color }};font-weight: {{ font_weight }};
+    font-size: {{ pc_font_size }}px;
+    text-align: {{ pc_text_align }}; 
+    {% if pc_font_line_height %}line-height: {{ pc_font_line_height }};{% endif %}"
+>
+    {{ text }}
+</div>
+{% endif %}
+
+{% if mb_text != blank %}
+<div 
+    class="content-text content-text-mobile lg:tw-hidden tw-text-[#170B01B2] tw-text-[14px] tw-leading-[1.5] tw-text-left {{ class_name }}" 
+    style="color: {{ text_color }};font-weight: {{ font_weight }};
+    font-size: {{ mobile_font_size }}px;
+    text-align: {{ mobile_text_align }}; 
+    {% if mobile_font_line_height %}line-height: {{ mobile_font_line_height }};{% endif %}"
+>
+    {{ mb_text | default: text }}
+</div>
+{% endif %}
+
+
+
+
+<style>
+
+  {% if highlight_color %}
+  #shopify-section-{{ section.id }} .content-text strong {
+    color: {{ highlight_color }};
+    font-weight: inherit;
+  }
+  {% endif %}
+  {% if link_color %}
+  #shopify-section-{{ section.id }} .content-text a {
+    color: {{ link_color }};
+    text-decoration: underline;
+  }
+  {% endif %}
+
+</style>

package/snippets/zz-h2.liquid

@@ -1,31 +1,31 @@
-{% comment %}
-  title: 标题
-  title_mb: 移动端标题
-  title_color_gradient: 标题颜色渐变
-  title_color: 标题颜色
-  class_name: 增加类名
-  italic: 斜体
-{% endcomment %}
-{%- capture heading_color -%}
-  {%- if title_color_gradient != blank %} 
-    background-image: {{ title_color_gradient }};
-    -webkit-background-clip: text;
-    color: transparent;
-  {%- elsif  title_color != blank -%} 
-    color: {{ title_color }};
-  {%- endif %}
-{%- endcapture %}
-
-<h2
-  class='{{ class_name }} zz-title-hx title-h2 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[60px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-  style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
->
-  {{ title }}
-</h2>
-<h2
-  class='{{ class_name }} zz-title-hx title-h2 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[28px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-  style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
->
-  {{ title_mb | default: title }}
-</h2>
-
+{% comment %}
+  title: 标题
+  title_mb: 移动端标题
+  title_color_gradient: 标题颜色渐变
+  title_color: 标题颜色
+  class_name: 增加类名
+  italic: 斜体
+{% endcomment %}
+{%- capture heading_color -%}
+  {%- if title_color_gradient != blank %} 
+    background-image: {{ title_color_gradient }};
+    -webkit-background-clip: text;
+    color: transparent;
+  {%- elsif  title_color != blank -%} 
+    color: {{ title_color }};
+  {%- endif %}
+{%- endcapture %}
+
+<h2
+  class='{{ class_name }} zz-title-hx title-h2 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[60px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+>
+  {{ title }}
+</h2>
+<h2
+  class='{{ class_name }} zz-title-hx title-h2 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[28px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
+>
+  {{ title_mb | default: title }}
+</h2>
+

package/snippets/zz-h3.liquid

@@ -1,31 +1,31 @@
-{% comment %}
-  title: 标题
-  title_mb: 移动端标题
-  title_color_gradient: 标题颜色渐变
-  title_color: 标题颜色
-  class_name: 增加类名
-  italic: 斜体
-{% endcomment %}
-{%- capture heading_color -%}
-  {%- if title_color_gradient != blank %} 
-    background-image: {{ title_color_gradient }};
-    -webkit-background-clip: text;
-    color: transparent;
-  {%- elsif title_color != blank -%} 
-    color: {{ title_color }};
-  {%- endif %}
-{%- endcapture %}
-
-<h3
-  class='{{ class_name }} zz-title-hx title-h3 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[48px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-  style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
->
-  {{ title }}
-</h3>
-<h3
-  class='{{ class_name }} zz-title-hx title-h3 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[24px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-  style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
->
-  {{ title_mb | default: title }}
-</h3>
-
+{% comment %}
+  title: 标题
+  title_mb: 移动端标题
+  title_color_gradient: 标题颜色渐变
+  title_color: 标题颜色
+  class_name: 增加类名
+  italic: 斜体
+{% endcomment %}
+{%- capture heading_color -%}
+  {%- if title_color_gradient != blank %} 
+    background-image: {{ title_color_gradient }};
+    -webkit-background-clip: text;
+    color: transparent;
+  {%- elsif title_color != blank -%} 
+    color: {{ title_color }};
+  {%- endif %}
+{%- endcapture %}
+
+<h3
+  class='{{ class_name }} zz-title-hx title-h3 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[48px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+>
+  {{ title }}
+</h3>
+<h3
+  class='{{ class_name }} zz-title-hx title-h3 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[24px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
+>
+  {{ title_mb | default: title }}
+</h3>
+

package/snippets/zz-h4.liquid

@@ -1,30 +1,30 @@
-{% comment %}
-  title: 标题
-  title_mb: 移动端标题
-  title_color_gradient: 标题颜色渐变
-  title_color: 标题颜色
-  class_name: 增加类名
-{% endcomment %}
-{%- capture heading_color -%}
-  {%- if title_color_gradient != blank %} 
-    background-image: {{ title_color_gradient }};
-    -webkit-background-clip: text;
-    color: transparent;
-  {%- elsif title_color != blank -%} 
-    color: {{ title_color }};
-  {%- endif %}
-{%- endcapture %}
-
-<h4
-  class='{{ class_name }} zz-title-hx title-h4 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[40px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-  style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
->
-  {{ title }}
-</h4>
-<h4
-  class='{{ class_name }} zz-title-hx title-h4 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[20px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-  style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
->
-  {{ title_mb | default: title }}
-</h4>
-
+{% comment %}
+  title: 标题
+  title_mb: 移动端标题
+  title_color_gradient: 标题颜色渐变
+  title_color: 标题颜色
+  class_name: 增加类名
+{% endcomment %}
+{%- capture heading_color -%}
+  {%- if title_color_gradient != blank %} 
+    background-image: {{ title_color_gradient }};
+    -webkit-background-clip: text;
+    color: transparent;
+  {%- elsif title_color != blank -%} 
+    color: {{ title_color }};
+  {%- endif %}
+{%- endcapture %}
+
+<h4
+  class='{{ class_name }} zz-title-hx title-h4 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[40px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+>
+  {{ title }}
+</h4>
+<h4
+  class='{{ class_name }} zz-title-hx title-h4 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[20px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+  style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
+>
+  {{ title_mb | default: title }}
+</h4>
+

package/snippets/zz-h5.liquid

@@ -1,39 +1,39 @@
-{% comment %}
-  title: 标题
-  title_mb: 移动端标题
-  title_color_gradient: 标题颜色渐变
-  title_color: 标题颜色
-  class_name: 增加类名
-{% endcomment %}
-{%- capture heading_color -%}
-  {%- if title_color_gradient != blank %} 
-    background-image: {{ title_color_gradient }};
-    -webkit-background-clip: text;
-    color: transparent;
-  {%- elsif title_color != blank -%} 
-    color: {{ title_color }};
-  {%- endif %}
-{%- endcapture %}
-
-{% if title_mb == blank %}
-  <h5
-    class='{{ class_name }} zz-title-hx title-h5 tw-m-0 tw-w-[full] tw-text-[16px] lg:tw-text-[32px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
-  >
-    {{ title }}
-  </h5>
-{%  else %}
-  <h5
-    class='{{ class_name }} zz-title-hx title-h5 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[32px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
-  >
-    {{ title }}
-  </h5>
-  <h5
-    class='{{ class_name }} zz-title-hx title-h5 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[16px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-    style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
-  >
-    {{ title_mb }}
-  </h5>
-{% endif %}
-
+{% comment %}
+  title: 标题
+  title_mb: 移动端标题
+  title_color_gradient: 标题颜色渐变
+  title_color: 标题颜色
+  class_name: 增加类名
+{% endcomment %}
+{%- capture heading_color -%}
+  {%- if title_color_gradient != blank %} 
+    background-image: {{ title_color_gradient }};
+    -webkit-background-clip: text;
+    color: transparent;
+  {%- elsif title_color != blank -%} 
+    color: {{ title_color }};
+  {%- endif %}
+{%- endcapture %}
+
+{% if title_mb == blank %}
+  <h5
+    class='{{ class_name }} zz-title-hx title-h5 tw-m-0 tw-w-[full] tw-text-[16px] lg:tw-text-[32px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+  >
+    {{ title }}
+  </h5>
+{%  else %}
+  <h5
+    class='{{ class_name }} zz-title-hx title-h5 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[32px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+  >
+    {{ title }}
+  </h5>
+  <h5
+    class='{{ class_name }} zz-title-hx title-h5 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[16px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
+  >
+    {{ title_mb }}
+  </h5>
+{% endif %}
+

package/snippets/zz-h6.liquid

@@ -1,39 +1,39 @@
-{% comment %}
-  title: 标题
-  title_mb: 移动端标题
-  title_color_gradient: 标题颜色渐变
-  title_color: 标题颜色
-  class_name: 增加类名
-{% endcomment %}
-{%- capture heading_color -%}
-  {%- if title_color_gradient != blank %} 
-    background-image: {{ title_color_gradient }};
-    -webkit-background-clip: text;
-    color: transparent;
-  {%- elsif title_color != blank -%} 
-    color: {{ title_color }};
-  {%- endif %}
-{%- endcapture %}
-
-{% if title_mb == blank %}
-  <h6
-    class='{{ class_name }} zz-title-hx title-h6 tw-m-0 tw-w-[full] tw-text-[14px] lg:tw-text-[24px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
-  >
-    {{ title }}
-  </h6>
-{%  else %}
-<h6
-    class='{{ class_name }} zz-title-hx title-h6 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[24px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
-  >
-    {{ title }}
-  </h6>
-  <h6
-    class='{{ class_name }} zz-title-hx title-h6 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[14px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
-    style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
-  >
-    {{ title_mb }}
-  </h6>
-{% endif %}
-
+{% comment %}
+  title: 标题
+  title_mb: 移动端标题
+  title_color_gradient: 标题颜色渐变
+  title_color: 标题颜色
+  class_name: 增加类名
+{% endcomment %}
+{%- capture heading_color -%}
+  {%- if title_color_gradient != blank %} 
+    background-image: {{ title_color_gradient }};
+    -webkit-background-clip: text;
+    color: transparent;
+  {%- elsif title_color != blank -%} 
+    color: {{ title_color }};
+  {%- endif %}
+{%- endcapture %}
+
+{% if title_mb == blank %}
+  <h6
+    class='{{ class_name }} zz-title-hx title-h6 tw-m-0 tw-w-[full] tw-text-[14px] lg:tw-text-[24px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+  >
+    {{ title }}
+  </h6>
+{%  else %}
+<h6
+    class='{{ class_name }} zz-title-hx title-h6 max-lg:tw-hidden tw-m-0 tw-w-[full] lg:tw-text-[24px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight == 'custom' %}font-weight: {{ font_weight_custom }};{% endif %}'
+  >
+    {{ title }}
+  </h6>
+  <h6
+    class='{{ class_name }} zz-title-hx title-h6 lg:tw-hidden tw-m-0 tw-w-[full] tw-text-[14px] tw-leading-[1.2] tw-tracking-normal {% if italic %}tw-italic{% endif %}'
+    style='{{ heading_color }} {% if font_weight_mb == 'custom' %}font-weight: {{ font_weight_mb_custom }};{% endif %}'
+  >
+    {{ title_mb }}
+  </h6>
+{% endif %}
+