使用自定义工具优化您的店铺应用
SHOPLINE App 现已支持对店铺应用的增强定制，帮助您更灵活地控制应用页面的外观与功能。通过创建自定义组件和网页，您可以根据品牌特色和业务需求，量身打造个性化的店铺应用体验。
本指南将介绍支持的页面类型、配置方法，以及如何使用主题编辑器添加自定义组件。
自定义方式与适用页面
为了满足不同场景下的页面展示需求，SHOPLINE App 提供两种灵活的页面定制方式：【自定义组件】与【自定义 Web 页】。两者用途不同，可配合实现更完整的页面配置体验。
自定义组件
【自定义组件】用于在特定页面中插入自定义模块内容。创建组件时，需指定应用页面，之后也可通过代码编辑器或主题编辑器将其添加至其他支持页面。支持添加自定义组件的页面包括：
- 首页
- 商品详情页
- 购物车
- 快速加购面板
- 自定义页面
自定义 Web 页
【自定义 Web 页】用于创建独立页面，例如促销活动页、品牌故事页等。页面发布后即刻生效，无需通过主题编辑器额外设置。
如需在其他页面中展示该网页入口（如按钮或链接），您可以通过【自定义组件】将其嵌入首页、商品详情页等页面，实现页面间的跳转与整合，或是通过 Deep link 设置其为转跳页面。
创建自定义组件和网页
您可以直接在 SHOPLINE 后台管理所有自定义组件和网页。创建与编辑流程集中于同一界面，保证操作的一致性和高效性。
进入后台后，依次点击【Shopper App】>【App 设置】>【自定义开发】，即可访问自定义设定页面。在该页面中，您将看到两个标签页：【自定义组件】和【自定义 Web 页】，分别对应不同的定制功能。
创建自定义组件
- 在【自定义组件】标签页，点击右上角的【创建自定义组件】。
- 在右侧的【设置】面板中填写以下内容：
-
- 组件名称：为组件命名，方便识别和后续管理。
- 组件描述（选填）：根据需要填写简短描述。
-
归属页面：选择欲展示自定义组件的页面。
备注：组件必须至少指定一个页面，才能保存或发布。您也可以稍后返回代码编辑器指定更多页面，或通过主题编辑器添加组件。 - 组件预览图：上传用于组件预览的图片。
- 在代码编辑器中，使用 HTML、CSS 或 JavaScript 编写自定义代码。
- 在右侧面板切换到【预览】标签，查看组件在店铺前端的展示效果。
- 点击【保存】以保存组件，供后续继续编辑。此时若在编辑器中插入该组件，将显示【开发中】的提示字样。确认开发完成后，可点击【发布】，使组件立即生效并在页面中正常显示。
创建自定义组件后，请参考本文的下一节，了解如何通过主题编辑器添加该组件。
创建自定义 Web 页
- 在【自定义 Web 页】标签页，点击右上角的【创建 Web 页】。
- 在右侧【设置】面板输入网页名称，且可选择填写描述。
- 在代码编辑器中，使用 HTML、CSS 或 JavaScript 编写网页代码。
- 在右侧面板切换到【预览】标签，查看网页在店铺前端的展示效果。
- 点击【保存】以保存网页供后续编辑，或点击【发布】使网页立即生效。
在主题编辑器中添加自定义组件
创建并发布自定义组件后，您可以通过【主题编辑器】将其添加至支持的店铺前台页面：
- 在 SHOPLINE 后台，依次进入【Shopper App】>【App 设计】，点击【设计】进入主题编辑器。
- 在主题编辑器中，导航至您希望插入自定义组件的页面（以下示例以【首页】为例）。
- 在左侧面板中，点击【＋ 添加组件】，切换至【自定义】标签页，选择您要添加的自定义组件。或点击【+ 创建自定义组件】前往组件编辑器新增组件。
- 您可以根据需要拖曳组件以调整其在页面布局中的位置。
- 点击【保存】以保存修改供后续编辑，或点击【发布】>【发布到正式 App】使修改立即生效。
|
发布建议：处于【开发中】状态的组件无法直接【发布到正式 App】。SHOPLINE 建议先将组件设为【开发中】，在编辑器中点击【发布】>【发布至 Snaplook】，通过 Snaplook 预览应用效果是否正常，确认无误后再正式发布组件，并点击【发布到正式 App】上线使用。 关于如何使用 Snaplook 预览应用效果，请参见此帮助中心文档。 |
提示与最佳实践
为确保您的自定义组件和网页带来最佳使用体验，请参考以下建议：
保持设计与品牌一致性
请使用与店铺整体品牌一致的字体、颜色和间距。统一的设计有助于建立信任，并为顾客提供更流畅的浏览体验。
优化移动端布局
确保您的自定义组件具备良好的响应式设计，能够在不同屏幕尺寸下正常显示，带来流畅且友好的应用内体验。
关注页面性能
避免使用过多大型脚本或高解析度图片，这些内容可能导致页面加载缓慢。高效、简洁的代码不仅提升页面性能，还有助于 SEO 和整体用户体验。