Shopify 리서치 허브 · 문서/위키형 둘러보기 분류 관리 자동 조사
스토어 세팅 /내비게이션·컬렉션 구조

내비게이션·컬렉션 구조

근거 3건 · v3 · 2026-08-14 · claude-opus-4-8

내비게이션·컬렉션 구조 — 전체 개요

대상 분류: 내비게이션·컬렉션 구조 (navigation-collections) 이 문서는 아래 3개 로우데이터([S1]~[S3])에서 실제로 확인된 내용만 취합했습니다. 정보 시점(게시일 기준): S1 = 2025-05, S2·S3 = 2023.

1. Shopify 관리자에서의 메뉴 구조 (Admin 기준, 2025년 정보)

가장 상세하고 최신인 소스는 S1이며, Shopify 관리자(Content 메뉴)에서의 메뉴 관리 방식을 다룹니다.

메뉴는 "고정"이 아니라 "선택" 방식

  • 헤더 메뉴와 푸터 메뉴는 고정되어 있지 않다. 메뉴 관리에서 여러 메뉴를 만들어 두고, 그중 하나를 골라 헤더/푸터로 지정하는 구조다 [S1].
  • 기본으로 3개의 메뉴가 생성되어 있다: 메인 메뉴(main menu), 푸터 메뉴(footer menu), 커스텀 계정 메인 메뉴(custom account main menu). 각 메뉴의 이름과 핸들(handle)은 변경 가능하다 [S1].

메뉴 생성 방법

  • 메뉴 생성 시 이름을 기반으로 핸들 값이 자동 입력된다 [S1].
  • "메뉴 항목 추가" 후 링크 입력란을 클릭하면 선택 가능한 링크 목록(컬렉션 등)이 뜬다 [S1].
  • 예: 컬렉션에서 "Best Sellers"를 고르면 컬렉션 이름이 라벨에 자동 입력되며, 라벨은 자유롭게 수정 가능하다 [S1].
  • 드래그 앤 드롭으로 메뉴 순서·계층을 구성할 수 있고, 하위 메뉴는 최대 3단계까지 설정 가능하다 [S1].
  • 메뉴 항목의 링크로 특정 컬렉션(예: 셔츠 컬렉션)뿐 아니라 개별 상품도 지정할 수 있다 [S1].

헤더/푸터 지정

  • 만든 메뉴는 테마(온라인 스토어 → 커스터마이즈) 에서 헤더(메인)와 푸터 위치에 배치한다. 기존 메인 메뉴를 "Replace"로 새 메뉴로 교체 후 저장한다 [S1].
  • 푸터에는 블록으로 메뉴를 추가하며, 특정 메뉴를 푸터 위치가 아닌 다른 위치에도 배치할 수 있다 [S1].

푸터 메뉴 = 정책(Policy) 메뉴 (SEO 노하우, 2025년 관점)

  • 푸터 메뉴는 일반적으로 정책(policy) 메뉴로 구성하며, 핸들은 변경하지 않고 footer로 유지하는 것을 권장한다 [S1].
  • 이유: Google과 Meta가 푸터 메뉴의 정책 페이지 링크가 제대로 연결되어 있는지 자동으로 크롤링·검증하기 때문이라는 SEO 관점의 권장사항이다 [S1].
  • 관리자 정책 설정에서 정책 페이지를 만들면, 메뉴 링크 목록에서 해당 정책 페이지를 연결할 수 있다 (이 방식으로 만든 정책 페이지만 링크 목록에 노출된다) [S1].

2. 테마 스키마(schema) 상의 내비게이션·로고 설정 (2023년 정보)

[S2](Code Pirates Academy, 2023-07-08)는 테마 개발 관점에서 JSON 스키마·설정을 다룹니다. 단, 원본 자막이 기계 번역·잡음으로 크게 훼손되어 있어 신뢰 가능한 범위에서만 발췌합니다.

  • 테마 스키마는 JSON 오브젝트/설정(settings)으로 구성되며, 통화(currency) 등 기본 설정 항목이 있다 [S2].
  • 로고 이미지 설정이 있으며, 권장 크기는 대략 200 x 200 정도로 언급된다 [S2].
  • 로고는 섹션 설정으로 참조된다: section.settings.logo [S2].
  • 내비게이션(navigation)은 메인 메뉴 데이터로 다뤄지며, 섹션 설정을 통해 메뉴를 연결한다 [S2].
  • 검색 박스(search box)를 활성화(enable)하는 설정, 에디터 관련 설정(section.settings.editor id 형태) 등이 언급된다 [S2].

⚠️ 신뢰도 주의: [S2]는 자막 품질이 낮아 세부 값(정확한 픽셀 크기, 정확한 설정 키 이름)은 원본 영상 재확인이 필요합니다.

3. 헤드리스(Hydrogen)에서의 컬렉션·검색 구조 (2023년 정보)

[S3](LiftedCommerce, 2023-10-02)는 Shopify Hydrogen(헤드리스, Remix 기반) 데모 스토어의 프론트 구조를 다룹니다. 위 1·2번(기본 온라인 스토어/테마)과는 다른 트랙(headless)입니다.

