제품 페이지

제품 페이지는 스토어에서 판매하는 제품 정보를 표시하고 고객이 제품을 구매할 수 있는 곳입니다.

기본적으로 제품 페이지에는 테마 편집기 내의 제품 정보 섹션과 관련 제품 섹션이 있습니다.

이 페이지의 정보

제품 정보 섹션

제품 정보 섹션에는 제목, 설명, 가격, 이미지 등 제품 세부 정보가 표시됩니다.

제품 정보 섹션 설정

제품 정보 섹션의 설정
설정	설명
데스크톱에서 콘텐츠 고정 활성화	페이지를 아래로 스크롤할 때 제품 정보 열은 모든 이미지가 스크롤될 때까지 스크롤되지 않습니다.
색상 배합	이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
데스크톱 미디어 너비	데스크톱 컴퓨터의 제품 페이지에서 제품 미디어의 폭을 설정합니다. 작게, 보통, 크게 중에서 선택합니다.
미디어를 화면 높이로 제한	이 옵션을 선택하면 장치의 브라우저 창 높이를 기준으로 최대 미디어 높이가 설정됩니다.
미디어 맞춤	원본을 선택하여 미디어의 원래 가로 세로 비율을 유지하거나 채우기를 선택하여 미디어를 컨테이너에 맞춥니다.
데스크톱 레이아웃	데스크톱 컴퓨터에서 제품 미디어의 레이아웃을 설정합니다. 다음 옵션 중에서 선택합니다. 스택화 - 제품 미디어를 페이지에 수직으로 겹치게 표시합니다. 겹진 미디어 유형을 클릭하면 선택한 미디어를 더 크게 보여주는 팝업 대화 상자가 열립니다. 열 2개 - 제품 미디어를 열 2개에 겹치게 표시합니다. 썸네일 - 제품에 미디어 유형이 두 가지 이상인 경우 나머지 미디어는 주요 제품 미디어 아래에 썸네일로 표시됩니다. 고객은 썸네일을 클릭하여 주요 제품 미디어로 표시할 수 있습니다. 썸네일 캐러셀 - 제품에 두 개 이상의 이미지나 다른 미디어 유형이 있는 경우 나머지 미디어는 주요 제품 미디어 아래의 캐러셀에 썸네일로 표시됩니다. 고객은 썸네일을 클릭하여 주요 제품 미디어로 표시하거나 캐러셀 탐색 화살표를 사용하여 다른 미디어를 표시할 수 있습니다.
데스크톱 미디어 위치	데스크톱 컴퓨터에서 제품 미디어를 페이지 왼쪽에 표시할지 또는 오른쪽에 표시할지 선택합니다.
이미지 확대/축소	데스크톱에서 이미지를 확대/축소하는 방법을 선택합니다: 라이트박스 열기 - 고객이 클릭하면 이미지의 더 큰 버전이 표시됩니다. 이는 모바일 장치에 표시되는 제품 미디어의 기본 기능입니다. 클릭 및 커서 올리기 - 고객이 이미지를 클릭하여 확대한 다음 마우스를 올리면 그 이미지의 확대된 부분을 볼 수 있습니다. 확대된 이미지를 다시 클릭하거나 커서가 이 이미지를 벗어나면 '커서를 올리면 확대' 기능이 비활성화됩니다. 이 설정이 활성화되어 있고 사용자가 모바일 장치를 사용하는 경우 클릭했을 때 이미지는 기본적으로 모달(라이트박스)에서 열립니다. 확대/축소 안 함 - 이 옵션을 사용하면 이미지 확대/축소가 비활성화됩니다. 고해상도가 아니거나 확대하면 잘 표시되지 않는 이미지에 적합합니다.
모바일 레이아웃	모바일 장치에서 제품 미디어의 레이아웃을 설정합니다. 다음 옵션 중에서 선택합니다. 열 2개 - 제품 미디어 두 개를 나란히 표시하고 캐러셀 기능으로 스크롤하여 다른 제품 미디어를 볼 수 있습니다. 썸네일 표시 - 아래의 썸네일 캐러셀 스크롤과 함께 하나의 주요 제품 미디어를 표시합니다. 썸네일 숨기기 - 아래의 캐러셀 스크롤과 함께 하나의 주요 제품 미디어를 표시하지만 썸네일은 표시하지 않습니다.
이형 상품을 선택한 후 다른 이형 상품의 미디어 숨기기	이형 상품을 선택하면 다른 이형 상품의 이미지가 보기에서 숨겨집니다. 이형 상품의 선택을 취소하면 이미지가 다시 표시됩니다.
동영상 루프 활성화	이 설정을 사용하면 제품 미디어에 있는 모든 동영상이 반복 재생되므로 재생이 끝나면 자동으로 다시 재생됩니다.
상단 패딩	섹션 상단의 공간 크기를 설정합니다.
하단 패딩	섹션 하단의 공간 크기를 설정합니다.

