Brooklyn용 팁

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

탐색 팁

드롭다운 메뉴 추가

주 메뉴에 드롭다운 메뉴를 추가하려면 탐색 페이지에서 메뉴를 생성해야 합니다. 자세한 내용은 온라인 스토어에서 드롭다운 메뉴 설정을 참조하십시오.

온라인 스토어의 주 메뉴입니다.

사이드바 메뉴로 바뀌는 주 메뉴

주 메뉴가 자리를 너무 많이 차지할 경우에는 사이드바 메뉴로 전환되어 머리말 섹션에서 버튼을 클릭해야 열 수 있습니다.

온라인 스토어 왼쪽에 있는 사이드바 메뉴입니다. 사이드바 메뉴에 표시된

주 메뉴가 사이드바 메뉴로 전환되는 것을 방지하려면 다음 단계를 수행합니다.

  • 주 메뉴에 링크를 4~5개까지만 추가합니다.
  • 주 메뉴 링크에 좁은 글꼴을 사용합니다. 강조 텍스트 글꼴은 입력 체계 설정에서 변경할 수 있습니다.
  • 메뉴 항목의 문자 수를 제한합니다. 예를 들어, "자주 묻는 질문" 대신 "FAQ"를 사용하고 "문의처 정보" 대신 "문의처"를 사용합니다.

이미지 팁

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

  • 이미지 해상도가 높으면 더 세련되고 전문적인 인상을 줄 수 있으므로 최소 1024x1024픽셀 크기의 제품 이미지를 사용해야 합니다. 제품 이미지에 가장 적합한 형태는 정사각형입니다.

  • 이미지의 배경은 플랫 색상을 사용하는 것이 가장 좋습니다. 플랫 색상이란 음영이나 강조 효과가 없는 단색을 말합니다. 모든 이미지는 배경색이 같아야 합니다.

  • 제품 이미지의 프레임을 제거하려면 색상 설정에서 제품 배경 색상을 투명으로 설정합니다.

흰색 배경으로 표시된 두 제품 목록입니다. 온라인 스토어의 배경도 흰색이므로 제품 이미지에는 프레임이 보이지 않습니다.

슬라이드 쇼 이미지에 가장 적합한 크기

Brooklyn 데모 스토어에 표시되는 이미지 슬라이드는 둘 다 1200x800픽셀입니다. 모든 이미지 슬라이드를 동일한 크기로 유지하는 것이 좋습니다.

작은 화면에서 이미지 자르기

소형 장치의 경우 이미지 슬라이드가 위쪽 가장자리부터 아래쪽 가장자리까지 가득 찹니다. 슬라이드는 장치 화면 높이와 같은 높이로 조정됩니다. 이미지 왜곡 없이 화면을 채우기 위해 슬라이드 좌우는 잘립니다.

대형 화면의 경우 이미지 슬라이드는 브라우저 창의 폭과 같은 폭으로 조정됩니다. 이미지 왜곡 없이 창을 채우기 위해 슬라이드는 아래쪽에서 잘립니다.

다음은 동일한 온라인 스토어의 데스크톱 버전과 모바일 버전을 나타내는 예제입니다.

세로보다 가로가 긴 이미지를 표시한 슬라이드 쇼의 데스크톱 버전입니다. 모바일 버전에서는 같은 이미지를 같은 높이로 표시하지만 두 크기 모두 좁은 화면에 맞게 잘라서 표시한 모습입니다.

컬렉션에서 전체 화면 이미지 표시

전체 화면 이미지를 표시하려면 컬렉션에 추천 이미지가 있어야 합니다.

전체 화면 컬렉션 이미지 표시 방식은 Brooklyn 데모 스토어에서 확인할 수 있습니다. 맨 위에 표시되는 컬렉션 이미지는 1405x800픽셀입니다.

세로보다 가로가 긴 이미지를 표시한 슬라이드 쇼의 데스크톱 버전입니다.

모바일 버전에서는 같은 이미지를 같은 높이로 표시하지만 두 크기 모두 좁은 화면에 맞게 잘라서 표시한 모습입니다.

블로그 게시물 이미지 설정

블로그 문서의 첫 번째 이미지가 해당 블로그 페이지의 추천 이미지로 사용됩니다. 블로그 문서에 이미지를 추가하는 방법에 대한 자세한 내용은 블로그 게시물 작성을 참조하십시오.

제품 팁

제품에 할인 배지 추가

일반 가격보다 저렴하게 비교가를 설정하여 제품에 할인 배지를 추가할 수 있습니다. 배지는 컬렉션 페이지 내 제품 이미지 위에 표시됩니다.

컬렉션 페이지에서 더 크게 표시할 제품 설정

콜라주 스타일로 제품을 표시하도록 컬렉션 페이지를 설정한 경우 일부 제품은 크게 표시되고 일부는 작게 표시됩니다. 이미지 크기는 컬렉션 내 제품 순서에 따라 달라집니다. 관리자 내 컬렉션 페이지에서 제품 순서를 변경할 수 있습니다. 편집할 컬렉션을 클릭한 다음 제품 영역에 있는 정렬 드롭다운 메뉴에서 수동을 선택합니다. 그 다음에는 온라인 스토어에 표시하려는 순서대로 제품을 끌어서 놓습니다.

Shopify 관리자 내 컬렉션 페이지입니다.

제품 6개를 기준으로 첫 번째와 여섯 번째 제품 이미지가 크게 표시됩니다. 예를 들어, 컬렉션에서 크게 표시되는 이미지는 1번째, 6번째, 7번째, 12번째, 13번째, 18번째 이미지입니다.

콜라주 스타일로 제품을 표시한 컬렉션 페이지입니다. 제품 위에 표시된 숫자는 제품 순서가 이미지 크기와 연결된 방식을 나타냅니다.

모두 같은 크기의 그리드 형태로 제품 이미지를 표시하려는 경우 컬렉션에서 제품을 그리드 스타일로 표시하도록 설정합니다.

이형 상품 선택 시 스크롤 애니메이션 표시

제품 페이지에서 제품 설명이 짧아 스크롤할 필요 없이 화면에 보이는 경우 이미지가 있는 이형 상품을 선택하면 스크롤 애니메이션이 표시됩니다. 제품 설명이 너무 길어 아래로 스크롤해야 하는 경우에는 상단 이미지가 이형 상품 이미지로 교체되며 스크롤 애니메이션은 표시되지 않습니다.

스크롤 애니메이션을 표시하려면 제품 설명을 짧게 작성해야 합니다.

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

무료 체험