颜色和模板

Sami B2B Lock, Password Protect 中的每个锁定都有各自独立的设计设置（颜色、按钮样式和几个显示开关），与其他所有锁定完全分开。这意味着，即使两者由同一个应用构建，受口令保护的批发目录也可以与“登录后查看此产品系列”的提示看起来完全不同。您在本页面所做的任何操作都不会影响其他锁定。

注意

新锁定一开始使用商店的默认颜色（在应用的通用模板设置中设置），但您在此处所做的任何更改都只适用于您当前正在编辑的锁定。

打开锁定的设计面板

1. 打开应用并前往 Locks，然后打开要调整样式的锁定（或创建新的锁定）。
2. 在 Lock setup 标签页中，找到右侧的 Preview 卡片，然后点击 Customize templates。

点击锁定编辑器 Preview 卡片中的 Customize templates。

3. 这会打开全屏的 Customize templates 面板。左侧边栏列出了此锁定可向买家显示的屏幕：Placeholder card、Notification message、Passcode、Subscription form、Confirmation prompt、Secret link 和 Country Restriction，底部还有一个 Collapse sidebar 控件。点击某个屏幕，即可在中间一栏加载其 Translation 和 Design 设置，右侧则显示实时预览。

Customize templates 面板：在左侧选择屏幕，在中间设置样式，在右侧查看效果。

4. 在中间一栏中，滚动经过 Translation 部分（详见 翻译锁定提示信息），到其下方的 Design 部分。本指南的所有内容都位于该 Design 部分。

注意

列表中只会显示与此锁定的规则和内容类型实际相关的屏幕。例如，只有当此锁定使用 Passcode 访问规则时才会显示 Passcode 屏幕，只有使用 Subscribe to unlock 时才会显示 Subscription form。

颜色

每种颜色都是一个色块，旁边显示其十六进制值。点击色块（或铅笔图标）打开 选择器，选择或输入颜色，右侧的实时预览会立即更新。

例如，对于 Passcode 屏幕，您可以设置：

字段	样式对象
Color button text	Submit 按钮上的文字
Color text	锁定提示文字
Color input passcode	买家在口令字段中输入的文字
Box shadow color	开启 Box shadow 时卡片的投影
Background button	Submit 按钮的填充色
Background notification	锁定卡片的背景
Background input passcode	口令字段的填充色

每种颜色都显示色块和十六进制值，点击即可打开选择器。

注意

具体的颜色选项会随您选择的屏幕而变化，例如没有输入字段的屏幕 就没有输入相关的颜色。请选择锁定实际使用的每个屏幕，并分别设置样式。

Box shadow 和 logo 图片开关

Design 部分的最上方、颜色选择器之上有两个开关：

• Box shadow：在锁定卡片周围添加投影（其颜色由下方的 Box shadow color 设置）。
• Use image：在卡片上显示锁定插图。关闭后卡片仅显示文字。

开启 Box shadow 或 Use image 可更改通知卡片的呈现方式。

Placeholder card

在侧边栏中选择 Placeholder card，可设置已锁定产品出现在列表（例如产品系列页面）中时，买家看到的占位内容的样式。

Placeholder card 屏幕控制已锁定商品在产品列表中的显示方式。

单个锁定的自定义 CSS

在 Design 部分的底部有一个 Custom css 编辑器。您在此处输入的任何内容只适用于这一个 锁定的小组件，适合进行模板所需的小幅调整（字号、边距），而无需 修改模板自身的样式表。

每个锁定都有自己的 Custom css 编辑器，用于一次性的样式调整。

实时预览面板

Customize templates 面板的右侧一栏始终显示所选屏幕的实时店面样式预览，您对颜色和样式的更改会立即显示，无需保存。面板顶部的 Desktop preview / Mobile preview 切换器可让您查看同一屏幕在各种尺寸下的显示效果。

在桌面和移动端预览之间切换，保存前检查两种布局。

由于整个面板位于某个特定锁定的编辑器内，预览始终反映该锁定自己的设置（内容、规则和设计），而不是通用的示例。

相关文档

• 翻译锁定提示信息
• 口令