도움말
로그인

테마 설정 사용자 지정하기

테마 편집기의 사이드바 메뉴에 있는 테마 설정 섹션에서 글꼴, 색상, 소셜 미디어 링크, 카트 페이지 등 온라인 스토어의 전반적인 설정을 맞춤 설정할 수 있습니다. 테마 설정 섹션에서 변경한 내용은 온라인 스토어 전체에 적용됩니다.

섹션 및 모듈에도 테마의 개별 섹션을 맞춤 설정할 수 있는 개별 설정이 있습니다. 섹션 및 모듈에 대해 자세히 알아보세요.

이 페이지의 내용

온라인 스토어에 비즈니스 로고를 추가할 수 있습니다. 로고는 다음 위치에 표시됩니다.

  • 모든 페이지의 머리글
  • 비밀번호 페이지

로고 맞춤 설정

로고 이미지의 최대 너비는 300px입니다.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집하려는 테마를 찾은 다음 테마 편집을 클릭합니다.

  3. 테마 설정 설정 아이콘을 클릭합니다.

  4. 로고를 클릭합니다.

  5. 로고 영역에서 이미지를 추가하거나 무료 이미지를 사용합니다.

    • 이미지를 추가하려면 이미지 선택을(를) 클릭한 다음 새 이미지 또는 기존 이미지를 추가합니다.
      • Shopify 관리자에 이미 업로드한 이미지를 사용하려면 이미지를 선택하고 완료를 클릭합니다.
      • 로컬 컴퓨터의 이미지를 사용하려면 이미지 추가를 클릭합니다. 이미지를 선택하여 추가한 다음 완료를 클릭합니다.
    • 무료 이미지를 사용하려면 무료 이미지 탐색을 클릭합니다. 이미지를 찾아 클릭하여 선택한 다음 선택을 클릭합니다.

  6. 선택 사항: 로고 이미지에 대체 텍스트를 추가합니다.

    1. 로고 영역에서 편집을 클릭합니다.
    2. 대체 텍스트 필드에 이미지에 대한 간단한 설명을 입력합니다.
    3. 저장을 클릭합니다.

  7. 선택 사항: 데스크톱 로고 너비 영역에서 범위 슬라이더를 사용하여 로고 픽셀 너비를 조정합니다.

  8. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭합니다.

  4. 편집하려는 테마를 찾은 다음 테마 편집을 탭합니다.

  5. … 또는 ⋮을(를) 탭한 다음 테마 설정을 탭합니다.

  6. 로고를 탭합니다.

  7. 로고 영역에서 이미지를 추가하거나 무료 이미지를 사용합니다.

    • 이미지를 추가하려면 이미지 선택을(를) 클릭한 다음 새 이미지 또는 기존 이미지를 추가합니다.
      • Shopify 관리자에 이미 업로드한 이미지를 사용하려면 이미지를 선택한 다음 완료를 탭합니다.
      • 로컬 장치의 이미지를 사용하려면 이미지 추가를 탭합니다. 로컬 장치에서 이미지를 선택하여 추가하고, 이미지를 탭하여 선택한 다음 완료를 탭합니다.
    • 무료 이미지를 사용하려면 무료 이미지 탐색을 탭합니다. 이미지를 찾아 탭하여 선택한 다음 완료를 탭합니다.

  8. 선택 사항: 로고 이미지에 대체 텍스트를 추가합니다.

    1. 로고 영역에서 편집을 탭합니다.
    2. 대체 텍스트 필드에 이미지에 대한 간단한 설명을 입력합니다.
    3. 저장 또는 ✓를 탭합니다.

  9. 선택 사항: 데스크톱 로고 너비 영역에서 범위 슬라이더를 사용하여 로고 픽셀 너비를 조정합니다.

  10. 저장 또는 ✓를 탭합니다.

favicon 추가

온라인 스토어 브랜딩에 도움이 되는 즐겨찾기 아이콘 또는 favicon을 추가할 수 있습니다. favicon은 다음 위치에 표시됩니다.

  • 웹 브라우저 탭
  • 웹 브라우저 기록
  • 데스크톱의 아이콘
  • 웹사이트가 북마크된 경우 온라인 스토어 이름 옆

