온라인 스토어 기능

섹션을 사용하여 온라인 스토어의 모든 페이지에 기능을 추가할 수 있습니다. 이미지, 텍스트, 브랜드 색상 등으로 섹션을 선택하고 추가하며 구성할 수 있습니다.

일부 페이지에는 공지 표시줄, 머리글 및 바닥글과 같은 기본 섹션이 있습니다. 이러한 섹션은 모든 페이지에 표시됩니다.

공지 표시줄

공지 표시줄을 사용하면 모든 페이지에서 고객에게 중요한 정보를 전달하고 서로 다른 공지 블록을 최대 12개까지 사용자 지정할 수 있습니다. 언어 선택기, 국가 또는 지역 선택기, 소셜 미디어 아이콘을 공지 표시줄에 추가할 수도 있습니다.

공지가 여러 개인 경우 펼침 버튼을 수동으로 사용하여 공지를 자동으로 회전할지 아니면 고객이 공지를 살펴보도록 할지 선택할 수 있습니다.

섹션 설정

공지 표시줄 섹션 설정
설정 설명
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
구분선 표시 공지 표시줄을 페이지 콘텐츠와 시각적으로 구분하는 선을 표시합니다.
소셜 미디어 아이콘 소셜 미디어 계정에 연결하는 소셜 미디어 아이콘을 표시 합니다.
공지 사항 자동 회전 활성화하면 공지를 자동으로 회전합니다.
슬라이드 변경 간격 공지 회전 빈도를 선택합니다.
국가/지역 선택기 사용 결제 설정에서 활성화한 국가 및 지역을 고객이 선택할 수 있는 선택기를 추가하여, 고객이 자신이 선택한 통화로 제품 가격을 볼 수 있게 해줍니다.
언어 선택기 사용 언어 설정에서 활성화한 국가 및 지역을 고객이 선택할 수 있는 선택기를 추가하여, 고객이 자신이 선택한 언어로 스토어를 볼 수 있게 해줍니다.

공지 블록

공지 블록에 텍스트와 링크를 추가하여 클릭할 수 있고 클릭하면 고객이 특정 페이지로 이동하도록 설정할 수 있습니다.

공지 표시줄 섹션의 공지 블록에 대한 설정
설정 설명
텍스트 고객에게 표시하려는 공지입니다.
링크 고객이 공지 표시줄을 클릭할 때 이동할 수 있게 하려는 링크입니다.

머리글은 온라인 스토어의 모든 페이지에 표시됩니다.

섹션 설정

제목 섹션에 대한 설정
설정 설명
데스크톱 로고 위치

고객이 대형 화면에서 사이트를 볼 때 머리글에 로고가 표시되는 위치입니다. 모바일에서는 로고 위치가 자동으로 최적화됩니다.

  • 왼쪽 중간 - 주 메뉴에 로고 인라인을 표시하고 세로로 가운데 및 왼쪽으로 정렬합니다.
  • 왼쪽 상단 - 주 메뉴 위에 로고를 표시하고 로고 및 메뉴 항목을 왼쪽으로 정렬합니다.
  • 상단 가운데(기본값) - 주 메뉴 위에 로고를 표시하고 로고 및 메뉴 항목을 가운데에 정렬합니다.
메뉴 기본 메뉴로 사용할 메뉴입니다. 변경을 클릭하여 다른 메뉴를 선택할 수 있습니다.
데스크톱 메뉴 유형 드롭다운 메뉴를 사용하여 데스크톱 메뉴 유형을 선택합니다:
  • 드롭다운 - 두 번째 수준 메뉴 콘텐츠를 표시하고, 해당하는 두 번째 수준 항목을 클릭할 때까지 세 번째 수준은 축소되어 있습니다. 메뉴 유형은 자동으로 모바일에 최적화됩니다.
  • 메가 메뉴 - 첫 번째 클릭 시 두 번째 및 세 번째 수준 메뉴 콘텐츠를 모두 표시합니다. 메뉴 유형은 자동으로 모바일에 최적화됩니다.
  • 서랍 - 햄버거 메뉴 아이콘을 통해 서랍 메뉴를 표시합니다. 클릭하면 모든 수준 1 메뉴 항목을 표시하며, 이를 클릭하여 추가 탐색 계층(수준 2 및 수준 3)을 열 수 있습니다.
고정 머리글

고정 머리글 사용 여부 및 표시 방법을 선택합니다.

  • 없음 - 머리글이 고객과 함께 스크롤되지 않습니다.
  • 위로 스크롤 - 고객이 페이지를 위로 스크롤할 때 머리글을 표시합니다.
  • 항상 - 고객이 페이지를 위 또는 아래로 스크롤할 때 항상 머리글을 표시합니다.
  • 항상, 로고 크기 축소 - 고객이 페이지를 위 또는 아래로 스크롤할 때 항상 머리글을 표시합니다. 고객이 페이지를 스크롤하면 로고 크기가 25% 축소됩니다.
구분선 표시 머리글을 페이지 콘텐츠와 시각적으로 구분하는 선을 표시합니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
국가/지역 선택기 사용 결제 설정에서 활성화한 국가 및 지역을 고객이 선택할 수 있는 선택기를 추가하여, 고객이 자신이 선택한 통화로 제품 가격을 볼 수 있게 해줍니다.
언어 선택기 사용 언어 설정에서 활성화한 국가 및 지역을 고객이 선택할 수 있는 선택기를 추가하여, 고객이 자신이 선택한 언어로 스토어를 볼 수 있게 해줍니다.
모바일 로고 위치

모바일에서 로고를 표시할 위치를 선택합니다.

  • 가운데 - 로고가 머리글의 가운데에 표시됩니다.
  • 왼쪽 - 로고가 머리글의 왼쪽에 표시됩니다.
간격 머리글 아래에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 하단 마진에 추가할 수 있습니다.
섹션 패딩 머리글의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 머리글의 상단이나 하단에 추가할 수 있습니다.

머리글 블록

머리글 섹션에 다음 블록을 추가할 수 있습니다.

머리글 섹션의 앱 블록 설정
설정 설명
Online Store 2.0 호환 앱을 추가합니다. 최대 3개의 앱을 추가합니다. 카트 아이콘 왼쪽에 배치되며 44px x 44px 크기로 제한됩니다.

바닥글은 테마의 모든 페이지에 표시됩니다.

섹션 설정

바닥글 섹션에 대한 설정
설정 설명
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
이메일 가입 표시 고객이 뉴스레터 및 마케팅에 가입할 수 있는 이메일 가입 양식이 포함됩니다.
제목 이메일 가입 표시 양식의 제목입니다. 이메일 가입 표시가 활성화되지 않은 경우에는 표시되지 않습니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
Shop에서 팔로우 Shop 앱에서 상점 팔로우 버튼을 표시합니다. Shop에서 팔로우에 대해 자세히 알아보십시오.
소셜 미디어 아이콘 테마 설정에서 프로필 링크를 입력한 소셜 미디어 플랫폼에 대한 아이콘을 표시합니다.
국가/지역 선택기 사용 결제 설정에서 활성화한 국가 및 지역을 고객이 선택할 수 있는 선택기를 추가하여, 고객이 자신이 선택한 통화로 제품 가격을 볼 수 있게 해줍니다.
언어 선택기 사용 언어 설정에서 활성화한 국가 및 지역을 고객이 선택할 수 있는 선택기를 추가하여, 고객이 자신이 선택한 언어로 스토어를 볼 수 있게 해줍니다.
결제 아이콘 표시 스토어에서 활성화된 결제 방법에 대한 아이콘을 표시합니다. 결제 서비스 공급업체에서 아이콘을 등록하지 않은 경우 결제 방법에 아이콘을 사용할 수 없습니다. 고객이 스토어를 방문하면 이 아이콘이 필터링되어 현재 고객의 지역 및 통화에서 지원되는 결제 방법만 표시됩니다.
정책 링크 표시 저작권 정보 옆에 정책 링크 아이콘을 표시합니다. 정책 링크는 Shopify Admin의 설정 > 정책에서 생성됩니다. 스토어 정책 추가에 대해 자세히 알아보십시오.
간격 바닥글 위에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 상단 마진에 추가할 수 있습니다.
섹션 패딩 바닥글의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 바닥글의 상단이나 하단에 추가할 수 있습니다.

