트러스트 배지 만들기

트러스트 배지는 결제, 보안, 배송, 보증, 정책 아이콘을 모아 놓은 블록으로, 제목과 설명을 선택적으로 넣을 수 있습니다. 편집기에는 콘텐츠와 스타일을 설정하는 Design 탭과 제품 페이지의 기본 위치와 쇼트코드를 설정하는 Placement 탭이 있습니다.

1. Trust Badges 열기

   Shopify 관리자에서 Sami Product Labels를 열고 앱 탐색 메뉴에서 Extra Features를 선택한 다음 Trust Badges 탭을 선택하세요.

   이미 트러스트 배지가 있다면 페이지에 표로 표시됩니다. 목록이 비어 있으면 대신 Create your first trust badge 패널이 표시됩니다.

   

   Trust Badges 탭에는 만들기 작업, 저장된 트러스트 배지, 추천 템플릿이 있습니다.

2. 시작 방법 선택하기

   Create trust badge를 클릭하세요. 이 버튼은 표가 표시될 때는 페이지 머리글에, 아직 트러스트 배지를 만들지 않았을 때는 빈 상태 패널에 나타납니다.

   Featured templates로 스크롤하세요. View all templates를 클릭하면 Eco-Friendly template, With payment method, Policies store template, Badge box template 네 가지 디자인이 모두 표시됩니다. 템플릿에서 Select를 클릭하면 아이콘과 스타일이 이미 적용된 상태로 열립니다.

   두 방법 모두 편집기가 Design 탭에서 열립니다.

   

   트러스트 배지를 처음부터 만들거나 네 가지 추천 템플릿 중 하나를 선택하세요.

3. 트러스트 배지 이름 지정하기

   이름 입력란은 미리보기 위에 있습니다. New Trust Badge를 최대 50자의 이름으로 바꾸세요. 이 이름은 앱에서 트러스트 배지를 구분하는 데만 쓰이며 고객에게는 표시되지 않습니다.

   

   표에서 트러스트 배지를 쉽게 찾을 수 있도록 알아보기 쉬운 내부 이름을 사용하세요.

4. 제목과 설명 추가하기

   Content & Badges에서 Title과 Description을 열고 아이콘 위에 표시할 텍스트를 입력하세요(선택 사항). 두 입력란 모두 굵게, 기울임, 밑줄, 이모지, 텍스트 정렬, 소스 모드를 지원합니다.

   입력란은 언어별로 구분됩니다. 라벨에는 **Title (en)**처럼 현재 언어가 표시됩니다. 다른 언어를 편집하려면 미리보기 위의 언어 선택기를 사용하세요.

   아이콘만 표시하려면 두 입력란을 모두 비워 두세요.

   

   Title과 Description은 언어별로 따로 편집하는 선택적 리치 텍스트 입력란입니다.

5. 배지 아이콘 추가하기

   Badges 아래에서 Add Badge를 클릭한 다음 옵션을 선택하세요.

   옵션	기능
   Select badge image	Select Image 대화상자를 엽니다.
   Line break	이후 아이콘이 새 행에서 시작됩니다.

   Select Image에서 Search images로 아이콘을 찾으세요. Library 소스에는 결제, 보안, 배송, 보증, 정책 이미지가 400개 이상 있으며, 현재 항목 수가 소스 이름 옆에 표시됩니다. 이미지를 하나 이상 선택한 다음 Select Image를 클릭하세요.

   Design your Images로 전환하면 업로드한 이미지, URL로 가져온 이미지, 관련 사용자 지정 디자인을 사용할 수 있습니다. 이미지를 선택한 뒤 추가하기 전에 변형본을 만들고 싶다면 Edit with AI를 클릭하세요.

   

   기본 제공 라이브러리를 검색하거나 Design your Images로 전환한 다음 선택을 확인하세요.

