Boundless

Boundless는 전체 화면 사진 기능을 갖춘 깔끔한 UI를 포함한 사진 위주의 테마입니다. Boundless는 모바일에 최적화되어 있으며 중대형 인벤토리가 있는 스토어에 적합합니다.

Boundless를 사용하는 온라인 스토어 예제

테마 편집기

테마 편집기로 테마를 사용자 지정할 수 있습니다. 테마 편집기 툴바는 섹션테마 설정으로 나뉘어 있습니다.

섹션 및 테마 설정이 표시된 테마 편집기 툴바

섹션에서는 스토어 내 서로 다른 페이지의 콘텐츠와 레이아웃을 수정할 수 있습니다. 테마 설정에서는 스토어의 글꼴과 색상을 사용자 지정하고 소셜 미디어 링크와 결제 설정을 바꿀 수 있습니다.

섹션은 온라인 스토어의 서로 다른 페이지 레이아웃을 구성하는 사용자 지정 가능 콘텐츠 블록입니다.

  • 홈 섹션에는 슬라이드 쇼나 뉴스레터 신청 같이 추가, 재배치, 제거할 수 있는 기능이 포함됩니다. 홈페이지에는 섹션을 25개까지 추가할 수 있습니다.

  • 페이지 유형마다 고유한 섹션이 있습니다. 예를 들어, 제품 페이지 섹션은 온라인 스토어 내 각 제품 페이지의 레이아웃을 결정합니다.

  • 페이지 섹션은 항상 온라인 스토어의 특정 위치에 있습니다. 해당 섹션을 사용자 지정할 수 있지만 재배치하거나 제거할 수는 없습니다.

  • 각 테마에는 온라인 스토어의 모든 페이지에 표시되는 머리글과 바닥글 같은 정적 섹션이 포함됩니다.

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

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

  • 머리글
  • 사이드바 메뉴
  • 공지 표시줄
  • 슬라이드 쇼
  • 작업 모음
  • 바닥글
  • 제품
  • 컬렉션
  • 컬렉션 목록 페이지
  • 문서

동적 섹션

동적 섹션을 추가, 재배치, 제거하여 홈페이지 레이아웃을 사용자 지정할 수 있습니다. 테마별로 선택 가능한 고유 동적 섹션 세트가 있습니다.

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

  • 블로그 게시물
  • 컬렉션 목록
  • 추천 컬렉션
  • 텍스트 포함 이미지
  • 특별 상품
  • 뉴스레터
  • 지도
  • Rich text
  • 동영상
  • 사용자 지정 HTML

머리글

테마의 머리글은 스토어의 모든 페이지 상단에 표시되는 섹션입니다.

머리글 섹션에 포함된 설정은 다음과 같습니다.

  • 로고 - 머리글에 로고 이미지를 추가합니다.
  • 홈 페이지 로고 - 홈 페이지에만 표시되는 로고를 추가합니다. 홈 페이지 로고는 슬라이드 쇼 위에 겹쳐 표시되므로 이미지 위에 표시해도 잘 보이는 버전의 로고를 선택합니다.
  • 사용자 지정 로고 폭(픽셀) - 로고 크기를 설정합니다.

머리글 사용자 지정

  1. Boundless을(를) 찾은 다음 사용자 지정을 클릭합니다.

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

  3. 설정을 사용하여 머리글을 사용자 지정합니다.

  4. 저장을 클릭합니다.

사이드바 메뉴

사이드바 메뉴는 스토어의 목차 역할을 합니다. 고객의 위치와 상관없이 스토어의 주 메뉴와 바닥글 메뉴에 메뉴 버튼이 표시됩니다.

사이드바 메뉴에는 두 가지 메뉴가 표시됩니다. 하나는 상단에 큰 글꼴로 표시되는 기본 메뉴이고 다른 하나는 기본 메뉴 아래에 보다 작은 글꼴로 표시되는 추가 메뉴입니다.