메뉴 블록

바닥글 섹션의 메뉴 블록에 대한 설정
설정 설명
제목 블록의 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
메뉴 블록에 표시되는 메뉴입니다. 바닥글에는 최상위 메뉴 항목만 표시되므로 드롭다운 메뉴 유형은 올바르게 표시되지 않습니다.

브랜드 정보 블록

브랜드 정보는 테마 설정에서 관리됩니다. 브랜드 정보에 대해 자세히 알아보십시오.

바닥글 섹션의 브랜드 정보 블록에 대한 설정
설정 설명
소셜 미디어 아이콘 표시 테마 설정에서 프로필 링크를 입력한 소셜 미디어 플랫폼에 대한 아이콘을 표시합니다.

텍스트 블록

텍스트 블록은 스토어 세부 정보, 프로모션 또는 연락처 정보와 같은 중요 정보를 강조 표시하기 위해 사용될 수 있습니다.

바닥글 섹션의 텍스트 블록에 대한 설정
설정 설명
제목 블록의 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
하위 텍스트 블록에 표시할 텍스트입니다.

이미지 블록

바닥글 섹션의 이미지 블록에 대한 설정
설정 설명
이미지 블록에 표시할 이미지입니다.
이미지 폭 이미지의 폭을 설정합니다. 50픽셀에서 200픽셀까지 5의 배수일 수 있습니다. 기본값은 100픽셀입니다.
큰 화면에서 이미지 정렬

블록 내에서 이미지를 정렬합니다.

  • 왼쪽 - 이미지를 블록 왼쪽으로 정렬합니다.
  • 가운데(기본값) - 이미지를 블록 중앙에 정렬합니다.
  • 오른쪽 - 이미지를 블록 오른쪽으로 정렬합니다.

블로그 게시물

Shopify 스토어에 블로그가 있으면 블로그 게시물 섹션을 사용해서 해당 블로그의 게시물을 강조 표시할 수 있습니다. 블로그 게시물 섹션의 각 블로그 게시물에는 해당 게시물의 발췌본 중 처음 55자가 표시됩니다. 블로그 게시물에 발췌본이 없으면 게시물에서 처음 30자 부분이 대신 표시됩니다.

섹션 설정

블로그 게시물 섹션에 대한 설정
설정 설명
제목 섹션 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.
블로그 블로그 게시물을 표시하려는 블로그입니다. 블로그 페이지에서 알파벳순으로 첫 번째 블로그가 기본값으로 설정됩니다.
블로그 게시물 섹션에 표시할 블로그 게시물의 개수입니다. 최대 게시물은 4개입니다.
데스크톱의 열 수 데스크톱 컴퓨터에 표시되는 열의 수입니다. 최소: 1. 최대: 4.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
추천 이미지 표시 블로그 게시물의 추천 이미지를 표시합니다. 권장되는 이미지 가로 세로 비율은 3:2입니다.
날짜 표시 블로그 게시물이 생성된 날짜를 표시합니다.
작성자 표시 블로그 게시물의 작성자를 표시합니다.
블로그에 표시된 것보다 많은 블로그 게시물이 있는 경우 "모두 보기" 버튼 활성화 블로그에 블로그 게시물 필드에 설정된 것보다 많은 블로그 게시물이 있는 경우 고객을 블로그 페이지로 연결하는 "모두 보기" 버튼이 표시됩니다.
섹션 패딩 블로그 게시물 섹션의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 블로그 게시물 섹션의 위 또는 아래에 추가할 수 있습니다.

블로그 선택

  1. 테마 편집기에서 블로그 게시물 섹션의 제목을 클릭합니다.
  2. 블로그 섹션에서 변경을 클릭합니다.
  3. 블로그를 선택합니다.
  4. 선택을 클릭한 다음 저장을 클릭합니다.

콜라주

이미지, 제품, 컬렉션, 동영상의 콜라주를 만들 수 있습니다. 각 콜라주 섹션에는 3개의 블록이 포함되어 있습니다. 기본적으로 섹션에는 이미지, 제품, 컬렉션 블록이 포함되어 있습니다. 블록 중 하나를 제거하면 동영상 블록을 추가할 수 있습니다.

3개를 초과하는 블록을 포함하는 콜라주를 생성하려면 첫 번째 품목 아래에 추가 콜라주 섹션을 추가하고 하단 콜라주 섹션에 제목 값을 포함하지 마십시오. 콜라주 섹션은 단일 섹션으로 함께 처리됩니다.

이 섹션의 모든 이미지에 권장되는 가로 세로 비율은 2:3 또는 1:1입니다.

섹션 설정

콜라주 섹션에 대한 설정
설정 설명
제목 섹션 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.
데스크톱 레이아웃

데스크톱에서 콜라주 미디어를 표시하는 방식입니다.

  • 왼쪽에 큰 블록(기본값) - 섹션의 첫 번째 블록이 왼쪽에 표시되고 다른 블록보다 큽니다.
  • 우측에 큰 블록 - 섹션의 마지막 블록이 우측에 다른 블록보다 크게 표시됩니다.
모바일 레이아웃

모바일에서 블록을 표시하는 방식입니다.

콜라주 - 콜라주 레이아웃에 이미지를 표시합니다.
  • 좌측에 큰 블록데스크톱 레이아웃에 활성화되었으면 섹션의 첫 번째 블록이 위쪽에 다른 블록보다 크게 표시됩니다.
  • 우측에 큰 블록데스크톱 레이아웃에 활성화되었으면 섹션의 마지막 블록이 아래쪽에 다른 블록보다 크게 표시됩니다.
- 모든 미디어를 한 열 안에 같은 크기로 표시합니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
섹션 패딩 콜라주 섹션의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 섹션의 상단 또는 하단에 추가할 수 있습니다.

동영상 블록

콜라주 섹션의 동영상 블록에 대한 설정
설정 설명
커버 이미지 고객이 동영상을 재생하기 전에 표시되는 이미지입니다. Shopify Admin에서 사용자 지정 커버 이미지를 업로드할 수 있습니다.
URL 동영상에 연결된 YouTube나 Vimeo 링크입니다. 동영상은 공개적으로 볼 수 있어야 합니다. 동영상은 팝업 창에서 재생됩니다.
동영상 대체 텍스트 동영상의 대체 텍스트입니다. 스크린 리더를 사용하는 고객을 위해 동영상의 맥락과 목적을 설명합니다.

제품 블록

콜라주 섹션의 제품 블록에 대한 설정
설정 설명
제품 표시하려는 제품입니다.
마우스를 올리면 보조 배경 표시 고객이 커서를 제품 이미지 위에 올리면 두 번째 제품 이미지가 표시됩니다(제품에 포함된 경우).

컬렉션 블록

콜라주 섹션에서 컬렉션 블록에 대한 설정
설정 설명
컬렉션 표시하려는 컬렉션입니다.

이미지 블록

콜라주 섹션의 이미지 블록에 대한 설정
설정 설명
이미지 섹션의 이미지입니다. 이미지 선택을 클릭하여 이미지를 선택하거나, 변경 버튼을 클릭하여 이미지를 변경 또는 제거할 수 있습니다.
대체 텍스트 편집 SEO를 개선하거나 화면 리더를 사용하는 고객에게 이미지 설명을 제공하기 위해 간단한 이미지 설명을 추가합니다.

축소 가능한 콘텐츠

축소 가능한 콘텐츠 섹션은 그 안의 콘텐츠를 볼 수 있도록 축소하거나 확장할 수 있는 행이 지원되고, 축소 가능한 콘텐츠의 왼쪽이나 오른쪽에 이미지를 배치할 수 있습니다.

섹션 설정

