📱 客户证言滚动-主体编辑代码

找到模板编辑代码，在sections里面随机建一个文件比如123.liquid，结尾必须liquid，复制下面代码到新建文件然后保存，编辑主体得时候可以选择

{% comment %}
  客户证言 / 社交证明区块：标题区 + 横向自动滚动图片带
  将本文件放入主题的 sections/ 目录，在主题编辑器中添加该 section，并为每条证言添加图片 block。
  横向滚动由 CSS @keyframes 驱动（不依赖 JS）；可选勾选「忽略减少动态效果」以覆盖系统动画抑制。
{% endcomment %}

{% liquid
  assign ctm_scope = 'ctm-scope-' | append: section.id | handleize
  assign ctm_kf = 'ctm-kf-' | append: section.id | replace: '--', '-' | replace: '__', '-' | handleize
  assign ctm_dir = section.settings.scroll_direction | default: 'ltr'

  assign ctm_hf = section.settings.heading_font | default: 'serif'
  case ctm_hf
    when 'theme'
      assign ctm_heading_ff = 'var(--font-heading-family, Georgia, serif)'
    when 'serif'
      assign ctm_heading_ff = "Georgia, 'Times New Roman', Times, serif"
    when 'sans'
      assign ctm_heading_ff = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    when 'custom'
      assign ctm_heading_ff = section.settings.heading_font_custom | default: 'Georgia, serif' | strip
    else
      assign ctm_heading_ff = "Georgia, 'Times New Roman', Times, serif"
  endcase

  assign ctm_bf = section.settings.body_font | default: 'sans'
  case ctm_bf
    when 'theme'
      assign ctm_body_ff = 'var(--font-body-family, system-ui, sans-serif)'
    when 'sans'
      assign ctm_body_ff = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    when 'serif'
      assign ctm_body_ff = "Georgia, Cambria, 'Times New Roman', serif"
    when 'custom'
      assign ctm_body_ff = section.settings.body_font_custom | default: 'system-ui, sans-serif' | strip
    else
      assign ctm_body_ff = 'system-ui, -apple-system, sans-serif'
  endcase
%}

<div
  class="ctm-section {{ ctm_scope }}{% if section.settings.ignore_reduced_motion %} ctm-marquee--force-motion{% endif %}"
  style="
    --ctm-star-color: {{ section.settings.star_color }};
    --ctm-gap: {{ section.settings.image_gap }}px;
    --ctm-img-radius: {{ section.settings.image_radius }}px;
    --ctm-img-height: {{ section.settings.image_height }}px;
    --ctm-section-pt: {{ section.settings.padding_top }}px;
    --ctm-section-pb: {{ section.settings.padding_bottom }}px;
    --ctm-font-heading: {{ ctm_heading_ff }};
    --ctm-font-body: {{ ctm_body_ff }};
  "
