테마 설정

테마 설정에서는 온라인 스토어의 입력 체계, 색상, 소셜 미디어 링크 및 결제 설정을 변경할 수 있습니다.

테마 설정에서는 온라인 스토어의 입력 체계, 색상, 소셜 미디어 링크 및 결제 설정을 변경할 수 있습니다. 테마 설정을 변경하면 온라인 스토어 전체에 변경 사항이 적용됩니다.

색상

온라인 스토어의 기본 및 보조 색상 배합을 선택할 수 있습니다.

색상 설정 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 색상을 클릭합니다.
  3. 색상 선택기를 열려면 변경하려는 콘텐츠 유형 색상의 색상 견본을 클릭합니다.

  4. 저장을 클릭합니다.

색상 그라데이션을 설정하는 방법을 포함한 색상 옵션에 대해 자세히 알아보려면 색상 배합을 참조합니다.

입력 체계

온라인 스토어의 글꼴 스타일 및 크기를 설정할 수 있습니다. 시스템 글꼴 또는 사용자 지정 글꼴을 선택할 수 있습니다.

스토어에서 시스템 글꼴을 사용하는 것이 좋습니다. 시스템 글꼴을 사용하면 스토어 로드 속도에 부정적인 영향을 줄 수 있는 새 글꼴이 고객의 컴퓨터에 다운로드되는 것을 방지할 수 있습니다. 고객의 컴퓨터에 표시되는 글꼴은 운영 체제에 따라 다릅니다.

입력 체계 설정 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 입력 체계를 클릭합니다.
  3. 텍스트 유형별로 변경을 클릭하여 글꼴 선택기를 사용합니다.
  4. 검색 필드를 사용하거나 더 로드를 클릭하여 사용 가능한 글꼴을 살펴봅니다.
  5. 사용할 글꼴의 이름을 클릭한 다음 선택을 클릭합니다.
  6. 저장을 클릭합니다.

글꼴 크기 사용자 지정

입력 체계 테마 설정에서 제목과 본문 텍스트의 기본 글꼴 크기를 설정할 수 있습니다.

단계:

  1. 테마 설정 > 입력 체계를 클릭합니다.
  2. 제목의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율을 사용하여 기본 글꼴 크기를 선택합니다. 글꼴 최소 크기는 100%이고, 글꼴 최대 크기는 150%입니다. 글꼴 크기의 배율은 5%씩 증가합니다. 기본 설정은 100%입니다.
  3. 본문 텍스트의 기본 글꼴 크기를 변경하려면 글꼴 크기 배율을 사용하여 기본 글꼴 크기를 선택합니다. 글꼴 최소 크기는 100%이고, 글꼴 최대 크기는 130%입니다. 글꼴 크기의 배율은 5%씩 증가합니다. 기본 설정은 100%입니다.
  4. 저장을 클릭합니다.

레이아웃

레이아웃을 사용하면 온라인 스토어를 표시할 최대 폭을 설정할 수 있습니다.

  1. 테마 설정 > 레이아웃을 클릭합니다.
  2. 범위 슬라이더를 사용하여 페이지 폭을 1,000px과 1,600px 중에서 선택합니다. 기본 설정은 1,600px입니다.
  3. [선택 사항] 범위 슬라이더를 사용해 섹션 사이의 수직 공백을 추가할 수 있습니다. 섹션 사이에는 최대 100px을 추가할 수 있습니다.
  4. [선택 사항] 그리드 레이아웃을 사용하는 경우 수평 공백수직 공백 범위 슬라이더를 사용하여 그리드 콘텐츠 사이에 공백을 추가할 수 있습니다. 수평 공백을 추가하면 최대 40px의 여백이 행에 추가되고, 수직 공백을 추가하면 최대 40px의 여백이 열에 추가됩니다.
  5. 저장을 클릭합니다.

테두리 및 그림자

펼침 메뉴, 버튼, 이형 상품, 수량 입력과 같은 일부 대화형 콘텐츠 유형에서 테두리와 그림자를 조정할 수 있습니다.

테두리에 사용자 지정 가능한 옵션은 다음과 같습니다.

  • 두께 - 항목의 윤곽이 변경됩니다.
  • 불투명도- 항목 윤곽이 보이는 정도를 설정합니다.
  • 코너 반경 - 항목의 코너를 둥글게 해줍니다.

그림자의 옵션은 다음과 같습니다.

  • 불투명도 - 항목의 그림자가 보이는 정도를 변경합니다. 그림자 불투명도가 0%이면 그림자가 완전히 제거됩니다.
  • 수평 또는 수직 오프셋 범위 슬라이더 - 항목 주변에 그림자 위치를 이동시킵니다.
  • 흐림 범위 슬라이더 - 항목의 그림자에서 불투명도를 변경합니다.

버튼