favicon에 대해 자세히 알아보기.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. favicon을 추가할 테마를 찾은 다음 테마 편집을 클릭하십시오.

  3. 테마 설정 설정 아이콘을 클릭합니다.

  4. 테마 버전에 따라 로고 또는 Favicon을 클릭하십시오.

  5. Favicon 이미지 섹션에서 이미지 선택을 클릭한 다음 새 이미지를 추가하거나 기존 이미지를 추가하십시오.

    • Shopify 관리자에 이미 업로드한 이미지를 선택하려면 이미지를 검색하거나 찾은 다음 확인란으로 해당 이미지를 선택하십시오.
    • 로컬 컴퓨터의 이미지를 선택하려면 이미지 추가를 클릭하고 로컬 컴퓨터에서 이미지를 연 다음 확인란으로 해당 이미지를 선택하십시오.

  6. 완료를 클릭하십시오.

  7. 선택 사항: favicon 이미지에 대체 텍스트 추가:

    1. Favicon 이미지 섹션에서 편집을 클릭하십시오.
    2. 대체 텍스트 필드에 이미지에 대한 간단한 설명을 입력합니다.
    3. 저장을 클릭합니다.

  8. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭합니다.

  4. favicon을 추가할 테마를 찾은 다음 테마 편집을 탭하십시오.

  5. … 또는 ⋮을(를) 탭한 다음 테마 설정을 탭합니다.

  6. 테마 버전에 따라 로고 또는 Favicon을 탭하십시오.

  7. Favicon 이미지 섹션에서 이미지 선택을 탭한 다음 새 이미지를 추가하거나 기존 이미지를 추가하십시오.

    • Shopify 관리자에 이미 업로드한 이미지를 선택하려면 이미지를 검색하거나 찾은 다음 확인란으로 해당 이미지를 선택하십시오.
    • 로컬 장치의 이미지를 선택하려면 이미지 추가를 탭하고 로컬 장치에서 이미지를 연 다음 확인란으로 해당 이미지를 선택하십시오.

  8. 완료를 탭하십시오.

  9. favicon 이미지에 대체 텍스트 추가:

    1. Favicon 이미지 섹션에서 편집을 탭하십시오.
    2. 대체 텍스트 필드에 이미지에 대한 간단한 설명을 입력합니다.
    3. 저장 또는 ✓를 탭합니다.

  10. 저장 또는 ✓를 탭합니다.

색상

테마 설정에서 다양한 색상 구성표를 정의하고 색상 구성표 선택기를 사용하여 온라인 스토어 전체의 여러 섹션에 색상 구성표를 적용할 수 있습니다. 색상 구성표는 색상 세트입니다. 테마에는 기본 색상 구성표 세트가 적용되어 있으며 테마 편집기에서 언제든지 변경할 수 있습니다. 브랜드 색상을 추가하면 온라인 스토어 전체에 색상 팔레트를 일관적으로 적용할 수 있습니다.

웹사이트 전체에서 온라인 스토어 디자인의 일관성을 유지하기 위해 템플릿에는 개별 색상 설정이 없습니다. 템플릿은 스토어의 기본 페이지 또는 기본 콘텐츠로 간주됩니다. 스토어 전체에 다른 색상 구성표를 사용하면 사용자 환경이 저하되어 고객이 제품을 구매하지 않고 스토어를 떠날 수 있습니다.

최대 21개의 고유한 색상 구성표를 생성하고 맞춤 설정하여 온라인 스토어 전체의 다양한 섹션에 적용할 수 있습니다.

색상 구성표

색상 구성표는 요소와 각 색상을 시각적으로 표현하는 방식으로 그룹화하는 테마 설정입니다. 색상 구성표 선택기를 사용할 수 있는 테마 전체에 적용할 수 있는 일관된 색상 구성표를 통해 다양한 요소에 여러 색상을 할당할 수 있습니다. 색상 구성표는 최대 21개까지 사용할 수 있습니다. 또한 구성표 미리 보기에서 색상이 어떻게 표시되는지 미리 볼 수도 있습니다.

테마 편집기에서 색상 구성표에 적용할 수 있는 다양한 설정 목록입니다.
설정설명
배경일부 섹션의 배경과 윤곽선 버튼 배경에 색상이 적용됩니다.
배경 그라데이션일부 섹션의 배경에 색상 그라데이션이 적용됩니다. 가능한 경우 배경 그라데이션이 배경을 대체합니다.
텍스트섹션 또는 블록 텍스트에 색상이 적용됩니다.
단색 버튼 배경기본 버튼 배경에 색상이 적용됩니다.
단색 버튼 레이블기본 버튼 텍스트에 색상이 적용됩니다.
윤곽선 버튼보조 버튼 텍스트 및 테두리에 색상이 적용됩니다.
그림자그림자에 색상이 적용됩니다.

