배지 스타일 변경하기

Design 탭을 사용해 배지의 모양을 변경하세요. 텍스트 배지에는 글꼴, 색상, 배경, 테두리, 불투명도, 회전 컨트롤이 있어요. 이미지 배지에는 선택한 이미지의 불투명도와 회전 컨트롤이 있어요.

편집기에서 배지 열기

1. Badges & Labels 열기

   Shopify 관리자에서 Sami Product Labels > Badges & Labels를 여세요.

2. 배지 선택하기

   수정할 배지를 찾아 해당 행에서 Edit badge/label을 클릭하세요.

   새 배지의 스타일을 지정하려면 대신 Create badge를 클릭한 다음 Text badge 또는 Image badge를 선택하세요.

   

   사용자 지정할 배지의 Edit badge/label을 클릭하세요.

3. Design 탭에 머물기

   편집기가 Design에서 열려요. 사용할 수 있는 섹션은 텍스트 배지를 선택했는지 이미지 배지를 선택했는지에 따라 달라져요.

텍스트 배지 사용자 지정하기

글꼴과 텍스트 색상 선택하기

Badge text 아래의 컨트롤로 텍스트를 사용자 지정하세요.

• Font picker — 기본 제공 목록에서 글꼴을 선택하세요.
• Use Custom Font Style — 이 옵션을 켜면 Font에 글꼴 패밀리를 입력한 다음 Regular나 Bold 같은 사용 가능한 글꼴 스타일이나 굵기를 선택할 수 있어요.
• Text color — 색상 선택기를 열고 배지 배경 위에서 읽기 쉬운 색상을 선택하세요.

기본 제공 글꼴을 선택하거나 Use Custom Font Style을 켠 다음 텍스트 색상을 설정하세요.

텍스트 크기와 글자 간격은 Size에서 설정해요. 해당 컨트롤은 배지 크기 변경하기를 참고하세요.

배경 선택하기

Style을 펼친 다음 Fill type을 선택하세요.

Fill type	사용하는 경우
Solid	단일 배경색이나 색상 프리셋
Shape	단색 또는 그라데이션 색상이 적용된 템플릿 도형
Image	텍스트 배지의 배경으로 사용하는 질감, 패턴, 이미지

Style을 펼치고 텍스트 배지의 배경 유형을 선택하세요.

단색 배경 사용하기

Solid를 선택한 다음 Background color를 선택하세요. Choose template의 프리셋 중 하나를 선택할 수도 있어요.

도형 또는 그라데이션 배경 사용하기

Shape를 선택한 다음 다음을 설정하세요.

• Choose from library — 템플릿 갤러리를 열고 Sales, Autotext, Stock, Free shipping, Pre-order 등의 카테고리로 디자인을 필터링하세요.
• Start color와 End color — 단색 효과를 원하면 같은 색상을, 그라데이션을 원하면 서로 다른 두 색상을 사용하세요.
• Gradient direction — Left to right, Top to bottom, Diagonal, Radial 중에서 선택하세요.
• Choose template — 편집기에서 바로 도형 프리셋을 적용하세요.

도형을 선택하고, 색상을 설정하고, 그라데이션 방향을 선택하세요.

이미지 배경 사용하기

Image를 선택한 다음 Select Image를 클릭해 사용자 지정 배경을 선택하세요. 편집기는 최대 5 MB의 PNG, JPG, SVG 파일을 지원해요. 선택한 배경을 지우려면 Remove를 클릭하세요.

참고

이 이미지는 텍스트 배지의 배경으로만 사용돼요. 편집 가능한 텍스트 없이 이미지만 표시하려면 대신 이미지 배지를 사용하세요.

텍스트 배지의 배경으로 사용할 이미지를 선택하세요.

테두리 추가 또는 모서리 둥글게 하기

Border & corners를 펼치세요. 두 옵션은 각각 따로 켤 수 있어요.

옵션	사용할 수 있는 컨트롤
Add border	Border width를 0에서 8 px로 설정하고, Border color를 선택하고, Solid, Dotted, Dashed 중에서 선택하세요.
Round corners	Corner radius를 0에서 100 px로 설정하세요.

테두리를 추가하거나, 모서리를 둥글게 하거나, 두 설정을 함께 사용하세요.

이미지 배지 스타일 지정하기

이미지 배지에는 텍스트 배지의 글꼴, 배경, Border & corners 컨트롤이 표시되지 않아요. Design 탭 상단의 Content에서 배지 이미지를 변경한 다음 Advanced settings에서 불투명도나 회전을 조정하세요.

이미지 크기와 배치는 배지 크기 변경하기와 배지 위치 변경하기를 참고하세요.

불투명도 또는 회전 조정하기

이 효과는 텍스트 배지와 이미지 배지 모두에서 사용할 수 있어요.

1. Advanced settings를 펼치세요.
2. Effects에서 필요한 옵션을 켜세요.
3. 실시간 미리 보기를 확인하면서 값을 조정하세요.

효과	범위
Adjust opacity	0%에서 100%
Rotate badge	0°에서 360°

Adjust opacity 또는 Rotate badge를 켠 다음 효과 값을 설정하세요.

참고

Effects 섹션에는 Use animation도 있어요. 전체 애니메이션 작업 방법은 배지에 애니메이션 추가하기를 참고하세요.

미리 보기 및 저장하기

미리 보기 도구 모음에서 배지를 Collection page와 Product page에서 확인한 다음 Desktop view와 Mobile view를 전환하세요. 필요한 모든 미리 보기에서 배지가 올바르게 보이면 Save를 클릭하세요.

주의

색상이나 불투명도를 변경한 후에는 텍스트 대비를 확인하세요. 한 제품 이미지에서는 읽기 쉬운 스타일이 다른 제품 이미지에서는 읽기 어려울 수 있어요.

다음 단계

• 배지 크기 변경하기 — 배지 크기를 조정하고 텍스트 크기나 글자 간격을 조정하세요.
• 배지 위치 변경하기 — 배지를 이동하고 여백이나 안쪽 여백을 조정하세요.
• 배지에 애니메이션 추가하기 — 애니메이션 효과를 적용하고 속도와 반복 횟수를 설정하세요.
• 사용자 지정 CSS 사용하기 — 사용자 지정 CSS로 배지를 세밀하게 조정하세요.

팁

도움이 필요하신가요?

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