TOGE 설정하기

TOGE는 소규모 메이커 브랜드를 위한 테마입니다. 상품마다 하나의 스토리, 원단 이야기, 필드 사진, 그리고 드롭을 담습니다. 테마가 가져갈 수 있는 것은 레이아웃과 샘플 문구뿐입니다. 상품, 사진, 메뉴, 메타필드는 스토어에 들어 있으므로, 갓 설치한 테마는 비어 보입니다. 이 가이드는 무엇을 채워야 하는지를 효과가 큰 순서로 안내합니다.

아래 작업은 모두 Shopify 관리자에서 합니다. 코드는 필요 없습니다. 일반적인 Shopify 작업인 단계는 여기서 반복하지 않고 Shopify 도움말 센터로 연결합니다.

1. 이 가이드에서 쓰는 용어

용어	뜻
테마 편집기	테마의 설정과 콘텐츠를 바꾸는 화면입니다: 온라인 스토어 → 테마 → 사용자 정의.
섹션	테마 편집기에서 보이는 페이지의 한 띠입니다 (히어로, 신상품, 푸터…). 섹션마다 설정이 있습니다.
템플릿	페이지가 사용하는 레이아웃입니다. TOGE에는 소개, 지원, 문의, 정책 페이지용 템플릿이 들어 있습니다. 페이지의 템플릿은 페이지 편집기의 "테마 템플릿"에서 고릅니다.
핸들	페이지나 컬렉션 URL의 마지막 부분입니다 (예: `about-us`). Shopify가 제목으로 정하며, 페이지 편집기의 "검색 엔진 목록" 상자에서 바꿀 수 있습니다. 테마는 일부 페이지를 핸들로 찾습니다.
메타필드	설정 → 사용자 지정 데이터에서 상품, 컬렉션, 블로그 게시물에 추가하는 별도 필드입니다. 테마는 그중 일부를 읽습니다.
메타오브젝트	직접 정의하는 레코드로, 자체 필드를 가지며 상품에서 참조할 수 있습니다. TOGE는 원단 정보에 사용합니다.
드롭	정해진 날짜에 상품을 출시하는 것입니다. 출시 전에는 상품 페이지에 장바구니 버튼 대신 날짜가 표시됩니다.

2. 처음 10분

테마 업로드: 온라인 스토어 → 테마 → 테마 추가 → zip 파일 업로드. 홈페이지가 마음에 들 때까지는 게시하지 마세요. "사용자 정의"로 게시하지 않은 테마도 미리 볼 수 있습니다.
로고: 테마 편집기 → 헤더. 로고 이미지를 업로드하거나, 비워 두면 스토어 이름이 텍스트로 표시됩니다. (홈페이지의 산 모양 마크는 TOGE 자체 로고입니다. 바꾸려면 snippets/logo.liquid를 편집하거나, 히어로 섹션의 "이미지 위에 로고"를 끄세요.)
메인 메뉴: 콘텐츠 → 메뉴 → 메인 메뉴. 헤더에는 헤더 섹션에서 고른 메뉴가 표시됩니다 (기본값: main-menu). 중첩된 메뉴는 3단계까지 드롭다운으로 열립니다.
홈페이지 히어로: 테마 편집기 → 히어로. 가로로 넓은 사진을 추가합니다 (2:1, 가로 2400px이면 충분합니다). 잘리는 부분이 어색하면 휴대폰용 4:5 사진을 따로 추가하세요. 사진이 밝으면 "사진 위 텍스트 색상"을 잉크로 설정하세요.

여기까지만 해도 완성된 느낌의 스토어가 됩니다.

3. 테마 설정

테마 편집기 → 테마 설정. 스토어 전체에 적용됩니다.

설정	하는 일
색상	색상 구성은 두 가지입니다. 구성 1은 밝은 색, 구성 2는 어두운 색입니다. 뉴스레터 띠 같은 섹션은 둘 중 하나를 고릅니다. 구성마다 배경, 텍스트, 테두리, 표면, 강조색, 링크, 버튼 색상이 있습니다.
타이포그래피	본문 글꼴과 제목 글꼴입니다. 각각 보통, 중간, 굵게 세 가지 굵기를 불러옵니다. Shopify 글꼴이면 무엇이든 쓸 수 있습니다.
레이아웃	페이지의 최대 너비와 양옆 여백입니다.
입력란 모서리 반경	입력란과 버튼 모서리의 둥글기입니다.
파비콘	브라우저 탭에 표시되는 작은 아이콘입니다. 정사각형, 32px 이상.

4. 테마가 찾아보는 메뉴와 페이지