색상 구성표 관리

스토어의 색상 구성표 및 색상 옵션은 테마 설정 내에서 설정됩니다. 단색의 경우 색상 선택기를 사용하여 새 색상을 선택하거나 텍스트 필드에 색상 값을 입력합니다. 색상 필드는 다음 색상 이름 및 값을 허용합니다.

  • red, black 또는 blue와 같은 색상 이름.
  • RGB 색상 코드.
  • 16진수 색상 값.

단계:

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 맞춤 설정할 테마 옆의 테마 편집을 클릭합니다.

  3. 설정 아이콘을 클릭한 다음 색상을 클릭합니다.

  4. 구성표 섹션에서 기존 구성표를 클릭하거나 구성표 추가를 클릭하여 새 색상 구성표를 추가합니다.

  5. 변경하려는 콘텐츠 유형 색상의 색상 견본을 클릭합니다.

  6. 색상을 설정하려면 16진수 색상 코드를 입력하거나 색상 선택기에서 색상을 선택합니다. 색상을 투명하게 설정하려면 텍스트 필드에서 16진수 코드를 삭제합니다.

  7. 저장을 클릭합니다.

색상 구성표 적용

테마 설정에서 색상 구성표를 정의한 후 테마의 섹션 및 블록에서 색상 구성표 선택기를 사용하여 색상 구성표를 할당할 수 있습니다. 색상 구성표 선택기는 특정 섹션, 블록 및 일반 테마 설정에서만 사용할 수 있습니다.

색상 구성표 선택기

그라데이션

일부 테마에서는 시각적으로 흥미로운 배경 옵션을 위해 색상 그라데이션을 설정할 수 있습니다. color_background 설정은 CSS 배경 속성을 맞춤 설정하는 데 사용됩니다.

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

그라데이션 설정

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 맞춤 설정할 테마 옆의 테마 편집을 클릭합니다.

  3. 설정 아이콘을 클릭한 다음 색상을 클릭합니다.

  4. 구성표 섹션에서 편집하려는 기존 구성표를 클릭합니다.

  5. 배경 그라데이션과 같은 그라데이션 색상 견본 옵션을 클릭합니다.

  6. 이전에 그라데이션을 설정하지 않은 경우 선택할 수 있는 몇 가지 사전 설정 옵션이 표시됩니다. 사전 설정 그라데이션을 선택하여 옵션 패널을 여십시오.

  7. 그라데이션 옵션을 선택하십시오.

  • 선형 또는 방사형 그라데이션 중에서 선택하십시오. 버튼을 사용하여 원하는 그라데이션 스타일을 선택하십시오.
  • 위쪽 및 아래쪽 화살표를 사용하여 그라데이션 각도를 설정하십시오. 위쪽 또는 아래쪽 화살표를 클릭하여 각도 백분율을 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. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 맞춤 설정할 테마 옆의 테마 편집을 클릭합니다.

  3. 설정 아이콘을 클릭한 다음 색상을 클릭합니다.

  4. 구성표 섹션에서 편집하려는 기존 구성표를 클릭합니다.

  5. 편집하려는 그라데이션을 클릭하십시오.

  6. 그라데이션 옆의 화살표를 클릭한 다음 CSS를 선택하십시오.

  7. CSS 코드 필드에 그라데이션 코드를 입력하거나 붙여넣으십시오. 테마 편집기 미리 보기의 적절한 위치에 그라데이션이 표시됩니다.

  8. 저장을 클릭합니다.

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

그라데이션 제거

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 맞춤 설정할 테마 옆의 테마 편집을 클릭합니다.

  3. 설정 아이콘을 클릭한 다음 색상을 클릭합니다.

  4. 구성표 섹션에서 편집하려는 기존 구성표를 클릭합니다.

  5. 제거하려는 그라데이션을 클릭하십시오.

  6. 그라데이션 제거를 클릭하십시오.

  7. 저장을 클릭합니다.

타이포그래피

온라인 스토어 텍스트의 글꼴 스타일과 크기를 설정할 수 있습니다. 시스템 글꼴을 선택하거나 커스텀 폰트를 추가할 수 있습니다. 테마에서 사용할 수 있는 글꼴은 테마 개발자에 따라 다릅니다. 모든 무료 Shopify 테마는 Shopify의 글꼴 라이브러리에 있는 글꼴을 사용합니다.

