设计和位置
设置促销弹窗的样式,并决定它在桌面端和移动端的浮动位置。
Design 标签页控制促销弹窗的外观和出现位置。它分为背景、位置、大小和字体,末尾还有一个自定义 CSS 输入框。

Design 标签页,旁边是弹窗预览。
Background style 提供三种填充:
| 样式 | 您需要设置的内容 |
|---|---|
| Solid fill | Background color 和 Opacity |
| Gradient fill | Gradient color 1、Gradient color 2 和 Opacity |
| Image fill | 上传的图片——PNG、JPEG 或 JPG,小于 1 MB |
此外还有 Border settings——Border style(Solid、Dashed、Dotted)、边框大小、圆角、颜色和 Box shadow 开关——以及 Padding 和 Margin。
弹窗浮动的位置。桌面端和移动端分别在各自的标签页中配置。
- Show on desktop——开启或关闭桌面端显示
- Desktop position——Top left、Top middle、Top right、Bottom left、Bottom middle 或 Bottom right
- Animation type——Slide from top、Slide from bottom、Slide from left、Slide from right 或 Fade in-out
- Margin top/bottom (px) 和 Margin left/right (px)——让弹窗与屏幕边缘保持一定距离
设置项相同:Show on mobile、Mobile position、动画和外边距。
Bottom left 是默认位置,也是最稳妥的。它不会挡住页头、购物车,以及大多数模板放在移动端产品页面底部的固定 Add to cart 栏。
在选择其他位置之前,值得检查以下几点:
- Bottom right 在许多商店中会与在线聊天插件冲突。
- Top 位置可能会遮挡公告栏和固定页头。
- 移动端外边距比桌面端更重要——弹窗可放置的空间要小得多。
| 设置 | 选项 |
|---|---|
| Popup size | Small · Medium · Large |
| Image size | Small · Medium · Large |
| Use different size for mobile | 解锁 Mobile popup size 和 Mobile image size |
只要大于 Small,就请开启移动端选项。手机上的 Large 弹窗可能会覆盖大部分屏幕,这是让顾客不看就关掉它的最快方式。
字体系列和字体大小
Section titled “字体系列和字体大小”- Use custom font——选择字体系列和字重,或沿用模板的字体
- Heading font size (px) 和 Content font size (px)
与模板字体保持一致,通常能让弹窗更像商店的一部分,而不是外加的东西。
自定义 CSS
Section titled “自定义 CSS”标签页末尾的 Custom CSS (Developer Zone) 输入框接受应用于该弹窗的普通 CSS。其他地方的注意事项同样适用——请参阅自定义 CSS。
将弹窗放在页面中
Section titled “将弹窗放在页面中”默认情况下,弹窗会按您在此处设置的位置浮动在页面上方。如果您希望它嵌入页面内部,例如放在某个区块中的固定位置,Display 标签页的 Custom location to show popup 下提供了相应的短代码:
<div class="samita-sales-popup" data-id="12345"></div>复制后,将其粘贴到模板编辑器中的 Samita Countdown 应用块里。步骤与倒计时相同——请参阅使用短代码放置倒计时。