Supply 관련 팁

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

이미지 팁

제품 이미지

Supply에 고해상도 사진을 사용하면 더 세련되고 전문적으로 보이므로 이미지는 최소 1024 x 1024픽셀이어야 합니다. 필요한 경우 이미지 크기가 자동으로 축소됩니다. 고해상도 사진은 제품 페이지에서 이미지 확대/축소를 활성화한 경우 특히 중요합니다.

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

슬라이드 쇼 작게 설정

슬라이드쇼가 홈페이지의 세로 공간을 적게 차지하도록 하려면 가로 길이가 세로 길이보다 큰 가로형 이미지를 사용해야 합니다. 폭이 1000px인 이미지를 업로드해야 슬라이드의 왼쪽과 오른쪽에 공백없이 화면을 채울 수 있습니다. 이보다 폭이 작은 이미지는 슬라이드 쇼의 가운데로 정렬됩니다.

머리글 팁

머리글의 세로 길이가 너무 긴 경우 로고를 조정하여 길이를 줄일 수 있습니다. 로고가 너무 큰 경우 최소 폭을 조정하여 사이즈를 줄일 수 있습니다. 로고에 투명 또는 흰색 픽셀이 있으면 로고 위아래로 흰색 공간이 추가됩니다. 포토샵과 같은 이미지 편집 소프트웨어를 사용하여 로고 이미지에서 해당 픽셀을 트리밍할 수 있습니다. 로고를 트리밍한 다음 다시 업로드합니다. 로고 이미지의 빈 공간을 트리밍하면 머리글의 높이를 상당한 수준으로 줄일 수 있습니다.

로고 폭 조정

  1. 머리글을 클릭합니다.
  2. 사용자 지정 로고 폭(픽셀) 필드에 새로운 폭을 입력합니다. 기본 픽셀 값은 305입니다. 로고의 사이즈를 줄이려면 더 작은 픽셀 값을 사용합니다. 그러면 머리글의 높이가 줄어듭니다. 로고의 폭을 줄이면 로고가 비율을 유지한 채 축소되므로 로고의 높이 또한 줄어듭니다.
  3. 저장을 클릭합니다.

탐색 팁

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

드롭다운 메뉴 추가

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

주 메뉴 모범 사례

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

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

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

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

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

사이드바 제거

스토어에서 사이드바를 삭제하려면 테마 파일 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. 컬렉션 페이지에서 그룹별로 필터링을 활성화하려면:

    1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
    2. Supply 옆에 있는 사용자 지정을 클릭합니다.
    3. 페이지 또는 템플릿 메뉴 상단에 있는 드롭다운 메뉴에서 컬렉션 페이지를 선택합니다.
    4. 컬렉션 섹션을 클릭합니다.
    5. 사이드바 제품 필터 아래에서 그룹별을 선택합니다.
    6. 저장을 클릭합니다.

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

필터 그룹 및 태그 재정렬

그룹은 사전순으로 정렬되므로 그룹 내 나열된 태그도 같은 방식으로 정렬됩니다. 해당 정렬을 사용자 지정하려면 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와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험