제품 정보 섹션 설정 외에도 일부 제품 배지의 테마 설정을 보고 사용자 지정할 수 있으며 나만의 섹션별 사용자 지정 CSS를 추가할 수 있습니다.

제품 정보 블록

제품 정보 섹션에서 다음 블록을 사용할 수 있습니다.

텍스트 블록

텍스트 블록은 다이나믹 소스를 사용하여 정적 텍스트 또는 가변 데이터를 표시하는 데 사용할 수 있습니다. 예를 들어 $100 USD 이상 무료 배송과 같은 마케팅 메시지를 담은 텍스트를 각 제품에 동일하게 표시되도록 추가할 수 있습니다. 또한, 어떤 제품을 보고 있는지에 따라 변경될 수 있는 제품의 공급업체 필드와 같은 다이나믹 소스를 추가할 수도 있습니다.

제품 정보 섹션의 텍스트 블록 설정
설정	설명
텍스트	제품 페이지에 추가 정보를 추가하는 텍스트 필드입니다.
텍스트 스타일	텍스트 스타일을 변경합니다. 다음 옵션 중에서 선택하십시오. 본문 - 텍스트를 단락 스타일 텍스트로 변경합니다. 소제목 - 텍스트를 단락 스타일 텍스트보다 약간 큰 소제목 텍스트로 변경합니다. 대문자 - 텍스트를 단락 스타일 텍스트보다 작게 변경하고 모든 텍스트를 대문자로 표시합니다.

제목 블록

제목 블록에는 현재 보고 있는 제품의 제목이 표시됩니다. 이 블록에는 사용자 지정 가능한 설정이 없습니다.

가격 블록

가격 블록에는 현재 보고 있는 제품의 가격 및 가격 비교와 같은 가격 정보가 표시됩니다. 이 블록에는 사용자 지정 가능한 설정이 없습니다.

이형 상품 피커 블록

이형 상품 피커 블록은 현재 보고 있는 제품의 모든 이형 상품 옵션을 표시합니다. 이형 상품 피커는 이형 상품 옵션이 있는 제품에만 표시됩니다. 이 블록을 제거하면 이형 상품 옵션이 있는 제품의 경우 고객이 원하는 이형 상품 옵션을 선택하거나 구매할 수 없습니다.

제품 정보 섹션의 이형 상품 피커 블록 설정
설정	설명
스타일	고객에게 제품 이형 상품이 표시되는 방법을 선택합니다. 다음 옵션 중에서 선택합니다. 드롭다운 - 이형 상품 옵션이 드롭다운 메뉴로 표시됩니다. 색상 견본이나 텍스트로만 표시할 수 있습니다. 타원형 - 이형 상품 옵션을 선택 가능한 버튼으로 표시합니다. 견본 또는 텍스트로만 표시할 수 있습니다.
색상 견본	색상 견본을 고객에게 표시하는 방법을 선택합니다. 다음 옵션 중에서 선택합니다. 원형 - 색상 견본을 선택할 수 있는 원으로 표시합니다. 정사각형 - 색상 견본을 선택할 수 있는 정사각형으로 표시합니다. 없음 - 색상 견본을 표시하지 않습니다.

수량 선택기 블록

