跳转到内容
免费安装
简体中文
在 Claude 中打开 就此页面提问在 ChatGPT 中打开 就此页面提问

设计和位置

设置促销弹窗的样式,并决定它在桌面端和移动端的浮动位置。

Design 标签页控制促销弹窗的外观和出现位置。它分为背景、位置、大小和字体,末尾还有一个自定义 CSS 输入框。

弹窗编辑器的 Design 标签页,显示背景、位置和大小设置

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 弹窗可能会覆盖大部分屏幕,这是让顾客不看就关掉它的最快方式。

  • Use custom font——选择字体系列和字重,或沿用模板的字体
  • Heading font size (px) 和 Content font size (px)

与模板字体保持一致,通常能让弹窗更像商店的一部分,而不是外加的东西。

标签页末尾的 Custom CSS (Developer Zone) 输入框接受应用于该弹窗的普通 CSS。其他地方的注意事项同样适用——请参阅自定义 CSS。

默认情况下,弹窗会按您在此处设置的位置浮动在页面上方。如果您希望它嵌入页面内部,例如放在某个区块中的固定位置,Display 标签页的 Custom location to show popup 下提供了相应的短代码:

<div class="samita-sales-popup" data-id="12345"></div>

复制后,将其粘贴到模板编辑器中的 Samita Countdown 应用块里。步骤与倒计时相同——请参阅使用短代码放置倒计时。

这对您有帮助吗?