스토어에서 시스템 글꼴을 사용하는 것을 고려해 보십시오. 시스템 글꼴은 사용자 컴퓨터에 이미 설치되어 있기 때문입니다. 시스템 글꼴을 사용하면 고객의 컴퓨터에 새 글꼴을 다운로드하지 않아도 되므로 스토어 로딩 속도에 부정적인 영향을 줄 수 있습니다. 고객 컴퓨터에 표시되는 글꼴은 고객의 운영 체제에 따라 다릅니다.

글꼴 유형 맞춤 설정

사용 가능한 글꼴 목록은 Shopify의 글꼴 라이브러리를 참조하십시오.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집하려는 테마를 찾은 다음 테마 편집을 클릭합니다.

  3. 테마 설정 설정 아이콘을 클릭합니다.

  4. 타이포그래피를 클릭하십시오.

  5. 스토어의 제목 또는 본문 텍스트의 글꼴 유형을 변경하려면 제목 또는 본문 섹션에서 변경을 클릭하십시오.

  6. 사용할 글꼴 이름을 클릭한 다음 선택을 클릭하십시오.

  7. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭합니다.

  4. 편집하려는 테마를 찾은 다음 테마 편집을 탭합니다.

  5. … 또는 ⋮을(를) 탭한 다음 테마 설정을 탭합니다.

  6. 타이포그래피를 탭하십시오.

  7. 스토어의 제목 또는 본문 텍스트의 글꼴 유형을 변경하려면 제목 또는 본문 섹션에서 변경을 탭하십시오.

  8. 사용할 글꼴 이름을 탭한 다음 완료를 탭하십시오.

  9. 저장 또는 ✓를 탭합니다.

글꼴 크기 맞춤 설정

타이포그래피 테마 설정을 사용하여 제목 및 본문 텍스트의 기본 글꼴 크기를 설정할 수 있습니다.

최소 글꼴 크기는 100%이고 최대 글꼴 크기는 150%입니다. 눈금을 한 단계씩 올릴 때마다 글꼴 크기가 5%씩 커집니다. 기본 설정은 100%입니다.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집하려는 테마를 찾은 다음 테마 편집을 클릭합니다.

  3. 테마 설정 설정 아이콘을 클릭합니다.

  4. 타이포그래피를 클릭하십시오.

  5. 제목 텍스트의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율 범위 슬라이더를 사용하여 기본 글꼴 크기를 선택하십시오.

  6. 본문 텍스트의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율 범위 슬라이더를 사용하여 기본 글꼴 크기를 선택하십시오.

  7. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭합니다.

  4. 편집하려는 테마를 찾은 다음 테마 편집을 탭합니다.

  5. … 또는 ⋮을(를) 탭한 다음 테마 설정을 탭합니다.

  6. 타이포그래피를 탭하십시오.

  7. 제목 텍스트의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율 범위 슬라이더를 사용하여 기본 글꼴 크기를 선택하십시오.

  8. 본문 텍스트의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율 범위 슬라이더를 사용하여 기본 글꼴 크기를 선택하십시오.

  9. 저장 또는 ✓를 탭합니다.

레이아웃

온라인 스토어가 표시될 최대 너비를 설정하고 섹션 간의 세로 및 가로 공간을 설정할 수 있습니다.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집하려는 테마를 찾은 다음 테마 편집을 클릭합니다.

  3. 테마 설정 설정 아이콘을 클릭합니다.

  4. 레이아웃을 클릭하십시오.

  5. 페이지 너비 범위 슬라이더를 사용하여 1000px~1600px 사이에서 페이지 너비를 선택하십시오. 기본 설정은 1600px입니다.

  6. 선택 사항: 범위 슬라이더를 사용하여 페이지의 템플릿 섹션 간 간격에 세로 공간을 추가하십시오. 섹션 간에 최대 100px까지 추가할 수 있습니다.

  7. 선택 사항: 그리드 레이아웃을 사용하는 경우 가로 공간 및 세로 공간 범위 슬라이더를 사용하여 페이지의 그리드 콘텐츠 사이에 공간을 추가하십시오. 가로 공간을 추가하면 페이지 콘텐츠 행에 최대 40px의 공간이 추가되고, 세로 공간을 추가하면 페이지 콘텐츠 열에 최대 40px의 공간이 추가됩니다.

  8. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭합니다.

  4. 편집하려는 테마를 찾은 다음 테마 편집을 탭합니다.

  5. … 또는 ⋮을(를) 탭한 다음 테마 설정을 탭합니다.

  6. 레이아웃을 탭하십시오.

  7. 페이지 너비 범위 슬라이더를 사용하여 1000px~1600px 사이에서 페이지 너비를 선택하십시오. 기본 설정은 1600px입니다.

  8. 선택 사항: 범위 슬라이더를 사용하여 페이지의 템플릿 섹션 간 간격에 세로 공간을 추가하십시오. 섹션 간에 최대 100px까지 추가할 수 있습니다.

  9. 선택 사항: 그리드 레이아웃을 사용하는 경우 가로 공간 및 세로 공간 범위 슬라이더를 사용하여 페이지의 그리드 콘텐츠 사이에 공간을 추가하십시오. 가로 공간을 추가하면 페이지 콘텐츠 행에 최대 40px의 공간이 추가되고, 세로 공간을 추가하면 페이지 콘텐츠 열에 최대 40px의 공간이 추가됩니다.

  10. 저장 또는 ✓를 탭합니다.

