색상 배합

서식있는 텍스트, 이미지 배너, 컬렉션 목록 등 테마에 포함된 여러 섹션에 사용할 색상 배합을 테마 설정에 지정된 색상에서 선택할 수 있습니다. 테마에 적용되어 있는 기본 색상은 테마 편집기에서 언제든지 변경할 수 있습니다. 브랜드 색상을 추가해서 온라인 스토어에서 색상 팔레트를 잘 어울리게 적용할 수 있습니다.

색상 설정

이미지 배경 및 이미지 패딩은 테마 편집기에서 설정할 수 있습니다. 드롭다운 메뉴를 사용하여 강조 1, 강조 1 그라데이션, 강조 2, 강조 2 그라데이션, 배경 1, 배경 1 그라데이션, 배경 2, 배경 2 그라데이션 또는 서로 바꾸기 중에서 선택합니다. 테마 편집기의 미리 보기 패널에서 선택한 색상 배합을 미리 볼 수 있습니다.

설정 설명
텍스트 섹션 또는 블록 텍스트에 색상을 적용할 수 있습니다.
강조 1 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다.
강조 1 그라데이션 사전 설정된 그라데이션을 선택하거나 그라데이션 선택기를 사용하여 강조 그라데이션을 사용자 지정합니다.
강조 2 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다.
강조 2 그라데이션 사전 설정된 그라데이션을 선택하거나 그라데이션 선택기를 사용하여 강조 그라데이션을 사용자 지정합니다.
배경 1 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다.
배경 1 그라데이션 사전 설정된 그라데이션을 선택하거나 그라데이션 선택기를 사용하여 배경 그라데이션을 사용자 지정합니다.
배경 2 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다.
배경 2 그라데이션 사전 설정된 그라데이션을 선택하거나 그라데이션 선택기를 사용하여 배경 그라데이션을 사용자 지정합니다.
서로 바꾸기 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다. 배경 1을 텍스트 색상으로, 텍스트 색상을 배경 색상으로 사용합니다.

색상 배합을 선택할 수 있는 일부 설정에서는 그라데이션도 사용할 수 있습니다. 예를 들어, Dawn에서는 표준 강조 및 배경색 옵션 대신 브랜드 색상의 그라데이션을 설정하여 사용할 수 있습니다.

색상 배합 관리

스토어 색상 배합은 테마 설정 내에서 설정됩니다.

  1. 사이드바 하단에서 테마 설정을 클릭합니다.
  2. 색상을 클릭합니다.
  3. 테마에서 색상을 변경하려면 색상을 클릭하고 색상 선택기를 사용하거나 텍스트 필드에 새 색상의 값을 입력합니다.
  4. 저장을 클릭합니다.

단색의 경우 색상 선택기를 사용해서 새 색상을 선택하거나 텍스트 필드에 색상의 값을 입력합니다. 이 필드에는 색상 이름(예: red, black, blue), RGB 또는 16진수 색상 값이 사용됩니다.

그라데이션

Dawn에서는 색상 그라데이션을 설정하여 시각적으로 흥미로운 배경 옵션을 사용할 수 있습니다. color_background 설정을 사용하면 CSS 배경 속성을 사용자 지정할 수 있습니다.

그라데이션 선택기를 사용하면 색상, 그라데이션 스타일, 각도, 위치, 그라데이션 투명도를 선택할 수 있습니다. 그라데이션 선택기에서 선택한 옵션은 테마 편집기에서 실시간으로 미리 볼 수 있습니다. 또한, CSS 코드를 사용하면 배경 그라데이션을 만들 수 있으며, 여기에는 유효성 검사기도 포함됩니다.

그라데이션 설정

  1. 테마 설정을 클릭합니다.
  2. 색상을 클릭합니다.
  3. 그라데이션 옵션 중에서 선택합니다.

    이전에 그라데이션을 설정하지 않았다면 선택할 수 있는 몇 가지 사전 설정된 옵션이 표시됩니다. 사전 설정된 그라데이션을 선택하면 옵션 패널이 열립니다.

    이전에 그라데이션을 설정한 경우에는 그라데이션 옵션을 열면 옵션 패널이 바로 열립니다.

  4. 다음과 같은 그라데이션 옵션을 선택합니다.

  • 선형 또는 원형 그라데이션 중에서 선택할 수 있습니다. 버튼을 사용하여 원하는 그라데이션을 선택합니다.
  • 그라데이션의 각도는 위/아래 화살표를 사용하여 설정할 수 있습니다. 위/아래 기호를 클릭하면 각각 5%씩 각도가 증가하거나 감소합니다.
  • 그라데이션 위치는 슬라이더를 사용하거나 필드에 숫자 값을 입력하여 선택할 수 있습니다.
  • 색조는 16진수 색상 코드를 입력하거나 색상 슬라이더를 사용하여 선택할 수 있습니다. 최근에 선택한 색상이 그라데이션의 옵션 패널 하단에 표시됩니다.
  • 그라데이션에 투명색을 사용하려면 오른쪽의 슬라이더를 사용해 투명 그라데이션을 선택합니다. 또는, 16진수 색상 코드 옆에 있는 필드에 백분율로 입력할 수 있습니다.
  1. 저장을 클릭합니다.

테마 편집기의 그라데이션 선택기

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))에 대해 이 필드를 사용할 수 있습니다. 그라데이션을 반복할 수도 있습니다.

단계:

  1. 테마 설정을 클릭합니다.
  2. 색상을 클릭합니다.
  3. 편집할 그라데이션을 클릭합니다.
  4. 그라데이션 옆에 있는 화살표를 클릭한 다음 CSS를 선택합니다.
  5. CSS 코드 필드에 그라데이션 코드를 입력하거나 붙여넣습니다. 테마 편집기 미리보기에서 적합한 위치에 그라데이션이 표시됩니다.
  6. 저장을 클릭합니다.
    테마 편집기의 그라데이션 CSS 코드 필드

그라데이션 제거

그라데이션 재설정 또는 제거:

  1. 테마 설정을 클릭합니다.
  2. 색상을 클릭합니다.
  3. 편집할 그라데이션을 클릭합니다.
  4. 그라데이션 제거를 클릭합니다.
  5. 저장을 클릭합니다.

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

무료 체험