Colors and templates
Style a single lock's colors, buttons, and templates, and preview the result live before you save.
Every lock in Sami B2B Lock, Password Protect keeps its own design settings — colors, button style, and a couple of display toggles — completely separate from every other lock. That means your passcode-protected wholesale catalog can look nothing like your “sign in to see this collection” message, even though both are built with the same app. Nothing you do on this page affects any other lock.
Open a lock’s design panel
Section titled “Open a lock’s design panel”- Open the app and go to Locks, then open the lock you want to restyle (or create a new one).
- On the Lock setup tab, find the Preview card on the right and click Customize templates.
Click Customize templates in the lock editor’s Preview card.
- This opens the full-screen Customize templates panel. The left sidebar lists the screens this lock can show a shopper — Placeholder card, Notification message, Passcode, Subscription form, Confirmation prompt, Secret link, and Country Restriction — plus a Collapse sidebar control at the bottom. Click a screen to load its Translation and Design settings in the middle column, with a live preview on the right.
The Customize templates panel: pick a screen on the left, style it in the middle, and check the result on the right.
- In the middle column, scroll past the Translation section (covered in Translate lock messages) to the Design section below it. Everything in this guide lives in that Design section.
Colors
Section titled “Colors”Each colour is a swatch with its hex value next to it. Click the swatch (or the pencil icon) to open the picker, choose or type a colour, and the live preview on the right updates immediately.
For the Passcode screen, for example, you get:
| Field | Styles |
|---|---|
| Color button text | The label on the Submit button |
| Color text | The lock message text |
| Color input passcode | Text the shopper types into the passcode field |
| Box shadow color | The card’s drop shadow, when Box shadow is on |
| Background button | The Submit button’s fill |
| Background notification | The lock card’s background |
| Background input passcode | The passcode field’s fill |
Each colour shows a swatch and hex value; click to open the picker.
Box shadow and logo image toggles
Section titled “Box shadow and logo image toggles”Two toggles sit at the very top of the Design section, above the colour pickers:
- Box shadow — adds a drop shadow around the lock card (its colour is set by Box shadow color below).
- Use image — shows the lock illustration on the card. Turn it off for a text-only card.
Turn on Box shadow or Use image to change how the notification card is presented.
Placeholder card
Section titled “Placeholder card”Select Placeholder card in the sidebar to style what shoppers see in place of a locked product when it appears in a list, such as a collection page.
The Placeholder card screen controls how locked items appear in product listings.
Per-lock custom CSS
Section titled “Per-lock custom CSS”At the bottom of the Design section there’s a Custom css editor. Anything you put here applies to this one lock’s widgets only — it’s a good place for a small tweak your theme needs (a font size, a margin) without touching your theme’s own stylesheet.
Each lock has its own Custom css editor for one-off styling.
The live preview panel
Section titled “The live preview panel”The right-hand column of the Customize templates panel always shows a live, storefront-styled preview of whatever screen you have selected — your color and style changes appear instantly, without saving. At the top of the panel, a Desktop preview / Mobile preview switcher lets you check how the same screen renders at each size.
Switch between desktop and mobile preview to check both layouts before saving.
Because this whole panel lives inside one specific lock’s editor, the preview always reflects that lock’s own settings — content, rules, and design — not a generic sample.