애니메이션

애니메이션을 사용하여 온라인 스토어에 움직임과 시각적 효과를 더할 수 있습니다. 스크롤 시 스토어 섹션을 표시하는 페이드인 애니메이션을 활성화하고 카드와 버튼에 마우스오버 효과를 적용할 수 있습니다.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집하려는 테마를 찾은 다음 테마 편집을 클릭합니다.

  3. 테마 설정 설정 아이콘을 클릭합니다.

  4. 애니메이션을 클릭하십시오.

  5. 선택 사항: 스크롤 시 온라인 스토어 섹션이 표시되는 애니메이션을 활성화하려면 스크롤 시 섹션 표시를 선택하십시오.

  6. 선택 사항: 카드 및 버튼에 마우스오버 효과 애니메이션을 추가하려면 마우스오버 효과 설정에서 다음 옵션 중 하나를 선택하십시오.

    • 수직 상승: 고객이 카드나 버튼 위에 마우스를 올리면 해당 요소가 위로 이동합니다.
    • 3D 상승: 고객이 카드나 버튼 위에 마우스를 올리면 요소가 앞으로 이동하여 3D 효과를 줍니다. 또한 요소를 가로지르는 미묘한 광택 효과가 있어 입체감을 더합니다.

  7. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭합니다.

  4. 편집하려는 테마를 찾은 다음 테마 편집을 탭합니다.

  5. … 또는 ⋮을(를) 탭한 다음 테마 설정을 탭합니다.

  6. 애니메이션을 탭하십시오.

  7. 선택 사항: 스크롤 시 온라인 스토어 섹션이 표시되는 애니메이션을 활성화하려면 스크롤 시 섹션 표시를 선택하십시오.

  8. 선택 사항: 카드 및 버튼에 마우스오버 효과 애니메이션을 추가하려면 마우스오버 효과 설정에서 다음 옵션 중 하나를 선택하십시오.

    • 수직 상승: 고객이 카드나 버튼 위에 마우스를 올리면 해당 요소가 위로 이동합니다.
    • 3D 상승: 고객이 카드나 버튼 위에 마우스를 올리면 요소가 앞으로 이동하여 3D 효과를 줍니다. 또한 요소를 가로지르는 미묘한 광택 효과가 있어 입체감을 더합니다.

  9. 저장 또는 ✓를 탭합니다.

시각적 요소 맞춤 설정

테마 설정 페이지에서 버튼, 제품 카드, 이형 상품과 같은 테마 요소의 모양을 조정할 수 있습니다. 각 옵션에는 해당 요소에 대한 관련 설정이 포함되어 있습니다.