축소 가능한 콘텐츠 섹션의 설정
설정 설명
캡션 축소 가능한 콘텐츠 섹션의 캡션(선택 사항)입니다. 섹션 제목 위에 표시됩니다.
제목 축소 가능한 콘텐츠 섹션의 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.
제목 정렬 섹션 제목의 정렬을 선택합니다. 옵션은 왼쪽, 가운데(기본값), 오른쪽입니다.
레이아웃

축소 가능한 콘텐츠의 레이아웃을 다음 중에서 선택합니다.

  • 컨테이너 없음(기본값)
  • 행 컨테이너 - 축소 가능한 각 행이 음영으로 표시된 상자 안에 포함됩니다.
  • 섹션 컨테이너 - 축소 가능한 섹션 전체가 음영으로 표시된 상자 안에 포함됩니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
컨테이너 색상 배합 컨테이너에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오. 선택한 색상 구성표는 레이아웃 옵션이 또는 섹션 컨테이너로 설정된 경우에만 표시됩니다.
첫 번째 축소 가능한 행 열기 이 옵션을 선택하면 기본으로 축소 가능한 콘텐츠의 첫 번째 행이 확장되어 표시됩니다.
이미지 섹션의 이미지입니다. 이미지 선택을 클릭하여 이미지를 선택하거나, 변경 버튼을 클릭하여 이미지를 변경 또는 제거할 수 있습니다.
대체 텍스트 편집 SEO를 개선하거나 화면 리더를 사용하는 고객에게 이미지 설명을 제공하기 위해 간단한 이미지 설명을 추가합니다.
이미지 비율 섹션 이미지의 이미지 비율:
  • 이미지에 맞춤(기본값) - 이미지의 가로 세로 비율을 사용합니다. 이렇게 하면 이미지가 잘리는 것을 방지합니다.
  • 스몰
  • 라지
데스크톱 레이아웃 이미지와 축소 가능한 행 중 어느 것을 먼저 보이게 할지 선택합니다. 기본 설정은 텍스트가 우선합니다. 모바일에서는 항상 이미지가 먼저 표시됩니다.
섹션 패딩 축소 가능한 콘텐츠의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 축소 가능한 콘텐츠 섹션의 위 또는 아래에 추가할 수 있습니다.

축소 가능한 행 블록

축소 가능한 행 블록의 설정
설정 설명
제목 축소 가능한 행의 제목입니다.
아이콘 축소 가능한 콘텐츠 제목 앞에 표시할 아이콘을 드롭다운 목록에서 선택합니다. 확인 표시 아이콘이 기본으로 선택되어 있습니다.
행 콘텐츠 축소 가능한 행의 콘텐츠입니다. 콘텐츠는 형식을 적용하거나 URL 링크를 포함할 수 있습니다. 이 기능은 페이지의 행 콘텐츠와 함께 사용할 수 있습니다.
페이지의 행 콘텐츠 다른 페이지에 있는 기존 콘텐츠를 축소 가능한 행에 삽입할 수 있습니다. 변경을 클릭하여 페이지를 선택하거나 제거합니다. 이 기능은 행 콘텐츠와 함께 사용할 수 있습니다.

컬렉션 목록

강조 표시하려는 컬렉션 목록을 추가할 수 있습니다. 컬렉션 목록에 컬렉션 블록을 최대 16개까지 추가할 수 있습니다.

섹션 설정

컬렉션 목록 섹션에 대한 설정
설정 설명
제목 섹션 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.
이미지 비율 컬렉션의 추천 이미지에 대한 이미지 비율:
  • 이미지에 맞춤 - 이미지의 가로 세로 비율을 사용합니다. 이렇게 하면 이미지가 잘리는 것을 방지합니다.
  • 세로형 - 2:3 비율을 사용하도록 이미지를 자릅니다.
  • 정사각형(기본값) - 1:1 비율을 사용하도록 이미지를 자릅니다.
데스크톱의 열 수 데스크톱 컴퓨터에 표시되는 열의 수입니다. 최소: 1. 최대: 5.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
목록에 표시된 것보다 많은 컬렉션이 있는 경우 "모두 보기" 버튼 활성화 고객이 컬렉션 전체 목록을 볼 수 있도록 "모두 보기" 버튼을 표시합니다.
모바일의 열 수 모바일 장치의 구체적인 열 레이아웃을 설정합니다. 1~2열 중에서 선택합니다.
모바일에서 스와이프 활성화 고객이 옆으로 스와이프하여 더 많은 컬렉션 블록을 볼 수 있도록 모바일 디스플레이를 열에서 행으로 변경합니다.
섹션 패딩 컬렉션 목록의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 컬렉션 섹션의 위 또는 아래에 추가할 수 있습니다.

컬렉션 선택

  1. 테마 편집기에서 컬렉션을 추가할 컬렉션 블록을 클릭합니다.
  2. 컬렉션 선택을 클릭합니다.
  3. 컬렉션을 클릭한 다음 선택을 클릭합니다.

연락처 양식

연락처 양식을 제출하면 스토어의 발신자 이메일 주소로 모두 전송됩니다. 발신자 이메일 주소는 Shopify 관리자의 알림 설정 페이지에서 변경할 수 있습니다.

양식에 다음과 같은 필드가 있습니다.

  • 이름
  • 이메일(필수 항목)
  • 전화 번호
  • 댓글

섹션 설정

연락처 양식 섹션의 설정
설정 설명
제목 섹션 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
섹션 패딩 연락처 양식의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 연락처 양식 섹션의 위 또는 아래에 추가할 수 있습니다.

사용자 지정 Liquid

고유한 Liquid 코드를 추가하여 사용자 지정 섹션을 생성할 수 있습니다.

  • 다운로드한 앱의 지침에 제공되는 앱 코드 조각을 추가하여 페이지에 앱을 도입합니다.
  • 편집기에서 사용자 지정 Liquid 코드를 직접 추가합니다.

섹션 설정

사용자 지정 Liquid 섹션의 설정
설정 설명
사용자 지정 Liquid 앱 코드 조각이나 기타 사용자 지정 Liquid 코드를 추가하여 고급 사용자 지정을 생성할 수 있습니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
섹션 패딩 사용자 지정 Liquid 섹션의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 사용자 지정 Liquid 섹션의 위 또는 아래에 추가할 수 있습니다.

이메일 가입 배너

비밀번호 페이지에 섹션을 추가할 수 있습니다. 비밀번호 페이지는 스토어가 개장되면 알림을 받을 수 있도록 고객이 이메일 주소를 입력할 수 있는 페이지입니다. 이메일 가입마다 고객 계정이 생성됩니다.

섹션에는 다음 세 가지 기본 블록이 있습니다.

  • 제목
  • 소제목
  • 이메일 양식

섹션 설정

이메일 가입 배너 섹션의 설정
설정 설명
배경 이미지 이메일 가입 배너의 배경 이미지입니다. 변경을 클릭하면 이미지를 교체하거나 제거할 수 있습니다. 이미지가 제거되면 테마에서 제공하는 이미지가 표시됩니다. 배경 이미지 표시 확인란의 선택을 해제하면 이미지를 숨길 수 있습니다.
대체 텍스트 편집 이 옵션을 클릭하면 SEO(검색 엔진 최적화)용 이미지 대체 텍스트를 설정하고 화면 리더를 사용하는 고객을 위해 이미지를 설명할 수 있습니다.
이미지 오버레이 투명도 오버레이로 이메일 가입 배너 이미지를 흐리게 표시합니다. 슬라이더를 사용하여 오버레이 불투명도를 설정합니다. 기본값은 0%입니다.
배경 이미지 표시 이 확인란을 선택하면 이메일 가입 배너에 배경 이미지가 표시됩니다.
배너 높이

드롭다운 메뉴를 사용해 이메일 가입 배너의 높이를 설정합니다. 이미지에 맞춤, 작게, 보통(기본값), 크게 중에서 선택합니다.

