Debut용 섹션

테마 콘텐츠는 섹션으로 작성 됩니다. 섹션은 온라인 스토어에서 서로 다른 페이지의 레이아웃과 모양을 결정 하는 사용자 지정 가능한 콘텐츠 블록입니다.

정적 섹션 은 온라인 스토어에서 미리 정해진 위치에 표시 되는 섹션입니다. 이러한 섹션은 제거 하거나 재정렬할 수 없습니다. 정적 섹션에는 머리글, 바닥글, 탐색 섹션, 제품 페이지, 컬렉션 페이지 등의 페이지 콘텐츠 섹션이 포함 될 수 있습니다. 예를 들어, 제품 섹션은 온라인 스토어에서 각 제품 페이지의 모양을 결정 합니다.

동적 섹션 은 홈 페이지 레이아웃을 사용자 지정 하는 데 사용할 수 있는 선택적 섹션입니다. 동적 섹션을 추가, 재배치, 제거 하 여 페이지 레이아웃 생성에 사용할 수 있습니다. 홈 페이지에는 동적 섹션을 25 개까지 추가할 수 있습니다.

Debut 고유 섹션 모음을 살펴보고 스토어 업종에 맞춰 해당 섹션을 사용자 지정하는 방법을 확인할 수 있습니다.

정적 섹션

Debut에는 다음과 같은 정적 섹션이 포함됩니다.

  • 머리글
  • 바닥글
  • 제품 페이지
  • 추천 제품
  • 컬렉션 페이지
  • 컬렉션 목록 페이지
  • 블로그 페이지
  • 게시물
  • 카트 페이지

동적 섹션

Debut에는 다음과 같은 동적 섹션이 포함됩니다.

  • 블로그 게시물
  • 컬렉션 목록
  • 추천 컬렉션
  • 갤러리
  • 텍스트 포함 이미지
  • 텍스트 오버레이 포함 이미지
  • 로고 목록
  • 특별 상품
  • 뉴스레터
  • 지도
  • Rich text
  • 추천
  • 이미지 포함 텍스트 열
  • 동영상
  • 사용자 지정 콘텐츠
  • 슬라이드 쇼

머리글

머리글 섹션에서는 스토어의 모든 페이지 상단에 표시되는 콘텐츠를 편집할 수 있습니다. 로고 이미지를 추가하고, 표시할 메뉴를 선택하고, 공지 메시지를 생성할 수 있습니다.

사용자 지정 로고 추가

스토어 머리글에 사용자 지정 로고 이미지를 추가할 수 있습니다. 가장 적합한 형식은 투명 배경의 .png 파일입니다. 로고 이미지의 폭을 늘리거나 줄여 크기를 조정할 수 있습니다.

로고 이미지를 추가하지 않으면 스토어 이름이 텍스트로 표시됩니다. 스토어 이름은 Shopify 관리자의 일반 설정 페이지에서 변경할 수 있습니다.

  • 사용자 지정 로고 폭: 로고의 폭입니다. - 로고 정렬: 머리글의 로고 정렬입니다. 왼쪽 또는 가운데를 선택합니다.

로고 추가 및 구성

  1. 머리글을 클릭합니다. 2. 로고 이미지 영역에서 이미지 선택을 클릭하고 다음 중 하나를 수행합니다. * Shopify 관리자에 이미 업로드한 이미지를 선택하려면 라이브러리 탭을 클릭합니다. * 로컬 컴퓨터에서 이미지를 선택하려면 라이브러리 > 업로드를 클릭합니다. 3. 설정을 사용하여 로고의 사이즈 및 배치를 사용자 지정합니다. 4. 저장을 클릭합니다.

공지 표시줄 추가

머리글에 고객에게 메시지를 표시하는 데 사용할 수 있는 공지 표시줄을 추가할 수 있습니다. 메시지는 사용자 지정할 수 있으며 연락처 정보, 스토어 이벤트나 판매에 대한 정보 또는 스토어 슬로건이 포함될 수 있습니다.

  1. 머리글을 클릭합니다.
  2. 공지 표시줄 영역에서 공지 표시를 확인 표시합니다. 홈페이지만을 선택하면 공지 메시지가 홈페이지에만 표시됩니다.
  3. 공지 텍스트를 입력합니다.
  4. 선택 사항: URL을 입력하여 공지에 링크를 추가합니다.
  5. 공지 표시줄 배경의 색상을 변경하려면 색상 견본을 클릭하여 색상을 선택합니다.
  6. 공지 텍스트의 색상을 변경하려면 텍스트 색상 견본을 클릭하여 색상을 선택합니다.
  7. 저장을 클릭합니다.

메뉴 추가

머리글에 메뉴를 추가할 수 있습니다. 메뉴를 추가하면 머리글에 메뉴 링크가 표시되어 고객이 액세스하려는 공통 페이지를 강조 표시할 수 있습니다. 예를 들어, 컬렉션으로 연결되는 링크를 포함한 메뉴를 추가합니다.

  1. 머리글을 클릭합니다.

  2. 메뉴를 선택하려면 변경을 클릭합니다. 목록에서 메뉴를 선택하거나 메뉴 생성을 클릭하여 새로 생성합니다.

  3. 메뉴를 편집하려면 메뉴 편집을 클릭합니다.

  4. 저장을 클릭합니다.

바닥글

테마의 바닥글은 스토어의 모든 페이지 하단에 표시되는 섹션입니다. 바닥글에 추가할 수 있는 기능은 다음과 같습니다.

  • 결제 아이콘
  • 빠른 링크
  • 뉴스레터 신청
  • 비즈니스에 대한 정보가 포함된 텍스트 섹션
  • 소셜 미디어 아이콘
  • 언어 선택기
  • 통화 선택기

