테마 설정

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

로고

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

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

로고 사용자 지정

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

단계:

Favicon 추가

즐겨 찾는 아이콘이나 Favicon을 추가하여 온라인 스토어 브랜딩에 도움을 주기 위해 사용합니다. Favicon은 다음과 같은 위치에 표시됩니다.

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

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

단계:

색상

최대 21개의 고유한 색상 배합을 생성하고 사용자 지정하여 온라인 스토어 전체에서 서로 다른 섹션에 적용할 수 있습니다표 색상 옵션, 색상 배합, 색상 그라데이션에 대해 자세히 알아보세요.

단계:

입력 체계

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

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

글꼴 유형 사용자 지정

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

단계:

글꼴 크기 사용자 지정

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

글꼴 최소 크기는 100%이고, 글꼴 최대 크기는 150%입니다. 글꼴 크기의 배율은 5%씩 증가합니다. 기본 설정은 100%입니다.

단계:

레이아웃

온라인 스토어를 표시할 최대 폭을 설정할 수 있고 섹션 간 세로 및 가로 간격을 설정할 수 있습니다.

단계:

애니메이션

애니메이션을 사용하면 온라인 스토어에 움직임과 시각적인 효과를 추가할 수 있습니다. 스크롤 시 스토어 섹션을 표시하는 페이드 인 애니메이션과 카드 및 버튼에 대한 호버 효과를 활성화할 수 있습니다.

단계:

테두리 및 그림자

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

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

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

그림자에 사용자 지정 가능한 옵션은 다음과 같습니다.

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

버튼

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

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

단계:

이형 상품 필

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

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

단계:

입력

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

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

단계:

카드

제품 카드, 컬렉션 카드 및 블로그 카드의 설정을 사용하면 페이지 섹션에 표시될 때 각 유형의 카드 스타일을 사용자 지정할 수 있습니다. 이러한 세 가지 섹션 카드 유형의 색상, 정렬, 이미지 패딩, 테두리, 그림자를 변경할 수 있습니다.

단계:

콘텐츠 포함

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

단계:

미디어

미디어는 섹션의 시각적 요소를 말하며, 예를 들면 텍스트 포함 이미지 섹션의 제품 미디어나 이미지가 있습니다. 미디어에 테두리 및 그림자를 추가할 수 있습니다.

단계:

드롭다운 및 팝업

온라인 스토어에서 탐색 드롭다운, 팝업 모달 및 카트 팝업의 모양을 조정할 수 있습니다.

단계:

펼침 메뉴

펼침 메뉴는 숨겨진 대화형 컨테이너로, 축소 가능한 탐색 메뉴나 컬렉션 필터링 옵션과 같이 탭하거나 클릭하면 표시됩니다. 온라인 스토어에서 펼침 메뉴의 테두리 및 그림자를 사용자 지정할 수 있습니다.

단계:

배지

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

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

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

단계:

브랜드 정보

온라인 스토어에 브랜드에 대한 정보를 포함할 수 있습니다. 다음 단계를 완료하면 온라인 스토어의 바닥글에 브랜드 정보 블록을 추가할 수 있습니다.

단계:

소셜 미디어

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

단계:

검색 행동

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

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

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

단계:

통화 형식

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

단계:

카트

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

단계:

사용자 지정 CSS

사용자 지정 CSS 섹션을 사용하면 자체 CSS 코드를 입력할 수 있습니다. 예를 들면 사용 가능한 기본 설정에 더해 온라인 스토어 버튼의 모양을 사용자 지정하거나 특정 텍스트 요소에 고유한 스타일링을 적용할 수 있습니다.

테마 설정의 사용자 지정 CSS는 결제를 제외한 온라인 스토어의 모든 페이지에 영향을 미칩니다.

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

테마 스타일

테마 스타일은 테마 디자이너가 선택한 설정 모음입니다. 스토어에 테마 스타일을 적용하여 스토어를 세련되게 꾸밀 수 있습니다. 모든 테마에는 기본적으로 적용되는 테마 스타일이 있습니다. 보유한 다른 테마 스타일 옵션은 사용하는 테마에 따라 다릅니다.

테마를 사용자 지정할 때는 테마 스타일 설정을 원하는 설정으로 교체합니다. 테마에 테마 스타일을 적용하면 색상, 서체 등의 현재 설정이 변경됩니다.

단계:

변경 실행 취소 및 다시 실행

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

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

실행 취소 버튼을 클릭하여 테마에 적용한 변경 사항을 되돌리세요. 변경에는 다음 예시가 포함됩니다.

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

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

무료 체험