사이드바 메뉴를 사용자 지정하려면:

  1. 섹션을 클릭합니다.

  2. 사이드바 메뉴를 클릭합니다.

  3. 기본 메뉴 목록에서 기본 메뉴에 표시할 메뉴를 선택합니다. 일반적으로 이 메뉴가 스토어의 주 메뉴입니다.

  4. 추가 메뉴 목록에서 기본 메뉴 아래에 표시할 메뉴를 선택합니다. 일반적으로 이 메뉴가 스토어의 바닥글 메뉴입니다.

  5. 저장을 클릭합니다.

슬라이드 쇼

최대 5개의 이미지를 순환시키는 홈 페이지 슬라이드 쇼를 생성할 수 있습니다.

슬라이드에는 고해상도 이미지를 사용하는 것이 좋습니다. 이미지 크기는 3840x2160픽셀 이상이 좋지만 Shopify 업로드 제한을 초과해서는 안 됩니다.

슬라이드 쇼의 크기와 모양은 고객 장치의 크기와 모양에 따라 다르므로 일부 화면에서는 슬라이드 쇼 이미지가 잘립니다. 각 이미지의 중요한 부분이 항상 표시되도록 중앙에 초점이 있는 이미지를 사용해 보십시오.

슬라이드 쇼 이미지 관련 모범 사례에 대한 자세한 내용은 이미지 업로드를 참조하십시오.

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

  • 슬라이드 높이 - 슬라이드 쇼의 높이를 설정합니다. 첫 번째 이미지 슬라이드 높이에 맞춤을 선택하여 슬라이드 쇼의 기본 높이를 첫 번째 이미지의 높이로 맞춥니다.
  • 슬라이드 자동 순환 - 슬라이드 쇼가 자동으로 실행되도록 설정합니다.
  • 슬라이드 변경 빈도 - 슬라이드 변경 빈도를 선택합니다.
  • 텍스트 및 아이콘 - 슬라이드 쇼 위에 표시되는 텍스트 및 아이콘의 색상을 선택합니다.
  • 이미지 오버레이 - 이미지 슬라이드 위로 색상 계층을 추가합니다. 오버레이를 사용하면 슬라이드 쇼 텍스트의 가독성을 높일 수 있습니다.
  • 투명도 - 오버레이의 투명도를 설정합니다.
  • 이미지 - 슬라이드 쇼에 이미지 슬라이드를 추가합니다.
  • 이미지 위치 - 슬라이드 쇼에서 중점을 둘 이미지의 가장 중요한 부분을 선택합니다.
  • 제목 - 슬라이드에 제목을 추가합니다.
  • 버튼 텍스트 - 슬라이드에 텍스트 레이블이 있는 버튼을 추가합니다.
  • 버튼 링크 - 버튼을 온라인 스토어의 다른 부분으로 연결합니다.

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

  1. Boundless을(를) 찾은 다음 사용자 지정을 클릭합니다.

  2. 슬라이드 쇼를 클릭합니다.

  3. 설정을 사용하여 슬라이드 쇼를 사용자 지정합니다.

  4. 저장을 클릭합니다.

작업 모음

기본적으로 작업 모음에는 스토어의 주 메뉴가 표시됩니다. 고객이 방문한 페이지에 따라 다른 항목을 표시하도록 작업 모음을 사용자 지정할 수 있습니다. 홈 페이지에서 작업 모음은 제품 컬렉션을 표시하는 데 가장 자주 사용됩니다. 컬렉션 내에서 작업 모음은 추가 하위 범주나 다른 관련 컬렉션을 표시할 수 있습니다.

예를 들어, 의류를 판매하는 스토어의 경우 홈 페이지 작업 모음에 남성, 여성, 악세서리를 표시할 수 있습니다. 고객이 여성을 클릭하면 컬렉션 페이지 작업 모음에 상의, 바지, 신발류를 표시할 수 있습니다.

