Supply 관련 팁

이 문서에서는 온라인 스토어의 Supply 설정에 유용한 몇몇 팁과 모범 사례를 살펴봅니다.

이미지 팁

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

Supply에 고해상도 사진을 사용하면 더 세련되고 전문적으로 보이므로 이미지는 최소 1024 x 1024픽셀이어야 합니다. 필요한 경우 이미지 크기가 자동으로 축소됩니다.

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

제품 사진에 가장 적합한 폭 높이 비율은 정사각형입니다.

헤더 작게 설정

몇몇 방법으로 페이지 상단 섹션을 줄일 수 있습니다.

로고가 너무 크면 테마 설정에서 최대 폭을 조정하여 크기를 줄일 수 있습니다. 로고 폭을 줄이면 Shopify가 비율이 유지하면서 로고의 배율을 조정하기 때문에 높이도 줄일 수 있습니다. 테마 편집기를 사용하여 머리글 섹션에서 사용자 지정 로고 폭 값을 조정합니다. 기본 픽셀 값은 305입니다. 더 작은 픽셀 값을 사용하면 로고 크기를 줄여서 머리글의 높이를 같이 줄입니다.

로고에 투명 또는 흰색 픽셀이 있으면 로고 위아래로 흰색 공간이 추가됩니다. Photoshop 같은 프로그램을 사용하여 로고 이미지에서 해당 픽셀을 트리밍할 수 있습니다. 로고를 트리밍한 다음 테마 편집기를 사용하여 다시 업로드합니다. 로고 내 흰색 공간을 트리밍하면 헤더 높이를 크게 줄일 수 있습니다.

슬라이드 쇼 작게 설정

가로 길이가 세로 길이보다 큰 가로형 이미지를 사용하십시오.

테마 편집기에는 폭 1000픽셀 x 높이 500픽셀 사이즈의 이미지를 업로드하는 것이 좋기는 하지만 작은 이미지도 사용할 수 있습니다. 폭이 1000픽셀이면 슬라이드의 왼쪽과 오른쪽 공백없이 화면을 채울 수 있습니다. 이보다 폭이 작은 이미지는 슬라이드 쇼의 가운데로 정렬됩니다.

탐색 팁

Supply 사용 시 스토어 탐색을 개선할 수 있는 팁은 다음과 같습니다.

드롭다운 메뉴 추가

주 메뉴에 드롭다운 메뉴를 추가하려면 탐색 페이지에서 메뉴를 생성해야 합니다.

주 메뉴 모범 사례

주 메뉴에 너무 많은 항목을 한 줄에 표시하면 들어가지 않은 마지막 링크가 드롭다운 메뉴 "더하기"에 추가됩니다.

이 작업은 그 수를 5개 또는 6개로 유지하지만, 주 메뉴의 링크 수를 엄격하게 제어하지는 않습니다. 링크를 더 많이 넣으려면 다음을 수행하십시오.

  • 테마 설정 탭에서 입력 체계주 메뉴 글꼴 크기를 줄여 탐색 링크를 작게 만듭니다.
  • 각 링크에 더 적은 글자를 사용합니다. 예를 들어, '자주 묻는 질문'을 'FAQ'로, '문의처 정보'를 '문의처'로, '카탈로그'를 '쇼핑'으로 변경하고 모든 '그리고'를 '및'으로 변경할 수 있습니다.

탐색에 너무 많은 항목이 있는 경우 사이트 이용에 방해가 됩니다. 메뉴 항목이 너무 많으면 중요한 항목을 고객이 놓칠 수도 있습니다. 탐색 항목을 5~6개 정도로 제한해 보십시오. 6페이지 이상 사용하려면 드롭다운 메뉴를 활용하면 됩니다.

주로 발생하는 실수는 주 메뉴의 모든 컬렉션에 링크를 추가하는 것입니다. 링크를 추가하는 대신 '쇼핑'이나 '카탈로그' 링크 아래 드롭다운 메뉴에 컬렉션 목록을 표시해 보십시오. 컬렉션을 그룹으로 세분화하여 각 그룹에 드롭다운 메뉴를 추가하는 방법도 있습니다. 아니면 제품 태그를 사용하여 제품 하위 범주를 생성할 수도 있습니다.