테마의 다음 요소에 대한 설정을 조정할 수 있습니다.

  • 버튼: 버튼에는 슬라이드 쇼 또는 텍스트 포함 이미지와 같은 섹션의 구매 유도 문구(CTA) 버튼과 문의 양식, 제품 페이지, 카트 페이지의 버튼이 포함됩니다.
  • 이형 상품 필: 이형 상품 필을 사용하면 제품 페이지나 추천 제품 섹션에 제품의 이형 상품을 표시할 수 있습니다. 고객은 제품 페이지를 변경할 필요 없이 원하는 이형 상품을 선택하여 카트에 제품을 추가할 수 있습니다. 온라인 스토어에 이형 상품 필이 표시되는 방식을 사용자 지정할 수 있습니다.
  • 입력: 입력은 수량 선택기, 이메일 가입 양식 또는 카트 참고 사항과 같이 고객의 입력이 필요한 대화형 영역입니다. 온라인 스토어 입력의 디자인을 조정할 수 있습니다.
  • 제품 카드, 컬렉션 카드, 블로그 카드 설정을 통해 페이지 섹션에 표시될 때 각 카드 유형의 스타일을 사용자 지정할 수 있습니다.
    • 제품 카드: 제품 카드는 컬렉션 템플릿, 컬렉션 섹션, 검색 결과와 같이 테마에서 여러 제품을 나열하는 영역에 제품에 대한 정보를 표시합니다.
    • 컬렉션 카드: 컬렉션 카드는 컬렉션 목록 템플릿 또는 섹션과 같이 테마에서 컬렉션을 나열하는 영역에 컬렉션에 대한 정보를 표시합니다.
    • 블로그 카드: 블로그 카드는 블로그 템플릿, 블로그 섹션, 검색 결과와 같이 테마에서 여러 제품을 나열하는 영역에 블로그 게시물에 대한 정보를 표시합니다.
  • 콘텐츠 컨테이너: 컨테이너는 슬라이드 쇼의 텍스트 상자, 이미지 배너 또는 다중 열 섹션의 열과 같은 콘텐츠 섹션의 텍스트 요소에 사용됩니다. 온라인 스토어의 콘텐츠 컨테이너 디자인을 사용자 지정할 수 있습니다.
  • 미디어: 미디어는 제품 미디어나 텍스트 포함 이미지 섹션의 이미지와 같은 섹션의 시각적 구성 요소입니다. 미디어에 테두리와 그림자를 추가할 수 있습니다.
  • 드롭다운 및 팝업: 온라인 스토어에서 드롭다운 메뉴, 팝업 모달, 카트 팝업의 디자인을 조정할 수 있습니다.
  • 서랍: 서랍은 접이식 메뉴나 컬렉션 필터 옵션과 같이 탭하거나 클릭하면 표시되는 숨겨진 대화형 컨테이너입니다. 온라인 스토어에서 서랍의 테두리와 그림자를 사용자 지정할 수 있습니다.
  • 배지: 가격을 인하하거나 재고 수가 0이 되면 할인 및 품절 배지가 제품 이미지에 자동으로 추가됩니다. 테마 설정에서 할인 및 품절 배지의 위치, 모양, 색상을 개별적으로 조정할 수 있습니다. 페이지 및 블로그 배지는 관련 검색 결과에 표시됩니다. 이 배지의 위치와 모양은 사용자 지정할 수 있지만 페이지 및 블로그 배지의 색상은 변경할 수 없습니다.
  • 브랜드 정보: 온라인 스토어에 브랜드 정보를 포함할 수 있습니다. 다음 단계를 완료하면 온라인 스토어의 바닥글에 브랜드 정보 블록을 추가할 수 있습니다.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집하려는 테마 옆의 테마 편집을 클릭하십시오.

  3. 설정 아이콘을 클릭하십시오.

  4. 요소를 클릭하여 설정을 여십시오.

  5. 사용 가능한 설정을 조정하십시오. 미리 보기 창에서 테마의 다른 영역으로 이동하여 변경 사항을 검토할 수 있습니다.

  6. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 편집하려는 테마 옆의 테마 편집을 탭하십시오.

  4. 설정 아이콘을 탭하십시오.

  5. 요소를 탭하여 설정을 여십시오.

  6. 사용 가능한 설정을 조정하십시오. 미리 보기 창에서 테마의 다른 영역으로 이동하여 변경 사항을 검토할 수 있습니다.

  7. 저장 또는 ✓를 탭합니다.

소셜 미디어

온라인 스토어의 바닥글에 표시되는 소셜 미디어 계정에 대한 링크를 추가할 수 있습니다.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집하려는 테마를 찾은 다음 테마 편집을 클릭합니다.

  3. 테마 설정 설정 아이콘을 클릭합니다.

  4. 소셜 미디어를 클릭하십시오.

  5. 소셜 미디어 계정 링크를 추가하려면 관련 소셜 계정 필드에 계정의 웹사이트 주소를 입력하십시오. https://instagram.com/shopify 또는 https://tiktok.com/@shopify와 같은 전체 링크를 입력해야 합니다.

  6. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭합니다.

  4. 편집하려는 테마를 찾은 다음 테마 편집을 탭합니다.

  5. … 또는 ⋮을(를) 탭한 다음 테마 설정을 탭합니다.

  6. 소셜 미디어를 탭하십시오.

  7. 소셜 미디어 계정 링크를 추가하려면 관련 소셜 계정 필드에 계정의 웹사이트 주소를 입력하십시오. https://instagram.com/shopify 또는 https://tiktok.com/@shopify와 같은 전체 링크를 입력해야 합니다.

  8. 저장 또는 ✓를 탭합니다.