결제 아이콘 추가

바닥글에 허용하는 결제 방법에 대한 아이콘을 표시할 수 있습니다. 이 영역에는 관리자의 결제 설정 섹션에서 사용하도록 설정한 결제 서비스 공급업체와 관련된 아이콘이 표시됩니다.

  1. 바닥글을 클릭합니다.

  2. 결제 아이콘 표시를 확인합니다.

  3. 저장을 클릭합니다.

메뉴, 뉴스레터 신청 또는 텍스트 추가

  1. 바닥글을 클릭합니다.

  2. 콘텐츠 블록을 추가하려면 콘텐츠 영역에서 콘텐츠 추가를 클릭합니다. 다음 옵션 중에서 블록 유형을 선택합니다.

- [Menu](/manual/online-store/os/menus-and-links)

- [Newsletter](/manual/online-store/os/using-themes/change-the-layout/theme-settings/theme-newsletter)

- Text

최대 4개의 콘텐츠 블록을 추가할 수 있습니다.

콘텐츠 블록을 제거하려면 블록을 클릭한 다음 콘텐츠 제거를 클릭합니다.

콘텐츠 블록을 사용자 지정하려면 블록을 클릭하고 설정을 편집합니다.

  1. 저장을 클릭합니다.

소셜 미디어 아이콘 추가

테마 설정에 소셜 미디어 계정을 추가하는 경우 해당 계정이 자동으로 바닥글에 표시됩니다.

언어 선택기 추가

여러 스토어 언어를 사용하도록 설정한 경우에만 언어 선택기를 추가해야 합니다.

  1. 섹션을 클릭합니다.

  2. 바닥글을 클릭합니다.

  3. 언어 선택기에서 언어 선택기 표시를 선택합니다.

  4. 저장을 클릭합니다.

통화 선택기 추가

여러 통화를 사용하도록 설정한 경우에만 통화 선택기를 추가해야 합니다.

  1. 바닥글을 클릭합니다.

  2. 통화 선택기에서 통화 선택기 표시를 선택합니다.

  3. 저장을 클릭합니다.

제품 페이지

제품 페이지 섹션은 제품 페이지를 사용자 정의할 수 있는 기본 섹션입니다. 또한 스토어 구성에 따라 이 섹션에서는 다음과 같은 기능도 지원됩니다.

다음 옵션을 사용하여 이 섹션을 사용자 지정할 수 있습니다.

  • 수량 선택기 표시 - 사용자가 카트에 추가할 수량을 지정할 수 있도록 합니다.
  • 이형 상품 레이블 표시 - 이형 상품 드롭다운 메뉴 위에 "사이즈" 및 "색상"과 같은 이형 상품 레이블을 표시합니다. 표시되는 이형 상품 레이블은 제품의 이형 상품 옵션 이름을 기준으로 합니다.
  • 공급업체 표시 - 제품 브랜드 또는 공급업체를 표시합니다. 브랜드나 공급업체를 표시하려면 제품에 공급업체를 추가해야 합니다.
  • 동적 결제 버튼 표시 - 고객이 카트를 건너뛰고 추천 제품 섹션에서 결제로 바로 이동할 수 있습니다.
  • 소셜 공유 버튼 표시 - 고객이 소셜 미디어에서 제품을 공유하는 데 사용할 수 있는 버튼을 표시합니다. 표시되는 공유 옵션은 테마 설정에서 제어합니다.

미디어

  • 사이즈 - 제품 미디어의 사이즈를 설정합니다.
  • 이미지 확대/축소 활성화 - 고객이 제품 이미지 위에 마우스를 올려서 확대/축소할 수 있습니다.
  • 동영상 루프 활성화 - 제품 비디오를 반복하려면 이 옵션을 선택합니다. 이 옵션이 선택 취소하는 경우 동영상 종료 시 재생 버튼이 표시됩니다.

제품 페이지 설정 편집

  1. 제품 페이지를 선택합니다.
  2. 제품 페이지 섹션을 클릭합니다.
  3. 설정을 사용하여 제품 페이지 섹션을 사용자 지정합니다.
  4. 저장을 클릭합니다.

픽업 사용 가능성 표시

Debut을(를) 통해 고객에게 온라인 스토어의 제품이 지역 픽업에서 사용할 수 있는지 여부를 표시할 수 있습니다. 각 제품 페이지에서 픽업 사용 가능성 섹션에는 제품 사용 가능 여부와 픽업 예상 기간이 표시됩니다.

이 기능을 사용하려면 지역 픽업을 설정해야 합니다. 지역 픽업을 활성화한 경우 이 기능은 항상 제품 페이지에 표시되어 비활성화할 수 없습니다.

지역 픽업을 활성화하면 지역 픽업 위치에서 픽업 서비스가 제공되는지 여부가 제품 페이지에 표시됩니다. 제품이 표시되려면 픽업 위치 중 한 곳 이상에 입고된 상태여야 하고, 제품 이형 상품 세부 정보의 배송 섹션에 '실제 제품입니다'가 선택된 상태여야 합니다.

제품 이형 상품에서 이는 실제 제품입니다를 선택하려면 다음을 수행합니다.

  1. Shopify 관리자에서 제품 > 모든 제품으로 이동합니다.

  2. 제품을 선택합니다.

  3. 이형 상품 아래에서 이형 상품을 선택합니다.

  4. 배송 아래에서 실제 제품입니다를 선택 표시합니다.

  5. 저장을 클릭합니다.