이런 식으로 작업 모음을 사용하려면 주 메뉴를 컬렉션 링크로 사용합니다. 스토어의 다른 부분(연락처 또는 정보 페이지) 링크는 바닥글 메뉴에 추가합니다.

작업 모음을 사용자 지정하려면:

  1. 섹션 탭을 클릭합니다.

  2. 작업 모음을 클릭합니다.

  3. 메뉴 목록에서 작업 모음에 표시할 메뉴를 선택합니다.

  4. 저장을 클릭합니다.

바닥글

Boundless에서는 바닥글 콘텐츠에 메뉴를 표시할 수 있습니다.

스토어 바닥글을 사용자 지정하려면:

  1. 섹션 탭을 클릭합니다.

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

  3. 메뉴 목록에서 바닥글에 표시할 메뉴를 선택합니다.

  4. 저장을 클릭합니다.

제품

제품 섹션에서 다음 항목을 추가하거나 제거할 수 있습니다.

  • 제품 브랜드 또는 공급업체
  • 수량 선택기
  • 소셜 공유 아이콘
  • 동적 결제 버튼

첫 번째 제품 이미지를 건너뛰고 이미지 스타일을 설정하고 제품 양식 폭을 선택할 수도 있습니다.

제품 페이지 설정을 편집하려면:

  1. 상단 표시줄 드롭다운 메뉴에서 제품 페이지를 선택합니다.

  2. 섹션을 클릭합니다.

  3. 제품을 클릭합니다.

  4. 첫 번째 제품 이미지를 건너뛰려면 첫 번째 제품 이미지 건너뛰기에 확인 표시합니다.

    이렇게 하면 첫 번째 제품 이미지가 컬렉션 페이지에만 표시되며 제품 페이지에는 표시되지 않습니다. 이 옵션을 사용하면 첫 번째 제품 이미지를 컬렉션 페이지에서 가장 돋보이도록 디자인하고 다른 제품 이미지를 보다 넓어진 제품 페이지 공간에서 돋보이게 디자인할 수 있습니다.

    첫 번째 제품 이미지가 있는 컬렉션 페이지 및 두 번째, 세 번째 제품 이미지가 있는 제품 페이지를 표시하는 예제

  5. 이미지 스타일을 설정하려면 이미지 스타일 드롭다운 메뉴에서 세로형/정사각형 또는 가로형을 선택합니다.

  6. 제품 브랜드나 공급업체를 표시하려면 공급업체 표시에 확인 표시합니다. 브랜드나 공급업체를 표시하려면 제품에 공급업체를 추가해야 합니다.

  7. 수량 선택기를 표시하려면 수량 선택기 표시에 확인 표시합니다.

  8. 소셜 공유 아이콘을 표시하려면 제품 공유 사용에 확인 표시합니다.

  9. 동적 결제 버튼을 표시하려면 동적 결제 버튼 표시에 확인 표시합니다.

  10. 제품 양식 폭을 설정하려면 제품 양식 폭 드롭다운 메뉴에서 작게 또는 크게를 선택합니다.

  11. 저장을 클릭합니다.

컬렉션

Boundless에는 컬렉션 페이지에 대한 정렬, 필터링, 모양, 페이지 매김 옵션이 포함되어 있습니다.

  1. 테마 미리 보기에서 컬렉션 페이지를 엽니다.

  2. 섹션 탭을 클릭합니다.

  3. 컬렉션을 클릭합니다.

  4. 모양 영역에서 다음 옵션을 설정합니다.

