Dawn 색상 배합

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

색상 배합 관리

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

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

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

색상 그라데이션의 경우 색상 상자를 클릭한 후 필드에 그라데이션 CSS 코드를 입력하거나 붙여넣습니다(예: linear-gradient(red, green), radial-gradient(red, green) 또는 conic-gradient(red, green)). 그라데이션 CSS 코드에 특수 문자, 이미지 또는 URL이 포함된 경우 테마 편집기에 오류 메시지가 표시됩니다. CSS 코드가 올바르면 테마 편집기 미리 보기에서 적절한 위치에 선택한 그라데이션이 표시됩니다.

테마 편집기의 그라데이션 CSS 코드 필드

색상 설정

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

설정 설명
텍스트 섹션 또는 블록 텍스트에 색상을 적용할 수 있습니다.
강조 1 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다.
강조 1 그라데이션 그라데이션 CSS 코드를 입력하여 그라데이션을 생성합니다.
강조 2 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다.
강조 2 그라데이션 그라데이션 CSS 코드를 입력하여 그라데이션을 생성합니다.
배경 1 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다.
배경 1 그라데이션 그라데이션 CSS 코드를 입력하여 그라데이션을 생성합니다.
배경 2 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다.
배경 2 그라데이션 그라데이션 CSS 코드를 입력하여 그라데이션을 생성합니다.
서로 바꾸기 임팩트 버튼과 일부 섹션의 배경에 색상을 적용할 수 있습니다. 배경 1을 텍스트 색상으로, 텍스트 색상을 배경 색상으로 사용합니다.

사용된 색상 배합을 선택할 수 있는 일부 설정에서 그라데이션도 사용할 수 있습니다. 예를 들어 Shopify의 첫 번째 무료 Online Store 2.0 테마인 Dawn에서는 브랜드 색상의 그라데이션을 설정하고 표준 강조 및 배경색 옵션 대신 이를 사용할 수 있습니다.

그라데이션 설정

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

배경색 설정은 CSS 코드를 사용하고, CSS 코드에 이미지, 특수 문자 또는 URL이 포함된 경우 경고를 표시하는 유효성 검사기가 포함되어 있습니다. CSS 배경 코드가 올바르면 테마 편집기가 미리 보기 패널에 그라데이션 미리 보기를 표시합니다.

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

무료 체험