그림자를 추가하거나 공백이나 불투명도를 변경하거나, 버튼 모양을 변경하여 온라인 스토어에서 클릭 유도(CTA) 버튼의 설정을 사용자 지정할 수 있습니다.

클릭 유도(CTA) 버튼이 포함된 온라인 스토어 샘플

버튼 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 버튼을 클릭합니다.
  3. 슬라이드 범위를 사용해 버튼 테두리의 모양을 변경합니다.
  4. 슬라이드 범위를 사용해 버튼 그림자를 변경합니다. 그림자 불투명도를 0%로 설정하면 그림자가 제거됩니다.
  5. 저장을 클릭합니다.

이형 상품 필

이형 상품 필을 사용하면 제품 페이지나 추천 제품 섹션에 제품의 이형 상품을 표시할 수 있습니다. 고객은 제품 페이지를 바꿀 필요 없이 원하는 이형 상품을 선택하여 제품을 카트에 추가할 수 있습니다.

선택 가능한 이형 상품 필이 포함된 온라인 스토어 샘플

이형 상품 필 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 이형 상품 필을 클릭합니다.
  3. 슬라이드 범위를 사용해 이형 상품 필의 테두리 모양을 변경합니다.
  4. 슬라이드 범위를 사용해 이형 상품 필의 그림자를 변경합니다. 그림자 불투명도를 0%로 설정하면 그림자가 제거됩니다.
  5. 저장을 클릭합니다.

입력

입력은 고객이 입력해야 하는 상호작용이 필요한 영역입니다. 예를 들면, 수량 선택기, 이메일 가입 양식, 카트 참고 사항 등이 있습니다. 테마 설정에서는 온라인 스토어 입력란의 모양을 조정할 수 있습니다.

수량 입력이 포함된 온라인 스토어 샘플

입력란 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 입력란을 클릭합니다.
  3. 슬라이드 범위를 사용해 입력란의 테두리 모양을 변경합니다.
  4. 슬라이드 범위를 사용해 입력란의 그림자를 변경합니다. 그림자 불투명도를 0%로 설정하면 그림자가 제거됩니다.
  5. 저장을 클릭합니다.

카드

카드는 섹션 내에서 제품 카드, 블로그 카드, 컬렉션 카드, 콜라주 카드와 같이 여러 항목을 구분하여 표시하는 영역을 말합니다. 섹션 카드의 형태, 스타일, 색상, 정렬, 이미지 패딩을 사용자 지정할 수 있습니다.

카드 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 카드를 클릭합니다.
  3. 드롭다운 메뉴를 사용하여 카드 스타일을 선택합니다.
  4. 슬라이드 범위로 이미지 패딩을 추가합니다. 이렇게 하면 카드 이미지 주위에 공간을 더합니다.
  5. 드롭다운 메뉴를 사용하여 카드의 텍스트 정렬을 설정합니다. 왼쪽, 가운데(기본값), 오른쪽 중에서 선택할 수 있습니다.
  6. 드롭다운 메뉴를 사용하여 카드의 색상 배합을 선택합니다.
  7. 슬라이드 범위를 사용해 카드 테두리의 모양을 변경합니다.
  8. 슬라이드 범위를 사용해 카드 그림자를 변경합니다. 그림자 불투명도를 0%로 설정하면 그림자가 제거됩니다.
  9. 저장을 클릭합니다.

콘텐츠 포함

컨테이너는 콘텐츠 섹션의 텍스트 부분을 말합니다. 슬라이드쇼, 이미지 배너, 여러 열 섹션에서 사용되는 텍스트 상자를 예로 들 수 있습니다. 온라인 스토어에서 콘텐츠 컨테이너의 모양을 사용자 지정할 수 있습니다.

콘텐츠 컨테이너 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 콘텐츠 컨테이너를 클릭합니다.
  3. 슬라이드 범위를 사용해 콘텐츠 컨테이너의 테두리 모양을 변경합니다.
  4. 슬라이드 범위를 사용해 콘텐츠 컨테이너의 그림자를 변경합니다. 그림자 불투명도를 0%로 설정하면 그림자가 제거됩니다.
  5. 저장을 클릭합니다.

미디어

미디어는 섹션의 시각적 요소를 말하며, 예를 들면 텍스트 포함 이미지 섹션의 제품 미디어나 이미지가 있습니다.

미디어 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 미디어를 클릭합니다.
  3. 슬라이드 범위를 사용해 미디어 테두리의 모양을 변경합니다.
  4. 슬라이드 범위를 사용해 미디어 그림자를 변경합니다. 그림자 불투명도를 0%로 설정하면 그림자가 제거됩니다.
  5. 저장을 클릭합니다.

드롭다운 및 팝업

탐색 드롭다운, 팝업 모달 및 카트 팝업의 모양을 조정합니다.