데스크톱 콘텐츠 위치 데스크톱 컴퓨터에 맞는 이메일 가입 배너 위치를 설정합니다. 상단, 중간, 하단 및 오른쪽, 왼쪽, 가운데 중에서 선택합니다. 중간의 가운데 위치가 기본 옵션입니다.


데스크톱에서는 텍스트 상자가 이미지를 부분적으로 가립니다. 모바일에서는 텍스트 상자가 이미지 아래에 표시됩니다.

데스크톱에 컨테이너 표시 데스크톱 컴퓨터로 쇼핑하는 고객을 위해 이미지 위의 텍스트 상자에 이메일 가입 배너 이미지 텍스트를 배치합니다.
데스크톱 콘텐츠 정렬 데스크톱 컴퓨터에서 이미지 배너 텍스트의 정렬을 설정합니다. 오른쪽, 왼쪽, 가운데(기본값) 중에서 선택합니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.


데스크톱에서 선택한 색상 구성표는 데스크톱에 컨테이너 표시 옵션을 선택한 경우에만 표시됩니다. 모바일에서 선택한 색상 구성표는 모바일에서 이미지 아래에 콘텐츠 표시를 선택한 경우에만 표시됩니다.

모바일 콘텐츠 정렬 모바일 장치에서 이미지 배너 텍스트의 정렬을 설정합니다. 오른쪽, 왼쪽, 가운데(기본값) 중에서 선택합니다.
모바일에서 아래에 콘텐츠 표시 모바일 장치에서 콘텐츠가 이메일 가입 배너 이미지 아래에 표시됩니다.

제목 블록

이메일 가입 섹션의 제목 블록 설정
설정 설명
제목 섹션 제목입니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.

소제목 블록

이메일 가입 섹션의 소제목 블록 설정
설정 설명
설명 섹션에 대한 설명입니다.
텍스트 스타일 이메일 가입 섹션의 텍스트 스타일을 변경합니다. 본문(기본값)과 소제목 중에서 선택합니다.

이메일 가입

고객이 이메일 주소를 입력하고 뉴스레터 또는 마케팅에 가입할 수 있는 섹션을 추가할 수 있습니다. 고객이 가입하면 Shopify Admin에서 고객 계정이 생성됩니다.

섹션에는 다음 세 가지 기본 블록이 있습니다.

  • 제목
  • 소제목
  • 이메일 양식

섹션 설정

이메일 가입 섹션에 대한 설정
설정 설명
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
섹션을 전체 폭 사용 섹션을 브라우저 창의 전체 너비로 설정합니다.

제목 블록

이메일 가입 섹션의 제목 블록 설정
설정 설명
제목 섹션 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.

소제목 블록

컬렉션 목록 섹션의 소제목 블록에 대한 설정
설정 설명
설명 섹션에 대한 설명입니다.

이메일 양식

이메일 양식 블록은 고객이 마케팅 자료 수신에 가입할 이메일 주소를 입력할 수 있는 필드를 표시합니다. 이 블록에는 사용자 지정 가능한 설정이 없습니다.

하나의 컬렉션에 제품을 표시하는 섹션을 추가할 수 있습니다.

섹션 설정

추천 컬렉션 섹션에 대한 설정
설정 설명
제목 섹션의 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다. 동적 소스 버튼을 클릭하여 섹션의 제목으로 동적 소스를 삽입합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.
설명 추천 컬렉션에 대한 설명 텍스트를 입력하십시오. 텍스트의 서식을 굵게, 이탤릭체로 지정하거나 링크를 포함할 수 있습니다. 동적 소스 버튼을 클릭하여 추천 컬렉션 설명에 대해 동적 소스를 삽입합니다.
관리자에서 컬렉션 설명 표시 이 확인란을 선택하면 위의 설명 필드에 입력된 텍스트 대신 Shopify Admin의 컬렉션에 추가한 컬렉션 설명이 표시됩니다.
설명 스타일 드롭다운 메뉴를 사용하여 추천 컬렉션 설명에 사용할 스타일을 선택합니다. 옵션은 본문(기본값), 자막 또는 대문자입니다.
컬렉션 제품을 표시하려는 컬렉션입니다. 변경을 클릭하여 컬렉션을 제거하거나 변경합니다.
표시할 제품의 최대 수 컬렉션에서 표시할 제품 수입니다. 최소: 2. 최대: 25.
데스크톱의 열 수 데스크톱 컴퓨터에 표시되는 열의 수입니다. 최소: 1. 최대: 5.
제품을 전체 폭 사용 페이지 폭 설정과 관계없이 제품을 창 전체 너비로 표시하는 확인란입니다.
컬렉션에 표시된 것보다 많은 제품이 있는 경우 "모두 보기" 버튼 활성화 컬렉션에 표시할 최대 제품 필드에 설정된 것보다 많은 제품이 있는 경우 고객을 컬렉션 페이지로 연결하는 "모두 보기" 버튼이 표시됩니다.
"모두 보기" 스타일 링크, 단색 버튼 및 아웃라인 버튼 중 선택합니다.
데스크톱에서 캐러셀 활성화 화면 폭이 989픽셀보다 큰 캐러셀에 제품을 표시하는 확인란입니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
이미지 비율 제품 이미지의 이미지 비율:
  • 이미지에 맞춤(기본값) - 이미지의 가로 세로 비율을 사용합니다. 이렇게 하면 이미지가 잘리는 것을 방지합니다.
  • 세로형 - 2:3 비율을 사용하도록 이미지를 자릅니다.
  • 정사각형 - 1:1 비율을 사용하도록 이미지를 자릅니다.
이미지 모양 제품 이미지에 대해 다음 이미지 모양 중 하나를 선택합니다.
  • 기본 - 제품 이미지를 직사각형 모양으로 변경합니다.
  • 아치 - 제품 이미지 위쪽을 곡선으로 만듭니다.
  • 블롭 - 제품 이미지를 마우스를 올릴 때 고유한 애니메이션이 있는 6개의 무작위 블롭 모양 중 하나로 둥글게 만듭니다.
  • 왼쪽 방향 표시 - 제품 이미지를 왼쪽으로 급격하게 휘어진 갈매기 모양으로 변경합니다.
  • 오른쪽 방향 표시 - 제품 이미지를 오른쪽으로 급격하게 휘어진 갈매기 모양으로 변경합니다.
  • 다이아몬드 - 제품 이미지를 4면 다이아몬드 모양으로 변경합니다.
  • 평행사변형 - 제품 이미지를 두 쌍의 평행선이 있는 모양으로 변경합니다.
  • 원형 - 제품 이미지를 마우스를 올릴 때 고유한 애니메이션이 있는 원이나 타원 모양으로 둥글게 만듭니다.
마우스를 올리면 보조 배경 표시 고객이 커서를 제품 이미지 위에 올리면 두 번째 제품 이미지가 표시됩니다(제품에 포함된 경우).
공급업체 표시 제품의 공급업체를 표시합니다.
제품 평점 표시 별점으로 평균 제품 평가를 표시하고 괄호 안에 리뷰 수(예: ★★★★★(8))를 나타냅니다. Shopify 제품 리뷰와 같은 제품 리뷰 앱과 리뷰.평점_수에 대한 메타 필드 정의가 필요합니다. 리뷰.평점에 대한 정의도 있어야 합니다.
빠른 추가 버튼 활성화 빠른 추가 버튼을 사용하면 고객이 제품 카드에서 카트로 품목을 추가할 수 있습니다. 제품에 이형 상품이 있는 경우 버튼에 '옵션 선택'이 표시되며 팝업에 제품 세부 정보가 표시됩니다. 이 팝업에서 고객은 원하는 이형 상품을 선택하고, 카트에 품목을 추가하고, '지금 구매'를 통해 즉시 결제하거나 클릭하여 품목의 전체 세부 정보를 확인할 수 있습니다. 이 설정은 제품 페이지에서 활성화되는 '지금 구매' 버튼에 따라 달라질 수 있습니다. '지금 구매' 버튼이 제품 템플릿에서 활성화되지 않는 경우 고객은 제품을 카트에 추가하는 옵션을 사용할 수 있으나 빠른 '지금 구매' 결제 워크플로를 볼 수 없습니다.
모바일의 열 수 모바일 장치의 구체적인 열 레이아웃을 설정합니다. 1~2열 중에서 선택합니다.
모바일에서 스와이프 활성화 고객이 옆으로 스와이프하여 더 많은 제품을 볼 수 있도록 모바일 디스플레이를 열에서 행으로 변경합니다.
섹션 패딩 추천 컬렉션 섹션의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 추천 컬렉션 섹션의 위 또는 아래에 추가할 수 있습니다.