한 위치에서만 지역 픽업을 활성화한 경우에는 해당 위치에 대한 위치 및 픽업 사용 가능성이 표시됩니다. 고객은 스토어 정보 보기를 클릭하여 픽업 위치에 대해 자세히 알아볼 수 있습니다.

여러 위치에서 지역 픽업을 사용하도록 설정한 경우, 픽업 사용 가능성 섹션에는 고객의 IP 주소를 기준으로 고객과 가장 가까운 위치에 대한 위치 및 픽업 사용 가능성이 표시됩니다. 고객이 다른 스토어에서 사용 가능성 확인을 클릭하면 픽업 위치 목록이 고객으로부터의 거리에 따라 정렬됩니다.

IP 주소로 고객의 위치를 확인할 수 없는 경우에는 픽업 사용 가능성 섹션에 도시명 > 위치명의 알파벳순으로 위치와 픽업 가능성 여부가 표시됩니다. 예를 들어, 토론의 "Queen Street", 토론토의 "Front Street", 밴쿠버의 "Alberni Street"의 3개 픽업 위치를 사용하고 있다고 가정해 봅니다. 이 경우, 픽업 사용 가능성 섹션에는 토론토의 "Front 스트리트" 세부 정보가 표시됩니다.

Shop Pay 할부 배너 표시

버전 17.12.0 이상

미국에 있는 판매자가 Shop Pay 할부를 활성화하고 제품 가격이 $50~$1,000(USD) 사이인 경우에는 할부 가능한 제품 페이지에 Shop Pay 할부 배너가 나타납니다. Shop Pay 할부가 활성화된 상태에서는 배너를 비활성화할 수 없습니다.

제품 가격 아래에 표시되는 배너에는 고객이 제품의 전체 금액이나 동일하게 4회로 나눈 금액을 지불할 수 있음이 표시됩니다. 사용자는 자세히 알아보기를 클릭하여 할부 및 필수 공개 사항에 대한 추가 정보를 볼 수 있습니다.

추천 제품

제품 페이지에 추천 제품을 표시하여 고객이 관심을 가질 수 있는 다른 제품을 쉽게 발견하도록 할 수 있습니다.

제품 권장 사항 활성화

  1. 제품 페이지를 선택합니다.

  2. 제품 권장 사항 섹션을 클릭합니다.

  3. 제품 페이지에 제품 권장 사항을 표시하려면 동적 권장 사항 표시를 확인 표시합니다.

  4. 선택 사항: 추천 제품 위에 표시되는 제목을 변경하려면 제목 필드에 새 제목을 입력합니다.

    1. 선택 사항: 제품 설명에서 공급업체를 표시하거나 숨기려면 공급업체 표시 확인란을 사용합니다.
  5. 저장을 클릭합니다.

컬렉션 페이지

컬렉션 페이지 섹션은 컬렉션 페이지를 사용자 지정할 수 있는 기본 섹션입니다.

컬렉션 페이지 섹션에 포함된 설정은 다음과 같습니다.

  • 레이아웃 - 컬렉션 페이지에서 제품이 정렬되는 방식을 선택합니다.
  • 행별 제품(그리드 전용) - 컬렉션 페이지의 각 행에 표시할 제품 수를 선택합니다. 이 섹션은 레이아웃그리드로 설정된 경우에만 적용됩니다.
  • 페이지당 행 수(그리드 전용) - 컬렉션 페이지에 표시할 제품의 행 수를 선택 합니다. 이 섹션은 레이아웃그리드로 설정된 경우에만 적용됩니다.
  • 컬렉션 이미지 표시 - 컬렉션 페이지의 맨 위에 컬렉션 이미지를 표시합니다.
  • 제품 공급업체 표시 - 제품 이름 아래에 각 제품의 공급업체를 표시합니다.
  • 정렬 활성화 - 고객이 컬렉션 페이지에서 제품을 정렬할 수 있도록 하려면 이 옵션을 선택합니다.
  • 태그 필터링 활성화 - 고객이 제품 태그로 컬렉션을 필터링할 수 있도록 하려면 이 옵션을 선택합니다.

컬렉션 페이지 설정 편집

  1. 컬렉션 페이지를 선택합니다.
  2. 컬렉션 페이지 섹션을 클릭합니다.
  3. 설정을 사용하여 컬렉션 페이지 섹션을 사용자 지정합니다.
  4. 저장을 클릭합니다.

컬렉션 목록 페이지

컬렉션 목록 페이지에서 고객이 원하는 컬렉션을 찾을 수 있습니다. 컬렉션 목록 페이지에는 스토어의 모든 컬렉션을 표시하거나 선택한 컬렉션 그룹만 표시할 수 있습니다.

컬렉션 목록 페이지 섹션에 포함된 설정은 다음과 같습니다.

  • 컬렉션 - 컬렉션 목록 페이지에 표시할 컬렉션입니다. 이 정보는 표시할 컬렉션 선택선택됨으로 설정된 경우에만 사용됩니다.
  • 표시할 컬렉션 선택 - 표시할 컬렉션을 선택합니다.
  • 컬렉션 정렬 기준 - 컬렉션 정렬 방법을 설정합니다. 이 설정은 표시할 컬렉션 선택모두로 설정된 경우에만 사용됩니다.
  • 행별 컬렉션 - 컬렉션 목록 페이지의 각 행에 표시할 컬렉션의 수를 설정합니다.

컬렉션 목록 페이지 섹션 사용자 지정

  1. 컬렉션 목록을 선택합니다.
  2. 컬렉션 목록 페이지 섹션을 클릭합니다.
  3. 선택 사항: 콘텐츠 영역에서 컬렉션 추가를 클릭하여 컬렉션 목록 페이지에 컬렉션을 추가합니다.
  4. 설정을 사용하여 컬렉션 목록 페이지 섹션을 사용자 지정합니다.
  5. 저장을 클릭합니다.

