배지 위치 변경하기

Position 섹션을 사용해 텍스트 배지나 이미지 배지를 제품 이미지 위, 제품 페이지 요소 아래 또는 테마의 사용자 지정 요소 옆에 배치하세요.

Position 섹션 열기

1. Badges & Labels 열기

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

2. 배지 만들기 또는 선택하기

   배지를 만들려면 Create badge를 클릭한 다음 Text badge 또는 Image badge를 선택하세요.

   기존 배지를 수정하려면 해당 배지 행에서 Edit badge/label을 클릭하세요.

3. Position 펼치기

   배지 편집기에서 Design 탭에 그대로 머문 채 Position까지 스크롤하고 섹션을 펼치세요.

   

   Design 탭을 열고 Position을 펼치세요.

배지를 제품 이미지 안에 배치하기

배지가 제품 이미지 위에 겹쳐 표시되게 하려면 Inside product image를 선택하세요.

설정이 적용되는 위치 선택하기

Badge placement에서 다음 모드 중 하나를 선택하세요.

• Use the same position for collection page and product page — 두 페이지 유형에 같은 위치가 적용돼요.
• Set different position for collection page and product page — Listing pages와 Product page 탭에서 각 위치를 따로 설정하세요.

참고

현재 편집기에서는 페이지별 첫 번째 탭의 이름이 Collection page가 아니라 Listing pages예요.

이미지 안의 위치 하나를 모든 곳에 적용하거나 Listing pages와 Product page를 따로 설정하세요.

미리 설정된 위치 선택하기

Badge position에서 위치 그리드의 아홉 지점 중 하나를 선택하세요.

위치	이미지에서의 배치
Top left	왼쪽 위 모서리
Top center	위쪽 가장자리의 가운데
Top right	오른쪽 위 모서리
Center left	왼쪽 가장자리의 가운데
Center	이미지의 가운데
Center right	오른쪽 가장자리의 가운데
Bottom left	왼쪽 아래 모서리
Bottom center	아래쪽 가장자리의 가운데
Bottom right	오른쪽 아래 모서리

제품 이미지 안에서 미리 설정된 아홉 위치 중 하나를 선택하세요.

백분율로 사용자 지정 위치 설정하기

아홉 가지 미리 설정된 위치로 충분히 정확하지 않다면 Use Custom Position을 켜세요. 편집기가 그리드를 다음으로 바꿔요.

• 세로 기준점: Top 또는 Bottom
• 가로 기준점: Left 또는 Right
• 선택한 각 기준점에서의 오프셋을 정하는 백분율 슬라이더

위치 변경 버튼으로 기준점을 전환한 다음 미리 보기를 확인하면서 슬라이더를 조정하세요.

세로 및 가로 기준점을 선택한 다음 백분율 오프셋을 설정하세요.

배지를 제품 이미지 밖에 배치하기

배지가 이미지 위에 겹치는 대신 제품 정보 옆에 표시되게 하려면 Outside product image를 선택하세요.

Predefined position을 열고 다음 옵션 중 하나를 선택하세요.

옵션	제품 페이지에서의 배치
Below the product image	제품 이미지 바로 아래
Below the product title	제품 제목 바로 아래
Below the product price	제품 가격 바로 아래
Below the product quantity	수량 컨트롤 바로 아래
Below the add to cart button	장바구니에 담기 버튼 바로 아래
Below the buy now button	지금 구매 버튼 바로 아래
Custom	테마에서 ID나 클래스로 식별되는 요소 옆

Badge position에서 배지의 왼쪽, 가운데, 오른쪽 정렬을 선택하세요.

제품 페이지 요소를 선택한 다음 배지를 왼쪽, 가운데, 오른쪽으로 정렬하세요.

테마 선택자로 배지 배치하기

테마의 요소를 지정하려면 Predefined position에서 Custom을 선택하세요. 필요한 필드에 해당 ID나 클래스를 입력하세요.

필드	페이지 유형
Position in product page	제품 페이지
Position in home page	홈 페이지
Position in collection page	컬렉션 페이지
Position in other page	기타 페이지 유형

예를 들어 클래스는 .product-form, ID는 #ProductInfo를 입력하세요. 배지를 이 사용자 지정 위치에 배치해야 하는 각 페이지 유형에 값을 추가하세요.

주의

테마의 ID와 클래스는 서로 달라요. 스토어프런트 테마를 검사해 안정적인 선택자를 찾은 다음, 배지가 표시되어야 하는 모든 페이지 유형에서 결과를 확인하세요.

사용자 지정 배지 위치가 필요한 각 페이지 유형에 테마의 ID나 클래스를 입력하세요.

여백 및 안쪽 여백 조정하기

Margin을 펼쳐 바깥쪽 간격을 픽셀 단위로 변경하세요. 편집기에는 선택한 위치와 관련된 쪽이 표시돼요.

Padding을 펼쳐 배지 콘텐츠와 가장자리 사이의 간격을 변경하세요. 위, 아래, 왼쪽, 오른쪽 값을 각각 따로 설정할 수 있어요.

픽셀 단위의 여백과 안쪽 여백 값으로 배지를 세밀하게 조정하세요.

미리 보기 및 저장하기

미리 보기 컨트롤로 Collection page와 Product page를 확인한 다음 Desktop view와 Mobile view를 전환하세요. 배지가 의도한 위치에 표시되면 Save를 클릭하세요.

다음 단계

• 배지 크기 변경하기 — 여러 뷰포트와 페이지 유형에 맞게 배지 크기를 조정하세요.
• 배지 스타일 변경하기 — 글꼴, 색상, 테두리, 배경을 사용자 지정하세요.
• 기기 및 페이지별 표시 — 배지를 표시할 기기와 페이지를 제어하세요.

팁

도움이 필요하신가요?

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