특정 제품을 추천하는 섹션을 추가할 수 있습니다.

섹션 설정

추천 제품 섹션에 대한 설정
설정 설명
제품 섹션에서 추천으로 표시할 제품입니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
보조 배경 표시 보조 배경 색상으로 추천 제품을 표시합니다.
데스크톱 미디어 너비 미디어 크기를 작게, 보통 또는 크게 중에서 선택합니다. 이미지는 자동으로 모바일에 최적화됩니다.
미디어를 화면 높이로 제한 이 옵션을 선택하면 브라우저 창 높이를 기준으로 최대 미디어 높이가 설정됩니다.
미디어 맞춤 원본을 선택하여 미디어의 원래 가로 세로 비율을 유지하거나 채우기를 선택하여 미디어를 컨테이너에 맞춥니다.
데스크톱 미디어 위치 추천 제품 미디어를 왼쪽에 둘지 오른쪽에 둘지 선택합니다. 데스크톱 컴퓨터에서 페이지에 액세스하는 사용자에게만 적용됩니다.
이미지 확대/축소

데스크톱에서 이미지를 확대/축소하는 방법을 선택합니다:

  • 라이트박스 열기 - 큰 이미지를 엽니다. 모바일에서의 기본값입니다.
  • 확대/축소 안 함 - 이미지 확대/축소를 비활성화합니다. 고해상도가 아닌 이미지에 권장됩니다.
  • 클릭 및 커서 올리기 - 클릭하여 이미지를 확대한 다음 마우스를 올려 확대된 다른 섹션을 봅니다. 마우스가 위치하면 확대/축소는 확대된 이미지를 다시 클릭하거나 마우스가 이미지의 컨테이너를 벗어나면 비활성화됩니다. 이 설정이 활성화되어 있고 사용자가 모바일 장치를 사용하는 경우 이미지는 기본적으로 모달(라이트박스)에서 열립니다.
다른 이형 상품의 미디어 숨기기 한 이형 상품을 선택한 후 다른 이형 상품의 미디어를 숨기려면 이 옵션을 선택합니다.
동영상 루프 활성화 동영상을 다시 재생할 수 있습니다. 고객이 재생을 시작하려면 클릭해야 합니다.
섹션 패딩 추천 제품 섹션의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 섹션의 상단 또는 하단에 추가할 수 있습니다.

특별 제품 섹션에 다음 블록을 추가할 수 있습니다.

추천 제품 섹션에서 사용 가능한 블록
블록 설정
텍스트 추천 제품의 텍스트를 입력합니다.
  • 텍스트: 텍스트 또는 다이나믹 소스를 허용합니다.
  • 텍스트 스타일: 본문, 자막 또는 대문자 중에서 선택합니다.
