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.

New locks start out using your store's default colors (set on the app's general template settings), but any change you make here only applies to the lock you're currently editing.

Open a lock's design panel

1. Open the app and go to Locks, then open the lock you want to restyle (or create a new one).

2. 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.

1. 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.

1. 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.

Only the screens that are actually relevant to this lock's rules and content type show up in the list. For example, the Passcode screen only appears if this lock uses the Passcode access rule, and Subscription form only appears if it uses Subscribe to unlock.

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.

The exact set of colours changes with the screen you've selected — a screen with no input field, for instance, has no input colours. Select each screen your lock actually uses and style it on its own.

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

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

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

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.

Related docs

• Translate lock messages

• Passcode