블로그 페이지

블로그 페이지 섹션은 블로그 페이지에서 사용자 지정할 수 있는 기본 섹션입니다. 블로그 페이지에는 블로그에 게시되는 모든 게시물이 나열됩니다. 블로그 게시물을 나열하거나 그리드에서 표시할 수 있습니다. 목록과 그리드 뷰는 사용 가능한 경우 블로그 게시물 제목 및 요약을 표시합니다. 사용 가능한 요약이 없는 경우 블로그 게시물의 첫 몇 문장이 표시됩니다.

블로그 페이지 섹션에 포함된 설정은 다음과 같습니다.

  • 레이아웃 - 목록 또는 그리드를 선택합니다.
  • 작성자 표시 - 블로그 게시물 제목 하단에 작성자 이름을 표시합니다.
  • 날짜 표시 - 블로그 게시물 제목 하단에 게시 날짜를 표시합니다.

블로그 페이지 섹션 사용자 지정

  1. 블로그를 선택합니다.
  2. 블로그 페이지 섹션을 클릭합니다.
  3. 설정을 사용하여 게시물 섹션을 사용자 지정합니다.
  4. 저장을 클릭합니다.

게시물

블로그 게시물 페이지에는 개별 블로그 게시물이 표시됩니다. 게시물 섹션에 포함되는 설정은 다음과 같습니다.

  • 작성자 표시 - 블로그 게시물 제목 하단에 작성자 이름을 표시합니다.
  • 날짜 표시 - 블로그 게시물 제목 하단에 블로그 게시물이 게시된 날짜를 표시합니다.
  • 소셜 공유 버튼 표시 - 블로그 게시물에 소셜 공유 버튼을 표시하려면 이 옵션을 선택합니다.posts. 소셜 미디어 설정에서 공유에 사용할 수 있는 플랫폼을 선택할 수 있습니다.

게시물 섹션 사용자 지정

  1. 블로그 게시물을 선택합니다.
  2. 게시물 섹션을 클릭합니다.
  3. 설정을 사용하여 게시물 섹션을 사용자 지정합니다.
  4. 저장을 클릭합니다.

카트 페이지

카트 페이지 섹션에 포함된 설정은 다음과 같습니다.

  • 자동 카트 업데이트 활성화 - 고객이 변경하는 즉시 카트를 업데이트하려면 이 옵션을 선택합니다. 예를 들어 고객이 카트의 품목 수량을 변경하는 경우 금액 소계가 업데이트됩니다.
  • 카트 참고 사항 활성화 - 일부 테마에서는 이 옵션을 주문 참고 사항이라고 합니다.

카트 페이지 섹션 사용자 지정

  1. 카트를 선택합니다.
  2. 카트 페이지 섹션을 클릭합니다.
  3. 설정을 사용하여 카트 페이지 섹션을 사용자 지정합니다.
  4. 저장을 클릭합니다.

추천 컬렉션

홈 페이지에서 컬렉션을 추천할 수 있습니다. 추천 컬렉션을 사용하면 할인 제품과 신규 컬렉션을 홍보하는 데 도움이 됩니다.

추천 컬렉션 섹션에 포함된 설정은 다음과 같습니다.

  • 제목 - 컬렉션의 제품 위에 표시되는 텍스트를 추가합니다. 기본 텍스트는 추천 컬렉션입니다.
  • 컬렉션 - 섹션에 표시하려는 컬렉션을 선택합니다.
  • 행별 제품 - 섹션의 각 행에 표시할 제품 수를 선택합니다.
  • - 섹션에 표시할 제품의 행 수를 선택합니다.
  • 제품 공급업체 표시 - 제품 이름 아래에 각 제품의 공급업체를 표시합니다.
  • '모두 보기' 버튼 표시 - 섹션 마지막 행 아래에 모두 보기 버튼을 추가하려면 이 옵션을 선택합니다. 고객은 이 버튼을 클릭하여 전체 컬렉션을 볼 수 있습니다.

홈 페이지에 추천 컬렉션 추가

  1. 섹션 추가를 클릭합니다.
  2. 추천 컬렉션, 선택을 차례로 클릭합니다.
  3. 컬렉션 선택을 클릭한 다음 컬렉션 목록에서 컬렉션을 선택합니다. 선택한 컬렉션에는 최대 50개의 제품이 표시됩니다.
  4. 설정을 사용하여 추천 컬렉션 섹션을 사용자 지정합니다.
  5. 저장을 클릭합니다.

텍스트 포함 이미지

Debut 사용 시에는 이미지 오른쪽이나 왼쪽에 표시할 이미지 포함 텍스트를 추가할 수 있습니다. 다른 페이지로 연결되는 버튼도 추가할 수 있습니다.

텍스트 포함 이미지 섹션을 사용하여 특정 제품이나 컬렉션을 광고할 수 있습니다.

텍스트 포함 이미지 섹션에 포함된 설정은 다음과 같습니다.

  • 이미지 - 섹션에 포함할 이미지를 추가하거나 선택합니다. 이미지를 업로드하고 이전에 업로드한 이미지를 사용하거나 Burst의 무료 스톡 이미지를 선택할 수 있습니다.
  • 이미지 정렬 - 섹션의 이미지를 왼쪽 또는 오른쪽에 표시할지 선택합니다.
  • 제목 - 이미지와 함께 사용할 기본 텍스트를 추가합니다.
  • 텍스트 - 이미지와 함께 사용할 보조 텍스트를 추가합니다. 이 텍스트는 제목 텍스트 아래에 표시됩니다.
  • 버튼 레이블 - 버튼에 표시할 텍스트를 추가합니다.
  • 버튼 링크 - 버튼에 연결할 URL 또는 페이지를 설정합니다. URL에 붙여 넣거나 메뉴에서 페이지를 선택합니다. 섹션에 버튼을 포함시키지 않으려면 이 필드를 비워 둡니다.

