하이라이트 만들기

하이라이트 블록은 이미지, 제목, 설명이 있는 기능 항목을 그리드로 배치한 블록으로, 제품 페이지에 놓아 혜택과 판매 포인트를 보여 줍니다. 편집기에는 Design(콘텐츠와 스타일)과 Placement(표시되는 위치와 대상) 두 개의 탭이 있습니다.

1. Highlights 탭 열기

   Shopify 관리자에서 Sami Product Labels 앱을 열고 앱 사이드바에서 Extra Features를 클릭한 다음 Highlights 탭으로 전환하세요.

   

   Highlights 탭에는 지금까지 만든 모든 하이라이트 블록이 나열됩니다.

2. Create highlights 클릭하기

   Create highlights를 클릭하세요. 전체 화면 편집기가 Design 탭에서 열립니다.

   참고

   Featured templates로 스크롤한 다음 View all templates를 클릭하면 처음부터 만드는 대신 Free Delivery 같은 준비된 블록으로 시작할 수 있습니다.

   

   하이라이트를 처음부터 만들거나 추천 템플릿으로 시작하세요.

3. 하이라이트 이름 지정하기

   이름 입력란은 미리보기 위에 있습니다. New Highlight를 최대 50자의 이름으로 바꾸세요. 이 이름은 내부용으로, 목록에서 블록을 구분하는 데만 쓰이며 고객에게는 표시되지 않습니다.

4. 제목과 설명 추가하기

   Content & Badges에서 Title과 Description을 입력하세요. 블록 전체의 제목과 소개 문구로, 예를 들면 “Why Choose Us” 같은 내용입니다. 두 입력란 모두 굵게, 기울임, 밑줄, 이모지, 정렬, HTML 보기(</>)를 지원하는 리치 텍스트 편집기이며 언어별로 입력합니다. 그래서 라벨에는 Title (en)처럼 현재 언어가 표시됩니다.

   두 입력란은 모두 선택 사항이며, 비워 두면 항목만 표시됩니다.

   

   블록 제목과 설명은 언어별로 편집하는 리치 텍스트 입력란입니다.

5. 하이라이트 항목 추가하기

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

   옵션	기능
   Select badge image	이미지 선택기를 열어 항목을 하나 이상 추가합니다.
   Line break	이후 항목이 새 행에서 시작되도록 줄바꿈을 삽입합니다.

   선택기의 Library에는 1,800개 이상의 이미지가 있습니다. 이름으로 검색하거나 Images, Free Labels, All colors, Latest 필터로 목록을 좁힐 수 있습니다(Clear를 누르면 필터가 초기화됩니다). 원하는 이미지를 클릭한 다음 Select Image를 클릭하세요. 소스를 Design your Images로 전환해 직접 만든 이미지를 사용하거나, Edit with AI를 클릭해 선택한 이미지를 수정할 수도 있습니다.

   

   라이브러리를 필터링하거나 검색한 다음 하이라이트 항목에 쓸 이미지를 선택하세요.

6. 항목별 제목과 설명 작성하기

   각 항목은 Badges 목록에 한 행으로 표시됩니다. 행의 톱니바퀴 아이콘을 클릭해 패널을 열면 다음을 설정할 수 있습니다.

   • Image — Change를 클릭해 다른 이미지로 바꾸세요.
   • Title — 해당 기능의 짧은 제목으로, 언어별로 입력합니다.
   • Description — 최대 250자이며, 언어별로 입력합니다.

   패널의 Delete로 항목을 삭제하고, 행의 핸들을 드래그해 그리드 순서를 바꾸세요.

   

   각 항목에는 고유한 이미지, 제목, 설명이 있습니다.