- 이미지 스타일 목록에서 제품 이미지에 대한 사진 방향을 세로형/정사각형 또는 가로형 중에서 선택합니다.

  • 이미지 크기 목록에서 제품 이미지 크기를 선택합니다.

  • 이미지 사이 간격을 늘리려면 이미지 간격 추가에 확인 표시합니다.

  • 제품 이미지 아래에 공급업체나 브랜드를 표시하려면 제품 공급업체 표시에 확인 표시합니다.

  1. 정렬 및 필터링 영역에서 다음 옵션을 설정합니다.
  • 정렬 옵션 목록을 표시하려면 정렬 옵션 표시에 확인 표시합니다.

  • 고객이 태그별로 필터링할 수 있는 목록을 표시하려면 태그 필터링 표시에 확인 표시합니다.

  1. 페이지 매김 영역의 페이지 매김 유형 목록에서 번호가 매겨진 페이지를 표시할지 "자세히 보기" 버튼을 표시할지 선택합니다.

  2. 저장을 클릭합니다.

추천 컬렉션

테마 편집기추천 컬렉션 섹션에 있는 이미지 스타일 옵션을 사용하면 컬렉션과 제품 페이지에서 이미지를 표시하는 방식을 변경할 수 있습니다.

  • 세로형/정사각형은 제품 이미지가 정사각형이거나 세로형인 경우에 적합합니다.
  • 가로형은 이미지가 직사각형이거나 가로형인 경우에 적합합니다.

이미지 크기 옵션은 컬렉션 페이지에 표시할 제품 이미지의 크기를 결정합니다. 제품 이미지를 작게 표시하는 경우 한 행에 더 많은 이미지를 넣을 수 있습니다.

행당 표시되는 이미지 수는 고객의 장치(데스크톱 또는 모바일)와 창 크기에 따라서도 달라집니다.

  1. 섹션 탭을 클릭합니다.

  2. 추천 컬렉션 섹션을 클릭합니다.

  3. 컬렉션 목록에서 컬렉션을 선택합니다. 선택한 컬렉션에는 최대 50개의 제품이 표시됩니다.

  4. 이미지 스타일 목록에서 이미지 유형을 세로형/정사각형 또는 가로형 중에서 선택합니다.

  5. 이미지 크기 목록에서 이미지 크기를 선택합니다.

  6. 제품 이미지 주변 간격을 늘리려면 이미지 간격 추가에 확인 표시합니다.

  7. 제품 공급업체나 브랜드를 표시하려면 제품 공급업체 표시에 확인 표시합니다.

  8. 저장을 클릭합니다.

뉴스레터

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

웹사이트의 뉴스레터 섹션입니다. 고객이 이메일 주소를 입력하는 필드와 '가입 신청'이라는 버튼이 있습니다.

홈 페이지에 뉴스레터 신청을 추가하려면:

  1. Boundless을(를) 찾은 다음 사용자 지정을 클릭합니다.

  2. 섹션을 클릭합니다.

  3. 섹션 추가 > 뉴스레터를 클릭합니다.

  4. 뉴스레터 신청에 사용할 제목을 제목 필드에 입력합니다. 기본 제목은 "뉴스레터 가입 신청"입니다.

  5. 뉴스레터 신청 부제목을 부제목 필드에 입력합니다.

  6. 저장을 클릭합니다.

Rich text

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

  1. 섹션 탭을 클릭합니다.

  2. 서식 있는 텍스트를 클릭합니다.

  3. 텍스트를 입력하고 형식을 지정합니다.

  4. 스토어의 페이지를 표시하려면 콘텐츠 추가를 클릭한 다음 페이지를 클릭합니다. 드롭다운 메뉴에서 홈 페이지로 표시할 페이지를 선택합니다.

  5. 저장을 클릭합니다.

동영상

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

홈 페이지에 동영상을 추가하려면:

  1. Boundless을(를) 찾은 다음 사용자 지정을 클릭합니다.

  2. 섹션을 클릭합니다.

  3. 섹션 추가 > 동영상을 클릭합니다.

  4. 동영상의 제목을 제목 필드에 입력합니다.

  5. 동영상 공유 링크를 동영상 링크 필드에 입력합니다.

    YouTube 공유 링크는 https://youtu.be/OTJXAUZY9t0과 같은 형태입니다. YouTube 동영상 공유 링크 복사 방법에 대한 자세한 내용은 이 YouTube 도움말을 참조하십시오.

    Vimeo 공유 링크는 https://vimeo.com/281332510과 같은 형태입니다. Vimeo 동영상 공유 링크 복사 방법에 대한 자세한 내용은 이 Vimeo 지원 센터 문서를 참조하십시오.

  6. 저장을 클릭합니다.