홈페이지에 텍스트 포함 이미지 섹션 추가

  1. 섹션 추가를 클릭합니다.
  2. 텍스트 포함 이미지, 선택을 차례로 클릭합니다.
  3. 이미지 영역에서 이미지 선택을 클릭하고 다음 중 하나를 수행합니다. - Shopify 관리자에 이미 업로드한 이미지를 선택하려면 라이브러리 탭을 클릭합니다.
  4. Burst의 스톡 이미지를 선택하려면 무료 이미지 탭을 클릭합니다. 여기에서 검색어를 입력하거나 이미지 범주를 찾아볼 수 있습니다.
  5. 로컬 컴퓨터에서 이미지를 선택하려면 라이브러리 탭을 클릭한 다음 업로드를 클릭합니다.

  6. 설정을 사용하여 섹션을 사용자 지정합니다.

  7. 저장을 클릭합니다.

텍스트 오버레이 포함 이미지

홈페이지에 사용자 지정 텍스트 오버레이를 사용하여 큰 이미지를 표시합니다.

텍스트 포함 이미지 오버레이 섹션에 포함된 설정은 다음과 같습니다.

  • 이미지 - 섹션에 포함할 이미지를 선택합니다. 이미지를 업로드하고 이전에 업로드한 이미지를 사용하거나 Burst의 무료 스톡 이미지를 선택할 수 있습니다.
  • 이미지 정렬 - 섹션의 이미지를 왼쪽 또는 오른쪽에 표시할지 선택합니다.
  • 레이아웃 - 섹션의 폭을 설정합니다.
  • 섹션 높이 - 섹션의 높이를 설정합니다. 이미지가 잘리지 않게 하려면 이미지에 맞춤을 선택하여 이미지 높이를 기준으로 섹션 높이를 설정합니다.
  • 텍스트 크기 - 텍스트의 크기를 설정합니다.
  • 제목 - 이미지와 페어링할 기본 텍스트를 추가합니다. 텍스트 포함 이미지 오버레이 섹션의 이름은 입력된 제목으로 자동으로 변경됩니다.
  • 텍스트 - 이미지와 함께 사용할 보조 텍스트를 추가합니다. 이 텍스트는 제목 텍스트 아래에 표시됩니다.
  • 버튼 레이블 - 버튼에 표시할 텍스트를 추가합니다.
  • 버튼 링크 - 버튼에 연결할 URL 또는 페이지를 설정합니다. URL에 붙여 넣거나 메뉴에서 페이지를 선택합니다. 섹션에 버튼을 포함시키지 않으려면 이 필드를 비워 둡니다.

홈페이지에 텍스트 포함 이미지 오버레이 추가

  1. 섹션 추가를 클릭합니다.
  2. 텍스트 포함 이미지 오버레이를 클릭한 다음 선택을 클릭합니다.
  3. 이미지 영역에서 이미지 선택을 클릭하고 다음 중 하나를 수행합니다. - Shopify 관리자에 이미 업로드한 이미지를 선택하려면 라이브러리 탭을 클릭합니다.
  4. Burst의 스톡 이미지를 선택하려면 무료 이미지 탭을 클릭합니다. 여기에서 검색어를 입력하거나 이미지 범주를 찾아볼 수 있습니다.
  5. 로컬 컴퓨터에서 이미지를 선택하려면 라이브러리 탭을 클릭한 다음 업로드를 클릭합니다.

  6. 설정으로 텍스트 오버레이 포함 이미지 섹션을 사용자 지정합니다.

  7. 저장을 클릭합니다.

특별 상품

홈페이지에서 제품을 추천할 수 있습니다. 제품을 추천하여 신규 제품이나 할인 중인 제품을 홍보할 수 있습니다. 고객은 이미지 아래의 왼쪽/오른쪽 화살표를 사용하여 추가 제품 이미지를 볼 수 있습니다.

추천 제품 섹션에 포함된 설정은 다음과 같습니다.

  • 제품 - 홈페이지에서 원하는 기능이 있는 제품을 선택합니다.
  • 수량 선택기 표시 - 사용자가 카트에 추가할 수량을 지정할 수 있도록 합니다.
  • 이형 상품 레이블 표시 - 이형 상품 드롭다운 메뉴 위에 "사이즈" 및 "색상"과 같은 이형 상품 레이블을 표시합니다. 표시되는 이형 상품 레이블은 제품의 이형 상품 옵션 이름을 기준으로 합니다.
  • 공급업체 표시 - 제품 브랜드 또는 공급업체를 표시합니다. 브랜드나 공급업체를 표시하려면 제품에 공급업체를 추가해야 합니다.
  • 동적 결제 버튼 표시 - 고객이 카트를 건너뛰고 추천 제품 섹션에서 결제로 바로 이동할 수 있습니다.
  • 소셜 공유 버튼 표시 - 고객이 소셜 미디어에서 제품을 공유하는 데 사용할 수 있는 버튼을 표시합니다.

미디어

  • 사이즈 - 제품 미디어의 사이즈를 설정합니다.
  • 이미지 확대/축소 활성화 - 고객이 제품 이미지 위에 마우스를 올려서 확대/축소할 수 있습니다.
  • 동영상 루프 활성화 - 제품 동영상을 자동으로 반복합니다. 이 옵션 선택을 해제하면 동영상이 끝날 때 재생 버튼이 표시됩니다.