7. 그리드와 블록 스타일 설정하기

   Design Main Section을 열어 블록 전체를 제어하세요.

   설정	기능
   Alignment	왼쪽, 가운데, 오른쪽.
   Column	한 행에 표시되는 항목 수.
   Width	블록 너비(% 또는 px).
   Background Heading Color	제목과 설명 뒤의 배경.
   Background Color	항목 영역의 배경.
   Margin / Padding	블록 바깥쪽과 안쪽 여백.
   Border & corners	테두리 스타일, 색상, 모서리 반경.

   

   Design Main Section에서 그리드와 블록 컨테이너를 제어합니다.

8. 하이라이트 항목 스타일 지정하기

   Design Badge를 열어 항목 자체의 스타일을 지정하세요.

   설정	기능
   Alignment	각 항목의 콘텐츠 정렬 방식.
   Style	네 가지 이미지 스타일: 단색, 카드 위의 단색, 원래 색상, 카드 위의 원래 색상.
   Background Color	각 항목의 배경.
   Size	이미지의 Width와 Height(px 또는 %, 기본값은 50px).
   Positions	텍스트를 기준으로 한 이미지 위치(예: Image Position Top).
   Margin / Padding / Border & corners	각 항목의 여백과 테두리.
   Title / Description	항목 텍스트의 글꼴, 색상, 크기, 줄 높이.

   

   Design Badge에서 개별 하이라이트 항목의 스타일을 지정합니다.

9. 블록 제목 스타일 지정하기(선택 사항)

   Design title & description을 여세요. Design Title과 Design Description에는 블록 수준의 제목과 소개 문구에 쓸 글꼴, 색상, 크기, 줄 높이가 각각 있습니다.

10. 반응형 크기와 사용자 지정 CSS 설정하기(선택 사항)

    • Responsive size — 태블릿과 모바일에서 크기를 따로 지정합니다.
    • Advance Section — **Custom CSS (Developer Zone)**를 추가합니다. 편집기 아래의 CSS reference에는 .samita_highlight_container 같이 지정할 수 있는 선택자가 나열되며, 하나를 클릭하면 삽입됩니다.

    

    CSS reference에는 사용자 지정 스타일에 쓸 수 있는 선택자가 나열됩니다.

11. 하이라이트가 표시될 위치 선택하기

    Placement 탭으로 전환하세요.

    • Product page — 켜면 모든 제품 페이지의 앱 기본 위치에 블록이 표시됩니다.
    • Shortcode — 코드를 복사해 테마에 붙여넣으면 블록을 정확한 위치에 배치할 수 있습니다.
    • Conditions — Product, Customer, Page, Language, Country 조건으로 블록을 볼 대상과 위치를 좁힙니다.

    참고

    조건 세트의 작동 방식은 하이라이트 표시 대상 지정하기를 참고하세요.

    

    Placement 탭에서 표시 조건, 제품 페이지 토글, 쇼트코드를 함께 설정합니다.

12. 미리보기 및 저장하기

    미리보기 위에서 언어를 전환하고, 미리볼 페이지를 선택하고, 데스크톱 / 모바일을 전환하고, 눈 모양 아이콘으로 샘플 제품을 숨길 수 있습니다. 블록을 Active 또는 Draft로 설정한 다음 오른쪽 상단의 Save를 클릭하세요. 저장하지 않은 변경 사항을 버리려면 Discard를 사용하세요.

참고

FREE 요금제에는 하이라이트 2개가 포함되며, 삭제한 하이라이트도 이 한도에 포함됩니다. GOLD 또는 DIAMOND로 업그레이드하면 하이라이트를 무제한으로 만들 수 있습니다.

다음 단계

• 쇼트코드로 하이라이트 배치하기 — 테마의 원하는 위치에 블록을 배치하세요.
• 하이라이트 표시 대상 지정하기 — 하이라이트를 볼 페이지와 고객을 제어하세요.
• 하이라이트 개요 — 하이라이트가 무엇이고 언제 사용하는지 알아보세요.
• 트러스트 배지 만들기 — 제품 페이지에 결제 및 보안 아이콘을 추가하세요.

팁

도움이 필요하신가요?

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