컬렉션 구조

  • Shopify CLI가 스캐폴딩한 Hydrogen 데모 스토어는 라우트·API 요청을 자동 생성해 준다 [S3].
  • 컬렉션 예: 남성(men) 컬렉션, 여성(women) 컬렉션. 전체 컬렉션 목록을 보여주고, 특정 컬렉션 → 특정 상품으로 드릴다운할 수 있다 [S3].
  • 상품 링크 클릭 시 Shopify가 URL에 기본 변형(default variant) 을 자동으로 채운다. URL에서 이를 제거하면 Shopify가 다시 되돌린다(리다이렉트) [S3].
  • 변형(variant)을 바꾸면 URL이 동적으로 변경되는데, Google 관점에서는 파라미터가 바뀌면 별개의 페이지로 인식되어 SEO에 유리하다 [S3].

검색 구조 — Predictive Search

  • 검색 기능은 Shopify가 predictive search라 부르는 방식으로, 여러 데이터 타입을 동시에 검색한다: 상품 + 컬렉션 + 아티클(블로그 포스트) [S3].
  • 예: "men" 검색 시 해당 단어가 포함된 상품과 컬렉션을 반환하며, 아티클(블로그 글)이 있으면 함께 노출된다 [S3].

체크아웃 경계

  • Hydrogen은 스토어의 거의 모든 부분을 커스터마이즈할 수 있으나 체크아웃은 예외로, 체크아웃은 여전히 Shopify가 처리한다 [S3].
  • (영상 녹화 시점 기준) 스토어프론트에 커스텀 체크아웃 페이지를 만들 수 없으며, Shopify Plus 계정의 checkout extensibility 등으로만 커스터마이즈한다 [S3].

4. 블로그 구조 (콘텐츠 내비게이션 보조, 2025년 정보)

블로그는 내비게이션·컬렉션 구조와 연관된 콘텐츠 계층으로, [S1]에서 다룹니다.

  • 계층 구조: 블로그(blog) > 블로그 포스트(post). 블로그가 상위 개념이고, 개별 글은 블로그 포스트다 [S1].
  • 기본 예시로 News, Events 두 개의 블로그가 존재하며, 블로그 관리 페이지에서 제목·URL 핸들·댓글 상태를 변경할 수 있다 [S1].
  • 댓글 상태: 비활성(Disabled) = 댓글 불가 / 승인 후 노출 = 관리자 게시 후 표시 / 자동 표시 = 검토 없이 자동 노출. 일반적으로 비활성을 많이 쓴다 [S1].
  • 포스트의 소속 블로그는 포스트 편집 화면의 Organization에서 지정한다(News ↔ Events 이동 가능) [S1].
  • 노출 타입을 "표시(Displayed)"로 하면 스토어에 노출, "숨김"이면 미노출. 원하는 날짜에 노출되도록 게시 날짜도 설정 가능하다 [S1].
  • 포스트 관리 페이지는 블로그별로 구분되지 않으므로, 검색·필터로 블로그별 필터 탭(예: Event 탭, News 탭)을 만들어 구분한다 [S1].

5. 파일(File) 관리 — 메뉴/컬렉션에 쓰이는 미디어 (2025년 정보, 사실형)

  • 상품·테마에 등록된 이미지·비디오 등 모든 파일이 Content > Files에서 관리된다 [S1].
  • 파일 업로드는 우측 상단 "File Upload"로 직접 가능. 파일에 마우스를 올려 "Copy Link"로 링크를 복사해 어디든 붙여 사용할 수 있다 [S1].
  • 우측 참조(reference)에서 해당 파일이 어디에 쓰이는지(예: 상품 썸네일) 확인 가능하다 [S1].
  • 파일 개수 제한은 없으나, 개별 파일이 20MB를 초과하면 업로드할 수 없다 [S1].

6. 관점 비교 정리

| 축 | 기본 온라인 스토어 / 테마 | 헤드리스(Hydrogen) | |---|---|---| | 소스 | [S1] 2025, [S2] 2023 | [S3] 2023 | | 메뉴 구성 | 관리자 메뉴 관리에서 생성 후 테마에서 헤더/푸터 지정 [S1] | CLI가 라우트·API 자동 스캐폴딩 [S3] | | 컬렉션 | 메뉴 링크로 컬렉션 지정, 최대 3단계 하위 메뉴 [S1] | 전체 컬렉션 목록 → 컬렉션 → 상품 드릴다운 [S3] | | 검색 | (S1·S2에 상세 없음; S2에 검색박스 활성화 설정 언급 [S2]) | predictive search: 상품+컬렉션+아티클 동시 [S3] | | 체크아웃 | (해당 소스 언급 없음) | Shopify가 처리, 커스텀 불가 [S3] |

시점 참고: 메뉴·블로그·파일 관리 UI 관련 사실은 2025년([S1]) 기준으로 가장 최신입니다. 테마 스키마([S2])와 Hydrogen([S3]) 관련 내용은 2023년 정보이므로, 세부 설정 키·기능은 현재 버전과 다를 수 있어 재확인이 필요합니다.

출처

  • [S1] 300cbt — 파일·메뉴·블로그 관리 (Shopify Plus Partner 강의) — https://youtu.be/QpBHoHeSZ-E — 게시 2025-05-08 / 수집 2026-08-03
  • [S2] Code Pirates Academy — 테마 스키마·로고·내비게이션 설정 (자막 품질 낮음) — https://youtu.be/UnJs27l5Q5Q — 게시 2023-07-08 / 수집 2026-08-13
  • [S3] LiftedCommerce (Remix & Shopify Hydrogen Tutorial) — Hydrogen 데모 스토어 컬렉션·검색·체크아웃 구조 — https://youtu.be/pvlvwi9Mi0c — 게시 2023-10-02 / 수집 2026-08-14