검색 동작

온라인 스토어에는 자동 완성 검색 기능이 포함되어 있어 고객이 검색 필드에 입력을 시작하면 제안이 표시됩니다. 검색 제안은 고객이 검색 쿼리를 구체화하고 상세 검색하는 데 도움을 주며, 온라인 스토어를 탐색할 수 있는 새로운 방법을 제공합니다. 또한 검색 제안을 통해 고객은 현재 페이지를 나가지 않고도 별도의 검색 결과 목록을 볼 필요 없이 일치하는 항목을 빠르게 찾아볼 수 있습니다.

검색 제안의 작동 방식에 대한 자세한 내용은 자동 완성 검색을 참조하십시오.

고객에게 검색 제안이 표시되는 방식을 사용자 지정할 수 있습니다.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집하려는 테마를 찾은 다음 테마 편집을 클릭합니다.

  3. 테마 설정 설정 아이콘을 클릭합니다.

  4. 검색 동작을 클릭하십시오.

  5. 검색 제안을 활성화하거나 비활성화하려면 검색 제안 활성화를 선택하거나 선택 취소하십시오.

  6. 선택 사항: 검색 제안에 제품 공급업체를 표시하거나 숨기려면 제품 공급업체 표시를 선택하거나 선택 취소하십시오.

  7. 선택 사항: 검색 제안에 제품 가격을 표시하거나 숨기려면 제품 가격 표시를 선택하거나 선택 취소하십시오.

  8. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭합니다.

  4. 편집하려는 테마를 찾은 다음 테마 편집을 탭합니다.

  5. … 또는 ⋮을(를) 탭한 다음 테마 설정을 탭합니다.

  6. 검색 동작을 탭하십시오.

  7. 검색 제안을 활성화하거나 비활성화하려면 검색 제안 활성화를 선택하거나 선택 취소하십시오.

  8. 선택 사항: 검색 제안에 제품 공급업체를 표시하거나 숨기려면 제품 공급업체 표시를 선택하거나 선택 취소하십시오.

  9. 선택 사항: 검색 제안에 제품 가격을 표시하거나 숨기려면 제품 가격 표시를 선택하거나 선택 취소하십시오.

  10. 저장 또는 ✓를 탭합니다.

통화 형식

제품 가격과 함께 통화 코드를 표시하도록 선택할 수 있습니다.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집하려는 테마를 찾은 다음 테마 편집을 클릭합니다.

  3. 테마 설정 설정 아이콘을 클릭합니다.

  4. 통화 형식을 클릭하십시오.

  5. 통화 코드를 표시하려면 통화 코드 표시를 선택하십시오.

  6. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭합니다.

  4. 편집하려는 테마를 찾은 다음 테마 편집을 탭합니다.

  5. … 또는 ⋮을(를) 탭한 다음 테마 설정을 탭합니다.

  6. 통화 형식을 탭하십시오.

  7. 통화 코드를 표시하려면 통화 코드 표시를 선택하십시오.

  8. 저장 또는 ✓를 탭합니다.

카트