제목 제목 사이즈: 작게, 보통, 크게 중에서 선택합니다.
가격 이 블록에는 사용자 지정 가능한 설정이 없습니다.
이형 상품 피커 필 또는 드롭다운 메뉴 중에서 선택합니다.
수량 선택기 이 블록에는 사용자 지정 가능한 설정이 없습니다.
구매 버튼 동적 결제 버튼 표시 확인란을 선택하면 결제 설정에서 활성화한 동적 결제 옵션이 표시됩니다.
공유 고객이 소셜 미디어에 제품을 공유할 수 있는 클릭 가능한 텍스트입니다.
제품 평점 별점으로 평균 제품 평가를 표시하고 괄호 안에 리뷰 수(예: ★★★★★(8))를 나타냅니다. Shopify 제품 리뷰와 같은 제품 리뷰 앱과 리뷰.평점_수에 대한 메타 필드 정의가 필요합니다. 리뷰.평점에 대한 정의도 있어야 합니다.
사용자 지정 Liquid 사용자 지정 Liquid 또는 HTML 코드를 추가합니다.
Online Store 2.0 호환 앱을 추가할 수 있습니다.
텍스트 포함 아이콘 이 블록에는 사전 설치한 아이콘 목록이나 업로드한 이미지에서 선택할 수 있는 아이콘이 3개까지 표시됩니다. 이미지 업로드를 선택하면 업로드한 이미지가 아이콘 드롭다운 선택보다 우선 적용됩니다. 아이콘 레이아웃의 경우 세로 또는 가로를 선택할 수 있습니다. 아이콘을 삭제하려면 제목 필드를 지우십시오. 아이콘을 3개 이상 표시하려면 다른 **텍스트 포함 아이콘** 블록을 추가하십시오.
SKU 이 블록에는 이형 상품과 연결된 SKU(Stock Keeping Unit)가 있으면 제품과 연결된 SKU가 표시됩니다. [관리자에서 제품 이형에 SKU 번호를 추가하는 방법](/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku#add-sku-numbers-to-your-product-variants-from-the-admin-sectioned%20themes-specific)을 자세히 알아보십시오.

이미지 배너

이미지 배너 섹션은 한두 개의 이미지를 지원하고 버튼이 있는 텍스트 상자를 제공합니다. 이미지 두 개를 사용하는 경우 데스크톱에 나란히 표시됩니다. 모바일에서는 이미지를 나란히 표시할지 열에 표시할지 선택할 수 있습니다.

데스크톱에서는 텍스트 상자가 이미지를 부분적으로 덮습니다. 모바일에서는 텍스트 상자가 이미지 아래에 표시됩니다. 데스크톱과 모바일 모두 텍스트 정렬을 오른쪽, 왼쪽, 가운데 중에서 변경할 수 있습니다.

섹션 설정

이미지 배너 섹션에 대한 설정
설정 설명
첫 번째 이미지 배너의 주요 이미지입니다. 섹션에 두 개의 이미지가 추가되면 고객이 데스크톱 또는 모바일을 사용하는지에 따라 이 이미지가 좌측 또는 상단에 표시됩니다.
대체 텍스트 편집 이 옵션을 클릭하면 SEO(검색 엔진 최적화)용 이미지 대체 텍스트를 설정하고 화면 리더를 사용하는 고객을 위해 이미지를 설명할 수 있습니다.
두 번째 이미지 배너의 보조 이미지입니다. 섹션에 두 개의 이미지가 추가되면 고객이 데스크톱 또는 모바일을 사용하는지에 따라 이 이미지가 우측 또는 하단에 표시됩니다.
이미지 오버레이 투명도 배너 이미지에 오버레이를 추가합니다. 슬라이더를 사용하여 오버레이의 불투명도를 설정합니다. 기본값은 0%입니다.
배너 높이

드롭다운 메뉴를 사용하여 배너 이미지의 높이를 설정합니다.

  • 첫 번째 이미지에 맞춤 - 섹션의 높이를 첫 번째 이미지의 높이로 설정합니다.
  • 소형 - 데스크톱: 420픽셀, 모바일: 280픽셀
  • 보통(기본값) - 데스크톱: 560픽셀, 모바일: 340픽셀
  • 대형 - 데스크톱: 720픽셀, 모바일: 390픽셀
데스크톱 콘텐츠 위치 데스크톱 이미지 배너의 위치를 설정합니다. 상단, 중간, 하단과 오른쪽, 왼쪽, 가운데 중에서 선택합니다.
데스크톱에 컨테이너 표시 데스크톱 컴퓨터로 쇼핑하는 고객을 위해 배너 이미지 위의 텍스트 상자에 배너 이미지 텍스트를 배치합니다.
데스크톱 콘텐츠 정렬 데스크톱 컴퓨터에서 이미지 배너 텍스트의 정렬을 설정합니다. 오른쪽, 왼쪽, 가운데 중에서 선택합니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오. 선택한 색상 구성표는 데스크톱에 텍스트 상자 표시 옵션이 선택된 경우에만 표시됩니다.
애니메이션

이미지에 대한 애니메이션을 선택합니다:

  • 없음 (기본값)
  • 잔잔한 움직임 - 컨테이너 내에서 이미지 위치를 느리게 움직입니다.
  • 고정 배경 위치 - 고객이 페이지를 스크롤할 때 텍스트, 버튼 등의 전경 요소는 같은 속도로 이동하며 배경은 고정됩니다.
  • 스크롤 확대 - 고객이 페이지를 스크롤할 때 텍스트, 버튼 등의 전경 요소는 같은 속도로 움직이지만 배경은 고정되어 있으며 이미지는 확대됩니다.
모바일 콘텐츠 정렬 모바일 장치에서 이미지 배너 텍스트의 정렬을 설정합니다. 오른쪽, 왼쪽, 가운데 중에서 선택합니다.
모바일 스택 이미지 섹션에 두 개의 이미지가 추가되면 이미지를 나란히 표시하지 않고 열에 표시합니다.
모바일에서 컨테이너 표시 모바일 장치로 쇼핑하는 고객을 위해 배너 이미지 위의 텍스트 상자에 배너 이미지 텍스트를 배치합니다.

제목 블록

이미지 배너 섹션의 제목 블록에 대한 설정
설정 설명
제목 텍스트 상자 제목의 큰 텍스트입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.

텍스트 블록

이미지 배너 섹션의 텍스트 블록에 대한 설정
설정 설명
설명 단락 스타일 텍스트를 표시합니다.
텍스트 스타일 이미지 배너에서 텍스트 스타일을 변경합니다. 본문, 소제목, 대문자 중에서 선택합니다.

버튼 블록

이미지 배너 섹션의 버튼 블록에 대한 설정
설정 설명
첫 번째 버튼 레이블 첫 번째 버튼에 표시되는 텍스트입니다.
첫 번째 버튼 링크 첫 번째 버튼을 연결하려는 URL입니다.
윤곽 버튼 스타일 사용 버튼 스타일을 단색 배경이 아닌 버튼에 윤곽선이 있도록 조정합니다.
두 번째 버튼 레이블 두 번째 버튼에 표시되는 텍스트입니다.
두 번째 버튼 링크 두 번째 버튼에 연결할 URL입니다.
윤곽 버튼 스타일 사용 버튼 스타일을 단색 배경이 아닌 버튼에 윤곽선이 있도록 조정합니다.

텍스트 포함 이미지

고객을 새 페이지로 연결하는 선택적 버튼이 있는 텍스트 블록과 이미지가 포함된 섹션을 추가할 수 있습니다. 텍스트와 이미지를 짝지어 선택한 제품, 컬렉션 또는 블로그 게시물을 강조합니다. 사용 가능성, 스타일에 대한 자세한 정보를 추가하거나 리뷰를 제공합니다.

섹션 설정

텍스트 포함 이미지 섹션에 대한 설정
설정 설명
이미지 이미지 선택을 클릭하여 섹션의 이미지를 선택합니다. 변경 버튼을 클릭하면 이미지를 변경 또는 제거할 수 있습니다.
대체 텍스트 편집 이 옵션을 클릭하면 SEO(검색 엔진 최적화)용 이미지 대체 텍스트를 설정하고 화면 리더를 사용하는 고객을 위해 이미지를 설명할 수 있습니다.
이미지 높이 다음과 같이 이미지 높이를 선택합니다.
  • 이미지에 맞춤(기본값)
  • 스몰
  • 보통
  • 라지
데스크톱 이미지 폭 이미지의 폭:
  • 스몰
  • 보통(기본값)
  • 라지
데스크톱 이미지 배치 이미지와 텍스트 중 어느 것을 먼저 표시할지 선택합니다. 모바일 레이아웃에서는 이미지가 기본적으로 우선합니다.
  • 이미지 우선(모바일에서 기본값)
  • 이미지 두 번째
데스크톱 콘텐츠 위치 컨테이너에서 콘텐츠의 세로 위치:
  • 상단(기본값)
  • 중간
  • 아래쪽
데스크톱 콘텐츠 정렬 컨테이너에서 텍스트 정렬:
  • 왼쪽(기본값)
  • 가운데
  • 오른쪽
콘텐츠 레이아웃 이미지와 텍스트 상자가 서로 겹치도록 허용합니다. 겹침 없음을 선택하면 콘텐츠가 조정되어 텍스트와 이미지가 표시됩니다.
  • 겹침
  • 겹침 없음(기본값)
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
애니메이션

이미지에 대한 애니메이션을 선택합니다:

  • 없음 (기본값)
  • 잔잔한 움직임 - 컨테이너 내에서 이미지 위치를 느리게 움직입니다.
  • 스크롤 확대 - 고객이 페이지를 스크롤할 때 텍스트, 버튼 등의 전경 요소는 같은 속도로 움직이지만 배경은 고정되어 있으며 이미지는 확대됩니다.
모바일 레이아웃 모바일 장치의 콘텐츠 정렬을 선택합니다.
  • 왼쪽(기본값)
  • 오른쪽
  • 가운데
섹션 패딩 텍스트 포함 이미지 섹션의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 텍스트 포함 이미지 섹션의 위 또는 아래에 추가할 수 있습니다.

제목 블록

텍스트 포함 이미지 섹션의 제목 블록에 대한 설정
설정 설명
제목 섹션의 제목 텍스트입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.

텍스트 블록

텍스트 포함 이미지 섹션의 텍스트 블록에 대한 설정
설정 설명
콘텐츠 텍스트 섹션에 단락 스타일 텍스트를 표시합니다.
텍스트 스타일 콘텐츠 텍스트 스타일:
  • 본문(기본값)
  • 소제목

버튼 블록

텍스트 포함 이미지 섹션의 버튼 블록에 대한 설정
설정 설명
버튼 레이블 버튼에 표시되는 텍스트입니다.
버튼 링크 버튼에 연결할 URL입니다.

캡션 블록

텍스트 포함 이미지 섹션의 캡션 블록 설정
설정 설명
텍스트 이미지에 슬로건이나 캡션을 추가합니다. 텍스트 포함 이미지 섹션의 하단에 텍스트가 표시됩니다.
텍스트 스타일 콘텐츠 텍스트의 스타일:
  • 대문자(기본값)
  • 소제목
텍스트 사이즈 콘텐츠 텍스트의 사이즈:
  • 스몰
  • 보통(기본값)
  • 라지

여러 열

여러 열 섹션을 사용하여 열 레이아웃에 콘텐츠를 표시하고 열 아래에 버튼을 추가하여 고객을 새 페이지로 안내할 수 있습니다. 텍스트와 이미지를 짝지어 선택한 제품, 컬렉션 또는 블로그 게시물을 강조합니다. 사용 가능성, 스타일에 대한 세부 사항을 추가하거나 리뷰를 제공할 수도 있습니다.

섹션 설정

다중 열 섹션에 대한 설정
설정 설명
제목 섹션 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.
이미지 폭

열에 추가된 이미지의 폭입니다.

  • 열의 전체 폭(기본값) - 이미지의 폭은 열의 전체 크기입니다.
  • 열의 1/2 폭 - 이미지의 폭은 열의 절반 크기입니다.
  • 열의 1/3 폭 - 이미지의 폭은 열 크기의 3분의 1입니다.
이미지 비율

이미지에 대한 이미지 비율:

  • 이미지에 맞춤(기본값) - 이미지의 가로 세로 비율을 사용합니다. 이렇게 하면 이미지가 잘리는 것을 방지합니다.
  • 세로형 - 2:3 비율을 사용하도록 이미지를 자릅니다.
  • 정사각형 - 1:1 비율을 사용하도록 이미지를 자릅니다.
  • 원형 - 원으로 표시되도록 이미지를 자릅니다.
데스크톱의 열 수 범위 척도를 사용하여 데스크톱 컴퓨터에 표시되는 열 수를 선택합니다. 최소: 1. 최대: 6.
열 맞춤

열 내 이미지와 텍스트 정렬:

  • 왼쪽(기본값) - 이미지와 텍스트를 왼쪽으로 정렬합니다.
  • 가운데 - 이미지와 텍스트를 중앙으로 정렬합니다.
보조 배경 없음을 선택하여 보조 배경을 숨기거나, 열 배경으로 표시를 선택하여 열 컨테이너 색상을 변경합니다.
버튼 레이블 버튼에 표시되는 텍스트입니다.
버튼 링크 버튼에 연결할 URL입니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
모바일의 열 수 모바일 장치의 구체적인 열 레이아웃을 설정합니다. 1~2열 중에서 선택합니다.
모바일에서 스와이프 활성화 고객이 옆으로 스와이프하여 더 많은 컬렉션 블록을 볼 수 있도록 모바일 디스플레이를 열에서 행으로 변경합니다.
섹션 패딩 여러 열 섹션의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 여러 열 섹션의 위 또는 아래에 추가할 수 있습니다.

열 블록

한 섹션에 최대 12개의 열이 있을 수 있습니다. 열 블록이 1개, 2개 또는 3개인 경우 데스크톱의 한 행에 표시됩니다. 열 블록이 4개 이상인 경우 두 열의 레이아웃으로 표시됩니다. 모바일에서 열 블록은 모바일에서 스와이프 활성화가 활성화되지 않는 한 단일 열에서의 디스플레이를 차단합니다.

다중 열 섹션의 열 블록에 대한 설정
설정 설명
이미지 표시하려는 이미지입니다.
제목 열의 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
설명 열에 있는 단락 텍스트입니다.
링크 레이블 [선택 사항] 열 블록 아래에 추가되는 링크의 텍스트입니다. 추가할 링크가 없으면 공란으로 비워둡니다.
링크 링크의 URL입니다. 링크가 없으면 공란으로 비워둡니다.

여러 행

각각 이미지, 텍스트, 선택적 버튼이 있는 여러 행을 포함하는 섹션을 추가할 수 있습니다. 텍스트와 이미지를 짝지어 선택한 제품, 컬렉션 또는 블로그 게시물을 강조합니다. 사용 가능성, 스타일에 대한 세부 정보를 추가하거나 리뷰를 제공할 수도 있습니다.

또한 동적 소스를 통해 메타 객체 콘텐츠를 표시할 수 있습니다. 메타 객체 항목을 표시하려면 메타 객체를 구축하고 항목을 생성해야 하며 여러 행 섹션에서 메타 객체를 사용하려면 먼저 메타 객체에 상점 액세스 권한이 있어야 합니다.

섹션 설정

여러 행 섹션에 대한 설정
설정 설명
이미지 높이 다음과 같이 이미지 높이를 선택합니다.
  • 이미지에 맞춤
  • 스몰
  • 보통(기본값)
  • 라지
데스크톱 이미지 폭 이미지의 폭:
  • 스몰
  • 보통(기본값)
  • 라지
제목 사이즈 제목 텍스트의 크기를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.
텍스트 스타일 텍스트의 스타일을 변경합니다. 본문(기본값)과 부제목 중에서 선택합니다.
버튼 스타일 단색 버튼과 윤곽선 버튼 중에서 선택합니다.
데스크톱 콘텐츠 위치 컨테이너에서 콘텐츠의 세로 위치:
  • 위쪽
  • 중간(기본값)
  • 아래쪽
데스크톱 콘텐츠 정렬 컨테이너에서 텍스트 정렬:
  • 왼쪽(기본값)
  • 가운데
  • 오른쪽
데스크톱 이미지 배치 이미지의 위치를 선택합니다. 배치는 자동으로 모바일에 최적화됩니다:
  • 왼쪽에서 번갈아(기본값)
  • 오른쪽에서 번갈아
  • 왼쪽 맞춤
  • 오른쪽 맞춤
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
컨테이너 색상 배합 컨테이너에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
모바일 레이아웃 모바일 장치의 콘텐츠 정렬을 선택합니다.
  • 왼쪽(기본값)
  • 오른쪽
  • 가운데
섹션 패딩 여러 행 섹션의 위쪽이나 아래쪽에 간격을 추가합니다. 범위 슬라이더를 사용하여 텍스트 포함 이미지 섹션의 위 또는 아래에 0px ~ 100px의 간격을 추가할 수 있습니다.

행 블록

여러 행 섹션의 행 블록에 대한 설정
설정 설명
이미지 이미지 선택을 클릭하여 행의 이미지를 선택합니다. 변경 버튼을 클릭하여 이미지를 변경하거나 제거합니다. 소스 버튼을 클릭하여 동적 소스에 연결합니다.
대체 텍스트 편집 이 옵션을 클릭하면 SEO(검색 엔진 최적화)용 이미지 대체 텍스트를 설정하고 화면 리더를 사용하는 고객을 위해 이미지를 설명할 수 있습니다.
캡션 이미지에 기타 정보나 캡션을 추가합니다.
제목 행의 제목 텍스트입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
텍스트 행에 단락 스타일 텍스트를 표시합니다.
버튼 레이블 버튼에 표시되는 텍스트입니다.
버튼 링크 버튼에 연결할 URL입니다.

페이지

섹션에 사용자 지정 페이지의 콘텐츠를 표시하도록 선택할 수 있습니다. 이렇게 하면 페이지의 전체 콘텐츠가 섹션에 제공되지만 어떤 템플릿에서도 Liquid 코드를 가져오지 않습니다.

섹션 설정

페이지 섹션에 대한 설정
설정 설명
페이지 표시하려는 온라인 스토어의 페이지입니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
섹션 패딩 페이지 섹션의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 페이지 섹션의 위 또는 아래에 추가할 수 있습니다.

서식 있는 텍스트

제목, 캡션, 텍스트 및 버튼이 포함된 서식있는 텍스트 섹션을 추가하여 고객을 새 페이지로 연결할 수 있습니다.

섹션 설정

서식있는 텍스트 섹션에 대한 설정
설정 설명
데스크톱 콘텐츠 위치 서식있는 텍스트 컨테이너의 위치를 선택합니다. 드롭다운 메뉴에서 왼쪽, 가운데(기본값) 또는 오른쪽을 선택할 수 있습니다. 콘텐츠는 모바일 장치에 자동으로 최적화됩니다.
콘텐츠 정렬 이 설정은 서식있는 텍스트 섹션 내의 모든 블록에 대한 텍스트 정렬에 영향을 줍니다. 드롭다운 메뉴를 사용하여 왼쪽, 가운데(기본값) 또는 오른쪽을 선택합니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
섹션을 전체 폭 사용 섹션은 기본적으로 전체 너비입니다.
섹션 패딩 서식있는 텍스트 섹션의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 서식있는 텍스트 섹션의 위 또는 아래에 추가할 수 있습니다.
동적 소스 연결 서식있는 텍스트 섹션에서 동적 소스를 사용하여 메타 필드 또는 메타 객체 등의 정보를 참조하세요. 목록 참조를 사용하여 테마에서 텍스트 목록을 출력할 수도 있습니다. 예를 들어, 메타 필드 목록(참조된 메타 객체에서 사용할 수 있더라도)을 사용하여 테마의 서식있는 텍스트 설정 내에서 텍스트 목록을 출력할 수 있습니다.

제목 블록

서식있는 텍스트 섹션에는 최대 3개의 제목 블록을 사용할 수 있습니다.

서식있는 텍스트 섹션의 제목 블록에 대한 설정
설정 설명
제목 섹션의 제목입니다. 버튼을 사용해 굵게 또는 기울임꼴로 텍스트를 만들거나 링크를 추가합니다. 소스 버튼을 클릭하여 다이나믹 소스에 연결합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게, 매우 크게 중에서 선택합니다.

텍스트 블록

텍스트 블록은 고객과 브랜드에 대한 정보를 공유할 수 있는 좋은 방법입니다. 제품의 장점을 설명하거나 공지를 하거나 고객의 스토어 방문을 환영하거나 브랜드 가치에 대해 이야기할 수 있습니다.

서식있는 텍스트 섹션에는 최대 3개의 텍스트 블록을 사용할 수 있습니다.

서식있는 텍스트 섹션의 텍스트 블록에 대한 설정
설정 설명
설명 섹션의 주요 콘텐츠에 대한 단락 스타일 텍스트입니다. 소스 버튼을 클릭하여 다이나믹 소스에 연결합니다.

캡션 블록

서식있는 텍스트 섹션에는 최대 3개의 캡션 블록을 사용할 수 있습니다.

서식있는 텍스트 섹션의 텍스트 블록에 대한 설정
설정 설명
텍스트 서식있는 텍스트 섹션에 간략한 슬로건을 추가합니다.
텍스트 스타일 드롭다운 메뉴를 사용해 자막(기본값)과 대문자 중에서 텍스트 스타일을 선택합니다.
텍스트 사이즈 드롭다운 메뉴에서 캡션 텍스트 크기를 설정합니다. 작게, 보통(기본값), 크게 중에서 선택합니다.

버튼 블록

서식있는 텍스트 섹션에는 최대 2개의 버튼 블록을 사용할 수 있습니다.

서식있는 텍스트 섹션의 버튼 블록에 대한 설정
설정 설명
버튼 레이블 버튼에 표시되는 텍스트입니다.
버튼 링크 버튼에 연결할 URL입니다.
윤곽 버튼 스타일 사용 버튼 스타일을 단색 배경이 아닌 버튼에 윤곽선이 있도록 조정합니다.

슬라이드 쇼

슬라이드 쇼 섹션을 추가하면 스토어 내 페이지에 최대 5개의 이미지로 구성된 캐러셀을 표시할 수 있습니다.

섹션 설정

슬라이드 쇼 섹션의 설정
설정 설명
레이아웃 전체 폭(기본값) 또는 그리드 중에서 선택합니다. 전체 폭을 선택하면 섹션의 전체 너비로 슬라이드 쇼가 표시되며, 그리드를 선택하면 양쪽에 패딩이 포함된 슬라이드 쇼가 표시됩니다.
슬라이드 높이

슬라이드 쇼의 높이:

  • 첫 번째 이미지에 맞춤 - 모든 이미지는 캐러셀의 첫 번째 이미지와 동일한 높이가 됩니다.
  • 스몰
  • 보통(기본값)
  • 라지
페이지 매김 스타일

이미지 아래에 나타나는 슬라이드 쇼 탐색 스타일입니다.

  • 카운터(기본값)
  • 번호
슬라이드 자동 회전

이 확인란을 선택하면 슬라이드 쇼의 이미지가 자동으로 회전합니다. 이 확인란을 선택하지 않으면 고객이 슬라이드 쇼를 수동으로 진행할 때까지 정적인 이미지가 표시됩니다.

슬라이드 타이머 변경 바를 사용하여 슬라이드 쇼의 자동 회전 시간을 설정합니다. 최소 3초, 최대 9초입니다.
애니메이션

이미지에 대한 애니메이션을 선택합니다:

  • 없음 (기본값)
  • 잔잔한 움직임 - 컨테이너 내에서 이미지 위치를 느리게 움직입니다
모바일 레이아웃 이 확인란을 선택하면 모바일에서 이미지 아래에 콘텐츠가 표시됩니다.
접근 가능성 시각 장애가 있는 고객을 위해 슬라이드 쇼의 설명을 추가합니다.

이미지 슬라이드 설정

슬라이드 쇼 섹션 이미지의 설정
설정 설명
이미지 슬라이드 쇼에 사용할 정적 또는 동적 이미지를 선택합니다. 이미지 선택을 클릭하여 미디어 라이브러리를 보거나 소스 버튼을 클릭하여 동적 소스를 연결합니다. 이미지를 선택한 후 변경 버튼을 클릭하면 이미지를 제거, 변경 또는 삭제할 수 있습니다.
대체 텍스트 편집

스크린 리더를 사용하는 고객을 위해 슬라이드 쇼 이미지를 설명하고 맥락을 제공합니다.

제목

이미지의 제목 텍스트(옵션)입니다. 텍스트는 각 이미지에 개별적으로 추가됩니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.

제목 사이즈

작게, 보통(기본값), 크게 중에서 선택합니다.

소제목 이미지의 소제목 텍스트(옵션)입니다. 텍스트는 각 이미지에 개별적으로 추가됩니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
버튼 레이블 버튼용 텍스트를 입력할 수 있으며, 비워두면 버튼이 숨겨집니다.
버튼 링크 버튼에 연결하려는 URL입니다. 소스 버튼을 클릭하여 다이나믹 소스를 URL로 추가합니다.
윤곽 버튼 스타일 사용 실선 또는 테두리가 있는 버튼 사이에 전환하려면 확인란을 클릭합니다.
데스크톱 콘텐츠 위치 이미지 위의 콘텐츠 상자 위치입니다. 상단, 중간, 하단과 왼쪽, 가운데, 오른쪽 중에서 선택합니다. 중간의 가운데 위치가 기본 설정입니다.
데스크톱에 컨테이너 표시 확인란을 선택하면 콘텐츠 상자가 표시됩니다.
데스크톱 콘텐츠 정렬 컨테이너에서 텍스트를 정렬합니다. 왼쪽, 가운데(기본값), 오른쪽 중에서 선택할 수 있습니다.
이미지 오버레이 투명도 슬라이더를 사용하여 이미지 오버레이의 불투명도를 조정합니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오. 이 설정을 사용하여 슬라이드 쇼 이미지에 영향을 주려면 컨테이너가 표시되어야 합니다.
모바일 레이아웃 모바일 장치에서 콘텐츠가 어떻게 표시되는지 선택합니다. 왼쪽, 가운데(기본값), 오른쪽 중에서 선택합니다.

동영상

동영상 섹션을 추가하여 스토어의 페이지에 YouTube 또는 Vimeo 동영상을 임베드할 수 있습니다.

섹션 설정

동영상 섹션에 대한 설정
설정 설명
제목 섹션 제목입니다. 버튼을 사용하여 텍스트를 굵게 또는 기울임꼴로 표시하거나 링크를 추가합니다.
제목 사이즈 제목 텍스트의 사이즈를 변경합니다. 작게, 보통, 크게 중에서 선택합니다.
동영상 반복 재생 선택하면 동영상이 종료된 후 다시 시작됩니다.
동영상 섹션에 나만의 동영상을 추가하거나 선택합니다. 동영상을 편집하여 사용자 지정 커버 이미지를 사용하고 몇 가지 대체 텍스트를 추가할 수 있습니다. Shopify 호스팅 동영상을 추가하면 아래 설정의 URL 동영상을 통해 사용됩니다.
URL YouTube 또는 Vimeo 동영상 링크입니다. 동영상은 공개적으로 볼 수 있어야 하며 위 설정에 Shopify 호스팅 동영상이 추가되지 않은 경우에만 표시됩니다.
커버 이미지 고객이 동영상을 재생하기 전에 표시되는 이미지입니다.
동영상 대체 텍스트 동영상의 대체 텍스트입니다. 스크린 리더를 사용하는 고객을 위해 동영상의 맥락과 목적을 설명합니다.
섹션을 전체 폭 사용 기본 패딩을 제거하고 섹션을 페이지의 전체 너비로 설정합니다.
색상 배합 이 섹션에 적용할 수 있는 색상의 집합입니다. 색상 구성표에 대해 자세히 알아보십시오.
섹션 패딩 비디오의 상단이나 하단에 간격을 추가합니다. 범위 슬라이더를 사용하여 0px~100px의 공백을 비디오 섹션의 위 또는 아래에 추가할 수 있습니다.

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

무료 체험