수량 선택기 블록에는 고객이 구매할 제품의 단위 수를 변경하기 위해 클릭하여 편집할 수 있는 숫자 필드가 표시됩니다. 이 블록에는 사용자 지정 가능한 설정이 없습니다.

구매 버튼 블록

구매 버튼 블록에는 카트에 추가 버튼과 모든 매장 내 픽업 정보가 표시됩니다. 또한 스토어에 있는 동적 결제 버튼도 표시할 수 있습니다.

제품 정보 섹션의 구매 버튼 블록 설정
설정	설명
동적 결제 버튼 표시	결제 설정에서 활성화한 동적 결제 옵션이 모두 표시됩니다.
기프트 카드의 수취인 정보 양식 표시	고객이 개인 메시지와 함께 수취인에게 기프트 카드를 보내고 예약할 수 있도록 기프트 카드 제품에 선택적인 확인란을 표시합니다.

설명 블록

설명 블록에는 현재 보고 있는 제품의 설명이 표시됩니다. 이 블록에는 사용자 지정 가능한 설정이 없습니다.

블록 공유

공유 블록에는 고객이 소셜 미디어에서 제품을 공유할 수 있는 클릭 가능한 링크가 표시됩니다.

제품 정보 섹션의 공유 블록 설정
설정	설명
텍스트	고객이 클릭하면 제품을 소셜 미디어에서 공유할 수 있는 텍스트입니다.

SKU 블록

SKU 블록에는 제품 또는 이형 상품과 해당하는 경우 관련된 SKU(Stock Keeping Unit)가 표시됩니다. 제품 이형 상품에 SKU 번호를 추가하는 방법을 자세히 알아보십시오.

제품 정보 섹션의 SKU 블록 설정
설정	설명
텍스트 스타일	텍스트 스타일을 변경합니다. 다음 옵션 중에서 선택하십시오. 본문 - 텍스트를 단락 스타일 텍스트로 변경합니다. 소제목 - 텍스트를 단락 스타일 텍스트보다 약간 큰 소제목 텍스트로 변경합니다. 대문자 - 텍스트를 단락 스타일 텍스트보다 작게 변경하고 모든 텍스트를 대문자로 표시합니다.

재고 상태 블록

재고 상태 블록에는 제품의 재고 상태가 표시됩니다. 재고 상태와 남은 재고 수량을 영구적으로 표시하거나 제품 재고 수가 설정한 임계값에 도달한 후에만 표시할 수 있습니다. 재고 추적이 활성화된 제품에만 재고 상태가 표시됩니다.

제품 정보 섹션의 재고 상태 블록 설정
설정	설명
텍스트 스타일	텍스트 스타일을 변경합니다. 다음 옵션 중에서 선택하십시오. 본문 - 텍스트를 단락 스타일 텍스트로 변경합니다. 소제목 - 텍스트를 단락 스타일 텍스트보다 약간 큰 소제목 텍스트로 변경합니다. 대문자 - 텍스트를 단락 스타일 텍스트보다 작게 변경하고 모든 텍스트를 대문자로 표시합니다.
재고 부족 임계값	범위 슬라이더를 사용하여 제품이 재고 부족 메시지와 함께 표시되는 임계값을 설정합니다. 0에서 100 사이의 숫자를 선택합니다. 슬라이더를 0으로 설정하면 제품이 완전히 품절될 때까지 재고 있음으로 표시됩니다.
재고 수 표시	제품의 재고 수량을 표시하려면 이 옵션을 선택합니다.

사용자 지정 Liquid 블록

사용자 지정 Liquid 블록에는 블록에 추가하는 사용자 지정 Liquid 또는 HTML 코드가 표시됩니다.

제품 정보 섹션의 사용자 지정 Liquid 블록 설정
설정	설명
Liquid 코드	입력한 Liquid 또는 HTML 코드로 렌더링된 콘텐츠가 표시됩니다.

축소 가능한 행 블록

축소 가능한 행 블록에는 제목이 있는 확장 및 축소 가능한 행이 표시됩니다. 고객이 아이콘, 제목 또는 아래쪽 화살표를 클릭하면 행이 확장되고 추가 콘텐츠가 표시됩니다.