추천 제품 섹션 추가

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">데스크톱</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>Shopify 관리자에서 <strong>온라인 스토어</strong> &gt; <strong>테마</strong>로 이동합니다.
</li><li><strong>섹션</strong> 옆에 있는 <strong>사용자 지정</strong>을 클릭합니다.
</li></ol></div><div class="iphone changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopify 앱</a>에서 <strong>스토어</strong>를 탭합니다.
</li><li><strong>판매 채널</strong> 섹션에서 <strong>온라인 스토어</strong>를 탭합니다.
</li><li><strong>테마 관리</strong>를 탭합니다.
</li><li><strong>섹션</strong> 옆에서 <strong>사용자 지정</strong>을 탭합니다.
</li><li><strong>편집</strong>을 탭합니다.
</li></ol></div><div class="android changeable-content"><ol>
<li><a href="https://www.shopify.com/install/detect">Shopify 앱</a>에서 <strong>스토어</strong>를 탭합니다.
</li><li><strong>판매 채널</strong> 섹션에서 <strong>온라인 스토어</strong>를 탭합니다.
</li><li><strong>테마 관리</strong>를 탭합니다.
</li><li><strong>섹션</strong> 옆에서 <strong>사용자 지정</strong>을 탭합니다.
</li><li><strong>편집</strong>을 탭합니다.
</li></ol></div>
</div>
  1. 섹션 추가를 클릭합니다.
  2. 추천 컬렉션, 선택을 차례로 클릭합니다.
  3. 설정을 사용하여 추천 제품 섹션을 사용자 지정합니다.
  4. 저장을 클릭합니다.

뉴스레터

홈 페이지에 뉴스레터 신청을 추가할 수 있습니다. 이 기능을 추가하면 이메일 마케팅 캠페인을 위한 고객 이메일 주소를 수집할 수 있습니다. 이메일 마케팅에 대한 자세한 내용은 Shopify 블로그를 참조하십시오.

홈 페이지에 뉴스레터 신청 추가

  1. 섹션 추가를 클릭합니다.

  2. 뉴스레터를 클릭한 다음 선택을 클릭합니다.

  3. 뉴스레터 신청 머리글을 입력합니다.

  4. 뉴스레터 신청에 대한 부제목을 입력합니다.

  5. 저장을 클릭합니다.

지도

홈 페이지에 Google 지도를 추가하여 고객에게 사업체 위치를 안내할 수 있습니다.

지도 섹션에 포함된 설정은 다음과 같습니다.

  • 제목 - 지도 섹션에 제목을 추가합니다.
  • 주소 및 시간 - 지도 섹션에 스토어 주소 및 시간을 추가합니다.
  • 지도 주소 - 스토어 위치를 표시하도록 지도를 설정합니다.
  • 지도 링크 레이블 - Google 지도 내 스토어 위치로 연결되는 버튼을 추가합니다.
  • 핀 표시 - 지도에서 스토어의 특정 위치를 표시하는 핀을 추가합니다.
  • Google 지도 API 키 - 지도 섹션에 지도의 API 키를 추가합니다.
  • 이미지 - 지도가 로드되지 않으면 표시할 이미지를 추가합니다.
  • 이미지 위치 - 이미지 위치를 설정합니다.

홈 페이지에 지도 추가

  1. 섹션 추가를 클릭합니다.
  2. 지도를 클릭한 다음 선택을 클릭합니다.
  3. 설정을 사용하여 지도 섹션을 사용자 지정합니다.
  4. 저장을 클릭합니다.

Rich text

서식있는 텍스트 섹션을 사용하여 홈페이지에 표시할 콘텐츠를 작성하거나, Shopify 관리자에서 생성한 페이지를 삽입합니다. 예를 들어, 블로그 페이지를 삽입하여 계획한 이벤트를 나타내거나 다음 중 하나를 포함하는 페이지를 표시할 수 있습니다.

서식 있는 텍스트 섹션에 포함된 설정은 다음과 같습니다.

  • 넓게 표시 - 텍스트 양쪽 여백을 줄입니다.
  • 제목 - 서식 있는 텍스트 섹션에 제목을 추가합니다.
  • 텍스트 - 사용자 지정 텍스트를 추가하고 형식을 지정합니다. 스토어의 페이지를 표시하려면 콘텐츠 추가를 클릭한 다음 페이지를 클릭합니다. 드롭다운 메뉴에서 홈 페이지로 표시할 페이지를 선택합니다.
  • 크기 - 텍스트의 크기를 설정합니다.

홈페이지에 서식있는 텍스트 추가

  1. 섹션 추가를 클릭합니다.

  2. 서식있는 텍스트를 클릭한 다음 선택을 클릭합니다.

  3. 설정을 사용하여 서식 있는 텍스트 섹션을 사용자 지정합니다.

  4. 저장을 클릭합니다.

동영상

홈 페이지에 YouTube 동영상을 추가할 수 있습니다. 동영상을 통해 고객 참여를 유도하고 사업을 홍보할 수 있습니다.

