블록 개요
사용 가능한 모든 테마 블록과 사용자 지정 옵션에 대한 완벽한 가이드입니다.
사용 가능한 블록
이 앱은 Shopify 테마용으로 3개의 앱 블록과 1개의 앱 임베드를 제공합니다. 앱 임베드는 한 번만 사용하세요(권장). 그런 다음 블록을 원하는 템플릿에 추가하여 표시하세요.
Breadcrumbs block (앱 블록) — 컬렉션 및 제품 페이지용 브레드크럼 내비게이션
Subcategories block (Text below) (앱 블록) — 이미지 아래에 제목이 있는 하위 컬렉션 그리드/캐러셀
Subcategories block (Text overlay) (앱 블록) — 이미지 위에 오버레이 제목이 있는 하위 컬렉션 그리드/캐러셀
Breadcrumbs & Categories (앱 임베드) — 전역 스타일/스크립트 로드 (권장)
Breadcrumbs block
이 블록을 제품 및/또는 컬렉션 템플릿에 추가하여 클릭 가능한 브레드크럼 경로를 표시하세요. 반응형 표시와 다양한 구분자 스타일을 지원합니다.
레이아웃 및 타이포그래피
블록 최대 너비 (
page_width) — px 단위의 최대 컨테이너 너비글꼴 크기 (
font_size) — 브레드크럼 텍스트 크기구분 아이콘 크기 (
separated_icon_size) — 구분자 아이콘 크기구분자 간격 (
separated_size) — 구분자 주변 간격텍스트 정렬 (
text_align) — 왼쪽/가운데/오른쪽
패딩
상하 (
padding_block) — 수직 패딩좌우 (
padding_inline) — 수평 패딩
표시 옵션
현재 항목 굵게 표시 (
bold_current_item_on_breadcrumb) — 마지막 브레드크럼 항목 강조호버 효과 (
hover_effect) — 없음 / 밑줄 / 확대 / 빛남 / 튕김 / 흔들림모바일에서 가로 스크롤 활성화 (
scroll_on_mobile) — 작은 화면에서 줄 바꿈 대신 스크롤브레드크럼에서 제품명 숨기기 (
hidden_product_name_on_breadcrumb) — 제품 페이지에서 제품 제목 숨김
색상
배경 (
background_color) — 블록 배경색텍스트 (
text_color) — 텍스트 색상
고급 사용자 지정
브레드크럼 구분 기호 (
trail_divider_style) — 구분자 선택: Chevron Right, Double Arrow, Forward Slash, Pipe, Bullet Point, Angle Bracket, Dash
항목 레이블
브레드크럼 경로에 표시되는 레이블을 구성하세요(스토어프런트 언어 사용).
홈 표시 유형 (
home_display_type) — 텍스트 / 홈 아이콘 (클래식) / 홈 아이콘 (윤곽선)홈 페이지 (
label_home) — 홈 항목 레이블컬렉션 목록 페이지 (
label_list_collections) — 컬렉션 목록 페이지 레이블카탈로그 페이지 (
label_catalog) — 카탈로그 항목 레이블 (---사용 시 숨김; 설정 내 주석 참조)사용자 지정 카탈로그 링크 (
custom_catalog_link) — 선택적 사용자 지정 URL (기본값/collections/all)
Subcategories block (Text below)
하위 컬렉션을 그리드 또는 캐러셀로 표시합니다. 이 레이아웃은 이미지 아래에 컬렉션 제목(및 선택적으로 제품 수)을 표시합니다.
일반
블록 최대 너비 (
page_width) — px 단위의 최대 컨테이너 너비데스크톱에서 캐러셀 활성화 (
enable_desktop_slider) — 데스크톱에서 슬라이더 동작 활성화자동 재생 (
autoplay_mode) — 자동 스크롤 / 자동 슬라이드 모드 (아래 참조)내비게이션 활성화 (
slider_enable_navigation) — 내비게이션 화살표/도트 표시수직 간격 (
vertical_spacing) — 제목과 슬라이더/그리드 사이 간격제목 (
title) — 섹션 제목 텍스트이미지 비율 (
image_ratio) — 이미지에 맞춤 / 정사각형 / 세로 / 가로 / 원형이미지 맞춤 유형 (
image_fit_type) — 커버 / 포함이미지 테두리 반경 (
image_border_radius) — 이미지 비율이 원형일 때는 적용 안 됨데스크톱에서 열 수 (
columns_desktop)카드 간격 (
card_spacing_desktop) — 카테고리 카드 간 간격콘텐츠 레이아웃 (
content_layout) — 일반 / 겹침 / 텍스트 아래 / 텍스트 아래 테두리텍스트 정렬 (
text_alignment) — 왼쪽/가운데/오른쪽제품 수 표시 (
show_product_count)대문자 텍스트 활성화 (
enable_uppercase_text)긴 제목 줄임 (
truncate_title) — 제목을 5단어로 제한레이아웃 반전 (텍스트 위, 이미지 아래) (
reverse_image_position)
자동 재생 (자동 스크롤 / 자동 슬라이드)
데스크톱에서 캐러셀 활성화가 켜져 있을 때만 적용됩니다.
끔 (
none)느림 – 50px/s (
slow_scroll_50) — 연속 자동 스크롤빠름 – 100px/s (
slow_scroll_100) — 연속 자동 스크롤3초마다 (1개 항목) (
slide_3s) — 한 항목씩 슬라이드3초마다 (모든 표시 항목) (
slide_3s_page) — 한 페이지씩 슬라이드
색상
텍스트 (
colors_text)배경 (
colors_background) — 콘텐츠 레이아웃이 겹침일 때만 사용
모바일 레이아웃
태블릿에서의 열 수 (
columns_tablet) — 2/3/4모바일에서의 열 수 (
columns_mobile) — 1/2태블릿 및 모바일에서 스와이프 활성화 (
swipe_on_mobile)
컬렉션 제목 글꼴 크기
제품 수 글꼴 크기는 컬렉션 제목 글꼴 크기에 따라 자동으로 조정됩니다.
데스크탑 (
font_size_desktop)태블릿 (
font_size_tablet)모바일 (
font_size_mobile)
하위 카테고리 블록 (텍스트 오버레이)
하위 컬렉션을 그리드 또는 캐러셀로 표시하며, 제목(및 선택적으로 제품 수)을 이미지 위에 표시합니다.
일반
블록 최대 너비 (
page_width) — 최대 컨테이너 너비(px)데스크탑에서 캐러셀 활성화 (
enable_desktop_slider) — 데스크탑에서 슬라이더 동작 활성화자동 재생 (
autoplay_mode) — 자동 스크롤 / 자동 슬라이드 모드 (아래 참조)내비게이션 활성화 (
slider_enable_navigation) — 내비게이션 화살표/도트 표시수직 간격 (
vertical_spacing) — 제목과 슬라이더/그리드 사이 간격제목 (
title) — 섹션 제목 텍스트이미지 비율 (
image_ratio) — 이미지에 맞춤 / 정사각형 / 세로 / 가로 / 원형이미지 맞춤 유형 (
image_fit_type) — 커버 / 포함이미지 테두리 반경 (
image_border_radius) — 이미지 비율이 원형일 때는 적용되지 않음데스크탑에서의 열 수 (
columns_desktop)콘텐츠 위치 (
content_position) — 상단 / 가운데 / 하단텍스트 정렬 (
text_alignment) — 왼쪽 / 가운데 / 오른쪽제품 수 표시 (
show_product_count)대문자 텍스트 활성화 (
enable_uppercase_text)콘텐츠 레이아웃 방향 (
content_layout_direction) — 단일 행 / 쌓기(열)
자동 재생 (자동 스크롤 / 자동 슬라이드)
데스크탑에서 캐러셀 활성화가 활성화된 경우에만 적용됩니다.
끔 (
none)느림 – 50px/s (
slow_scroll_50) — 연속 자동 스크롤빠름 – 100px/s (
slow_scroll_100) — 연속 자동 스크롤3초마다 (1개 항목) (
slide_3s) — 한 항목씩 슬라이드3초마다 (모든 항목) (
slide_3s_page) — 한 페이지씩 슬라이드
모바일 레이아웃
태블릿에서의 열 수 (
columns_tablet) — 2/3/4모바일에서의 열 수 (
columns_mobile) — 1/2태블릿 및 모바일에서 스와이프 활성화 (
swipe_on_mobile)
컬렉션 제목 글꼴 크기
제품 수 글꼴 크기는 컬렉션 제목 글꼴 크기에 따라 자동으로 조정됩니다.
데스크탑 (
font_size_desktop)태블릿 (
font_size_tablet)모바일 (
font_size_mobile)
헤더 텍스트 색상
텍스트 색상 (
colors_text)오버레이 텍스트 색상 (
colors_overlay) — 가독성을 위한 오버레이 색상
앱 임베드
앱 임베드는 블록에서 사용하는 전역 CSS/JS(예: 하위 카테고리 자동 재생 스크립트, 선택적 i18n 도우미, 앱에서 구성된 사용자 지정 CSS)를 로드하므로 권장됩니다.
Theme editor → App embeds에서 활성화하세요
모든 블록이 올바르게 작동하도록 활성 상태를 유지하세요
테마에 블록 추가하기
Shopify 관리자에 접속하세요
온라인 스토어 › 테마로 이동하세요
라이브 테마에서 "Customize"를 클릭하세요
앱 블록을 원하는 위치에 추가하세요
설정을 맞춤화하고 저장하세요
블록 설정
위에 나열된 모든 설정은 블록을 선택할 때 Shopify Theme editor에서 구성됩니다. 대부분의 설정은 반응형(데스크탑/태블릿/모바일)입니다.
모범 사례
제품 및 컬렉션 템플릿에 Breadcrumbs 추가
컬렉션 페이지에서 하위 카테고리 블록 사용
블록 스타일을 테마에 맞게 조정
모바일 기기에서 테스트
게시 전에 미리보기