색상 배합
서식있는 텍스트, 이미지 배너, 컬렉션 목록 등 테마에 포함된 여러 섹션에 사용할 색상 배합을 테마 설정에 지정된 색상에서 선택할 수 있습니다. 테마에 적용되어 있는 기본 색상은 테마 편집기에서 언제든지 변경할 수 있습니다. 브랜드 색상을 추가해서 온라인 스토어에서 색상 팔레트를 잘 어울리게 적용할 수 있습니다.
색상 설정
이미지 배경 및 이미지 패딩은 테마 편집기에서 설정할 수 있습니다. 드롭다운 메뉴를 사용하여 강조 1, 강조 1 그라데이션, 강조 2, 강조 2 그라데이션, 배경 1, 배경 1 그라데이션, 배경 2, 배경 2 그라데이션 또는 서로 바꾸기 중에서 선택합니다. 테마 편집기의 미리 보기 패널에서 선택한 색상 배합을 미리 볼 수 있습니다.
| 설정 | 설명 |
|---|---|
| 텍스트 | 섹션 또는 블록 텍스트에 색상을 적용할 수 있습니다. |
| 강조 1 | 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다. |
| 강조 1 그라데이션 | 사전 설정된 그라데이션을 선택하거나 그라데이션 선택기를 사용하여 강조 그라데이션을 사용자 지정합니다. |
| 강조 2 | 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다. |
| 강조 2 그라데이션 | 사전 설정된 그라데이션을 선택하거나 그라데이션 선택기를 사용하여 강조 그라데이션을 사용자 지정합니다. |
| 배경 1 | 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다. |
| 배경 1 그라데이션 | 사전 설정된 그라데이션을 선택하거나 그라데이션 선택기를 사용하여 배경 그라데이션을 사용자 지정합니다. |
| 배경 2 | 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다. |
| 배경 2 그라데이션 | 사전 설정된 그라데이션을 선택하거나 그라데이션 선택기를 사용하여 배경 그라데이션을 사용자 지정합니다. |
| 서로 바꾸기 | 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다. 배경 1을 텍스트 색상으로, 텍스트 색상을 배경 색상으로 사용합니다. |
색상 배합을 선택할 수 있는 일부 설정에서는 그라데이션도 사용할 수 있습니다. 예를 들어, Dawn에서는 표준 강조 및 배경색 옵션 대신 브랜드 색상의 그라데이션을 설정하여 사용할 수 있습니다.
색상 배합 관리
스토어 색상 배합은 테마 설정 내에서 설정됩니다.
- Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 테마 설정을 클릭합니다.
- 색상을 클릭합니다.
- 테마에서 색상을 변경하려면 색상을 클릭하고 색상 선택기를 사용하거나 텍스트 필드에 새 색상의 값을 입력합니다.
- 저장을 클릭합니다.
단색의 경우 색상 선택기를 사용해서 새 색상을 선택하거나 텍스트 필드에 색상의 값을 입력합니다. 이 필드에는 색상 이름(예: red, black, blue), RGB 또는 16진수 색상 값이 사용됩니다.
그라데이션
Dawn에서는 색상 그라데이션을 설정하여 시각적으로 흥미로운 배경 옵션을 사용할 수 있습니다. color_background 설정을 사용하면 CSS 배경 속성을 사용자 지정할 수 있습니다.
그라데이션 선택기를 사용하면 색상, 그라데이션 스타일, 각도, 위치, 그라데이션 투명도를 선택할 수 있습니다. 그라데이션 선택기에서 선택한 옵션은 테마 편집기에서 실시간으로 미리 볼 수 있습니다. 또한, CSS 코드를 사용하면 배경 그라데이션을 만들 수 있으며, 여기에는 유효성 검사기도 포함됩니다.
그라데이션 설정
- Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 테마 설정을 클릭합니다.
- 색상을 클릭합니다.
그라데이션 옵션 중에서 선택합니다.
다음과 같은 그라데이션 옵션을 선택합니다.
- 선형 또는 원형 그라데이션 중에서 선택할 수 있습니다. 버튼을 사용하여 원하는 그라데이션을 선택합니다.
- 그라데이션의 각도는 위/아래 화살표를 사용하여 설정할 수 있습니다. 위/아래 기호를 클릭하면 각각 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 관리자에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 테마 설정을 클릭합니다.
- 색상을 클릭합니다.
- 편집할 그라데이션을 클릭합니다.
- 그라데이션 옆에 있는 화살표를 클릭한 다음 CSS를 선택합니다.
- CSS 코드 필드에 그라데이션 코드를 입력하거나 붙여넣습니다. 테마 편집기 미리보기에서 적합한 위치에 그라데이션이 표시됩니다.
-
저장을 클릭합니다.
그라데이션 제거
그라데이션 재설정 또는 제거:
- Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- Shopify 앱에서 스토어를 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 테마 설정을 클릭합니다.
- 색상을 클릭합니다.
- 편집할 그라데이션을 클릭합니다.
- 그라데이션 제거를 클릭합니다.
- 저장을 클릭합니다.