테마 설정
테마 편집기의 사이드바 메뉴에서 테마 설정 맞춤 설정 기능을 사용하여 온라인 스토어의 입력 체계, 색상, 소셜 미디어 링크 및 카트 페이지를 변경할 수 있습니다. 테마 설정 변경 사항은 온라인 스토어 전체에 적용됩니다.
섹션과 블록에는 테마의 개별 섹션을 맞춤 설정하기 위해 조정할 수 있는 설정도 있습니다. 섹션 및 블록에 대해 자세히 알아보세요.
로고
온라인 스토어에 비즈니스 로고를 추가할 수 있습니다. 로고는 다음과 같은 위치에 표시됩니다.
- 모든 페이지의 머리글
- 비밀번호 페이지
로고 사용자 지정
로고 이미지의 최대 너비는 300px입니다.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
테마 설정
아이콘을 클릭합니다.로고를 클릭합니다.
로고 영역에 이미지를 추가하거나 무료 이미지를 사용합니다.
이미지를 추가하려면 이미지 선택을 클릭한 다음 새 이미지 또는 기존 이미지를 추가합니다.
- Shopify 관리자에 이미 업로드한 이미지를 사용하려면 이미지를 선택한 다음 완료를 클릭합니다.
- 로컬 컴퓨터에서 이미지를 사용하려면 이미지 추가를 클릭합니다. 이미지를 선택하고 추가한 다음 완료를 클릭합니다.
무료 이미지를 사용하려면 무료 이미지 살펴보기를 클릭합니다. 이미지를 찾고 클릭하여 선택한 다음 선택을 클릭합니다.
선택 사항: 로고 이미지에 대체 텍스트를 추가합니다.
- 로고 영역에서 편집을 클릭합니다.
- 대체 텍스트 필드에서 이미지에 대한 간단한 설명을 입력합니다.
- 저장을 클릭합니다.
선택 사항: 데스크톱 로고 너비 영역에서 범위 슬라이더를 사용하여 로고 픽셀 너비를 조정합니다.
저장을 클릭합니다.
iPhone
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
**⋮**를 탭한 다음 테마 설정을 탭합니다.
로고를 탭합니다.
로고 영역에 이미지를 추가하거나 무료 이미지를 사용합니다.
이미지를 추가하려면 이미지 선택을 탭한 다음 새 이미지 또는 기존 이미지를 추가합니다.
- Shopify 관리자에 이미 업로드한 이미지를 사용하려면 이미지를 선택한 다음 완료를 탭합니다.
- 로컬 장치에서 이미지를 사용하려면 이미지 추가를 탭합니다. 로컬 장치에서 이미지를 선택하고 추가합니다. 이미지를 탭하여 선택한 다음 완료를 탭합니다.
무료 이미지를 사용하려면 무료 이미지 살펴보기를 탭합니다. 이미지를 찾고 탭하여 선택한 다음 완료를 탭합니다.
선택 사항: 로고 이미지에 대체 텍스트를 추가합니다.
- 로고 영역에서 편집을 탭합니다.
- 대체 텍스트 필드에서 이미지에 대한 간단한 설명을 입력합니다.
- **✓**를 탭합니다.
선택 사항: 데스크톱 로고 너비 영역에서 범위 슬라이더를 사용하여 로고 픽셀 너비를 조정합니다.
**✓**를 탭합니다.
Android
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
… 버튼을 탭한 다음 테마 설정을 탭합니다.
로고를 탭합니다.
로고 영역에 이미지를 추가하거나 무료 이미지를 사용합니다.
이미지를 추가하려면 이미지 선택을 탭한 다음 새 이미지 또는 기존 이미지를 추가합니다.
- Shopify 관리자에 이미 업로드한 이미지를 사용하려면 이미지를 선택한 다음 완료를 탭합니다.
- 로컬 장치에서 이미지를 사용하려면 이미지 추가를 탭합니다. 로컬 장치에서 이미지를 선택하고 추가합니다. 이미지를 탭하여 선택한 다음 완료를 탭합니다.
무료 이미지를 사용하려면 무료 이미지 살펴보기를 탭합니다. 이미지를 찾고 탭하여 선택한 다음 완료를 탭합니다.
선택 사항: 로고 이미지에 대체 텍스트를 추가합니다.
- 로고 영역에서 편집을 탭합니다.
- 대체 텍스트 필드에서 이미지에 대한 간단한 설명을 입력합니다.
- **✓**를 탭합니다.
선택 사항: 데스크톱 로고 너비 영역에서 범위 슬라이더를 사용하여 로고 픽셀 너비를 조정합니다.
**✓**를 탭합니다.
Favicon 추가
즐겨 찾는 아이콘이나 Favicon을 추가하여 온라인 스토어 브랜딩에 도움을 주기 위해 사용합니다. Favicon은 다음과 같은 위치에 표시됩니다.
- 웹 브라우저 탭
- 웹 브라우저 방문 기록
- 바탕 화면 아이콘
- 북마크에 웹사이트 추가 시 표시되는 온라인 스토어 이름 옆
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
Favicon을 추가하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
테마 설정
아이콘을 클릭합니다.테마 버전에 따라 로고 또는 Favicon을 클릭합니다.
Favicon 이미지 섹션에서 이미지 선택을 클릭한 다음 새 이미지 또는 기존 이미지를 추가합니다.
- Shopify 관리자에 이미 업로드한 이미지를 선택하려면 이미지를 검색하거나 찾은 다음 확인란을 사용하여 선택할 수 있습니다.
- 로컬 컴퓨터에서 이미지를 선택하려면 이미지 추가를 클릭하고 로컬 컴퓨터에서 이미지를 연 다음 확인란을 사용하여 선택합니다.
완료를 클릭합니다.
선택 사항: Favicon 이미지에 대체 텍스트를 추가합니다.
- Favicon 이미지 섹션에서 편집을 클릭합니다.
- 대체 텍스트 필드에서 이미지에 대한 간단한 설명을 입력합니다.
- 저장을 클릭합니다.
저장을 클릭합니다.
iPhone
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
Favicon을 추가하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
**⋮**를 탭한 다음 테마 설정을 탭합니다.
테마 버전에 따라 로고 또는 Favicon을 탭합니다.
Favicon 이미지 섹션에서 이미지 선택을 탭한 다음 새 이미지 또는 기존 이미지를 추가합니다.
- Shopify 관리자에 이미 업로드한 이미지를 선택하려면 이미지를 검색하거나 찾은 다음 확인란을 사용하여 선택할 수 있습니다.
- 로컬 장치에서 이미지를 선택하려면 이미지 추가를 탭하고 로컬 장치에서 이미지를 연 다음 확인란을 사용하여 선택합니다.
완료를 탭합니다.
Favicon 이미지에 대체 텍스트를 추가합니다.
- Favicon 이미지 섹션에서 편집을 탭합니다.
- 대체 텍스트 필드에서 이미지에 대한 간단한 설명을 입력합니다.
- **✓**를 탭합니다.
**✓**를 탭합니다.
Android
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
Favicon을 추가하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
… 버튼을 탭한 다음 테마 설정을 탭합니다.
테마 버전에 따라 로고 또는 Favicon을 탭합니다.
Favicon 이미지 섹션에서 이미지 선택을 탭한 다음 새 이미지 또는 기존 이미지를 추가합니다.
- Shopify 관리자에 이미 업로드한 이미지를 선택하려면 이미지를 검색하거나 찾은 다음 확인란을 사용하여 선택할 수 있습니다.
- 로컬 장치에서 이미지를 선택하려면 이미지 추가를 탭하고 로컬 장치에서 이미지를 연 다음 확인란을 사용하여 선택합니다.
완료를 탭합니다.
Favicon 이미지에 대체 텍스트를 추가합니다.
- Favicon 이미지 섹션에서 편집을 탭합니다.
- 대체 텍스트 필드에서 이미지에 대한 간단한 설명을 입력합니다.
- **✓**를 탭합니다.
**✓**를 탭합니다.
색상
테마 설정에서 서로 다른 색상 구성표를 정의하고 색상 구성표 선택기를 사용하여 온라인 스토어 전체에서 서로 다른 섹션에 색상 구성표를 적용할 수 있습니다. 색상 구성표는 색상의 집합입니다. 테마에는 테마 편집기에서 언제든지 변경할 수 있는 일련의 기본 색상 구성표가 적용되어 있습니다. 브랜드 색상을 추가하여 온라인 스토어 전체에 색상 팔레트를 조화롭게 적용할 수 있습니다.
템플릿에는 개별 색상 설정이 없으므로 웹사이트 전체에서 온라인 스토어 디자인의 일관성이 유지됩니다. 템플릿은 스토어의 기본 페이지 또는 메인 콘텐츠로 간주됩니다. 스토어 전체에서 색상 배합이 다를 경우 나쁜 사용자 환경으로 이어질 수 있으며 고객은 제품을 구매하지 않고 스토어를 떠날 수 있습니다.
최대 21개의 고유한 색상 배합을 생성하고 사용자 지정하여 온라인 스토어 전체에서 서로 다른 섹션에 적용할 수 있습니다표
색상 배합
색상 구성표는 시각적으로 대표적인 방식으로 요소와 각 색상을 그룹화하는 테마 설정입니다. 색상 구성표 선택기를 사용할 수 있는 테마 전체에 적용할 수 있는 조화로운 색상 구성표로 다양한 요소에 다른 색상을 할당할 수 있습니다. 색상 구성표는 최대 21개까지 사용할 수 있습니다. 또한 구성표의 미리 보기에서 색상이 표시되는 방법을 미리 볼 수 있습니다.
| 설정 | 설명 |
|---|---|
| 배경 | 일부 섹션의 배경과 윤곽선 버튼 배경에 색상이 적용됩니다. |
| 배경 그라데이션 | 일부 섹션의 배경에 색상 그라데이션이 적용됩니다. 가능한 경우 배경 그라데이션이 배경을 대체합니다. |
| 텍스트 | 섹션 또는 블록 텍스트에 색상이 적용됩니다. |
| 단색 버튼 배경 | 기본 버튼 배경에 색상이 적용됩니다. |
| 단색 버튼 레이블 | 기본 버튼 텍스트에 색상이 적용됩니다. |
| 윤곽선 버튼 | 보조 버튼 텍스트와 테두리에 색상이 적용됩니다. |
| 그림자 | 그림자에 색상이 적용됩니다. |
색상 배합 관리
스토어의 색상 구성표 및 색상 옵션은 테마 설정 내에서 설정됩니다. 단색의 경우 색상 선택기를 사용하여 새로운 색상을 선택하거나 텍스트 필드에 색상 값을 입력합니다. 색상 필드에는 다음과 같은 색상 이름 및 값을 사용할 수 있습니다.
red,black,blue등의 색상 이름- RGB 색상 코드
- 16진수 색상 값
단계:
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
사용자 지정하려는 테마 옆의 사용자 지정을 클릭합니다.
- 아이콘을 클릭한 다음 색상을 클릭합니다.
구성표 섹션에서 기존 구성표를 클릭하거나 구성표 추가를 클릭하여 새 색상 구성표를 추가합니다.
변경하려는 콘텐츠 유형 색상의 색상 견본을 클릭합니다.
색상을 설정하려면 16진수 색상 코드를 입력하거나 색상 선택기에서 색상을 선택합니다. 색상을 투명으로 설정하려면 텍스트 필드에서 16진수 코드를 삭제합니다.
저장을 클릭합니다.
색상 구성표 적용
테마 설정에서 색상 구성표를 정의한 다음 테마의 섹션 및 블록에서 색상 구성표 선택기를 사용하여 색상 구성표를 할당할 수 있습니다. 색상 구성표 선택기는 특정 섹션, 블록 및 일반 테마 설정에서만 사용할 수 있습니다.
그라데이션
일부 테마에서는 시각적으로 흥미로운 배경 옵션을 위해 색상 그라데이션을 설정할 수 있습니다. color_background 설정은 CSS 배경 속성을 사용자 정의하는 데 사용됩니다.
그라데이션 선택기를 사용하면 색상, 그라데이션 스타일, 각도, 위치, 그라데이션 투명도를 선택할 수 있습니다. 그라데이션 선택기에서 선택한 옵션은 테마 편집기에서 실시간으로 미리 볼 수 있습니다. 또한, CSS 코드를 사용하면 배경 그라데이션을 만들 수 있으며, 여기에는 유효성 검사기도 포함됩니다.
그라데이션 설정
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
사용자 지정하려는 테마 옆의 사용자 지정을 클릭합니다.
- 아이콘을 클릭한 다음 색상을 클릭합니다.
구성표 섹션에서 편집할 기존 구성표를 클릭합니다.
배경 그라데이션과 같은 그라데이션 색상 견본 옵션을 클릭합니다.
이전에 그라데이션을 설정하지 않았다면 선택할 수 있는 몇 가지 사전 설정된 옵션이 표시됩니다. 사전 설정된 그라데이션을 선택하면 옵션 패널이 열립니다.
다음과 같은 그라데이션 옵션을 선택합니다.
- 선형 또는 방사형 그라데이션 중에서 선택합니다. 버튼을 사용하여 원하는 그라데이션 스타일을 선택합니다.
- 위쪽 및 아래쪽 화살표를 사용하여 그라데이션 각도를 설정합니다. 위쪽 또는 아래쪽 화살표를 클릭하면 각도가 5%씩 증가하거나 감소합니다.
- 그라데이션 위치는 슬라이더를 사용하거나 필드에 숫자 값을 입력하여 선택할 수 있습니다.
- 특정 색상 16진수 코드를 입력하거나 색상 슬라이더를 사용하여 색상을 선택합니다. 최근에 선택한 색상이 그라데이션 옵션 패널 아래쪽에 표시됩니다.
- 그라데이션을 불투명하게 만들려면 오른쪽의 슬라이더를 사용하여 그라데이션의 투명도를 선택합니다. 16진수 색상 코드 옆의 필드에 백분율을 입력할 수도 있습니다.
저장을 클릭합니다.
CSS를 사용한 그라데이션 설정
대부분의 CSS background 속성 값을 사용해서 배경색을 설정할 수 있습니다. 단색(예를 들어 #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) 및 hsla(0, 0%, 0%, 1)는 모두 단일 검정색 배경 생성) 또는 그라데이션(예: linear-gradient(red, green), radial-gradient(red, green) 또는 conic-gradient(red, green))에 대해 이 필드를 사용할 수 있습니다. 그라데이션을 반복할 수도 있습니다.
단계:
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
사용자 지정하려는 테마 옆의 사용자 지정을 클릭합니다.
- 아이콘을 클릭한 다음 색상을 클릭합니다.
구성표 섹션에서 편집할 기존 구성표를 클릭합니다.
편집할 그라데이션을 클릭합니다.
그라데이션 옆의 화살표를 클릭한 다음 CSS를 선택합니다.
CSS 코드 필드에 그라데이션 코드를 입력하거나 붙여넣습니다. 테마 편집기 미리보기에서 적합한 위치에 그라데이션이 표시됩니다.
저장을 클릭합니다.
그라데이션 제거
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
사용자 지정하려는 테마 옆의 사용자 지정을 클릭합니다.
- 아이콘을 클릭한 다음 색상을 클릭합니다.
구성표 섹션에서 편집할 기존 구성표를 클릭합니다.
제거할 그라데이션을 클릭합니다.
그라데이션 제거를 클릭합니다.
저장을 클릭합니다.
입력 체계
온라인 스토어의 글꼴 스타일 및 크기를 설정할 수 있습니다. 시스템 글꼴 또는 사용자 지정 글꼴을 선택할 수 있습니다.
시스템 글꼴은 사용자 컴퓨터에 이미 설치된 글꼴이므로 스토어에서 시스템 글꼴을 사용하는 것이 좋습니다. 시스템 글꼴을 사용하면 스토어의 로딩 속도에 부정적인 영향을 줄 수 있는 새 글꼴이 고객의 컴퓨터에 다운로드되는 것을 방지할 수 있습니다. 고객의 컴퓨터에 표시되는 글꼴은 운영 체제에 따라 다릅니다.
글꼴 유형 사용자 지정
사용 가능한 글꼴 목록은 Shopify의 글꼴 라이브러리를 참조하세요.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
테마 설정
아이콘을 클릭합니다.입력 체계를 클릭합니다.
스토어 머리글 또는 본문 텍스트의 글꼴 유형을 변경하려면 머리글 또는 본문 섹션에서 변경을 클릭합니다.
사용할 글꼴의 이름을 클릭한 다음 선택을 클릭합니다.
저장을 클릭합니다.
iPhone
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
**⋮**를 탭한 다음 테마 설정을 탭합니다.
입력 체계를 탭합니다.
스토어 머리글 또는 본문 텍스트의 글꼴 유형을 변경하려면 머리글 또는 본문 섹션에서 변경을 탭합니다.
사용할 글꼴의 이름을 탭한 다음 완료를 탭합니다.
**✓**를 탭합니다.
Android
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
… 버튼을 탭한 다음 테마 설정을 탭합니다.
입력 체계를 탭합니다.
스토어 머리글 또는 본문 텍스트의 글꼴 유형을 변경하려면 머리글 또는 본문 섹션에서 변경을 탭합니다.
사용할 글꼴의 이름을 탭한 다음 완료를 탭합니다.
**✓**를 탭합니다.
글꼴 크기 사용자 지정
입력 체계 테마 설정으로 제목과 본문 텍스트의 기본 글꼴 크기를 설정할 수 있습니다.
글꼴 최소 크기는 100%이고, 글꼴 최대 크기는 150%입니다. 글꼴 크기의 배율은 5%씩 증가합니다. 기본 설정은 100%입니다.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
테마 설정
아이콘을 클릭합니다.입력 체계를 클릭합니다.
제목 텍스트의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율 범위 슬라이더를 사용하여 기본 글꼴 크기를 선택합니다.
본문 텍스트의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율 범위 슬라이더를 사용하여 기본 글꼴 크기를 선택합니다.
저장을 클릭합니다.
iPhone
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
**⋮**를 탭한 다음 테마 설정을 탭합니다.
입력 체계를 탭합니다.
제목 텍스트의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율 범위 슬라이더를 사용하여 기본 글꼴 크기를 선택합니다.
본문 텍스트의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율 범위 슬라이더를 사용하여 기본 글꼴 크기를 선택합니다.
**✓**를 탭합니다.
Android
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
… 버튼을 탭한 다음 테마 설정을 탭합니다.
입력 체계를 탭합니다.
제목 텍스트의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율 범위 슬라이더를 사용하여 기본 글꼴 크기를 선택합니다.
본문 텍스트의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율 범위 슬라이더를 사용하여 기본 글꼴 크기를 선택합니다.
**✓**를 탭합니다.
레이아웃
온라인 스토어를 표시할 최대 폭을 설정할 수 있고 섹션 간 세로 및 가로 간격을 설정할 수 있습니다.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
테마 설정
아이콘을 클릭합니다.레이아웃을 클릭합니다.
페이지 너비 범위 슬라이더를 사용하여 페이지 너비를 1000px 및 1600px 사이로 선택합니다. 기본 설정은 1600px입니다.
선택 사항: 범위 슬라이더를 사용하여 페이지의 템플릿 섹션 사이에 수직 공간을 추가합니다. 섹션 사이에 최대 100px을 추가할 수 있습니다.
선택 사항: 그리드 레이아웃을 사용하는 경우 가로 간격과 세로 간격 범위 슬라이더를 사용하여 페이지의 그리드 콘텐츠 사이에 간격을 추가할 수 있습니다. 가로 간격을 추가하면 페이지의 콘텐츠 행에 최대 40px의 간격이 추가되며 세로 간격을 추가하면 페이지의 콘텐츠 열에 최대 40px의 간격이 추가됩니다.
저장을 클릭합니다.
iPhone
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
**⋮**를 탭한 다음 테마 설정을 탭합니다.
레이아웃을 탭합니다.
페이지 너비 범위 슬라이더를 사용하여 페이지 너비를 1000px 및 1600px 사이로 선택합니다. 기본 설정은 1600px입니다.
선택 사항: 범위 슬라이더를 사용하여 페이지의 템플릿 섹션 사이에 수직 공간을 추가합니다. 섹션 사이에 최대 100px을 추가할 수 있습니다.
선택 사항: 그리드 레이아웃을 사용하는 경우 가로 간격과 세로 간격 범위 슬라이더를 사용하여 페이지의 그리드 콘텐츠 사이에 간격을 추가할 수 있습니다. 가로 간격을 추가하면 페이지의 콘텐츠 행에 최대 40px의 간격이 추가되며 세로 간격을 추가하면 페이지의 콘텐츠 열에 최대 40px의 간격이 추가됩니다.
저장을 탭합니다.
Android
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
… 버튼을 탭한 다음 테마 설정을 탭합니다.
레이아웃을 탭합니다.
페이지 너비 범위 슬라이더를 사용하여 페이지 너비를 1000px 및 1600px 사이로 선택합니다. 기본 설정은 1600px입니다.
선택 사항: 범위 슬라이더를 사용하여 페이지의 템플릿 섹션 사이에 수직 공간을 추가합니다. 섹션 사이에 최대 100px을 추가할 수 있습니다.
선택 사항: 그리드 레이아웃을 사용하는 경우 가로 간격과 세로 간격 범위 슬라이더를 사용하여 페이지의 그리드 콘텐츠 사이에 간격을 추가할 수 있습니다. 가로 간격을 추가하면 페이지의 콘텐츠 행에 최대 40px의 간격이 추가되며 세로 간격을 추가하면 페이지의 콘텐츠 열에 최대 40px의 간격이 추가됩니다.
**✓**를 탭합니다.
애니메이션
애니메이션을 사용하면 온라인 스토어에 움직임과 시각적인 효과를 추가할 수 있습니다. 스크롤 시 스토어 섹션을 표시하는 페이드 인 애니메이션과 카드 및 버튼에 대한 호버 효과를 활성화할 수 있습니다.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
테마 설정
아이콘을 클릭합니다.애니메이션을 클릭합니다.
선택 사항: 스크롤 시 온라인 스토어 섹션을 표시하는 애니메이션을 활성화하려면 스크롤 시 섹션 표시를 선택합니다.
선택 사항: 카드 및 버튼에 호버 효과 애니메이션을 추가하고 호버 효과 설정에서 다음 옵션 중 하나를 선택합니다.
- 수직 리프트: 고객이 카드 또는 버튼 위에 커서를 올리면 요소가 위로 이동합니다.
- 3D 리프트: 고객이 카드 또는 버튼 위에 마우스를 올리면 요소가 앞으로 이동하여 3D 효과를 줍니다. 또한 요소 전체에서 움직이는 미묘한 빛을 발하여 치수에 또다른 레이어를 줍니다.
저장을 클릭합니다.
iPhone
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
**⋮**를 탭한 다음 테마 설정을 탭합니다.
애니메이션을 탭합니다.
선택 사항: 스크롤 시 온라인 스토어 섹션을 표시하는 애니메이션을 활성화하려면 스크롤 시 섹션 표시를 선택합니다.
선택 사항: 카드 및 버튼에 호버 효과 애니메이션을 추가하고 호버 효과 설정에서 다음 옵션 중 하나를 선택합니다.
- 수직 리프트: 고객이 카드 또는 버튼 위에 커서를 올리면 요소가 위로 이동합니다.
- 3D 리프트: 고객이 카드 또는 버튼 위에 마우스를 올리면 요소가 앞으로 이동하여 3D 효과를 줍니다. 또한 요소 전체에서 움직이는 미묘한 빛을 발하여 치수에 또다른 레이어를 줍니다.
저장을 탭합니다.
Android
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
… 버튼을 탭한 다음 테마 설정을 탭합니다.
애니메이션을 탭합니다.
선택 사항: 스크롤 시 온라인 스토어 섹션을 표시하는 애니메이션을 활성화하려면 스크롤 시 섹션 표시를 선택합니다.
선택 사항: 카드 및 버튼에 호버 효과 애니메이션을 추가하고 호버 효과 설정에서 다음 옵션 중 하나를 선택합니다.
- 수직 리프트: 고객이 카드 또는 버튼 위에 커서를 올리면 요소가 위로 이동합니다.
- 3D 리프트: 고객이 카드 또는 버튼 위에 마우스를 올리면 요소가 앞으로 이동하여 3D 효과를 줍니다. 또한 요소 전체에서 움직이는 미묘한 빛을 발하여 치수에 또다른 레이어를 줍니다.
**✓**를 탭합니다.
시각적 요소 맞춤 설정
테마 설정 페이지에서 버튼, 제품 카드, 이형 상품 등 테마 요소의 모양을 조정할 수 있습니다. 각 옵션에는 해당 요소에 관련된 설정이 포함되어 있습니다.
테마의 다음 요소에 대한 설정을 조정할 수 있습니다.
버튼: 버튼에는 슬라이드 쇼 또는 텍스트 포함 이미지 같은 섹션의 구매 유도 문구(CTA) 버튼뿐만 아니라 연락처 양식, 제품 페이지, 카트 페이지의 버튼도 포함됩니다.
이형 상품 필: 이형 상품 필을 사용하면 제품 페이지나 추천 제품 섹션에 제품의 이형 상품을 표시할 수 있습니다. 고객은 제품 페이지를 바꿀 필요 없이 원하는 이형 상품을 선택하여 제품을 카트에 추가할 수 있습니다. 온라인 스토어에서의 이형 상품 필의 표시 방식을 맞춤 설정할 수 있습니다.
입력: 입력은 고객이 입력해야 하는 상호작용이 필요한 영역입니다. 예를 들면, 수량 선택기, 이메일 가입 양식, 카트 참고 사항 등이 있습니다. 온라인 스토어 입력란의 모양을 조정할 수 있습니다.
제품 카드, 컬렉션 카드 및 블로그 카드의 설정을 사용하면 페이지 섹션에 표시될 때 각 유형의 카드 스타일을 사용자 지정할 수 있습니다. - 제품 카드: 제품 카드는 컬렉션 템플릿, 컬렉션 섹션, 검색 결과 등 여러 제품을 나열하는 테마 영역에 제품 정보를 표시합니다. - 컬렉션 카드: 컬렉션 카드는 컬렉션 목록 템플릿이나 섹션 등 여러 컬렉션을 나열하는 테마 영역에 컬렉션 정보를 표시합니다. - 블로그 카드: 블로그 카드는 블로그 템플릿, 블로그 섹션, 검색 결과 등 여러 제품을 나열하는 테마 영역에 블로그 게시물 정보를 표시합니다.
컨테이너는 콘텐츠: 컨테이너는 콘텐츠 섹션의 텍스트 요소에 사용됩니다. 슬라이드쇼, 이미지 배너 또는 여러 섹션의 열에서 사용되는 텍스트 상자를 예로 들 수 있습니다. 온라인 스토어에서 콘텐츠 컨테이너의 모양을 사용자 지정할 수 있습니다.
미디어: 미디어는 섹션의 시각적 요소를 말하며, 예를 들면 텍스트 포함 이미지 섹션의 제품 미디어나 이미지가 있습니다. 미디어에 테두리 및 그림자를 추가할 수 있습니다.
드롭다운 및 팝업 : 온라인 스토어에서 드롭다운 메뉴, 팝업 모달 및 카트 팝업의 모양을 조정할 수 있습니다.
펼침 메뉴: 펼침 메뉴는 숨겨진 대화형 컨테이너로, 축소 가능한 메뉴나 컬렉션 필터링 옵션과 같이 탭하거나 클릭하면 표시됩니다. 온라인 스토어에서 펼침 메뉴의 테두리 및 그림자를 맞춤 설정할 수 있습니다.
배지: 가격이 인하되거나 재고 수량이 0에 도달하면 할인 및 품절 배지가 제품 이미지에 자동으로 추가됩니다. 테마 설정에서 할인 및 품절 배지의 위치, 모양, 색상을 개별적으로 조정할 수 있습니다. 페이지 및 블로그 배지는 관련 검색 결과에 표시됩니다. 이러한 배지의 위치와 형태는 맞춤 설정할 수 있지만 페이지 및 블로그 배지의 색상은 변경할 수 없습니다.
브랜드 정보: 온라인 스토어에 브랜드에 대한 정보를 포함할 수 있습니다. 다음 단계를 완료하면 온라인 스토어의 바닥글에 브랜드 정보 블록을 추가할 수 있습니다.
단계:
데스크톱
iPhone
소셜 미디어
온라인 스토어 바닥글에 표시되는 소셜 미디어에 링크를 추가할 수 있습니다.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
테마 설정
아이콘을 클릭합니다.소셜 미디어를 클릭합니다.
소셜 미디어 계정에 링크를 추가하려면 관련 소셜 계정 필드에 계정의 웹사이트 주소를 입력하세요. https://instagram.com/shopify 또는 https://tiktok.com/@shopify처럼 전체 링크를 입력해야 합니다.
저장을 클릭합니다.
iPhone
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
**⋮**를 탭한 다음 테마 설정을 탭합니다.
소셜 미디어를 탭합니다.
소셜 미디어 계정에 링크를 추가하려면 관련 소셜 계정 필드에 계정의 웹사이트 주소를 입력하세요. https://instagram.com/shopify 또는 https://tiktok.com/@shopify처럼 전체 링크를 입력해야 합니다.
**✓**를 탭합니다.
Android
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
… 버튼을 탭한 다음 테마 설정을 탭합니다.
소셜 미디어를 탭합니다.
소셜 미디어 계정에 링크를 추가하려면 관련 소셜 계정 필드에 계정의 웹사이트 주소를 입력하세요. https://instagram.com/shopify 또는 https://tiktok.com/@shopify처럼 전체 링크를 입력해야 합니다.
**✓**를 탭합니다.
검색 행동
온라인 스토어에는 고객이 검색 필드에 입력을 시작할 때 제안을 표시하는 예측 검색이 포함되어 있습니다. 검색 제안은 고객이 검색 쿼리를 명확하고 구체적으로 표현할 수 있게 해주며 온라인 스토어를 둘러볼 수 있는 새로운 방법을 제공합니다. 검색 제안을 사용하면 고객이 별도의 검색 결과 목록을 보기 위해 현재 페이지를 벗어날 필요 없이 일치하는 항목을 빠르게 찾아볼 수 있게 합니다.
검색 제안 작동 방식에 대한 자세한 내용은 예측 검색을 참조하십시오.
검색 제안이 고객에게 표시되는 방식을 사용자 지정할 수 있습니다.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
테마 설정
아이콘을 클릭합니다.검색 행동을 클릭합니다.
검색 제안을 활성화하거나 비활성화하려면 검색 제안 활성화를 선택하거나 선택 취소합니다.
선택 사항: 검색 제안에서 제품 공급업체를 표시하거나 숨기려면 제품 공급업체 표시를 선택하거나 선택 취소합니다.
선택 사항: 검색 제안에서 제품 가격을 표시하거나 숨기려면 제품 가격 표시를 선택하거나 선택 취소합니다.
저장을 클릭합니다.
iPhone
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
**⋮**를 탭한 다음 테마 설정을 탭합니다.
검색 행동을 탭합니다.
검색 제안을 활성화하거나 비활성화하려면 검색 제안 활성화를 선택하거나 선택 취소합니다.
선택 사항: 검색 제안에서 제품 공급업체를 표시하거나 숨기려면 제품 공급업체 표시를 선택하거나 선택 취소합니다.
선택 사항: 검색 제안에서 제품 가격을 표시하거나 숨기려면 제품 가격 표시를 선택하거나 선택 취소합니다.
**✓**를 탭합니다.
Android
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
… 버튼을 탭한 다음 테마 설정을 탭합니다.
검색 행동을 탭합니다.
검색 제안을 활성화하거나 비활성화하려면 검색 제안 활성화를 선택하거나 선택 취소합니다.
선택 사항: 검색 제안에서 제품 공급업체를 표시하거나 숨기려면 제품 공급업체 표시를 선택하거나 선택 취소합니다.
선택 사항: 검색 제안에서 제품 가격을 표시하거나 숨기려면 제품 가격 표시를 선택하거나 선택 취소합니다.
**✓**를 탭합니다.
통화 형식
제품에서 통화 코드가 가격과 함께 표시되도록 선택할 수 있습니다.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
테마 설정
아이콘을 클릭합니다.통화 형식을 클릭합니다.
통화 코드를 표시하려면 통화 코드 표시를 선택합니다.
저장을 클릭합니다.
iPhone
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
**⋮**를 탭한 다음 테마 설정을 탭합니다.
통화 형식을 탭합니다.
통화 코드를 표시하려면 통화 코드 표시를 선택합니다.
**✓**를 탭합니다.
Android
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
… 버튼을 탭한 다음 테마 설정을 탭합니다.
통화 형식을 탭합니다.
통화 코드를 표시하려면 통화 코드 표시를 선택합니다.
**✓**를 탭합니다.
카트
온라인 스토어에서 카트의 스타일을 변경할 수 있습니다. 고객이 스토어에서 제품을 카트에 추가하면 카트가 등록기, 페이지 또는 팝업 알림으로 표시될 수 있습니다. 고객을 제품 페이지에 계속 표시하려면 서랍 또는 팝업 알림 옵션을 사용합니다. 고객을 카트 페이지로 이동하려면 페이지 옵션을 사용합니다. 고객의 카트가 비어 있는 경우 카트 서랍에 추천 컬렉션을 표시할 수 있습니다.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
테마 설정
아이콘을 클릭합니다.카트를 클릭합니다.
카트 유형 드롭다운 메뉴를 사용하여 펼침 메뉴, 페이지 또는 팝업 알림 카트 스타일을 선택합니다.
선택 사항: 고객 카트에 품목의 공급업체를 표시하려면 공급업체 표시를 선택합니다.
선택 사항: 특별 요청을 입력하거나 추가 주문 정보를 추가할 수 있는 곳에서 고객에게 텍스트 상자를 제공하려면 카트 참고 사항 활성화를 선택합니다.
선택 사항: 카트 유형으로 펼침 메뉴를 선택하는 경우 카트 서랍이 비어 있을 때 컬렉션을 카트 서랍에 표시할 수 있습니다.
- 카트 서랍 영역에서 컬렉션 선택을 클릭합니다.
- 표시할 컬렉션의 이름을 클릭한 다음 선택을 클릭합니다.
선택 사항: 카트 유형으로 펼침 메뉴를 선택하는 경우 다음 단계를 수행하여 카트 서랍의 색상 배합을 변경할 수 있습니다.
- 카트 서랍 > 색상 배합 영역에서 변경을 클릭합니다.
- 카트 서랍에 사용할 색상 배합을 선택합니다.
저장을 클릭합니다.
iPhone
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
**⋮**를 탭한 다음 테마 설정을 탭합니다.
카트를 탭합니다.
펼침 메뉴, 페이지 또는 팝업 알림 옵션에서 카트 유형을 선택하세요.
선택 사항: 고객 카트에 품목의 공급업체를 표시하려면 공급업체 표시를 선택합니다.
선택 사항: 특별 요청을 입력하거나 추가 주문 정보를 추가할 수 있는 곳에서 고객에게 텍스트 상자를 제공하려면 카트 참고 사항 활성화를 선택합니다.
선택 사항: 카트 유형으로 펼침 메뉴를 선택하는 경우 카트 서랍이 비어 있을 때 컬렉션을 카트 서랍에 표시할 수 있습니다.
- 카트 서랍 영역에서 컬렉션 선택을 탭합니다.
- 표시할 컬렉션의 이름을 탭한 다음 완료를 탭합니다.
선택 사항: 카트 유형으로 펼침 메뉴를 선택하는 경우 다음 단계를 수행하여 카트 서랍의 색상 배합을 변경할 수 있습니다.
- 카트 서랍 > 색상 배합 영역에서 변경을 탭합니다.
- 카트 서랍에 사용할 색상 배합을 선택한 다음 완료를 탭합니다.
**✓**를 탭합니다.
Android
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
… 버튼을 탭한 다음 테마 설정을 탭합니다.
카트를 탭합니다.
펼침 메뉴, 페이지 또는 팝업 알림 옵션에서 카트 유형을 선택하세요.
선택 사항: 고객 카트에 품목의 공급업체를 표시하려면 공급업체 표시를 선택합니다.
선택 사항: 특별 요청을 입력하거나 추가 주문 정보를 추가할 수 있는 곳에서 고객에게 텍스트 상자를 제공하려면 카트 참고 사항 활성화를 선택합니다.
선택 사항: 카트 유형으로 펼침 메뉴를 선택하는 경우 카트 서랍이 비어 있을 때 컬렉션을 카트 서랍에 표시할 수 있습니다.
- 카트 서랍 영역에서 컬렉션 선택을 탭합니다.
- 표시할 컬렉션의 이름을 탭한 다음 완료를 탭합니다.
선택 사항: 카트 유형으로 펼침 메뉴를 선택하는 경우 다음 단계를 수행하여 카트 서랍의 색상 배합을 변경할 수 있습니다.
- 카트 서랍 > 색상 배합 영역에서 변경을 탭합니다.
- 카트 서랍에 사용할 색상 배합을 선택한 다음 완료를 탭합니다.
**✓**를 탭합니다.
사용자 지정 CSS
사용자 지정 CSS 섹션을 사용하면 자체 CSS 코드를 입력할 수 있습니다. 예를 들면 사용 가능한 기본 설정에 더해 온라인 스토어 버튼의 모양을 사용자 지정하거나 특정 텍스트 요소에 고유한 스타일링을 적용할 수 있습니다.
테마 설정의 사용자 지정 CSS는 결제를 제외한 온라인 스토어의 모든 페이지에 영향을 미칩니다.
테마에 사용자 지정 CSS 추가에 대해 자세히 알아보세요.
테마 스타일
테마 스타일은 테마 디자이너가 선택한 설정 모음입니다. 스토어에 테마 스타일을 적용하여 스토어를 세련되게 꾸밀 수 있습니다. 모든 테마에는 기본적으로 적용되는 테마 스타일이 있습니다. 보유한 다른 테마 스타일 옵션은 사용하는 테마에 따라 다릅니다.
테마를 사용자 지정할 때는 테마 스타일 설정을 원하는 설정으로 교체합니다. 테마에 테마 스타일을 적용하면 색상, 서체 등의 현재 설정이 변경됩니다.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
테마 설정
아이콘을 클릭합니다.테마 스타일을 클릭합니다.
사용할 테마 스타일을 선택한 다음 스타일 변경을 클릭합니다.
저장을 클릭합니다.
iPhone
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
**⋮**를 탭한 다음 테마 설정을 탭합니다.
테마 스타일을 탭합니다.
사용할 테마 스타일을 선택하고 완료를 탭합니다.
**✓**를 탭합니다.
Android
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 온라인 스토어를 탭합니다.
모든 테마 관리를 탭합니다.
편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
… 버튼을 탭한 다음 테마 설정을 탭합니다.
테마 스타일을 탭합니다.
사용할 테마 스타일을 선택하고 완료를 탭합니다.
**✓**를 탭합니다.