사이드바 제거

스토어에서 사이드바를 삭제하려면 테마 파일 2개에 코드를 추가해야 합니다.

  1. 섹션 디렉토리에서 collection-template.liquid을(를) 클릭합니다.

  2. 파일에서 has_sidebar찾습니다. 다음 코드 행을 삭제합니다.

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. 저장을 클릭합니다.

  2. 섹션 디렉토리에서 collection-list-template.liquid을(를) 클릭합니다.

  3. 파일에서 has_sidebar찾습니다. 다음 코드 행을 삭제합니다.

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. 저장을 클릭합니다.

제품 팁

다음 팁은 Supply로 제품을 쇼케이스할 때 유용합니다.

고급 그룹 필터링 사용

제품이 많은 경우 고객이 제품을 손쉽게 정렬할 수 있도록 하위 그룹을 사용하도록 설정할 수 있습니다.

  1. 그룹을 정의합니다. 상기 이미지에서 그룹은 브랜드, 초점 거리, 해상도입니다.

  2. 모든 제품을 .csv 파일로 내보냅니다.

  3. 포함시킬 그룹 이름이 있는 모든 기존 태그에 그룹_태그 이름 형식으로 접두어를 붙입니다. 이 예제에서 태그는 브랜드_Canon, 초점 거리_18~55mm, 해상도_12MP입니다. 밑줄 왼쪽은 그룹 이름이고 오른쪽은 제품 태그입니다. 밑줄 양쪽에 모두 공백을 추가할 수 있습니다.

  4. .csv를 저장합니다. 파일을 저장하고 제품을 스토어에 다시 가져오십시오. 파일을 업로드할 때 핸들이 같은 현재 제품을 교체하는지 확인하여 생성 시 제품 중복을 피하십시오.

  5. 테마 편집기 미리 보기에서 컬렉션 페이지를 엽니다. 섹션 탭에서 컬렉션을 클릭한 다음 그룹 기준 옵션에 확인 표시합니다.

참고: 제품 태그에 작은따옴표, 큰따옴표 또는 앰퍼샌드(&)를 사용하면 그룹화된 필터링이 정상 작동하지 않습니다.

필터 그룹 및 태그 재정렬

그룹은 사전순으로 정렬되므로 그룹 내 나열된 태그도 같은 방식으로 정렬됩니다. 해당 정렬을 사용자 지정하려면 Shopify 전문가에게 문의하십시오.

가격 책정 팁

Supply 사용 시 가격 책정 설정에 대한 팁은 다음과 같습니다.

판매 금액 반올림 사용 중지

  1. 왼쪽의 자산 아래에서 timber.scss.liquid 링크를 클릭하여 온라인 코드 편집기에서 테마 스타일시트를 엽니다.

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

.sale-tag sup {
   display: inline;
   top: 0;
   font-size: 100%;

   &:before {
    content: '.';
   }
 }
  1. 저장을 클릭합니다.

카트 팁

Supply에 JavaScript 추가 시 원활한 카트 작동을 돕는 팁은 다음과 같습니다.

고급 JavaScript가 작동하도록 카트 유형 변경

Supply에서는 cart.liquid에 추가하는 어떤 JavaScript도 등록기나 모달 카트에서 실행되지 않습니다. 스토어 URL에 /cart를 붙여야만 실행됩니다. http://your.store.url/cart와 같습니다.

카트 페이지에 다음과 같은 기능을 추가하려면 카트 유형을 "페이지식"으로 설정해야 합니다.

  • 배송료 계산기
  • 여러 통화
  • 선물 포장
  • 카트 특성 검사
  • 날짜 선택기
  • '약관에 동의합니다.' 확인란

카트 유형을 "페이지식"으로 변경하려면:

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

  2. 카트를 클릭합니다.

  3. 카트 유형 드롭다운 목록에서 페이지를 선택합니다.

  4. 저장을 클릭합니다.

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

무료 체험