푸터와 지원 페이지는 핸들을 기준으로 항목을 가져옵니다. 아래 핸들로 만들면 자동으로 표시됩니다. 만들지 않으면 해당 부분이 표시되지 않을 뿐입니다.

항목	위치	핸들
푸터 메뉴 열	콘텐츠 → 메뉴	아무 메뉴나 가능. 푸터 → 블록에서 선택
Journal	블로그 게시물	블로그 `news`
소개 페이지	페이지, 템플릿 `page.about`	`about-us`
지원 페이지	페이지, 템플릿 `page.support`	`support`
문의 페이지	페이지, 템플릿 `page.contact`	`contact`
푸터에 표시되는 법적 고지 페이지	설정 → 정책	개인정보 처리방침, 서비스 약관, 환불, 배송
추가 법적 고지 페이지 (일본)	페이지, 템플릿 `page.policy`	`tokushoho`, `cancellation`

페이지를 만들려면 온라인 스토어 → 페이지 → 페이지 추가로 갑니다. 제목을 입력하고, 오른쪽의 "테마 템플릿"에서 템플릿을 고른 뒤, "검색 엔진 목록"에서 핸들을 확인합니다.

법적 고지 페이지는 설정 → 정책에서 가져옵니다. 푸터에는 내용을 작성한 정책만 링크됩니다.

tokushoho와 cancellation은 일본 법률이 온라인 쇼핑몰에 요구하는 페이지입니다. 일본에서 판매하지 않는다면 건너뛰어도 됩니다. page.policy 템플릿은 어떤 페이지든 정책과 같은 스타일로 표시합니다.

소개, 지원, 문의 페이지는 섹션으로 구성되어 있으므로, 텍스트와 사진은 페이지 자체가 아니라 테마 편집기에서 편집합니다. 문의 양식은 스토어의 발신자 이메일 주소로 전송됩니다. 뉴스레터 띠에서 구독한 사람은 newsletter 태그가 붙은 채로 고객에 추가됩니다.

5. 홈페이지

섹션	필요한 것
히어로	사진 (위 참조). 제목, 리드 문구, 링크는 섹션 설정입니다.
컬렉션 피처 (피처 밴드)	메타필드 홈 피처에 표시가 켜진 컬렉션 (§8 참조). 컬렉션이 하나면 고정 밴드, 두 개에서 다섯 개면 캐러셀이 됩니다. 하나도 없으면 섹션 자체의 텍스트와 사진 설정을 사용합니다.
신상품	섹션에서 컬렉션을 고릅니다. 데스크톱에서 3개, 휴대폰에서 4개가 표시됩니다.
스토리	사진 한 장, 또는 짧은 반복 동영상 (콘텐츠 → 파일에 업로드한 mp4, 소리 없이 재생됩니다). 텍스트는 그림 위에 올라갑니다. 아래에 두려면 "이미지 위에 텍스트"를 끄세요.
Journal	블로그를 고릅니다. 최신 글 3개가 표시됩니다.
최근 본 상품	방문자의 브라우저에서 자동으로 채워집니다. 설정할 것이 없습니다.

"섹션 추가"로 홈페이지에 다른 섹션을 더 넣을 수 있습니다: 추천 상품 (사진, 옵션, 장바구니 버튼을 갖춘 상품 하나), FAQ, 지원 가이드, 문의 양식, 그리고 또 하나의 스토리, 컬렉션 피처, 신상품, Journal. 뉴스레터 띠는 푸터에 들어 있으므로 모든 페이지에 표시됩니다.

6. 상품

상품 페이지는 제목, 가격, 사진, 옵션만 있는 평범한 상품으로도 동작합니다. 아래 항목은 각각 페이지의 한 부분을 더해 줍니다. 모두 선택 사항이며, 비어 있는 부분은 페이지에서 숨겨집니다.

페이지 구성

위에서부터: 메인 사진과 캐치프레이즈 → 상품명, 옵션, 가격, 장바구니와 상세 정보 아코디언 → 함께 어울리는 상품 → 상품 사진 → 스토리 → 원단 챕터 → 안내문 → 필드 사진 → 관련 상품 → 최근 본 상품. "함께 어울리는 상품"부터 아래는 각각 테마 편집기의 독립된 섹션이므로 순서를 바꾸거나 뺄 수 있습니다.

상품 페이지 섹션의 설정이 윗부분을 제어합니다.