6. 아이콘 순서 변경 및 아이콘별 설정하기

   각 아이콘은 Badges 목록에 한 행으로 표시됩니다. 행의 핸들을 드래그하면 표시 순서를 바꿀 수 있고, Delete를 클릭하면 삭제됩니다. Line break 항목으로 새 행이 시작되는 위치를 조절하세요.

   행의 General 버튼을 클릭해 설정을 여세요.

   • Change Image — 선택한 아이콘을 바꿉니다.
   • Link — 아이콘을 클릭하면 URL이 열리게 합니다. 외부 링크 옵션을 사용하면 새 탭에서 열립니다.
   • Tooltip — 고객이 아이콘 위에 마우스를 올렸을 때 표시되는 텍스트를 최대 150자까지 추가합니다.
   • Layout colors — 기본 제공 SVG 아이콘에서 지원되는 레이어의 색상을 바꿉니다.

   

   아이콘을 드래그해 순서를 바꾸고, General에서 이미지, 링크, 툴팁 또는 지원되는 색상을 변경하세요.

7. 트러스트 배지 블록 스타일 지정하기

   접을 수 있는 디자인 섹션을 사용해 트러스트 배지를 테마에 맞게 조정하세요.

   섹션	주요 설정
   Design Main Section	블록 너비, 여백, 안쪽 여백, 테두리 크기/스타일/색상, 그림자, 모서리 반경.
   Design title & description	제목과 설명의 사용자 지정 글꼴, 색상, 글꼴 크기, 줄 높이.
   Design Badge	Mono, mono card, original, original card 스타일, 정렬, 너비와 높이, 여백, 애니메이션.
   Responsive size	태블릿과 모바일용 아이콘 너비와 높이를 따로 지정.
   Advance Section	사용자 지정 CSS와 트러스트 배지 선택자를 클릭해 삽입할 수 있는 CSS 참조.

   사용할 수 있는 애니메이션은 SlideInUp, SadeInDown, BounceIn, FlipInX, ZoomIn입니다. Animation을 켜고 효과를 선택한 다음 재생 버튼으로 미리보세요.

   

   각 디자인 섹션을 열어 컨테이너, 텍스트, 아이콘, 반응형 크기, 사용자 지정 CSS의 스타일을 지정하세요.

   참고

   Advance Section에서 CSS reference의 선택자를 클릭하면 해당 범위의 규칙이 사용자 지정 CSS 편집기에 삽입됩니다.

8. 트러스트 배지가 표시될 위치 선택하기

   Placement 탭으로 전환하세요.

   옵션	기능
   Product page	스위치를 켜면 모든 제품 페이지의 앱 기본 위치에 트러스트 배지가 표시됩니다.
   Shortcode	테마의 원하는 위치에 트러스트 배지를 배치하려면 코드를 복사하세요.

   저장하지 않은 트러스트 배지는 쇼트코드에 data-id="new"를 사용합니다. 이 코드를 테마에 넣기 전에 트러스트 배지를 먼저 저장하세요.

   

   기본 제공 제품 페이지 위치를 사용하거나 쇼트코드를 복사해 원하는 위치에 배치하세요.

   참고

   테마 편집기에서 진행하는 전체 과정은 쇼트코드로 트러스트 배지 배치하기를 참고하세요.

9. 미리보기 및 저장하기

   미리보기 위의 컨트롤로 다음을 할 수 있습니다.

   • 편집 언어 전환
   • Product page 미리보기
   • 데스크톱과 모바일 보기 전환
   • 샘플 제품 표시 또는 숨기기
   • 트러스트 배지를 Active 또는 Draft로 설정

   미리보기를 확인한 다음 오른쪽 상단의 Save를 클릭하세요. 저장하지 않은 변경 사항을 버리고 나가려면 Discard를 클릭하세요.

   

   결과를 미리 보고 Active 또는 Draft를 선택한 다음 트러스트 배지를 저장하세요.

다음 단계

• 트러스트 배지 개요 — 저장된 트러스트 배지, 템플릿, 상태, 위치를 관리하세요.
• 쇼트코드로 트러스트 배지 배치하기 — 테마의 정확한 위치에 트러스트 배지를 추가하세요.

팁

도움이 필요하신가요?

단계를 따라 하다가 어려움이 있다면 [email protected]로 문의해 주세요.