Pop

콘텐츠 액세스 기능을 살린 미니멀리즘 테마입니다. 중소 규모 인벤토리가 있는 스토어에 적합한 Pop는 손쉬운 콘텐츠 액세스에 적합한 큰 사이드바 탐색 기능에 중점을 두었습니다.

Pop을 사용하는 온라인 스토어 예제

테마 편집기

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

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

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

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

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

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

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

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

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

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

  • 로고 및 메뉴
  • 공지 표시줄
  • 바닥글
  • 제품 페이지
  • 컬렉션 페이지
  • 컬렉션 목록 페이지
  • 문서

동적 섹션

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

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

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

제품 페이지

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

  • 제품 브랜드 또는 공급업체
  • 이미지 확대/축소
  • 관련 제품
  • 수량 선택기
  • 동적 결제 버튼
  • 소셜 공유 아이콘

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

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

  2. 섹션을 클릭합니다.

  3. 제품 페이지를 클릭합니다.

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

  5. 고객이 제품 이미지 위로 마우스를 가져가는 방식으로 확대할 수 있도록 하려면 이미지 확대/축소 사용에 확인 표시합니다.

  6. 페이지 하단에 관련 제품 모음을 표시하려면 관련 제품 표시에 확인 표시합니다. 제품이 속한 컬렉션에 따라 표시되는 관련 제품이 다릅니다. 관련 제품을 표시하려면 해당 제품에 대해 컬렉션을 생성하거나 해당 제품을 기존 컬렉션에 추가해야 합니다. 컬렉션에 속한 제품이 아닌 경우 관련 제품이 표시되지 않습니다.

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

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

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

  10. 저장을 클릭합니다.

뉴스레터

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

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

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

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

  2. 섹션을 클릭합니다.

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

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

  5. 뉴스레터 신청 부제목을 부제목 필드에 입력합니다. 기본 텍스트는 "프로모션, 신제품, 할인 소식을 이메일로 바로 확인해 보세요."입니다.

  6. 배경 색상 견본을 클릭하고 색상을 선택하여 뉴스레터 신청 섹션의 배경 색상을 설정합니다.

  7. 저장을 클릭합니다.

동영상

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

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

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

  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. Pop을(를) 찾은 다음 사용자 지정을 클릭합니다.

  2. 섹션을 클릭합니다.

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

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

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

  6. 저장을 클릭합니다.

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

Pop에 포함된 테마 설정은 다음과 같습니다.

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

색상

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

색상 설정 사용자 지정

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

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

  3. 색상을 클릭합니다.

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

    테마 편집기 내 색상 선택기

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

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

  1. 저장을 클릭합니다.

입력 체계

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

입력 체계 설정 사용자 지정

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

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

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

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

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

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

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

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

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

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

  8. 저장을 클릭합니다.

소셜 미디어

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

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

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

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

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

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

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

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

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

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

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

  1. 저장을 클릭합니다.

사이드바에 하위 메뉴 추가

주 메뉴에 풀다운 메뉴를 추가하려면 탐색 페이지에서 메뉴를 생성해야 합니다. 자세한 방법은 이 문서를 참조하십시오.

스토어 로고 최적 크기

Pop 테마에서는 로고가 사이드바에 표시되기 때문에 비율이 맞게 압축된 로고를 사용하는 것이 가장 좋습니다. 넓은 폭에 비해 높이가 낮은 배너 형식의 로고는 Pop 테마에 적합하지 않습니다.

로고의 최대 폭은 450픽셀이며 최대 높이는 200픽셀입니다. 업로드한 로고 파일의 크기는 해당 제약 조건에 맞춰 조정됩니다.

가장 적합한 형식은 PNG입니다.

모바일 장치에서 로고를 더 크게 표시

모든 레이아웃에서 로고를 크게 표시하려면 우선 Shopify에 파일을 업로드하기 전에 로고 그래픽을 둘러싼 모든 네거티브 공간이나 투명 픽셀을 트리밍해야 합니다.

네거티브 공간이 많은 로고의 예제는 다음과 같습니다.

다음은 모든 네거티브 공간을 잘라내어 트리밍한 같은 로고입니다.

다음은 트리밍하지 않은 로고를 Pop 테마에서 사용한 예제입니다.

다음은 트리밍한 로고를 Pop 테마에서 사용한 예제입니다.

로고를 축소시킬 수 있는 네거티브 공간을 정리한 다음에는 모바일 머리글의 높이를 조정하여 로고를 확장시킬 공간을 확보합니다. 이렇게 하면 로고 크기를 키울 수 있습니다.

테마 편집기로 이동하여 머리글 및 탐색 섹션에서 "크기 조정 > 모바일 메뉴 높이" 값을 늘립니다.