제품 정보 섹션의 축소 가능한 행 블록 설정
설정	설명
제목	행이 축소 및 확장될 때 표시되는 행의 제목입니다.
아이콘	축소할 수 있는 행에 표시할 아이콘을 선택하거나 없음을 선택하면 행 제목만 표시합니다.
행 콘텐츠	서식 있는 텍스트 편집기를 사용하여 행의 내용을 입력합니다. 행이 확장되면 콘텐츠가 표시됩니다.
페이지의 행 콘텐츠	페이지에서 행에 콘텐츠를 추가합니다. Shopify 관리자의 온라인 스토어 > 페이지 섹션의 페이지에 추가한 콘텐츠만 표시됩니다. 테마 편집기 내의 페이지 템플릿에 추가하는 콘텐츠는 표시되지 않습니다. 행 콘텐츠 필드에 입력하는 모든 콘텐츠는 추가한 페이지 콘텐츠 위에 표시됩니다.

팝업 블록

팝업 블록에는 클릭 가능한 텍스트가 표시되고 클릭하면 팝업 대화 상자가 열립니다.

제품 정보 섹션의 팝업 블록 설정
설정	설명
링크 레이블	고객이 클릭하면 팝업 대화창이 표시되는 클릭 가능한 텍스트입니다.
페이지	팝업 대화 상자에서 콘텐츠를 표시할 페이지를 선택합니다. Shopify 관리자의 온라인 스토어 > 페이지 섹션의 페이지에 추가한 콘텐츠만 표시됩니다. 테마 편집기 내의 페이지 템플릿에 추가하는 콘텐츠는 표시되지 않습니다.

제품 평점 블록

제품 평점 블록은 별점으로 평균 제품 평가를 표시하고 괄호 안에 리뷰 수(예: ★★★★★(8))를 나타냅니다.

제품 평점을 표시하려면 제품 리뷰 앱과 reviews.rating_count 및 reviews.rating 메타 필드 정의가 필요합니다.

이 블록에는 사용자 지정 가능한 설정이 없습니다.

보완 제품 블록

보완 제품 블록에는 Shopify Search & Discovery 앱으로 설정한 보완 제품이 표시됩니다.

제품 정보 섹션의 보완 제품 블록 설정
설정	설명
제목	블록의 제목입니다.
축소 가능한 행으로 표시	이 옵션을 선택하면 한 행으로 콘텐츠가 축소되어 표시됩니다. 고객이 제목을 클릭하면 행이 확장되어 콘텐츠가 추가로 표시됩니다.
아이콘	보완 제품이 축소 가능한 행으로 표시되었을 때 제목에 연결할 아이콘을 선택합니다.
표시할 제품의 최대 수	표시할 보완 제품의 최대수를 선택합니다. 1~10 사이의 숫자를 선택합니다.
페이지당 제품 수	슬라이더 페이지당 표시할 보완 제품의 수를 선택합니다. 0에서 4 사이의 숫자를 선택합니다.
페이지 매김 스타일	제품 아래에 표시하는 슬라이더 탐색 스타일을 설정합니다. 점, 카운터 또는 숫자 중에서 선택합니다.
이미지 비율	제품 카드 이미지의 가로 세로 비율을 설정합니다. 세로 또는 정사각형 중에서 선택합니다.
빠른 추가 버튼 활성화	빠른 추가 버튼을 활성화하면 고객은 다음 옵션 중 하나를 사용하여 제품 카드에서 카트로 품목을 추가할 수 있습니다. 카트에 추가 - 단일 이형 제품의 경우. 고객이 버튼을 클릭하면 해당 제품이 자동으로 카트에 추가됩니다. 옵션 선택 - 이형 상품이 있는 제품의 경우. 고객이 버튼을 클릭하면 이형 상품을 선택하고 구매를 진행할 수 있는 팝업 대화 상자가 표시됩니다.

텍스트 포함 아이콘 블록

텍스트 포함 아이콘 블록은 최대 3개의 아이콘과 함께 텍스트를 표시합니다. 사전 설치한 아이콘 목록에서 선택하거나 업로드한 이미지를 사용할 수 있습니다.