온라인 스토어에서 카트 스타일을 변경할 수 있습니다. 고객이 스토어의 제품을 카트에 추가하면 카트가 서랍, 페이지 또는 팝업 알림으로 표시될 수 있습니다. 고객이 제품 페이지에 계속 머물도록 하려면 서랍 또는 팝업 알림 옵션을 사용하십시오. 고객을 카트 페이지로 이동시키려면 페이지 옵션을 사용하십시오. 고객의 카트가 비어 있으면 카트 서랍에 추천 컬렉션을 표시할 수 있습니다.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집하려는 테마를 찾은 다음 테마 편집을 클릭합니다.

  3. 테마 설정 설정 아이콘을 클릭합니다.

  4. 카트를 클릭하십시오.

  5. 카트 유형 드롭다운 메뉴를 사용하여 서랍, 페이지 또는 팝업 알림 카트 스타일을 선택하십시오.

  6. 선택 사항: 고객 카트에 있는 품목의 공급업체를 표시하려면 공급업체 표시를 선택하십시오.

  7. 선택 사항: 고객이 특별 요청을 입력하거나 추가 주문 정보를 추가할 수 있는 텍스트 상자를 제공하려면 카트 참고 사항 활성화를 선택하십시오.

  8. 선택 사항: 카트 유형으로 서랍을 선택한 경우, 카트 서랍이 비어 있을 때 컬렉션을 표시할 수 있습니다.

    1. 카트 서랍 영역에서 컬렉션 선택을 클릭하십시오.
    2. 표시할 컬렉션의 이름을 클릭한 다음 선택을 클릭하십시오.

  9. 선택 사항: 카트 유형으로 서랍을 선택한 경우 다음 단계를 수행하여 카트 서랍의 색상 구성표를 변경할 수 있습니다.

    1. 카트 서랍 > 색상 구성표 영역에서 변경을 클릭합니다.
    2. 카트 서랍에 사용할 색상 구성표를 선택합니다.

  10. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭합니다.

  4. 편집하려는 테마를 찾은 다음 테마 편집을 탭합니다.

  5. … 또는 ⋮을(를) 탭한 다음 테마 설정을 탭합니다.

  6. 카트를 탭합니다.

  7. 서랍, 페이지 또는 팝업 알림 옵션에서 카트 유형을 선택합니다.

  8. 선택 사항: 고객 카트에 있는 품목의 공급업체를 표시하려면 공급업체 표시를 선택하십시오.

  9. 선택 사항: 고객이 특별 요청을 입력하거나 추가 주문 정보를 추가할 수 있는 텍스트 상자를 제공하려면 카트 참고 사항 활성화를 선택하십시오.

  10. 선택 사항: 카트 유형으로 서랍을 선택한 경우, 카트 서랍이 비어 있을 때 컬렉션을 표시할 수 있습니다.

    1. 카트 서랍 영역에서 컬렉션 선택을 탭합니다.
    2. 표시하려는 컬렉션의 이름을 탭한 다음 완료를 탭합니다.

  11. 선택 사항: 카트 유형으로 서랍을 선택한 경우 다음 단계를 수행하여 카트 서랍의 색상 구성표를 변경할 수 있습니다.

    1. 카트 서랍 > 색상 구성표 영역에서 변경을 탭합니다.
    2. 카트 서랍에 사용할 색상 구성표를 선택한 다음 완료를 탭합니다.

  12. 저장 또는 ✓를 탭합니다.

사용자 지정 CSS

사용자 지정 CSS 섹션에서는 자신만의 CSS 코드를 입력하여 사용 가능한 기본 설정 이상으로 온라인 스토어의 버튼 모양을 사용자 지정하거나 특정 텍스트 요소에 고유한 스타일을 적용할 수 있습니다.

테마 설정의 사용자 지정 CSS는 체크아웃을 제외한 온라인 스토어의 모든 페이지에 영향을 줍니다.

테마에 사용자 지정 CSS 추가에 대해 자세히 알아보세요.

테마 스타일

테마 스타일은 테마 디자이너가 선택한 설정 모음입니다. 테마 스타일을 스토어에 적용하여 세련된 룩앤필을 부여할 수 있습니다. 모든 테마에는 기본적으로 테마 스타일이 적용되어 있습니다. 사용할 수 있는 다른 테마 스타일 옵션은 사용 중인 테마에 따라 다릅니다.

테마를 사용자 지정하면 테마 스타일 설정을 자신만의 설정으로 바꿉니다. 테마에 테마 스타일을 적용하면 색상 및 타이포그래피와 같은 현재 설정이 변경됩니다.

단계:

데스크톱

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집하려는 테마를 찾은 다음 테마 편집을 클릭합니다.

  3. 테마 설정 설정 아이콘을 클릭합니다.

  4. 테마 스타일을 클릭합니다.

  5. 사용하려는 테마 스타일을 선택한 다음 스타일 변경을 클릭합니다.

  6. 저장을 클릭합니다.

모바일

  1. Shopify 앱에서 메뉴 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭합니다.

  4. 편집하려는 테마를 찾은 다음 테마 편집을 탭합니다.

  5. … 또는 ⋮을(를) 탭한 다음 테마 설정을 탭합니다.

  6. 테마 스타일을 탭합니다.

  7. 사용하려는 테마 스타일을 선택한 다음 완료를 탭합니다.

  8. 저장 또는 ✓를 탭합니다.