드롭다운 및 팝업 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 드롭다운 및 팝업을 클릭합니다.
  3. 슬라이드 범위를 사용해 테두리의 모양을 변경합니다.
  4. 슬라이드 범위를 사용해 그림자를 변경합니다. 그림자 불투명도를 0%로 설정하면 그림자가 제거됩니다.
  5. 저장을 클릭합니다.

펼침 메뉴

펼침 메뉴는 숨겨진 대화형 컨테이너로, 축소 가능한 탐색 메뉴나 필터링 옵션처럼 탭하거나 클릭하면 나타나거나 사라집니다.

펼침 메뉴 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 펼침 메뉴를 클릭합니다.
  3. 슬라이드 범위를 사용해 테두리의 모양을 변경합니다.
  4. 슬라이드 범위를 사용해 그림자를 변경합니다. 그림자 불투명도를 0%로 설정하면 그림자가 제거됩니다.
  5. 저장을 클릭합니다.

배지

가격이 인하되거나 재고 수량이 0에 도달하면 할인품절 배지가 제품 이미지에 자동으로 추가됩니다. 배지의 위치, 모양, 색상은 조정할 수 있습니다.

할인 및 품절 배지가 포함된 온라인 스토어 샘플

페이지블로그 배지는 관련 검색 결과에 표시됩니다. 이러한 배지의 위치와 형태는 사용자 지정할 수 있지만 색상은 지정할 수 없습니다.

배지 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 배지를 클릭합니다.
  3. 드롭다운 메뉴를 사용하여 제품 카드 내에서 배지 위치를 선택합니다. 왼쪽 상단, 오른쪽 상단, 왼쪽 하단(기본값) 또는 오른쪽 하단 중에서 선택할 수 있습니다.
  4. 코너 반경 슬라이드 범위를 사용해 둥근 코너를 추가합니다. 코너 반경을 0px로 설정하면 배지 가장자리가 사각형이 되고, 반경을 늘리면 배지의 가장자리가 둥글게 변합니다.
  5. 배지의 색상 배합을 선택합니다. 품절된 품목은 색상 배합을 대체할 수 있습니다.
  6. 저장을 클릭합니다.

아이콘

아이콘은 특정 섹션이나 블록에 추가할 수 있는 작은 이미지입니다. 테마 설정에서 아이콘의 색상 배합을 설정할 수 있습니다.

축소 가능한 열에 아이콘이 포함된 온라인 스토어 샘플

아이콘 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 아이콘을 클릭합니다.
  3. 드롭다운 메뉴를 사용해 아이콘의 기본 색상을 선택합니다. 강조 1, 강조 2, 윤곽 버튼, 텍스트 색상 중에서 스토어 아이콘 색상을 선택합니다.
  4. 저장을 클릭합니다.

소셜 미디어

제품과 블로그 게시물에 소셜 공유 버튼을 추가하고 소셜 미디어 계정 링크를 추가할 수 있습니다. 소셜 미디어 링크는 온라인 스토어 바닥글에 표시됩니다.

소셜 미디어 설정 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. 소셜 미디어를 클릭합니다.
  3. 소셜 미디어 계정에 링크를 추가하려면 계정 아래에 제공된 필드에 링크를 입력합니다. https://instagram.com/shopify 또는 https://twitter.com/shopify처럼 전체 링크를 포함해야 합니다.
  4. 저장을 클릭합니다.

검색 행동

온라인 스토어에는 고객이 검색 필드에 입력을 시작할 때 제품 제안을 표시하는 예측 검색이 포함되어 있습니다. 제품 제안은 고객이 검색 쿼리를 명확하고 구체적으로 표현할 수 있게 해주며 온라인 스토어를 둘러볼 수 있는 새로운 방법을 제공합니다. 또한 고객이 별도의 검색 결과 목록을 보기 위해 현재 페이지를 벗어날 필요 없이 일치하는 항목을 빠르게 찾아볼 수 있게 합니다.

검색에 대해 사용자 지정할 수 있는 설정은 다음과 같습니다.

  • 제품 제안 활성화 - 제품 제안을 활성화 또는 비활성화합니다.
  • 공급업체 표시 - 제품 제안에서 공급업체를 표시하거나 숨깁니다.
  • 가격 표시 - 제품 제안에서 가격을 표시하거나 숨깁니다.

입력 검색 설정 변경

  1. 테마 설정을 클릭합니다.
  2. 입력 검색 클릭
  3. 설정을 사용하여 스토어의 검색 동작을 사용자 지정합니다.
  4. 저장을 클릭합니다.

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

Favicon

즐겨 찾는 아이콘이나 Favicon을 추가하여 온라인 스토어 브랜드를 홍보할 수 있습니다. Favicon은 다음과 같은 위치에 표시됩니다.

  • 웹 브라우저 탭
  • 웹 브라우저 방문 기록
  • 바탕 화면 아이콘
  • 북마크에 추가 시 표시되는 온라인 스토어 이름 옆