사용자 지정 HTML

사용자 지정 HTML 섹션에서 HTML 코드로 홈페이지용 사용자 지정 콘텐츠를 생성할 수 있습니다. 예를 들어, HTML을 사용하여 텍스트 블록 형식을 지정하거나 표를 생성하거나 타사 웹사이트의 콘텐츠를 포함하도록 할 수 있습니다.

홈페이지에 사용자 지정 HTML을 추가하려면:

  1. Boundless을(를) 찾은 다음 사용자 지정을 클릭합니다.

  2. 섹션을 클릭합니다.

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

  4. 고급 레이아웃 영역에서 사용자 지정 HTML > 추가를 클릭합니다.

  5. 사용자 지정 HTML을 클릭한 다음 홈페이지에 추가할 HTML 코드를 입력합니다.

  6. 저장을 클릭합니다.

테마 설정 테마 설정을 사용하여 온라인 스토어의 색상과 입력 체계를 사용자 지정할 수 있습니다. 소셜 미디어 계정으로 링크를 설정하고 카트 설정을 편집하고 Favicon을 추가할 수도 있습니다.

Boundless에는 다음과 같은 테마 설정이 포함됩니다.

  • 색상
  • 입력 체계
  • 카트
  • 소셜 미디어
  • Favicon
  • 결제

색상

온라인 스토어의 부분별로 색상을 선택할 수 있습니다.

색상 설정 사용자 지정

  1. **** 옆에서 사용자 지정을 클릭합니다.

  2. 테마 설정을 클릭합니다.

  3. 색상을 클릭합니다.

  4. 콘텐츠 유형별로 색상 견본을 클릭하여 다음과 같은 색상 선택기를 사용합니다.

    테마 편집기 내 색상 선택기

- 최근 선택한 항목 영역은 해당 테마에서 최근 선택한 색상을 나타냅니다. - 현재 사용 중인 항목 영역은 해당 테마의 다른 부분에서 사용 중인 색상을 나타냅니다.

색상을 투명으로 설정하려면 없음을 클릭합니다.

  1. 저장을 클릭합니다.

입력 체계

온라인 스토어의 글꼴 스타일 및 크기를 설정할 수 있습니다.

입력 체계 설정 사용자 지정

  1. **** 옆에서 사용자 지정을 클릭합니다.

  2. 테마 설정을 클릭합니다.

  3. 입력 체계를 클릭합니다.

  4. 텍스트 유형별로 변경을 클릭하여 다음과 같은 색상 선택기를 사용합니다.

    글꼴 선택기 내 '변경' 버튼

  5. 검색 필드를 사용하거나 더 로드를 클릭하여 글꼴을 살펴봅니다.

    사용 가능한 모든 글꼴을 보려면 Shopify 글꼴 라이브러리를 확인합니다.

  6. 사용할 글꼴의 이름을 클릭합니다.

  7. 글꼴 스타일(굵게, 기울임꼴 등)을 변경하려면 보통을 클릭합니다. 그런 다음 사용할 스타일을 선택하고 선택을 클릭합니다.

    글꼴 선택기에서 사용 가능한 글꼴 굵기 모음

  8. 저장을 클릭합니다.

카트

Boundless에서는 카트 유형을 선택하고 고객의 주문 참고 사항을 사용하도록 설정하여 카트 페이지를 사용자 지정할 수 있습니다.