>
  <div class="ctm-section__inner page-width">
  <div class="ctm-header">
    {% if section.settings.show_stars %}
      <div class="ctm-stars" role="img" aria-label="{{ section.settings.heading | default: '5 out of 5 stars' | escape }}">
        {% assign max_stars = section.settings.star_count | default: 5 %}
        {% if max_stars > 5 %}{% assign max_stars = 5 %}{% endif %}
        {% if max_stars < 1 %}{% assign max_stars = 1 %}{% endif %}
        {% for i in (1..max_stars) %}
          <span class="ctm-star" aria-hidden="true">★</span>
        {% endfor %}
      </div>
    {% endif %}

    {% if section.settings.badge_text != blank %}
      <p class="ctm-badge">{{ section.settings.badge_text }}</p>
    {% endif %}

    {% if section.settings.heading != blank %}
      <h2 class="ctm-heading">{{ section.settings.heading }}</h2>
    {% endif %}

    {% if section.settings.subheading != blank %}
      <p class="ctm-subheading">{{ section.settings.subheading }}</p>
    {% endif %}
  </div>
  </div>

  {% assign image_blocks = section.blocks | where: 'type', 'image' %}
  {% if image_blocks.size > 0 %}
    <div class="ctm-marquee-shell{% if section.settings.full_bleed_marquee %} ctm-marquee-shell--bleed{% endif %}">
    <div class="ctm-marquee{% if section.settings.pause_on_hover %} ctm-marquee--pause-hover{% endif %}">
      <div class="ctm-marquee__viewport">
        <div class="ctm-marquee__track">
          {% comment %} 同一组图片重复两遍，动画 translateX(-50%) 才能无缝循环 {% endcomment %}
          {% for pass in (1..2) %}
            {% for block in image_blocks %}
              <div
                class="ctm-marquee__item"
                {% if pass == 2 %}
                  aria-hidden="true"
                {% else %}
                  {{ block.shopify_attributes }}
                {% endif %}
              >
                {% if block.settings.image != blank %}
                  {{
                    block.settings.image
                    | image_url: width: 800
                    | image_tag:
                      loading: 'lazy',
                      class: 'ctm-marquee__img',
                      widths: '200, 400, 600, 800',
                      sizes: '(max-width: 749px) 40vw, 220px',
                      alt: block.settings.image.alt | default: section.settings.heading | escape
                  }}
                {% else %}
                  <div class="ctm-marquee__placeholder">{{ 'onboarding.product_title' | t | default: 'Image' }}</div>
                {% endif %}
              </div>
            {% endfor %}
          {% endfor %}
        </div>
      </div>
    </div>
    </div>
    <style>
      .{{ ctm_scope }} .ctm-marquee__track {
        animation: {{ ctm_kf }} {{ section.settings.scroll_duration }}s linear infinite;
        will-change: transform;
      }
      {% if ctm_dir == 'ltr' %}
        @keyframes {{ ctm_kf }} {
          0% {
            transform: translate3d(-50%, 0, 0);
          }
          100% {
            transform: translate3d(0, 0, 0);
          }
        }
      {% else %}
        @keyframes {{ ctm_kf }} {
          0% {
            transform: translate3d(0, 0, 0);
          }
          100% {
            transform: translate3d(-50%, 0, 0);
          }
        }
      {% endif %}
      .{{ ctm_scope }} .ctm-marquee--pause-hover:hover .ctm-marquee__track {
        animation-play-state: paused;
      }
      @media (prefers-reduced-motion: reduce) {
        .{{ ctm_scope }}:not(.ctm-marquee--force-motion) .ctm-marquee__track {
          animation: none !important;
        }
        .{{ ctm_scope }}:not(.ctm-marquee--force-motion) .ctm-marquee__viewport {
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: thin;
        }
      }
    </style>
  {% endif %}
</div>

{% stylesheet %}
  .ctm-section {
    padding-top: var(--ctm-section-pt, 3rem);
    padding-bottom: var(--ctm-section-pb, 3rem);
    background: var(--ctm-section-bg, transparent);
    overflow: visible;
  }

  .ctm-marquee-shell {
    width: 100%;
    max-width: 100%;
  }

  .ctm-marquee-shell--bleed {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    position: relative;
    left: auto;
    right: auto;
  }

  .ctm-header {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto 2rem;
  }

  .ctm-stars {
    display: flex;
    justify-content: center;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ctm-star-color, #2e7d32);
    letter-spacing: 0.02em;
  }

  .ctm-badge {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.45);
    font-family: var(--ctm-font-body, system-ui, sans-serif);
  }

  .ctm-heading {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    font-family: var(--ctm-font-heading, Georgia, serif);
    letter-spacing: -0.02em;
  }

  .ctm-subheading {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.72);
    font-family: var(--ctm-font-body, system-ui, sans-serif);
  }

  .ctm-marquee__viewport {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    padding-bottom: 0.25rem;
  }

  .ctm-marquee__viewport.ctm-marquee__viewport--fallback {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .ctm-marquee__track {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    min-width: max-content;
    gap: var(--ctm-gap, 12px);
    backface-visibility: hidden;
  }

  .ctm-marquee__item {
    flex: 0 0 auto;
    width: calc(var(--ctm-img-height, 280px) * 0.72);
    height: var(--ctm-img-height, 280px);
  }

  .ctm-marquee__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ctm-img-radius, 12px);
  }

  .ctm-marquee__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ctm-img-radius, 12px);
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.45);
    font-family: var(--ctm-font-body, system-ui, sans-serif);
  }
{% endstylesheet %}

