案例作品集 浏览精选项目

WESWOO 提供 Shopify Plus 项目开发费抵扣，至多 US$4,800

Shopify 特效与定制模块库 / 图库与细节展示

Shopify 图库与细节展示

先看整体，再主动查看细节或切换内容，连续动效用于装饰区域。

内容确定后，再选择特效

先在知识库确定页面逻辑，再在开发知识库连接真实数据。只在有助理解信息的位置增加动效，并在接入后检查性能。

Shopify 知识库 · Shopify 开发知识库

接入 Shopify Section

预览由普通 HTML、CSS 和 JavaScript 组成。先在复制主题中逐个接入，再由 Section 设置提供真实文案和图片。

  1. 将所选 CSS 保存为 assets/ww-effects.css，JavaScript 保存为 assets/ww-selected-effect.js；与主题整合前，把 CSS 限定在该 Section 内。
  2. 用所选 .fx 元素替换下方壳层占位，将示例文字、抽象图形改为 Section 设置及有授权的 image_tag 输出，控件标签接入语言文件。
  3. 用生命周期脚本防止重复挂载，离屏暂停、shopify:section:unload 时销毁；把局部滚动演示改成实际 Section 的区间计算，在主题编辑器和真实设备验收。

接入壳层：先插入所选效果 HTML 才能使用，不是可直接安装的主题或应用。

sections/ww-effect.liquid
WESWOO
{% comment %} WESWOO example shell. Add ONE effect's HTML inside .fx-slot. {% endcomment %}
{{ 'ww-effects.css' | asset_url | stylesheet_tag }}
<section id="ww-effect-{{ section.id }}" data-ww-effect-section>
  <h2>{{ section.settings.heading | escape }}</h2>
  <button type="button" data-effect-toggle aria-pressed="false">Play / pause effect</button>
  <div class="fx-slot">
    {% comment %} Insert the chosen .fx element here; read copy/images from section settings. {% endcomment %}
  </div>
</section>
<script type="module" src="{{ 'ww-effect-section.js' | asset_url }}"></script>
{% schema %}
{"name":"WESWOO effect","settings":[{"type":"text","id":"heading","label":"Heading","default":"Our story"}],"presets":[{"name":"WESWOO effect"}]}
{% endschema %}

共用初始化：每个模块接入一种所选效果；多种效果需显式建立注册表和 Section 对应关系。

assets/ww-effect-section.js
WESWOO
// Put the chosen example JS in assets/ww-selected-effect.js (rename .mjs to .js).
import {mountEffect} from './ww-selected-effect.js';
const instances=new Map();
function mount(container=document){
  const roots=[...(container.matches?.('[data-ww-effect-section]')?[container]:[]),...container.querySelectorAll('[data-ww-effect-section]')];
  for(const section of roots){
    if(instances.has(section))continue;
    const root=section.querySelector('.fx'),button=section.querySelector('[data-effect-toggle]');
    if(!root||!button)continue;
    const effect=mountEffect(root),events=new AbortController();let playing=false;
    const pause=()=>{playing=false;effect.pause();button.setAttribute('aria-pressed','false');};
    button.addEventListener('click',()=>{playing=!playing;playing?effect.resume():effect.pause();button.setAttribute('aria-pressed',String(playing));},{signal:events.signal});
    const observer=new IntersectionObserver(entries=>{if(!entries[0].isIntersecting)pause();});observer.observe(section);
    document.addEventListener('visibilitychange',()=>{if(document.hidden)pause();},{signal:events.signal});
    instances.set(section,()=>{observer.disconnect();events.abort();effect.destroy();});
  }
}
document.addEventListener('shopify:section:load',event=>mount(event.target));
document.addEventListener('shopify:section:unload',event=>{for(const [section,destroy] of instances)if(section===event.target||event.target.contains(section)){destroy();instances.delete(section);}});
mount();

这些示例为 WESWOO 编写的教学实现，可查看、复制并保留 WESWOO 及本页来源说明。参考主题、第三方库、商标和案例图片仍适用各自权利，未包含在演示下载中。

Shopify Dawn 主题整合参考（固定版本）。Dawn 源码适用其 Shopify 平台使用许可，上述示例未打包该仓库代码。

依据核对 2026-11-12