顏色與範本
設計單一鎖定的顏色、按鈕和範本，並在儲存前即時預覽結果。
Sami B2B Lock, Password Protect 中的每個鎖定都有自己的設計設定，包括顏色、按鈕樣式和幾個顯示開關，與其他所有鎖定完全分開。這表示即使兩者都由同一個應用程式建立，您以通關密碼保護的批發商品目錄，也可以和「登入後查看此商品系列」的訊息看起來完全不同。您在本頁所做的任何操作都不會影響其他鎖定。
開啟鎖定的設計面板
Section titled “開啟鎖定的設計面板”- 開啟應用程式並前往 Locks，然後開啟您要重新設計樣式的鎖定（或建立新的鎖定）。
- 在 Lock setup 標籤頁中，找到右側的 Preview 卡片，然後點擊 Customize templates。
點擊鎖定編輯器 Preview 卡片中的 Customize templates。
- 這會開啟全螢幕的 Customize templates 面板。左側邊欄列出此鎖定可向購物者顯示的畫面：Placeholder card、Notification message、Passcode、Subscription form、Confirmation prompt、Secret link 和 Country Restriction，底部還有 Collapse sidebar 控制項。點擊某個畫面，即可在中間欄位載入其 Translation 和 Design 設定，右側則會顯示即時預覽。
Customize templates 面板：在左側選擇畫面，在中間設計樣式，並在右側查看結果。
- 在中間欄位中，捲動經過 Translation 區段（詳見翻譯鎖定訊息），到其下方的 Design 區段。本指南的所有內容都在 Design 區段中。
每種顏色都是一個色票，旁邊顯示其十六進位值。點擊色票（或鉛筆圖示）即可開啟選色器，選擇或輸入顏色後，右側的即時預覽會立即更新。
以 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 圖片開關
Section titled “Box shadow 和 logo 圖片開關”Design 區段的最上方、選色器之上有兩個開關：
- Box shadow：在鎖定卡片周圍加上陰影（陰影顏色由下方的 Box shadow color 設定）。
- Use image：在卡片上顯示鎖定插圖。關閉後，卡片只會顯示文字。
開啟 Box shadow 或 Use image，可改變通知卡片的呈現方式。
Placeholder card
Section titled “Placeholder card”在側邊欄中選取 Placeholder card，即可設計已鎖定商品出現在列表（例如商品系列頁面）時，購物者在原處看到的內容樣式。
Placeholder card 畫面用來控制已鎖定的項目在商品列表中的顯示方式。
每個鎖定的自訂 CSS
Section titled “每個鎖定的自訂 CSS”在 Design 區段的底部有 Custom css 編輯器。您在此輸入的內容只會套用到這一個鎖定的小工具，很適合用來做佈景主題需要的小幅調整（字體大小、邊距），而不必動到佈景主題本身的樣式表。
每個鎖定都有自己的 Custom css 編輯器，可用於一次性的樣式調整。
即時預覽面板
Section titled “即時預覽面板”Customize templates 面板的右側欄位會隨時顯示您所選畫面在商店前台樣式下的即時預覽，您的顏色和樣式變更會立即顯示，無需儲存。面板頂端的 Desktop preview / Mobile preview 切換器，可讓您查看同一個畫面在各種尺寸下的呈現效果。
在桌面和行動裝置預覽之間切換，於儲存前檢查兩種版面。
由於整個面板都位於某個特定鎖定的編輯器中，預覽一律會反映該鎖定自己的設定（內容、規則和設計），而不是通用的範例。