사이드바에서 로고를 더 크게 표시

모든 레이아웃에서 로고를 크게 표시하려면 우선 Shopify에 파일을 업로드하기 전에 로고 그래픽을 둘러싼 모든 네거티브 공간이나 투명 픽셀을 트리밍해야 합니다.

네거티브 공간이 많은 로고의 예제는 다음과 같습니다.

다음은 모든 네거티브 공간을 잘라내어 트리밍한 같은 로고입니다.

다음은 네거티브 공간이 있는 로고를 Pop 테마에 업로드한 예제입니다.

다음은 트리밍한 로고를 Pop 테마에서 사용한 예제입니다.

로고를 축소시킬 수 있는 네거티브 공간을 정리한 다음에는 사이드바의 폭을 조정하여 로고를 확장시킬 공간을 확보합니다. 이렇게 하면 로고 크기를 키울 수 있습니다.

테마 편집기로 이동하여 머리글 및 탐색 섹션에서 "크기 조정 > 데스크톱 메뉴 폭" 값을 늘립니다.

사이드바 로고 주변 공백 축소

Pop 테마를 통해 로고 위아래에 추가한 패딩을 제거하기 전에 먼저 이미지 원본에 있는 패딩을 모두 트리밍하는 것이 중요합니다. Shopify에 파일을 업로드하기 전에 로고 그래픽을 둘러싼 모든 네거티브 공간이나 투명 픽셀을 트리밍해야 합니다.

네거티브 공간이 많은 로고의 예제는 다음과 같습니다.

다음은 모든 네거티브 공간을 잘라내어 트리밍한 같은 로고입니다.

다음은 트리밍하지 않은 로고를 Pop 테마에서 사용한 예제입니다.

다음은 트리밍한 로고를 Pop 테마에서 사용한 예제입니다.

테마 자산에 트리밍한 로고를 업로드한 다음에는 테마 편집기에서 사이드바 폭을 조정할 수 있습니다. 머리글 및 탐색 섹션에서 "크기 조정 > 데스크톱 메뉴 폭" 값을 원하는 대로 편집합니다.

지원되지 않는 최후의 수단으로 로고 위아래 패딩을 줄이려면 다음 단계를 수행합니다.

  1. 자산 아래에서 timber.scss.liquid를 클릭하여 온라인 코드 편집기에서 테마 스타일시트를 열거나 이 URL로 이동합니다.

  2. 파일 맨 아래에 다음을 추가합니다.

```sass {% comment %} The following media query function produces this: @media screen and (min-width: 1025px) { ... } Sidebar is only shown when width > 1025 pixels. {% endcomment %}

@include at-query ($min, $large) { .header-logo { margin-bottom: 30px /* original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} ```

  1. 파일을 저장합니다.

제품 페이지용 설정 편집

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

  • 제품 브랜드 또는 공급업체
  • 이미지 확대/축소
  • 관련 제품
  • 수량 선택기
  • 동적 결제 버튼
  • 소셜 공유 아이콘

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

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

  2. 섹션을 클릭합니다.

  3. 제품 페이지를 클릭합니다.

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

  5. 고객이 제품 이미지 위로 마우스를 가져가는 방식으로 확대할 수 있도록 하려면 이미지 확대/축소 사용에 확인 표시합니다.

  6. 페이지 하단에 관련 제품 모음을 표시하려면 관련 제품 표시에 확인 표시합니다. 제품이 속한 컬렉션에 따라 표시되는 관련 제품이 다릅니다. 관련 제품을 표시하려면 해당 제품에 대해 컬렉션을 생성하거나 해당 제품을 기존 컬렉션에 추가해야 합니다. 컬렉션에 속한 제품이 아닌 경우 관련 제품이 표시되지 않습니다.

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

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

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

  10. 저장을 클릭합니다.

Pop에 가장 적합한 제품 이미지 유형

Pop 테마에서 고해상도 사진을 사용하면 더 세련되고 전문적인 인상을 줄 수 있으므로 최소 폭 1024픽셀, 높이 1024픽셀의 이미지를 사용하는 것이 좋습니다. 필요 시 이미지 크기가 자동으로 줄어들기 때문에 해상도는 높을수록 좋습니다.

제품 페이지 섹션 내 테마 편집기에서 사용하도록 설정할 수 있는 이미지 확대/축소 기능을 사용하는 경우 고해상도 이미지를 사용하는 것이 특히 중요합니다.

컬렉션 페이지에 가장 잘 어울리는 것은 제품 추천 이미지의 폭 높이 비율이 모두 같은 경우입니다.

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

무료 체험