색상 및 템플릿
개별 잠금의 색상, 버튼, 템플릿을 스타일링하고 저장하기 전에 결과를 실시간으로 미리 봅니다.
Sami B2B Lock, Password Protect의 모든 잠금은 색상, 버튼 스타일, 몇 가지 표시 토글 같은 자체 디자인 설정을 다른 잠금과 완전히 분리해서 가지고 있습니다. 그래서 암호로 보호된 도매 카탈로그와 “이 컬렉션을 보려면 로그인하세요” 메시지가 같은 앱으로 만들어졌더라도 전혀 다른 모습일 수 있습니다. 이 페이지에서 하는 작업은 다른 잠금에 영향을 주지 않습니다.
잠금의 디자인 패널 열기
섹션 제목: “잠금의 디자인 패널 열기”- 앱을 열고 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 및 로고 이미지 토글
섹션 제목: “Box shadow 및 로고 이미지 토글”Design 섹션 맨 위, 색상 선택기 위에 토글이 두 개 있습니다.
- Box shadow: 잠금 카드 주위에 그림자를 추가합니다(색상은 아래의 Box shadow color로 설정).
- Use image: 카드에 잠금 일러스트를 표시합니다. 텍스트만 있는 카드를 원하면 끕니다.
Box shadow 또는 Use image를 켜면 알림 카드가 표시되는 방식이 바뀝니다.
Placeholder card
섹션 제목: “Placeholder card”사이드바에서 Placeholder card를 선택하면, 컬렉션 페이지 같은 목록에 잠긴 제품이 나타날 때 제품 대신 쇼핑객에게 표시되는 화면의 스타일을 지정할 수 있습니다.
Placeholder card 화면은 제품 목록에서 잠긴 항목이 표시되는 방식을 제어합니다.
잠금별 사용자 지정 CSS
섹션 제목: “잠금별 사용자 지정 CSS”Design 섹션 맨 아래에 Custom css 편집기가 있습니다. 여기에 입력한 내용은 이 잠금의 위젯에만 적용됩니다. 테마 자체의 스타일시트를 건드리지 않고 테마에 필요한 작은 조정(글꼴 크기, 여백 등)을 하기에 좋습니다.
잠금마다 일회성 스타일 지정을 위한 자체 Custom css 편집기가 있습니다.
실시간 미리보기 패널
섹션 제목: “실시간 미리보기 패널”Customize templates 패널의 오른쪽 열에는 선택한 화면의 실시간 미리보기가 스토어프런트 스타일로 항상 표시되며, 색상과 스타일 변경 사항이 저장하지 않아도 즉시 반영됩니다. 패널 맨 위의 Desktop preview / Mobile preview 전환 버튼으로 같은 화면이 각 크기에서 어떻게 보이는지 확인할 수 있습니다.
저장하기 전에 데스크톱과 모바일 미리보기를 전환해 두 레이아웃을 모두 확인합니다.
이 패널 전체가 특정 잠금의 편집기 안에 있으므로, 미리보기에는 일반적인 샘플이 아니라 해당 잠금의 콘텐츠, 규칙, 디자인 설정이 그대로 반영됩니다.