Skip to main content

SOP：商城页面装修与 Snippet 配置指南

本指南面向商城管理员与页面设计人员，指导如何在 Odoo 19 网站构建器（Website Builder）中零代码拖入促销展示组件，并分别完成 「商品列表页顶部轮播 Banner」 与 「独立大促活动专区罗列页」 两大典型业务场景的搭建与三端自适应核验。

1. 进入页面可视化编辑模式​

  1. 登录具备管理员权限的账号，访问任意需要装修的商城前端页面（例如 /shop 或 /promotions）。
  2. 在右上角快捷工具栏中，点击 「编辑」 (Edit) 按钮。
  3. 页面将进入可视化编辑工作区，右侧滑出网站构建器（Website Builder）组件积木面板。

网站构建器组件拖拽界面

2. 拖入促销展示积木块 (Snippet)​

  1. 在右侧组件面板的 「内部内容」 (Inner Content) 或搜索框中定位 「促销展示」 (Promotion Display) 组件。
  2. 按住鼠标左键，将其拖拽至页面主画布的目标行或列中。
  3. 释放鼠标，系统将自动在该位置初始化渲染一个促销展示容器。

3. 右侧属性面板深度配置​

鼠标左键单击已放入的促销组件，右侧工具栏将自动切换至 「风格」 (Styles) 定制属性面板：

促销展示组件属性配置面板

核心参数项详解与推荐取值​

参数名称选项 / 取值范围功能说明与推荐场景
促销展示位置 (Position)下拉单选（如“商品列表顶部通栏”）核心必选。指定当前组件从后台拉取哪一个广告位的海报素材。不同页面请绑定不同的位置。
展示模式 (Mode)轮播 (Carousel) / 罗列 (Grid)- 轮播：适合页面顶部黄金位，单图或多图滑动切换，节省纵向高度。
- 罗列：适合大促专题页，以网格平铺多张海报。
最大图片数量 (Max Images)1 ~ 20（默认 10）限制前台单次渲染的海报上限。优先级靠前的素材优先展示。
图片适配 (Image Fitting)完整显示 / 填充裁剪- 完整显示 (Contain)：保证整张海报不被裁剪，文字表格完整呈现。
- 填充裁剪 (Cover)：自动撑满容器，视觉冲击力强。
自动播放 (Auto Play)开关 Toggle（开启/关闭）仅在「轮播模式」下生效。开启后轮播图将无需客户操作自动循环切换。
播放间隔 (Interval)秒数（默认 5s，推荐 3s ~ 7s）自动切换幻灯片的停留时间。建议内容丰富的大海报设为 5 秒。

4. 实操场景 A：商品列表页（/shop）顶部轮播 Banner 搭建​

商品列表是采购客户高频下单的区域。在此处配置轮播通栏，既能告知大促信息，又不会遮挡下方的商品列表。

4.1 配置步骤​

  1. 访问 /shop 页面，点击顶部「编辑」进入构建器。
  2. 在商品网格上方区域拖入「促销展示」组件。
  3. 单击组件，在右侧面板配置：
    • 促销展示位置：选择 商品列表顶部通栏 (Shop Banner)
    • 展示模式：选择 轮播 (Carousel)
    • 自动播放：切换为 开启，间隔设为 5 s
    • 图片适配：选择 完整显示 (Contain)
  4. 点击右上角「保存」。

4.2 三端效果自检​

  • 桌面端效果 (Desktop)：宽屏展示，左侧分类与单仓筛选，右侧轮播 Banner 平滑滑动，字迹清晰醒目，下方无缝承接商品网格： 商品列表页轮播 Banner - 桌面端

  • 平板端效果 (Pad / iPad)：中等屏幕宽度自适应排版，支持触控左右手势滑动切换：

商品列表页轮播 Banner - 平板端
  • 手机移动端全屏效果 (Mobile / iPhone)：侧边栏自动折叠为移动端抽屉，轮播海报自适应单张大字号竖版构图，保障后厨移动采购流畅：
商品列表页轮播 Banner - 手机移动端全屏效果

5. 实操场景 B：独立大促专区页（/promotions）单列罗列搭建​

针对大型节日或清仓狂欢，搭建独立的专题活动落地页。为了让采购客户看清海报文案与每一项大促条款，强烈推荐采取单列 (Single-Column) 罗列模式。

5.1 配置步骤​

  1. 新建或访问独立活动页面 /promotions，点击顶部「编辑」。
  2. 在页面主内容区添加大标题（如“限时大促活动专区”）。
  3. 在标题下方拖入「促销展示」组件。
  4. 单击组件，在右侧面板配置：
    • 促销展示位置：选择 大促活动专区 (Special Deals)
    • 展示模式：选择 罗列 (Grid)
    • 响应式列数：将各端断点列数设为 1 列 (单列)，让每张海报居中充分舒展
    • 最大图片数量：设为 12
    • 自动播放：关闭（网格罗列模式无需自动轮播）
  5. 点击右上角「保存」。

5.2 三端效果自检​

  • 桌面端效果 (Desktop)：单列大卡片居中平铺，超大字号活动标题、利益点与行动按钮直观呈现，支持点击直达各专题或触发全屏 Lightbox： 独立大促专属页单列罗列 - 桌面端

  • 平板端效果 (Pad / iPad)：在 iPad 等平板设备上整洁平铺，大字号排版保障触控点击舒适度：

独立大促专属页单列罗列 - 平板端
  • 手机移动端全屏效果 (Mobile / iPhone)：手机屏幕上保持单列全宽卡片，拇指上下滑动体验自然顺畅，每一张促销卡片的核心文案与价格标签都清晰可见：
独立大促专属页单列罗列 - 手机移动端全屏效果