视频正在录制中,剪辑发布之后会更新链接在此
本期教程给大家分享一个适用于任何 Shopify 主题的图片 Before and After 对比功能,也就是用户可以拖动中间的滑块对比图片的前后效果。
同时这个模块中大量运用了 Shopify 前段时间新增的条件控制选项,可以在特定的选项开启时才展示某个或某些其他选项,这使得设置项面板更加简洁、直观。

- 在主设置项未开启时,大部分与其相关的设置项都自动隐藏:

设置项构建器
通过我之前发布的 Shopify 主题设置项构建器可以快速帮你添加设置项:
Shopify 主题设置项快速创建和复制方法悄悄发布
本文发布一款 Shopify 主题设置项在线构建工具,方便用户快速切换和复制选项对应的配置信息,并以折扣码复制卡片为例,演示了 7 种常见设置项的用法,并提供在线工具方便快速使用。该工具旨在帮助Shopify卖家,尤其是个人卖家和中小公司,更高效地定制主题设置项。

用途和优势
引人注目的产品演示
- 清晰展示转变效果: 通过并排展示切实可见的效果,直观证明您的产品或服务的价值和功效
- 突出关键差异: 让客户能够立即理解您的产品所带来的改善或变化,使优势易于理解。
- 完美适用于视觉化产品: 对于以功能、功效带来变化为主要卖点的产品特别有效。
- 积极吸引用户参与: 滑块的互动性质鼓励用户直接与您的内容互动,查看 "After" 的状态。
- 简化复杂结果: 比冗长的描述或静态图像更有效地传达您产品的影响。
增强参与度和用户体验
- 立即吸引注意力: 动态和互动的滑块比静态内容更容易抓住并保持访客的注意力。
- 增加页面停留时间: 用户通常会花更多时间与滑块互动,这可以改善网站参与度指标。
- 提供难忘的互动体验: 提供独特且令人满意的用户体验,使您的产品页面脱颖而出。
- 改善信息记忆效果: 视觉对比通常比基于文本的声明更容易被记住,强化您产品的优势。
- 移动端友好互动: 实施良好的免费滑块通常具有响应式设计,在所有设备上提供流畅体验。
提升转化潜力和销售额
- 直接影响购买决策: 通过视觉化展示价值,滑块可以克服最后的犹豫并鼓励加购物车行为。
- 减少购买前疑问: 清晰的视觉证据可以主动回答许多客户关于产品功效的问题。
- 与竞争对手区别开来: 前后对比展示可以让您在那些没有有效展示效果的商店中获得优势。
- 支持营销宣传: 为您的广告和促销信息提供强有力的视觉支撑,增加其影响力。
- 零成本转化工具: 利用强大的视觉说服技巧来潜在地增加销售额,而不会增加您的运营费用
创建 Section
- 在 Shopify 后台创建文件,不需要添加后缀
before-and-after
{% comment %}
@vibe-coding
@tutorial: https://shopify2006.com/shopify-before-and-after-slider-with-conditional-settings
@shopify.now: 任何时间,任何地点,在浏览器中输入并回车访问 shopify.now 即可进入 Shopify 1 元快速创建页面
{% endcomment %}
<style>
{% if section.settings.enable_custom_heading_font and section.settings.custom_font_url != blank %}
@font-face {
font-family: 'customSubHeadingFont';
src: url('{{ section.settings.custom_font_url }}');
font-weight: normal;
font-style: normal;
font-display: swap;
}
{% endif %}
{% if section.settings.enable_custom_font and section.settings.main_custom_font_url != blank %}
@font-face {
font-family: 'customHeadingFont';
src: url('{{ section.settings.main_custom_font_url }}');
font-weight: normal;
font-style: normal;
font-display: swap;
}
{% endif %}
.shopify2006_main {
display: block;
width: 100%;
max-width: {% if section.settings.section_width != blank %}{{ section.settings.section_width }}px{% else %}1200px{% endif %};
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.{{ section.id }} .shopify2006_flex_container {
display: flex;
flex-wrap: wrap;
gap: 30px;
width: 100%;
align-items: flex-start;
{% unless section.settings.show_content %}
justify-content: center;
{% endunless %}
}
.{{ section.id }} .shopify2006_main_heading {
width: 100%;
text-align: center;
}
.{{ section.id }} .shopify2006_main_heading h2 {
margin: 0;
padding: 0;
font-family: var(--font-heading-family);
}
.{{ section.id }} img {
display: block;
max-width: 100%;
}
.{{ section.id }} .container {
display: grid;
position: relative;
overflow: hidden;
border-radius: 1rem;
--position: 50%;
--animation-duration: {{ section.settings.animation_duration | default: 300 }}ms;
}
.{{ section.id }} .shopify2006_before_after {
flex: 0 1 {% if section.settings.container_width != blank %}{{ section.settings.container_width }}%{% else %}48%{% endif %};
min-width: 280px;
}
.{{ section.id }} .shopify2006_before_after-content {
flex: 1 1 {% if section.settings.container_width >= 70 %}100%{% else %}calc(100% - {{ section.settings.container_width }}% - 30px){% endif %};
min-width: 280px;
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
min-height: {{ section.settings.image_height | default: 400 }}px;
}
.{{ section.id }} .image-container {
width: 100%;
position: relative;
height: {{ section.settings.image_height | default: 400 }}px; /* 使用用户设定的高度 */
min-height: 250px; /* 最小高度确保在小屏幕上可见 */
overflow: hidden; /* 隐藏超出容器的部分 */
touch-action: pan-x; /* 允许水平拖动滑块,但阻止垂直滚动冲突 */
}
.{{ section.id }} .shopify2006_before_img {
position: absolute;
top: 0;
left: 0;
width: 100%; /* 容器占满整个宽度 */
height: 100%;
z-index: 2; /* 确保 before 图片在 after 图片之上 */
clip-path: inset(0 calc(100% - var(--position)) 0 0); /* 使用 clip-path 裁剪右侧部分 */
transition: clip-path var(--animation-duration) ease-out; /* 添加裁剪动画 */
}
.{{ section.id }} .shopify2006_after_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* after 图片在底层 */
}
.{{ section.id }} .shopify2006_badge {
z-index: 7; /* 标签在可视层面,但不影响滑块点击 */
position: absolute;
bottom: 15px;
background: rgba(0, 0, 0, 0.6); /* 降低透明度,减少突出感 */
padding: 4px 8px; /* 减少内边距,让它更像标签而非按钮 */
color: rgba(255, 255, 255, 0.9); /* 稍微降低文字对比度 */
display: inline-flex;
align-items: center;
white-space: nowrap;
pointer-events: none; /* 标签仅用于显示,不可点击,避免用户误解 */
font-size: 11px; /* 稍微减小字体 */
font-weight: 400; /* 降低字重 */
letter-spacing: 0.5px;
border-radius: 0; /* 移除圆角,看起来更像标签 */
/* 移除阴影效果,避免按钮感 */
/* 移除过渡动画,避免交互暗示 */
backdrop-filter: blur(2px); /* 减少模糊效果 */
}
.{{ section.id }} .shopify2006_before_badge {
left: 15px;
/* 移除复杂的clip-path,使用简单的矩形形状 */
}
/* 移除箭头图标,避免暗示可点击性 */
.{{ section.id }} .shopify2006_after_badge {
right: 15px;
/* 移除复杂的clip-path,使用简单的矩形形状 */
}
/* After标签也移除箭头图标 */
/* 移除标签的悬停效果,避免用户误以为可以点击 */
.{{ section.id }} .slider-image {
width: 100%;
height: 100%;
object-fit: cover; /* 保持宽高比,只显示图片的一部分 */
object-position: center; /* 居中显示图片,确保只显示图片的中央部分 */
border-radius: 0 !important;
display: block;
}
.{{ section.id }} .image-before {
/* before 图片样式 */
{% if section.settings.grayscale_before %}filter: grayscale(100%);{% endif %}
}
.{{ section.id }} .shopify2006-slider {
position: absolute;
inset: 0;
cursor: grab; /* 更改为抓取手势,更明确表示可拖动 */
opacity: 0;
width: 100%;
height: 100%;
z-index: 10; /* 确保滑块在所有元素之上,可以被点击 */
-webkit-appearance: none; /* 移除默认样式 */
appearance: none;
background: transparent;
touch-action: pan-x; /* 只允许水平拖动,阻止垂直滚动 */
}
/* 滑块悬停样式 */
.{{ section.id }} .shopify2006-slider:hover {
cursor: grab;
}
.{{ section.id }} .shopify2006-slider:active {
cursor: grabbing;
}
.{{ section.id }} .shopify2006-slider:focus-visible ~ .slider-button {
outline: 5px solid black;
outline-offset: 3px;
}
.{{ section.id }} .slider-line {
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
left: var(--position);
transform: translateX(-50%);
pointer-events: none;
z-index: 5; /* 分割线在图片之上,但在滑块之下 */
transition: left var(--animation-duration) ease-out; /* 添加分割线移动动画 */
}
.{{ section.id }} .slider-button {
position: absolute;
background-color: #fff !important;
color: black;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
z-index: 6; /* 滑块按钮在分割线之上 */
transition: left var(--animation-duration) ease-out; /* 添加按钮移动动画 */
}
.{{ section.id }} .shopify2006_before_after-heading {
position: relative;
display: inline-block;
margin-bottom: {{ section.settings.heading_text_spacing }}px;
padding: 0;
}
.{{ section.id }} .shopify2006_before_after-heading h3 {
margin: 0;
padding: 0;
position: relative;
}
.{{ section.id }} .shopify2006_button_container {
display: flex;
justify-content: flex-start;
}
.{{ section.id }} .shopify2006_button {
display: inline-block;
padding: 16px 40px;
text-decoration: none;
background: linear-gradient(45deg, #ff0066, #ff6600, #ffcc00, #00ff66, #0066ff, #6600ff, #ff0066);
background-size: 400% 400%;
color: #fff;
border: none;
border-radius: 50px;
text-align: center;
cursor: pointer;
font-family: var(--font-body-family);
font-weight: 800;
font-size: 16px;
letter-spacing: 2px;
line-height: 1;
position: relative;
overflow: hidden;
text-transform: uppercase;
min-width: 150px;
z-index: 2;
animation: rainbowShift 3s ease-in-out infinite;
transition: all 0.3s ease;
margin: 5px;
}
.{{ section.id }} .shopify2006_button::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: rotate(45deg);
animation: shine 2s linear infinite;
z-index: -1;
}
.{{ section.id }} .shopify2006_button::after {
content: '✨';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
animation: sparkle 1.5s ease-in-out infinite;
}
.{{ section.id }} .shopify2006_button:hover {
transform: scale(1.02) translateY(-2px);
animation: rainbowShift 1s ease-in-out infinite;
z-index: 10;
}
.{{ section.id }} .shopify2006_button:active {
transform: scale(0.98);
}
@keyframes rainbowShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes shine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
@keyframes sparkle {
0%, 100% {
opacity: 1;
transform: translateY(-50%) scale(1) rotate(0deg);
}
50% {
opacity: 0.5;
transform: translateY(-50%) scale(1.3) rotate(180deg);
}
}
@media only screen and (max-width: 768px) {
.{{ section.id }} .shopify2006_before_after,
.{{ section.id }} .shopify2006_before_after-content {
flex: 1 0 100%;
}
.{{ section.id }} .image-container {
height: calc({{ section.settings.image_height | default: 400 }}px * 0.7); /* 移动端高度减少30% */
min-height: 200px;
}
.{{ section.id }} .shopify2006_badge {
padding: 3px 6px; /* 移动端进一步减少内边距 */
font-size: 10px; /* 移动端字体更小 */
bottom: 10px;
}
.{{ section.id }} .shopify2006_before_badge {
left: 10px;
}
.{{ section.id }} .shopify2006_after_badge {
right: 10px;
}
}
</style>
<main class="shopify2006_main {{ section.id }}" style="{% if section.settings.section_bg_color != blank %}background-color: {{ section.settings.section_bg_color }};{% endif %} {% if section.settings.section_width != blank %}max-width: {{ section.settings.section_width }}px;{% endif %} padding-top: {{ section.settings.top_padding }}px; padding-bottom: {{ section.settings.bottom_padding }}px;">
{% if section.settings.show_main_heading %}
<div class="shopify2006_main_heading" style="margin-bottom: {{ section.settings.main_heading_margin }}px;">
<h2 style="{% if section.settings.main_heading_font_size != blank %}font-size: {{ section.settings.main_heading_font_size }}px;{% endif %}{% if section.settings.main_heading_color != blank %} color: {{ section.settings.main_heading_color }};{% endif %}{% if section.settings.enable_custom_font and section.settings.main_custom_font_url != blank %} font-family: customHeadingFont;{% endif %}">{{ section.settings.main_heading_text }}</h2>
</div>
{% endif %}
<div class="shopify2006_flex_container">
<div class="container shopify2006_before_after" style="{% if section.settings.container_width != blank %}width: {{ section.settings.container_width }}%;{% endif %}">
<div class="image-container">
<div class="shopify2006_before_img">
{% if section.settings.bf_image == blank %}
{{ 'lifestyle-2' | placeholder_svg_tag: 'image-after slider-image' }}
{% else %}
<img
class="image-before slider-image"
src="{{ section.settings.bf_image | image_url }}"
alt="color photo"
width="{{ section.settings.bf_image.width | default: 800 }}"
height="{{ section.settings.bf_image.height | default: 500 }}"
>
{% endif %}
<span
class="shopify2006_before_badge shopify2006_badge"
style="{% unless section.settings.show_badge %}display: none;{% endunless %}"
>{{ section.settings.before_badge_text }}</span
>
</div>
<div class="shopify2006_after_img">
{% if section.settings.af_image == blank %}
{{ 'lifestyle-2' | placeholder_svg_tag: 'image-after slider-image' }}
{% else %}
<img
class="image-after slider-image"
src="{{ section.settings.af_image | image_url }}"
alt="black and white"
width="{{ section.settings.af_image.width | default: 800 }}"
height="{{ section.settings.af_image.height | default: 500 }}"
loading="lazy"
>
{% endif %}
<span class="shopify2006_after_badge shopify2006_badge" style="{% unless section.settings.show_badge %}display: none;{% endunless %}"
>{{ section.settings.after_badge_text }}</span
>
</div>
</div>
<input
type="range"
min="0"
max="100"
value="50"
aria-label="Percentage of before photo shown"
class="shopify2006-slider"
>
<div class="slider-line" aria-hidden="true"></div>
<div class="slider-button" aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
viewBox="0 0 256 256"
>
<rect width="256" height="256" fill="none"></rect>
<line
x1="128"
y1="40"
x2="128"
y2="216"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<line
x1="96"
y1="128"
x2="16"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<polyline class="shopify2006_before_arrow"
points="48 160 16 128 48 96"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></polyline>
<line
x1="160"
y1="128"
x2="240"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<polyline class="shopify2006_after_arrow"
points="208 96 240 128 208 160"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></polyline>
</svg>
</div>
</div>
{% if section.settings.show_content %}
<div class="container shopify2006_before_after-content">
<div class="shopify2006_before_after-heading">
<h3 style="{% if section.settings.heading_font_size != blank %}font-size: {{ section.settings.heading_font_size }}px;{% endif %}{% if section.settings.heading_color != blank %} color: {{ section.settings.heading_color }};{% endif %}{% if section.settings.enable_custom_heading_font and section.settings.custom_font_url != blank %} font-family: customSubHeadingFont;{% endif %}{% if section.settings.heading_bold %} font-weight: bold;{% endif %}">{{ section.settings.shopify2006_heading }}</h3>
</div>
<div class="shopify2006_before_after-paragraph" style="{% if section.settings.content_font_size != blank %}font-size: {{ section.settings.content_font_size }}px;{% endif %}{% if section.settings.content_color != blank %} color: {{ section.settings.content_color }};{% endif %}">
{{ section.settings.shopify2006_content }}
</div>
{% if section.settings.show_button and section.settings.button_text != blank %}
<div class="shopify2006_button_container" style="margin-top: {{ section.settings.button_text_spacing }}px;">
<a href="{{ section.settings.button_link }}" class="shopify2006_button" style="{% if section.settings.button_bg_color != blank %}background-color: {{ section.settings.button_bg_color }};{% endif %}{% if section.settings.button_text_color != blank %} color: {{ section.settings.button_text_color }};{% endif %} font-size: calc(14px * {{ section.settings.button_size | divided_by: 100.0 }}); padding: calc(10px * {{ section.settings.button_size | divided_by: 100.0 }}) calc(20px * {{ section.settings.button_size | divided_by: 100.0 }});padding-right: 40px;">
{{ section.settings.button_text }}
</a>
</div>
{% endif %}
</div>
{% endif %}
</div>
</main>
{% schema %}
{
"name": "图片前后对比 👉🏻 shopify.now",
"settings": [
{
"type": "header",
"content": "区块间距"
},
{
"type": "range",
"id": "top_padding",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "顶部内边距",
"default": 25
},
{
"type": "range",
"id": "bottom_padding",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "底部内边距",
"default": 20
},
{
"type": "header",
"content": "主标题"
},
{
"type": "checkbox",
"id": "show_main_heading",
"label": "显示主标题",
"default": false
},
{
"id": "main_heading_text",
"type": "text",
"label": "主标题文本",
"default": "Before and After",
"visible_if": "{{ section.settings.show_main_heading }}"
},
{
"type": "range",
"id": "main_heading_font_size",
"min": 18,
"max": 80,
"step": 1,
"unit": "px",
"label": "主标题字体大小",
"default": 32,
"visible_if": "{{ section.settings.show_main_heading }}"
},
{
"type": "range",
"id": "main_heading_margin",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "主标题下方间距",
"default": 15,
"visible_if": "{{ section.settings.show_main_heading }}"
},
{
"type": "color",
"id": "main_heading_color",
"label": "主标题颜色",
"visible_if": "{{ section.settings.show_main_heading }}"
},
{
"type": "checkbox",
"id": "enable_custom_font",
"label": "启用自定义主标题字体",
"visible_if": "{{ section.settings.show_main_heading }}",
"default": true
},
{
"type": "text",
"id": "main_custom_font_url",
"label": "自定义主标题字体URL",
"default": "https://cdn.shopify.com/s/files/1/0562/8529/8762/files/custom-font-title.ttf?v=1751341482",
"info": "粘贴上传到 内容 ~ 文件 的字体文件 URL",
"visible_if": "{{ section.settings.show_main_heading == true and section.settings.enable_custom_font == true }}"
},
{
"type": "header",
"content": "图片"
},
{
"id":"bf_image",
"type":"image_picker",
"label":"前图"
},
{
"type": "checkbox",
"id": "grayscale_before",
"label": "前图灰度化",
"default": false,
"visible_if": "{{ section.settings.bf_image != blank }}"
},
{
"id":"af_image",
"type":"image_picker",
"label":"后图"
},
{
"type": "range",
"id": "image_height",
"min": 250,
"max": 800,
"step": 25,
"unit": "px",
"label": "图片容器高度",
"default": 600
},
{
"type": "header",
"content": "动画设置",
"visible_if": "{{ section.settings.bf_image != blank and section.settings.af_image != blank }}"
},
{
"type": "range",
"id": "animation_duration",
"min": 200,
"max": 1000,
"step": 100,
"unit": "ms",
"label": "动画过渡时长",
"default": 300,
"visible_if": "{{ section.settings.bf_image != blank and section.settings.af_image != blank }}"
},
{
"type": "range",
"id": "auto_reset_delay",
"min": 500,
"max": 3000,
"step": 500,
"unit": "ms",
"label": "滑块自动复位延迟",
"default": 1000,
"visible_if": "{{ section.settings.bf_image != blank and section.settings.af_image != blank }}"
},
{
"type": "header",
"content": "标签选项"
},
{
"type": "checkbox",
"id": "show_badge",
"label": "显示图片底部标签",
"default": false
},
{
"id": "before_badge_text",
"type": "text",
"label": "左侧标签文本",
"default": "Before",
"visible_if": "{{ section.settings.show_badge }}"
},
{
"id": "after_badge_text",
"type": "text",
"label": "右侧标签文本",
"default": "After",
"visible_if": "{{ section.settings.show_badge }}"
},
{
"type": "header",
"content": "布局设置"
},
{
"type": "range",
"id": "section_width",
"min": 400,
"max": 1600,
"step": 50,
"unit": "px",
"label": "区块宽度",
"default": 1200
},
{
"type": "range",
"id": "container_width",
"min": 20,
"max": 100,
"step": 5,
"unit": "%",
"label": "滑块容器宽度",
"default": 50
},
{
"type": "color",
"id": "section_bg_color",
"label": "区块背景颜色"
},
{
"type": "header",
"content": "内容设置"
},
{
"type": "checkbox",
"id": "show_content",
"label": "显示右侧内容",
"default": false
},
{
"id":"shopify2006_heading",
"type":"text",
"label":"右侧标题",
"default": "Heading on the right",
"visible_if": "{{ section.settings.show_content }}"
},
{
"type": "range",
"id": "heading_font_size",
"min": 14,
"max": 72,
"step": 1,
"unit": "px",
"label": "标题字体大小",
"default": 24,
"visible_if": "{{ section.settings.show_content }}"
},
{
"type": "checkbox",
"id": "heading_bold",
"label": "粗体标题",
"default": false,
"visible_if": "{{ section.settings.show_content }}"
},
{
"type": "color",
"id": "heading_color",
"label": "标题文本颜色",
"visible_if": "{{ section.settings.show_content }}"
},
{
"type": "checkbox",
"id": "enable_custom_heading_font",
"label": "启用自定义标题字体",
"default": true,
"visible_if": "{{ section.settings.show_content }}"
},
{
"type": "text",
"id": "custom_font_url",
"label": "自定义标题字体URL",
"default": "https://cdn.shopify.com/s/files/1/0562/8529/8762/files/custom-font-title.ttf?v=1751341482",
"info": "粘贴上传到文件区块的字体文件URL",
"visible_if": "{{ section.settings.show_content == true and section.settings.enable_custom_heading_font == true }}"
},
{
"id":"shopify2006_content",
"type":"richtext",
"label":"右侧内容文本",
"default": "<p>Content on the right. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>",
"visible_if": "{{ section.settings.show_content }}"
},
{
"type": "range",
"id": "heading_text_spacing",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "标题与文本间距",
"default": 20,
"visible_if": "{{ section.settings.show_content }}"
},
{
"type": "range",
"id": "content_font_size",
"min": 12,
"max": 48,
"step": 1,
"unit": "px",
"label": "内容字体大小",
"default": 16,
"visible_if": "{{ section.settings.show_content }}"
},
{
"type": "color",
"id": "content_color",
"label": "内容文本颜色",
"visible_if": "{{ section.settings.show_content }}"
},
{
"type": "checkbox",
"id": "show_button",
"label": "显示按钮",
"default": true,
"visible_if": "{{ section.settings.show_content }}"
},
{
"id": "button_text",
"type": "text",
"label": "按钮文本",
"default": "Learn More",
"visible_if": "{{ section.settings.show_content == true and section.settings.show_button == true }}"
},
{
"id": "button_link",
"type": "url",
"label": "按钮链接",
"visible_if": "{{ section.settings.show_content == true and section.settings.show_button == true }}"
},
{
"type": "color",
"id": "button_text_color",
"label": "按钮文本颜色",
"visible_if": "{{ section.settings.show_content == true and section.settings.show_button == true }}"
},
{
"type": "range",
"id": "button_size",
"min": 80,
"max": 200,
"step": 10,
"unit": "%",
"label": "按钮大小",
"default": 100,
"visible_if": "{{ section.settings.show_content == true and section.settings.show_button == true }}"
},
{
"type": "range",
"id": "button_text_spacing",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "按钮与内容间距",
"default": 15,
"visible_if": "{{ section.settings.show_content == true and section.settings.show_button == true }}"
}
],
"presets":[
{
"name":"图片前后对比 👉🏻 shopify.now",
"settings": {
"show_badge": true,
"before_badge_text": "Before",
"after_badge_text": "After"
}
}
]
}
{% endschema %}
{% javascript %}
{% endjavascript %}
<script>
function initializeBeforeAfterSlider(uniqueId) {
const container = document.querySelector(`.${uniqueId} .shopify2006_before_after`);
const slider = document.querySelector(`.${uniqueId} .shopify2006-slider`);
const imageContainer = document.querySelector(`.${uniqueId} .image-container`);
if (container && slider && imageContainer) {
let autoResetTimeout;
let isUserInteracting = false;
// 自动恢复到中间位置的函数
function autoResetPosition() {
if (!isUserInteracting) {
slider.value = 50;
container.style.setProperty('--position', '50%');
}
}
// 重置自动恢复计时器
function resetAutoTimer() {
clearTimeout(autoResetTimeout);
const delay = {{ section.settings.auto_reset_delay | default: 2000 }};
autoResetTimeout = setTimeout(autoResetPosition, delay);
}
// 初始化滑块
slider.addEventListener('input', (e) => {
container.style.setProperty('--position', `${e.target.value}%`);
resetAutoTimer(); // 重置计时器
});
// 鼠标事件支持
slider.addEventListener('mousedown', (e) => {
isUserInteracting = true;
clearTimeout(autoResetTimeout);
});
slider.addEventListener('mousemove', (e) => {
if (e.buttons === 1) { // 只在鼠标按下时响应
container.style.setProperty('--position', `${e.target.value}%`);
}
});
slider.addEventListener('mouseup', (e) => {
isUserInteracting = false;
resetAutoTimer(); // 松开鼠标后开始计时
});
// 添加鼠标离开事件
slider.addEventListener('mouseleave', (e) => {
isUserInteracting = false;
resetAutoTimer();
});
// 移动端触摸事件处理
let startY = 0;
let startX = 0;
let isDragging = false;
// 在图片容器上处理触摸事件
imageContainer.addEventListener('touchstart', (e) => {
startY = e.touches[0].clientY;
startX = e.touches[0].clientX;
isDragging = false;
isUserInteracting = true;
clearTimeout(autoResetTimeout); // 触摸开始时清除自动恢复计时器
}, { passive: true });
imageContainer.addEventListener('touchmove', (e) => {
const currentY = e.touches[0].clientY;
const currentX = e.touches[0].clientX;
const diffY = Math.abs(currentY - startY);
const diffX = Math.abs(currentX - startX);
// 如果水平移动距离大于垂直移动距离,说明是在操作滑块
if (diffX > diffY && diffX > 10) { // 添加最小移动距离阈值
isDragging = true;
e.preventDefault(); // 阻止页面滚动
// 计算滑块位置
const rect = imageContainer.getBoundingClientRect();
const x = e.touches[0].clientX - rect.left;
const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
// 更新滑块值和样式
slider.value = percentage;
container.style.setProperty('--position', `${percentage}%`);
}
}, { passive: false });
imageContainer.addEventListener('touchend', (e) => {
if (isDragging) {
e.preventDefault();
}
isDragging = false;
isUserInteracting = false;
resetAutoTimer(); // 触摸结束后开始自动恢复计时
}, { passive: false });
// 确保初始位置正确
container.style.setProperty('--position', '50%');
// 启动初始自动恢复计时器
resetAutoTimer();
} else {
console.warn('Before/After slider elements not found for:', uniqueId);
}
}
// 确保DOM加载完成后初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
initializeBeforeAfterSlider('{{ section.id }}');
});
} else {
initializeBeforeAfterSlider('{{ section.id }}');
}
</script>
使用方法
参考视频演示
关联控制设置项显示
"visible_if": "{{ section.settings.show_main_heading }}"