색상과 사이즈 블록: 어느 옵션이 색상이고 어느 옵션이 사이즈인지 (아래 참조), "재고 부족" 기준 수량, 사이즈 레이블, 사이즈 가이드 페이지.
수량 블록: 주문당 최대 수량 (0이면 제한 없음)과 입력란 아래의 안내.
장바구니 블록: 다이내믹 결제 버튼 (Shop Pay 등)과 기프트 카드 받는 사람 양식.
아코디언 블록: 각각이 상세 정보의 한 줄입니다. 한 줄에 스토어 정책, 상품 설명, 관리 안내, 사이즈 표, 또는 소재와 원산지를 표시할 수 있습니다.

옵션과 사진

색상과 사이즈는 이름이 아니라 *위치*로 찾으므로, 옵션 이름은 Color, Colour, 컬러 어느 것이어도 됩니다. 1과 2가 아니라면 상품 페이지 섹션에서 "색상 옵션 위치"와 "사이즈 옵션 위치"(1~3)를 설정하세요.
세 번째 옵션 (기장, 핏 등)도 버튼으로 표시됩니다. 설정할 것이 없습니다.
색상 타일은 각 색상의 첫 번째 변형 사진을 사용합니다 (세로 4:5, 1080 × 1350이 적당합니다). 같은 색상의 모든 변형에 같은 사진을 지정하세요.
메인 사진: 맨 위의 큰 이미지는 메타필드 custom.hero_image이고, 없으면 상품의 첫 번째 사진입니다. 상품 컷이 아니라 "세계관"을 보여주는 사진을 위한 자리입니다.
갤러리: 색상 타일로 쓰이지 않은 상품 사진은 스토리 아래에 배치됩니다. 상품에 추가한 동영상, YouTube와 Vimeo 링크, 3D 모델도 여기에 표시됩니다.

상품 페이지가 읽는 메타필드

설정 → 사용자 지정 데이터 → 상품 → 정의 추가에서 만듭니다. 정의 이름은 자유롭게 정해도 되지만, 네임스페이스와 키 (정의 양식에 네임스페이스.키 형태로 입력)와 유형은 일치해야 합니다. 정의를 만들면 모든 상품의 편집 페이지 맨 아래에 해당 필드가 생깁니다.

네임스페이스.키	유형	표시되는 곳
`descriptors.subtitle`	한 줄 텍스트 (표준)	메인 사진 아래의 한 줄 캐치 문구
`descriptors.care_guide`	여러 줄 텍스트 (표준)	상세 정보 아코디언의 "관리 안내"
`custom.hero_image`	파일 (이미지)	맨 위의 메인 사진. 상품 카드의 호버 사진으로도 사용
`custom.hero_video`	파일 (동영상)	메인 사진 대신 무음으로 반복 재생
`custom.gender`	한 줄 텍스트	상품명 옆의 작은 레이블. 같은 핸들의 컬렉션에 상품이 있으면 그 컬렉션으로 연결
`custom.gender_collection`	컬렉션 참조	핸들이 다를 때 레이블이 대신 연결되는 곳
`spec.material`	한 줄 텍스트	상세 정보의 "소재"
`spec.origin`	한 줄 텍스트	상세 정보의 "원산지"
`spec.size_table`	여러 줄 텍스트	사이즈 표. 한 줄에 한 행, 셀은 `\|`로 구분합니다. 첫 줄이 머리글입니다: `사이즈 \| 총장 \| 가슴 \| 소매`, 그다음 `S \| 66 \| 50 \| 20`. 입력한 그대로 출력되며 행과 열이 바뀌지 않습니다
`color.names`	한 줄 텍스트	색상의 표시 이름. `코드:이름` 쌍을 `\|`로 구분합니다: `SUMI:먹색\|SAND:모래색`. 코드는 옵션 값입니다
`drop.mode`	한 줄 텍스트	아직 열리지 않은 드롭이면 `pre`. 장바구니가 숨겨지고 대신 "알림 받기" 패널이 표시됩니다
`drop.next_at`	날짜	다음 드롭 날짜. "알림 받기" 패널에 표시
`drop.label`, `drop.qty`, `drop.note`	한 줄 텍스트	드롭 전 버튼 레이블과 그 아래의 짧은 한 줄
`drop.end_variants`	한 줄 텍스트	생산이 종료된 조합. `색상 / 사이즈` 형태로 `\|`로 구분: `SAND / XS\|SAND / XL`
`nav.parent`	한 줄 텍스트	탐색 경로에 표시할 컬렉션의 핸들 (아래 참조)
`story.gallery`	파일 목록 (이미지)	"필드" 사진: 라이프스타일 컷의 가로 스트립
`story.fabric`	메타오브젝트 참조 → Fabric	원단 챕터 (§7 참조)

