跳转到内容
免费试用 7 天
简体中文
在 Claude 中打开 就此页面提问在 ChatGPT 中打开 就此页面提问

浮动报价小组件

开启浮动按钮,让客户可以在商店的任何页面打开他们的报价购物车。

Enable Quote Cart Widget:“Shows a floating button on your storefront so customers can open their quote cart from any page.”

该小组件是固定在每个页面边缘的快捷报价按钮。它的作用类似购物车图标:客户添加内容后,它会显示有多少产品在等待处理,点击一下即可进入报价购物车页面或直接打开报价弹窗,让客户无需四处寻找页面,就能查看已选内容并填写表单。

  1. 在应用中,前往 Quote settings 并点击 Customize,然后打开 Quote cart page 标签页。

  2. Enable Quote Cart Widget 是该标签页的最后一个区块,位于 Enable Quote Sections 下方。控件是其标题右端的开关。打开后,该区块会展开显示六项设置。

  3. 依次设置 Text、Action、Position、Border radius、Text color 和 Background color,下表对每一项都有说明。右侧的 Preview 面板会随您的更改显示小组件的效果。

    只有两种颜色可选:背景色和文字颜色。

  4. 点击编辑器右上角的 Save,然后在您的店面将一个产品加入报价。小组件会出现在屏幕边缘,标签为 Quote,括号中是产品数量。

    A storefront product page with the quote cart widget floating over it

    客户在商店每个页面上看到的小组件。

设置值和默认值作用
Text默认显示为 Quote ({numOfItem})小组件上的文字。{numOfItem} 会被替换为客户报价中的产品数量,因此显示为 Quote (3)。去掉该标记后,小组件只显示不带数量的纯文字标签。
ActionGo to quote cart page · Open quote popup点击小组件后的操作。见下文。
PositionHalf bottom right · Bottom right · Half top right · Half bottom left · Bottom left · Half top left小组件靠在哪一侧边缘,以及它在上下方向上的位置。带“half”的选项会将其固定在屏幕侧边;Bottom right 和 Bottom left 则将其放在角落。
Border radius以 px 为单位的数字,从 0 开始小组件边角的圆润程度。0 表示直角。
Text color一种颜色文字的颜色。
Background color一种颜色小组件本身的颜色。

由 Action 决定,两个值的行为不同:

Action客户点击后会发生什么
Go to quote cart page小组件是指向您的报价购物车页面的链接,该店面页面位于 /pages/request-for-quote,用于“Shows the quote form and the customer's quote cart.”客户会离开当前所在的页面。
Open quote popup报价弹窗会在客户当前所在的页面上方打开。他们不会离开在您目录中浏览的位置。

报价购物车页面和小组件都在同一个 Quote cart page 标签页上设置,因此页面自己的名称和路径就在小组件区块的正上方。

该选哪一个,取决于客户建立报价的方式。如果他们会先收集多个产品再询价,Go to quote cart page 是更好的选择:报价购物车页面会显示包含数量的完整清单,这正是他们想要检查的内容。如果他们只添加一个产品就准备发送,Open quote popup 可以省去一次页面加载。

应用会在报价购物车页面本身隐藏小组件,因为客户已经在查看自己的报价,它没有可链接的目标。在店面的其他所有位置,它都会跟随客户。

请选择一个在页面上醒目、又不会与购买按钮抢眼的 Background color,以及对比度足够、一眼就能看清的 Text color。也请在手机上检查:浮动元素会与在线聊天气泡和 Cookie 横幅争夺空间,因此请确保您的小组件在所处位置仍然清晰可读。如果它与其他内容冲突,请通过 Position 移动它,而不是关闭它:Half top right 和 Half top left 可避开大多数聊天工具使用的底部角落控件。

您在 Text 中输入的任何内容都属于店面文字,因此会与客户阅读的其他内容一样,通过应用的翻译功能处理。请在那里按语言设置文字,而不是在已翻译的商店中将就使用英文,请参阅 翻译店面文字。

如果小组件与店面上的其他内容冲突,而 Position 无法解决,请将截图发送给我们,请参阅 联系支持。

这对您有帮助吗?