제품 정보 섹션의 텍스트 포함 아이콘 블록 설정
설정	설명
레이아웃	블록의 가로 레이아웃 또는 세로 레이아웃 중에서 선택합니다.
첫 번째 아이콘	블록에 표시할 아이콘을 선택하거나 제목만 표시하려면 없음을 선택합니다.
첫 번째 이미지	아이콘 대신 사용할 이미지를 선택합니다.
첫 번째 제목	첫 번째 아이콘 또는 이미지의 제목을 추가합니다.
두 번째 아이콘	블록에 표시할 아이콘을 선택하거나 제목만 표시하려면 없음을 선택합니다.
두 번째 이미지	아이콘 대신 사용할 이미지를 선택합니다.
두 번째 제목	두 번째 아이콘 또는 이미지의 제목을 추가합니다.
세 번째 아이콘	블록에 표시할 아이콘을 선택하거나 제목만 표시하려면 없음을 선택합니다.
세 번째 이미지	아이콘 대신 사용할 이미지를 선택합니다.
세 번째 제목	세 번째 아이콘이나 이미지의 제목을 추가합니다.

설정	설명
제목	섹션 제목입니다.
제목 사이즈	제목 텍스트의 사이즈입니다. 작게, 보통, 크게, 매우 크게, 매우 매우 크게 중에서 선택할 수 있습니다.
표시할 제품의 최대 수	표시할 관련 제품의 최대 수를 설정합니다. 2에서 10 사이의 숫자를 선택합니다.
데스크톱의 열 수	데스크톱 컴퓨터에서 제품이 표시되는 열 수를 설정합니다. 1에서 6 사이의 숫자를 선택하십시오.
색상 배합	이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
이미지 비율	표시되는 관련 제품 추천 이미지의 이미지 비율을 설정합니다. 다음 옵션 중에서 선택합니다. 이미지에 맞춤 - 이미지의 가로 세로 비율을 사용합니다. 이렇게 하면 이미지가 잘리는 것을 방지합니다. 세로형 - 2:3 비율을 사용하도록 이미지를 자릅니다. 정사각형 - 1:1 비율을 사용하도록 이미지를 자릅니다.
이미지 모양	관련 제품 이미지 모양을 다음 중에서 선택합니다. 기본 - 제품 이미지를 직사각형 모양으로 변경합니다. 아치 - 제품 이미지 위쪽을 곡선으로 만듭니다. 블롭 - 제품 이미지를 마우스를 올릴 때 고유한 애니메이션이 있는 6개의 무작위 블롭 모양 중 하나로 둥글게 만듭니다. 왼쪽 방향 표시 - 제품 이미지를 왼쪽으로 급격하게 휘어진 갈매기 모양으로 변경합니다. 오른쪽 방향 표시 - 제품 이미지를 오른쪽으로 급격하게 휘어진 갈매기 모양으로 변경합니다. 다이아몬드 - 제품 이미지를 4면 다이아몬드 모양으로 변경합니다. 평행사변형 - 제품 이미지를 두 쌍의 평행선이 있는 모양으로 변경합니다. 원형 - 제품 이미지를 마우스를 올릴 때 고유한 애니메이션이 있는 원이나 타원 모양으로 둥글게 만듭니다.
마우스를 올리면 보조 배경 표시	고객이 데스크톱 컴퓨터에서 제품 이미지 위에 커서를 올리면 두 번째 제품 이미지가 표시됩니다(이미지가 2개인 경우).
공급업체 표시	각 제품의 공급업체를 표시합니다.
제품 평점 표시	제품 평점을 별점으로 표시하고 괄호 안에 리뷰 수(예: ★★★★★(8))를 표시합니다. 제품 리뷰 앱과 `reviews.rating_count`의 메타 필드 정의가 필요하고 `reviews.rating`에 대한 정의도 있어야 합니다.
모바일의 열 수	모바일 장치에서 제품이 표시되는 열 수를 설정합니다. 열을 1개 또는 2개 선택합니다.
상단 패딩	섹션 상단의 공간 크기를 설정합니다.
하단 패딩	섹션 하단의 공간 크기를 설정합니다.