{% schema %}
{
  "name": "客户证言滚动图",
  "tag": "section",
  "class": "section-customer-testimonials-marquee",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_stars",
      "label": "显示星级",
      "default": true
    },
    {
      "type": "range",
      "id": "star_count",
      "min": 1,
      "max": 5,
      "step": 1,
      "label": "星星数量",
      "default": 5
    },
    {
      "type": "color",
      "id": "star_color",
      "label": "星星颜色",
      "default": "#2E7D32"
    },
    {
      "type": "text",
      "id": "badge_text",
      "label": "认证说明",
      "default": "✓ Verified by Judge.me"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "标题",
      "default": "Real Overnight Results"
    },
    {
      "type": "textarea",
      "id": "subheading",
      "label": "副标题",
      "default": "Join 100,000+ customers waking up lighter, flatter, and less bloated - starting the very first night."
    },
    {
      "type": "header",
      "content": "字体"
    },
    {
      "type": "select",
      "id": "heading_font",
      "label": "标题字体",
      "options": [
        { "value": "theme", "label": "跟随主题标题字体" },
        { "value": "serif", "label": "衬线（杂志感）" },
        { "value": "sans", "label": "无衬线（简洁）" },
        { "value": "custom", "label": "自定义" }
      ],
      "default": "serif"
    },
    {
      "type": "text",
      "id": "heading_font_custom",
      "label": "标题自定义 font-family",
      "info": "仅在「自定义」时生效，示例：'Playfair Display', Georgia, serif",
      "default": "'Cormorant Garamond', Georgia, serif"
    },
    {
      "type": "select",
      "id": "body_font",
      "label": "说明与认证文字字体",
      "options": [
        { "value": "theme", "label": "跟随主题正文字体" },
        { "value": "sans", "label": "无衬线" },
        { "value": "serif", "label": "衬线" },
        { "value": "custom", "label": "自定义" }
      ],
      "default": "sans"
    },
    {
      "type": "text",
      "id": "body_font_custom",
      "label": "说明自定义 font-family",
      "info": "仅在「自定义」时生效",
      "default": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    },
    {
      "type": "select",
      "id": "scroll_direction",
      "label": "滚动方向",
      "options": [
        { "value": "ltr", "label": "从左向右" },
        { "value": "rtl", "label": "从右向左" }
      ],
      "default": "ltr"
    },
    {
      "type": "range",
      "id": "scroll_duration",
      "min": 15,
      "max": 90,
      "step": 5,
      "unit": "s",
      "label": "完整滚动一轮时长",
      "info": "数值越大滚动越慢",
      "default": 45
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "鼠标悬停时暂停",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "full_bleed_marquee",
      "label": "图片带横向铺满屏幕（突破页面宽度）",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "ignore_reduced_motion",
      "label": "忽略系统“减少动态效果”（仍会滚动；无障碍场景慎用）",
      "default": false
    },
    {
      "type": "range",
      "id": "image_height",
      "min": 200,
      "max": 400,
      "step": 10,
      "unit": "px",
      "label": "图片高度",
      "default": 280
    },
    {
      "type": "range",
      "id": "image_gap",
      "min": 4,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "图片间距",
      "default": 12
    },
    {
      "type": "range",
      "id": "image_radius",
      "min": 0,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "图片圆角",
      "default": 12
    },
    {
      "type": "header",
      "content": "间距"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "上内边距",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "下内边距",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "图片",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "图片"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "客户证言滚动图",
      "blocks": [
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" }
      ]
    }
  ]
}
{% endschema %}