Favicons에 대해 자세히 알아보십시오.

Favicon 사용자 지정

  1. 테마 설정을 클릭합니다.
  2. Favicon을 클릭합니다.
  3. Favicon 이미지 영역에서 이미지 선택을 클릭하고 다음 중 하나를 수행합니다.

    • Shopify 관리자에 이미 업로드한 이미지를 사용하려면 이미지를 클릭하여 선택하고 선택을 클릭합니다.
    • 로컬 컴퓨터에서 이미지를 사용하려면 업로드를 클릭합니다. 컴퓨터에서 이미지를 선택하고 열기를 클릭하여 업로드를 시작하십시오. 업로드가 완료되면 자동으로 선택됩니다. 선택을 클릭합니다.
    • 무료 이미지를 선택하려면 무료 이미지를 클릭하고 이미지를 검색하거나 클릭하여 선택합니다.
  4. Favicon 이미지에 대체 텍스트를 추가합니다.

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

통화 형식

제품, 카트 및 결제 가격에는 항상 통화 코드가 표시되도록 선택할 수 있습니다.

  1. 테마 설정을 클릭합니다.
  2. 통화 형식을 클릭합니다.
  3. 통화 코드를 사용하도록 설정하려면 통화 코드 표시 확인란을 클릭합니다.
  4. 저장을 클릭합니다.

카트

온라인 스토어에서 카트 스타일을 변경할 수 있습니다. 고객이 스토어에서 제품을 카트에 추가하면 카트가 펼침 메뉴, 페이지 또는 팝업 알림으로 표시될 수 있습니다. 고객의 카트가 비어 있는 경우 카트 서랍에 추천 컬렉션을 표시할 수 있습니다.

단계:

  1. 테마 설정 > 카트를 클릭합니다.
  2. 드롭다운 메뉴를 사용해 펼침 메뉴, 페이지 또는 팝업 알림의 카트 스타일을 선택합니다.
  3. 선택 사항: 고객 카트에 품목의 공급업체를 표시하려면 공급업체 표시를 클릭합니다.
  4. 선택 사항: 고객에게 특별 요청을 작성하거나 추가 주문 정보를 더하는 영역을 제공하려면 카트 참고 사항 사용 옵션을 선택합니다.

카트 유형이 펼침 메뉴로 설정된 경우 카트 서랍에 컬렉션을 표시할 수 있습니다. 선택한 컬렉션은 카트가 비어 있는 경우에만 나타납니다.

빈 카트 서랍에 컬렉션을 추가하려면 컬렉션 선택을 클릭합니다. 컬렉션을 선택한 후 변경을 클릭하여 다른 컬렉션을 선택하거나 카트 서랍에서 컬렉션을 제거합니다. 컬렉션 생성을 클릭하여 새 컬렉션을 생성할 수도 있습니다. 이 버튼을 클릭하면 테마 설정에서 Shopify 관리자의 컬렉션 영역으로 이동합니다.

결제

이 섹션에서는 스토어의 결제를 사용자 지정할 수 있습니다. 스토어의 결제 페이지에 대한 자세한 내용은 Shopify 결제를 클릭하여 확인합니다.

테마 스타일 변경

테마 스타일은 테마 디자이너가 선택한 설정 모음입니다. 스토어에 테마 스타일을 적용하여 스토어를 세련되게 꾸밀 수 있습니다. 모든 테마에는 기본적으로 적용되는 테마 스타일이 있습니다. 테마를 사용자 지정할 때는 테마 스타일 설정을 원하는 설정으로 교체합니다. 테마에 테마 스타일을 적용하면 색상, 서체 등의 현재 설정이 변경됩니다.

단계:

  1. 테마 설정 > 스타일을 클릭합니다.

  2. 드롭다운 메뉴를 사용하여 테마 스타일 옵션을 선택합니다. 제공되는 옵션은 사용하는 테마에 따라 다를 수 있습니다.

  3. 저장을 클릭합니다.

변경 실행 취소 및 다시 실행

실행 취소 버튼은 최근 변경 사항을 되돌리며 다시 실행 버튼은 실행 취소한 변경 사항을 다시 적용시킵니다. 실행 취소 버튼을 한 번 클릭할 때마다 하나씩 작업을 실행 취소할 수 있습니다. 실행 취소다시 실행 버튼은 테마 편집기 툴바에 있습니다.

테마 편집기 툴바 내 실행 취소 및 다시 실행 버튼

다음과 같은 변경 사항을 되돌리려면 실행 취소 버튼을 클릭합니다.

  • 섹션 추가, 순서 변경, 삭제
  • 테마 설정 탭에서 색상, 글꼴, 기타 설정 적용
  • 테마 스타일 다시 설정

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

무료 체험