For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

The Customize templates button in the lock editor's Preview card
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.

Customize templates panel showing the screen list on the left, Design section in the middle, and 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

The Design section's colour pickers, each showing a swatch and its hex value
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.

Box shadow and Use image toggles above the notification color pickers
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 selected in the Customize templates panel, with its own settings and preview
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.

The Custom css editor at the bottom of a lock's Design section
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.

Desktop and mobile preview toggle at the top of the Customize templates panel
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.

Last updated

Was this helpful?