동영상 섹션에 포함된 설정은 다음과 같습니다.

  • 표지 이미지 - 동영상에 표지 이미지를 추가합니다. 동영상이 재생되는 동안에는 표지 이미지가 숨겨집니다.
  • 이미지 정렬 - 가장 중요한 부분이 항상 표시되도록 표지 이미지를 정렬합니다.
  • 동영상 링크 - 동영상의 YouTube URL을 추가합니다.
  • 오버레이 표시 - 텍스트를 더 쉽게 읽을 수 있도록 동영상 위에 색상 계층을 추가합니다. 동영상 스타일을 재생 버튼이 있는 이미지로 설정하면 동영상이 재생되는 동안 오버레이가 제거됩니다.
  • 스타일 - 동영상의 스타일을 설정합니다. 배경 동영상 스타일은 데스크톱에서만 사용 가능합니다. 태블릿이나 모바일 장치를 사용하여 스토어를 방문하는 고객에게는 항상 재생 버튼이 있는 이미지 스타일이 표시됩니다.
  • 동영상 높이 - 동영상의 높이를 설정합니다.
  • 제목 - 동영상에 제목을 추가합니다.
  • 텍스트 크기 - 동영상에 텍스트를 추가합니다. 동영상 스타일을 재생 버튼이 있는 이미지로 설정하면 동영상이 재생되는 동안 텍스트가 제거됩니다.

홈 페이지에 동영상 추가

  1. 섹션 추가를 클릭합니다.
  2. 동영상, 선택을 차례로 클릭합니다.
  3. 설정을 사용하여 동영상 섹션을 사용자 지정합니다.
  4. 저장을 클릭합니다.

슬라이드 쇼

홈 페이지에 이미지 슬라이드 쇼를 추가할 수 있습니다. 슬라이드 쇼 섹션에서 슬라이드의 높이를 설정하고, 텍스트와 버튼을 추가하고, 슬라이드 쇼 자동 재생 여부를 선택할 수 있습니다.

슬라이드 쇼 섹션에 포함된 설정은 다음과 같습니다.

  • 이미지 슬라이드 - 슬라이드 쇼에 포함할 이미지를 선택합니다. 이미지를 업로드하고, 이전에 업로드한 이미지를 사용하고, Burst에서 무료 스톡 이미지를 선택할 수 있습니다. 각 슬라이드에 대해 지정할 수 있는 설정은 다음과 같습니다. - 이미지 위치 - 슬라이드 쇼 프레임 내 이미지 정렬을 선택합니다. 아래 가이드라인에서 이미지 위치에 대해 자세히 알아볼 수 있습니다.

    • 제목 - 이미지와 함께 사용할 기본 텍스트를 추가합니다.
    • 부제목 - 이미지와 함께 사용할 보조 텍스트를 추가합니다. 이 텍스트는 제목 텍스트 아래에 표시됩니다.
    • 버튼 레이블 - 버튼에 표시할 텍스트를 추가합니다.
    • 버튼 링크 - 버튼에 연결할 URL 또는 페이지를 설정합니다. URL에 붙여 넣거나 메뉴에서 페이지를 선택합니다. 섹션에 버튼을 포함시키지 않으려면 이 필드를 비워 둡니다.
  • 슬라이드 높이 - 슬라이드 쇼의 높이를 설정합니다. 슬라이드 높이가 슬라이드 쇼에 영향을 주는 방식에 대해 자세히 알아보십시오.

  • 텍스트 사이즈 - 슬라이드 쇼에서 제목 사이즈를 설정합니다.

  • 텍스트 정렬 - 슬라이드에서 텍스트의 위치를 선택합니다.

  • 오버레이 표시 - 이미지와 이미지 위에 배치되는 텍스트 사이의 색상 레이어입니다. 오버레이를 적용하면 색상 대비와 가독성을 높일 수 있습니다. 색상 설정에서 오버레이의 색상과 불투명도를 설정할 수 있습니다.

  • 슬라이드 자동 순환 - 슬라이드 쇼가 자동으로 실행되도록 설정합니다.

  • 슬라이드 변경 빈도 - 슬라이드 변경 빈도를 선택합니다.

슬라이드 쇼 이미지 자르기 및 권장 이미지 크기에 대해 알아보려면 슬라이드 쇼 가이드라인을 참조하십시오.

홈 페이지에 슬라이드 쇼 추가

  1. 섹션 추가를 클릭합니다.
  2. 슬라이드 쇼를 클릭한 다음 선택을 클릭합니다.
  3. 이미지 슬라이드를 추가하려면 다음 단계를 수행합니다.

    1. 콘텐츠 영역에서 이미지 슬라이드 추가를 클릭합니다.
    2. 이미지 아래에서 이미지 선택을 클릭합니다. 컴퓨터에서 이미지를 업로드하려면 업로드를 클릭합니다. Burst의 무료 스톡 이미지를 사용하려면 무료 이미지를 클릭합니다.
    3. 슬라이드 쇼에서 이미지를 정렬할 방법을 선택하려면 이미지 위치 드롭다운 메뉴에서 위치를 선택합니다. 아래 가이드라인에서 이미지 위치에 대해 자세히 알아볼 수 있습니다.
    4. 이미지 슬라이드에 텍스트를 추가하려면 제목 필드나 부제목 필드 또는 두 필드에 모두 텍스트를 입력합니다.
    5. 버튼 레이블 필드에 텍스트를 입력하여 이미지 슬라이드에 버튼을 추가합니다. 버튼 링크 필드에서 버튼과 연결할 온라인 스토어 위치를 선택합니다.
  4. 설정을 사용하여 슬라이드 쇼 섹션을 사용자 지정합니다.

  5. 저장을 클릭합니다.

슬라이드 쇼 가이드라인

아래 설정 및 이미지 권장 사항을 참조하여 슬라이드 쇼가 온라인 스토어에서 표시되는 방식을 제어할 수 있습니다. 슬라이드가 표시되는 방식은 다음 요인에 의해 결정됩니다.

  • 이미지의 치수
  • 이미지 위치 설정
  • 슬라이드 높이 설정
  • 이미지의 폭 대 높이 비율

화면 크기와 모양의 차이로 인해 모바일 장치와 데스크톱 장치에서 슬라이드가 각기 다르게 표시될 수 있습니다.