이 중 대부분은 상품 페이지 섹션의 설정으로도 있습니다 (메인 이미지, 캐치프레이즈, 제목 오른쪽 (성별), 소재, 원산지, 색상 이름, 생산 종료 조합, 판매 상태). 섹션 설정은 모든 상품에 적용되고 메타필드가 있으면 그것이 우선하므로, 상품이 한두 개인 스토어는 메타필드를 전혀 만들지 않아도 됩니다.

상품명 위의 탐색 경로는 다음 순서로 정해집니다: 태그 bread1-apparel, bread2-tops (테마는 핸들이 apparel과 tops인 컬렉션을 찾습니다. 없으면 링크 없이 단어만 표시됩니다) → 메타필드 nav.parent → 상품이 속한 첫 번째 컬렉션. bread1- 태그는 "관련 상품"에 표시할 상품을 고르는 데도 사용됩니다.

스토리 자체는 상품 설명입니다. 제목(h3), 문단, 이미지만 있으면 되고, 테마가 제목을 모아 오른쪽에 목차를 만들어 줍니다.

7. 원단 챕터 (메타오브젝트)

원단 챕터는 상품 페이지에서 한 원단의 이야기를 들려주는 부분입니다: 이름과 리드 문구, 큰 숫자가 나열된 행 (무게, 두께 등), 겉면과 안쪽 사진, "작동 원리" 세 단계, 비교 차트. 원단마다 하나의 메타오브젝트이며, 여러 상품이 함께 사용합니다. 필수는 이름뿐이고, 나머지 부분은 해당 필드를 채우면 나타납니다.

설정 → 사용자 지정 데이터 → 메타오브젝트에서 아래 필드 키로 정의를 만드세요. 필드 이름과 정의 이름은 자유롭게 정해도 됩니다. 테마는 상품의 story.fabric 참조를 따라가서 키로 필드를 읽습니다. 큰 정의가 작은 정의를 참조하므로 작은 것부터 만드세요: Fabric row → Fabric chart, Fabric step, Fabric stat → Fabric.

Fabric (상품에 연결하는 것)

키	유형
`name`, `eyebrow`, `headline`	한 줄 텍스트
`lead`	서식 있는 텍스트
`stats`	Fabric stat 목록
`views_heading`, `views_note`, `face_title`, `face_tag`, `back_title`, `back_tag`	한 줄 텍스트
`views_body`, `face_body`, `back_body`	서식 있는 텍스트
`face_image`, `back_image`	파일 (이미지)
`how_heading`	한 줄 텍스트
`how_body`	서식 있는 텍스트
`steps`	Fabric step 목록
`charts`	Fabric chart 목록
`note`	여러 줄 텍스트

Fabric stat: value, unit, label, prefix (모두 한 줄 텍스트). 큰 숫자가 나열된 행으로 표시됩니다. 예: value 90, unit g/㎡, label 무게.

Fabric step: image (파일), title (한 줄), body (서식 있는 텍스트). 세 단계가 "작동 원리" 스트립이 됩니다.

Fabric chart: title (한 줄), body (서식 있는 텍스트), axes (한 줄 텍스트 목록), rows (Fabric row 목록), note (한 줄). axes를 채우면 다섯 개 점으로 된 평가 표가 되고, 비우면 가로 막대가 됩니다.

Fabric row: label (한 줄), value (소수), display (한 줄. 원래 값 대신 출력할 문구, 예: 약 30분), scores (정수 목록. 축마다 하나, 1~5), highlight (참/거짓. 자사 원단 표시).

차트는 화면에 들어올 때 애니메이션으로 나타납니다. 숫자는 0부터 올라갑니다.

8. 컬렉션

설정 → 사용자 지정 데이터 → 컬렉션에서:

네임스페이스.키	유형	표시되는 곳
`toge.home_feature`	참/거짓	이 컬렉션을 홈 피처 밴드에 올립니다
`toge.feature_heading`	한 줄 텍스트	밴드와 컬렉션 페이지 상단의 큰 문구
`toge.feature_image`	파일 (이미지)	컬렉션 이미지와 다른 사진을 쓸 때의 밴드 사진
`toge.feature_video`	파일 (동영상)	사진 대신 밴드에서 재생
`nav.parent`	한 줄 텍스트	탐색 경로에 쓰는 상위 컬렉션의 핸들 ("모든 상품"은 `all`)

컬렉션 설명이 제목 아래의 짧은 텍스트가 됩니다. 필터, 정렬, 페이지당 상품 수는 컬렉션 섹션의 설정입니다.

9. 공지 바

맨 위의 바는 블로그 게시글로 운영되므로, 공지를 여느 게시글처럼 쓰고, 예약하고, 내릴 수 있습니다.

