カラーとテンプレート
1つのロックのカラー、ボタン、テンプレートをスタイル設定し、保存前に結果をライブプレビューで確認します。
Sami B2B Lock, Password Protectのすべてのロックは、カラー、ボタンスタイル、いくつかの表示トグルといった独自のデザイン設定を持ち、他のロックとは完全に独立しています。そのため、パスコードで保護された卸売カタログと「sign in to see this collection」というメッセージを、同じアプリで作成していても、まったく異なる見た目にできます。このページでの操作が他のロックに影響することはありません。
ロックのデザインパネルを開く
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セクションにあります。
各カラーは、横に16進数の値が表示されたスウォッチです。スウォッチ（または鉛筆アイコン）をクリックしてピッカーを開き、 カラーを選択または入力すると、右側のライブプレビューがすぐに更新されます。
たとえば、Passcode画面では、次の項目があります。
| フィールド | スタイル対象 |
|---|---|
| Color button text | Submitボタンのラベル |
| Color text | ロックメッセージのテキスト |
| Color input passcode | 買い物客がパスコードフィールドに入力するテキスト |
| Box shadow color | Box shadowがオンのときの、カードのドロップシャドウ |
| Background button | Submitボタンの塗りつぶし |
| Background notification | ロックカードの背景 |
| Background input passcode | パスコードフィールドの塗りつぶし |
各カラーにスウォッチと16進数の値が表示されます。クリックするとピッカーが開きます。
Box shadowとロゴ画像のトグル
Section titled “Box shadowとロゴ画像のトグル”Designセクションの最上部、カラーピッカーの上に、2つのトグルがあります。
- 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エディタがあります。ここに入力した内容は、この1つのロックの ウィジェットにのみ適用されます。テーマのスタイルシート自体には手を加えずに、テーマで必要な小さな調整（フォントサイズやマージンなど）を行うのに適しています。
各ロックには、個別のスタイル調整用に専用のCustom cssエディタがあります。
ライブプレビューパネル
Section titled “ライブプレビューパネル”Customize templatesパネルの右側の列には、選択している画面のストアフロント風ライブプレビューが常に表示され、カラーやスタイルの変更は保存しなくてもすぐに反映されます。パネル上部のDesktop preview / Mobile previewスイッチャーで、同じ画面が各サイズでどのように表示されるかを確認できます。
デスクトップとモバイルのプレビューを切り替えて、保存前に両方のレイアウトを確認します。
このパネル全体は特定のロックのエディタ内にあるため、プレビューには一般的なサンプルではなく、常にそのロック自体の設定（コンテンツ、ルール、デザイン）が反映されます。