이미지 크기 권장 사항

슬라이드 쇼 이미지의 권장 크기는 슬라이드 높이 설정에 따라 다릅니다. 다음 가이드라인을 따르십시오.

설정에 따른 이미지 크기 권장 사항
슬라이드 높이 설정 권장 폭 권장 높이
첫 번째 이미지에 맞춤 1200픽셀 600픽셀
스몰 1200픽셀 475픽셀
보통 1200픽셀 489픽셀
라지 1200픽셀 775픽셀

슬라이드 높이 설정을 확인하거나 변경하려면 슬라이드 쇼 생성 지침의 5단계를 참조하십시오.

이미지 자르기

이미지가 잘리는 방식을 제어하거나 이미지가 잘리지 않도록 하는 단계를 수행할 수 있습니다.

이미지가 잘리는 방식 제어

다음과 같은 경우 일부 화면 크기에서 이미지가 잘릴 수 있습니다.

  • 여러 이미지의 폭 대 높이 비율이 각기 다른 경우
  • 슬라이드 높이가 소형, 중형 또는 대형으로 설정되어 있는 경우
  • 슬라이드 높이가 첫 번째 이미지에 맞춤으로 설정되어 있으며 이미지의 높이가 장치 화면이나 브라우저 화면보다 큰 경우

이미지 위치 설정을 사용하면 이미지가 잘리는 방식을 제어할 수 있습니다.

이미지를 자를 때 계속 보이게 할 부분을 선택할 수 있습니다. 다음 예제에서는 화면 크기에 따라 동일한 이미지가 잘리는 방식을 확인할 수 있습니다. 왼쪽 슬라이드의 이미지 위치는 정가운데로 설정되어 있습니다. 오른쪽 슬라이드의 이미지 위치는 왼쪽 상단으로 설정되어 있습니다.

이미지 위치 설정에 따라 각기 다르게 잘리는 예제 슬라이드입니다.

이미지 위치 설정을 확인하거나 변경하려면 슬라이드 쇼 생성 지침의 10단계를 참조하십시오.

이미지 잘림 방지

슬라이드 쇼에서 이미지가 잘리지 않도록 하려는 경우 다음 단계를 수행해 보십시오.

  • 슬라이드 높이를 첫 번째 이미지에 맞춤으로 설정합니다.
  • 폭이 높이의 2배인 이미지를 사용합니다. 이러한 이미지의 폭 대 높이 비율은 2:1입니다. 권장 치수는 1200픽셀 x 600픽셀입니다.
  • 모든 슬라이드의 폭 대 높이 비율이 같은지 확인합니다. 슬라이드의 픽셀 단위 치수보다 비율이 더 중요합니다.

다음 예제에서는 데스크톱 및 모바일 장치에 비율이 2:1인 슬라이드 쇼 이미지가 표시되어 있습니다.

슬라이드가 잘리지 않은 상태로 데스크톱 및 모바일 장치에 표시되어 있습니다.

슬라이드 높이

슬라이드 쇼 섹션의 폭은 항상 브라우저 창의 100%입니다. 슬라이드의 높이는 폭을 기준으로 합니다. 화면 크기의 차이로 인해 슬라이드의 폭과 높이는 장치마다 달라집니다. 슬라이드 높이 설정도 슬라이드 높이에 영향을 줍니다.

첫 번째 이미지에 맞춤 설정을 사용하여 슬라이드 쇼의 높이를 첫 번째 이미지의 높이에 맞출 수 있습니다. 이 설정은 모든 이미지의 크기가 같거나 폭과 높이의 비율이 같을 때 가장 적합합니다. 이미지의 크기나 비율이 서로 다른 경우 슬라이드 순서를 변경하여 높이가 다를 때 어떻게 보이는지 알 수 있습니다.

아래 예제에서는 높이가 가장 짧은 슬라이드가 첫 번째로 배치되어 있습니다.

더 짧은 슬라이드에 따라 나머지 두 슬라이드의 높이가 결정됩니다. 다른 슬라이드는 더 길기 때문에 상단과 하단이 잘립니다.

그 다음 예제에서는 높이가 긴 슬라이드가 첫 번째로 배치되어 있습니다.

중간 높이의 슬라이드에 따라 나머지 두 슬라이드의 높이가 결정됩니다. 더 긴 슬라이드는 상단과 하단이 잘립니다. 더 짧은 슬라이드는 양쪽 측면이 잘립니다.

대신 소형, 중형, 대형 높이 설정을 사용하는 경우에는 슬라이드의 이미지 크기 권장 사항을 참조하십시오.

이미지 비율

슬라이드 쇼에서 이미지 잘림을 방지하려는 경우 이미지의 폭 대 높이 비율을 2:1로 맞추는 것이 좋습니다.

데스크톱 디스플레이에서 이미지가 잘리는 것에 상관없이 모바일 디바이스에서만 잘림을 방지하려는 경우에는 정사각형 이미지나 세로가 가로보다 큰 이미지를 사용하십시오. 다음 예제 슬라이드에서는 세로와 가로의 비율이 1:1인 정사각형 이미지가 표시되어 있습니다.

정사각형 슬라이드가 데스크톱 및 모바일 장치에 표시되어 있습니다. 데스크톱 장치에서는 이미지가 잘리지만 모바일 장치에서는 잘리지 않습니다.

그 다음 예제 슬라이드에는 가로와 세로의 비율이 2:3인 세로 이미지가 표시되어 있습니다.

긴 슬라이드가 데스크톱 및 모바일 장치에 표시되어 있습니다. 데스크톱 장치에서는 이미지가 잘리지만 모바일 장치에서는 잘리지 않습니다.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험