설정 → 사용자 지정 데이터 → 블로그 게시물에서 toge.announce (참/거짓)와 toge.announce_text (한 줄 텍스트)를 만듭니다.
게시글에서 announce를 켭니다. 바에는 announce_text 또는 게시글 제목이 표시되고, 게시글로 연결됩니다.
플래그가 켜진 가장 최신 게시글이 표시됩니다. 하나도 없으면 바가 없습니다.

방문자는 바를 닫을 수 있습니다. 닫힌 상태는 7일간, 또는 문구가 바뀔 때까지 유지됩니다.

10. 저절로 나타나는 것

테마의 이 부분들은 스토어 설정을 따릅니다. 테마에서 설정할 것은 없습니다.

부분	나타나는 조건
국가 및 언어 선택기 (푸터)	스토어에 마켓이나 언어가 두 개 이상 있을 때
가격 옆의 "세금 포함"	가격에 세금이 포함될 때 (설정 → 세금 및 관세).
가격 아래의 배송 안내	마켓에 메타필드 `custom.shipping_note` (텍스트 또는 금액)가 있을 때
상품 페이지의 픽업 가능 여부	로컬 픽업을 제공하는 위치가 있고 그곳에 상품 재고가 있을 때.
Shop Pay 할부	스토어가 Shop Pay Installments 이용 대상일 때
기프트 카드 받는 사람 양식	상품이 기프트 카드일 때.
Follow on Shop (푸터)	Shop Pay가 활성화되어 있고 푸터 섹션의 "Follow on Shop 표시"가 켜져 있을 때
헤더의 계정 아이콘	고객 계정이 켜져 있을 때 (설정 → 고객 계정)
입력하는 동안의 검색 추천	스토어 언어가 Shopify 예측 검색이 지원하는 언어일 때 (일본어는 아직 미지원)

11. 이미지 크기

위치	크기
홈 히어로	2:1, 가로 2400px. 휴대폰에서는 4:5로 잘리거나, 별도의 모바일 이미지를 사용
홈 스토리	2:1, 가로 2400px. 휴대폰에서는 4:5로 잘림
컬렉션 피처 밴드	16:9, 가로 1600px 이상. 휴대폰에서는 4:3으로 잘림
상품 메인 사진 (`custom.hero_image`)	3:2, 가로 2000px. 휴대폰에서는 4:5로 잘림
변형 사진 (색상 타일)	4:5, 1080 × 1350. 상품 카드와 갤러리는 4:5로 표시하고, 색상 타일은 가운데를 정사각형으로 자름
상품 사진 (갤러리)	4:5
필드 사진 (`story.gallery`)	2:3, 세로
원단 겉면과 안쪽	비율은 자유지만 두 장을 같은 모양으로. 가로 1200px
원단 단계	흰 배경의 그림. 흰색이 페이지에 자연스럽게 섞임
블로그 게시물 이미지	Journal 목록에서 4:3, 가로 1600px 이상
파비콘	정사각형, 32px 이상

Shopify가 화면마다 크기를 조정하므로 더 커도 괜찮습니다.

12. 언어

테마의 샘플 문구는 모두 영어입니다. 테마 자체의 레이블(버튼, 장바구니, 검색)과 테마 편집기는 영어, 일본어, 독일어, 프랑스어, 스페인어, 포르투갈어(브라질), 이탈리아어, 중국어(번체), 중국어(간체), 한국어로 제공되며, 스토어프런트는 스토어의 언어를 따릅니다.

섹션 텍스트, 상품, 페이지 같은 직접 작성한 콘텐츠는 Shopify의 무료 앱 Translate & Adapt로 번역합니다. 앱

13. 테마 업데이트

새 버전이 나오면 온라인 스토어 → 테마에서 해당 테마에 업데이트 알림이 표시됩니다. 업데이트해도 테마 편집기 설정과 콘텐츠는 유지됩니다. 테마 코드 수정 내용은 이어지지 않으므로, 업데이트하기 전에 직접 바꾼 부분을 메모해 두세요.

14. 테마에 들어 있지 않은 것

사진과 동영상. Shopify 테마는 미디어를 포함할 수 없으며, 데모 사진은 데모에만 사용이 허가되어 있습니다. 사진이 없는 자리에는 회색 자리 표시 그림이 보입니다.
상품, 게시글, 페이지, 메타필드 정의. 이것들은 스토어 데이터입니다. 테마가 사용할 수 있는 항목은 이 가이드에 모두 적혀 있습니다.
앱. 필요 없습니다. Translate & Adapt는 언어를 늘릴 때만, 구독 앱은 구독 상품을 판매할 때만 필요합니다.