Boundless 테마에서는 다음 두 가지 카트 유형을 지원합니다.

  • 페이지형의 경우 품목이 카트에 추가되면 카트 페이지로 고객을 리디렉션합니다.

  • 서랍형의 경우 품목이 카트에 추가되면 페이지 측면의 서랍이 열리고 결제 페이지로 진행하라는 메시지가 표시됩니다.

Boundless에서는 고객이 주문 시 특별 지침을 추가하는 옵션도 제공합니다.

Brooklyn에서 카트 옵션을 설정하려면:

  1. 테마 설정을 클릭합니다.

  2. 카트 페이지를 클릭합니다.

  3. 카트 유형 목록에서 카트 유형을 선택합니다.

  4. 고객이 결제 시 주문 참고 사항을 제공하도록 하려면 주문 참고 사항 사용에 확인 표시합니다.

  5. 저장을 클릭합니다.

소셜 미디어

제품과 블로그 게시물에 소셜 공유 버튼을 추가하고 소셜 미디어 계정 링크를 추가할 수 있습니다.

소셜 미디어 설정을 사용자 지정하려면:

  1. Boundless을(를) 찾은 다음 사용자 지정을 클릭합니다.

  2. 테마 설정을 클릭합니다.

  3. 소셜 미디어를 클릭합니다.

  4. 소셜 공유 이미지를 업로드하려면 소셜 공유 이미지 영역에서 이미지 선택 또는 무료 이미지 살펴보기를 클릭합니다.

  5. 소셜 미디어 계정에 링크를 추가하려면 계정 영역에 있는 필드에 계정 링크를 입력합니다. https://instagram.com/shopify 또는 https://twitter.com/shopify와 같은 전체 링크를 입력합니다.

    소셜 미디어 링크는 온라인 스토어 바닥글에 표시됩니다.

  6. 제품 및 블로그 게시물에 소셜 공유 버튼을 추가하려면 공유 옵션 영역에서 일부 또는 모든 확인란에 확인 표시합니다.

    추가 가능한 공유 버튼은 다음과 같습니다.

- Facebook에서 공유 - Twitter에서 트윗 작성 - Pinterest에서 핀 만들기(블로그 게시물 공유는 사용 불가)

  1. 저장을 클릭합니다.

Favicon

즐겨 찾기 아이콘이나 "Favicon"을 업로드하면 다음과 같은 위치에 스토어 로고를 표시하여 온라인 스토어를 홍보할 수 있습니다.

  • 웹 브라우저 탭
  • 웹 브라우저 방문 기록
  • 바탕 화면 아이콘
  • 북마크로 저장 시 온라인 스토어 이름 옆

Favicon을 업로드하려면:

  1. 테마 설정 탭을 클릭합니다.

  2. Favicon을 클릭합니다.

  3. Favicon 이미지 영역에서 이미지 선택을 클릭하고 다음 중 하나를 수행합니다.

- Shopify 관리자에 이미 업로드한 이미지를 선택하려면 라이브러리 탭을 클릭합니다. - 로컬 컴퓨터에서 이미지를 선택하려면 라이브러리 탭을 클릭하고 + 버튼을 클릭합니다.

  1. 저장을 클릭합니다.

결제

이 섹션에서는 스토어의 결제를 사용자 지정할 수 있습니다. 스토어의 결제 페이지에 대한 자세한 내용은 여기를 클릭하여 확인하십시오.

작업 모음 내 하위 메뉴 설정

작업 모음에 홈 페이지로 연결된 메뉴를 생성한 경우 해당 메뉴는 홈 페이지에도 표시됩니다. 아직 존재하지 않는 컬렉션에 대한 메뉴를 설정하면 이러한 현상이 발생하므로 대신 홈 페이지에 연결되는 자리 표시자를 생성하십시오.

작업 모음에 컬렉션 링크를 생성하기 전에 컬렉션을 먼저 생성하거나, 연결하려는 컬렉션을 생성할 때까지 모든 제품 페이지로 연결합니다.

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

무료 체험