面板样式设置

功能说明

样式设置用于控制 会员面板（Widget）在店铺前台的展示方式，包括面板是否显示、背景样式、颜色方案以及启动器（Bubble）的展示位置与样式。

---

一、在店铺中启用会员面板

完成以下步骤后，会员面板将展示在店铺前台：

1. 进入 App 后，点击左侧菜单 Widget
2. 进入 Style 标签页
3. 勾选 Enable Floating Bubble
4. 打开 Shopify 店铺主题编辑器
5. 在 App embeds 中找到并开启 Rijoy Loyalty
6. 点击右上角 Save 保存设置

---

二、面板样式设置（Style）

操作路径

• 点击 Widget
• 进入 Style 标签页

---

1. Panel Background（面板背景）

用于设置会员面板首页的背景样式，支持以下三种方式：

• Default
  • 使用系统默认背景图片
• Solid Color
  • 使用纯色背景
  • 可自定义选择背景颜色
• Custom Image
  • 上传自定义背景图片作为面板背景

---

2. Colors（颜色设置）

用于自定义会员面板的整体配色，以匹配店铺品牌风格。
支持通过颜色选择器或直接输入 HTML 颜色代码进行配置。

可配置项说明：

• Primary Color
  • 影响：首页 Icon、主按钮、主要文本、进度条等
• Primary Button Text
  • 主按钮的文本颜色
• Secondary Color
  • 次按钮颜色（如 Copy、View 等按钮）
• Secondary Button Text
  • 次按钮的文本颜色
• Header Title
  • 首页欢迎标题的文本颜色

---

三、启动器设置（Bubble）

启动器（Bubble）是用户在前台唤起会员面板的入口。

操作路径

• 点击 Widget
• 进入 Bubble 标签页

---

1. Display Mode（展示样式）

支持以下三种展示方式：

• Icon & Text
  • 同时展示图标和文字
• Icon Only
  • 仅展示图标
• Text Only
  • 仅展示文字

---

2. Bubble Position（位置设置）

用于控制启动器在页面中的显示位置：

• Bottom Left
  • 显示在页面左下角
• Bottom Right
  • 显示在页面右下角
• Horizontal X
  • 输入范围：0–100
  • 表示启动器距离页面左右边距的百分比
• Vertical Y
  • 输入范围：0–100
  • 表示启动器距离页面上下边距的百分比

---

💡 注意事项

• 所有样式修改需点击 Save 后才会生效
• 若前台未显示启动器，请确认：
  • 已开启 Enable Floating Bubble
  • Shopify 主题中已启用 Rijoy Loyalty（App embeds）