[쇼피파이] 26장. 테마 - 용어와 도구 소개

쇼피파이를 이용해 온라인 스토어를 운영하는 과정에서 가장 중요한 부분중 하나는 스토어의 디자인입니다.

고객에게 첫인상을 주는 스토어의 외관은 브랜드 이미지와 직결되며, 매출과 사용자 경험에도 큰 영향을 미칩니다.

쇼피파이는 이를 위해 테마를 제공하고 있으며, 사용자는 이 테마를 통해 손쉽게 스토어의 디자인을 커스터마이징할 수 있습니다.

 

이 글에서는 쇼피파이 테마의 설치 방법, 관리 도구, 사용자 지정 등 테마와 관련된 기본 개념과 주요 기능에 대해 알아보고, 테마 변경 및 작업 시 유의해야 할 사항들을 소개하겠습니다.

---

1. 테마 설치하기

쇼피파이 스토어를 만들 때 가장 먼저 할 일 중 하나가 테마를 선택하고 설치하는 것입니다.

쇼피파이는 기본 제공 테마뿐만 아니라, 무료 및 유료 테마를 제공하여 스토어 디자인을 손쉽게 변경할 수 있습니다.

• 테마 설치 방법
  • 쇼피파이 관리자에서 온라인 스토어 > 테마로 이동합니다.
  • 테마 스토어로 이동하여 원하는 테마를 선택하고 설치 버튼을 클릭합니다.
  • 설치 후, 테마가 활성화되고, 스토어의 디자인이 변경됩니다.

2. 테마 관리 도구

설치한 테마는 쇼피파이 관리자에서 쉽게 관리할 수 있습니다.

현재 사용 중인 테마 외에도 여러 테마를 저장해 두고 필요할 때마다 변경할 수 있습니다.

• 테마 관리 도구
  • 온라인 스토어 > 테마에서 설치된 테마 목록을 확인하고, 언제든지 테마를 전환할 수 있습니다.
  • 현재 사용 중인 테마를 복제하거나, 다른 테마로 교체하는 작업을 할 수 있습니다.
  • 각 테마에 대해 미리보기를 통해 변경된 내용을 실시간으로 확인할 수 있습니다.

3. 테마 사용자 지정

테마 설치 후, 스토어의 디자인과 기능을 스토어에 맞게 사용자 지정할 수 있습니다.

테마 사용자 지정 도구를 통해 레이아웃, 색상, 글꼴 등 다양한 요소를 조정할 수 있습니다.

• 테마 사용자 지정 방법
  • 온라인 스토어 > 테마 > 사용자 지정을 클릭하여 테마 편집 페이지로 이동합니다.
  • 각 페이지의 레이아웃과 디자인 요소를 드래그 앤 드롭 방식으로 수정할 수 있습니다.
  • 헤더, 풋터, 사이드바 등 주요 섹션을 커스터마이징하고, 각 섹션의 콘텐츠와 스타일을 설정합니다.

4. 테마 설정 및 스토어 공통 영역 디자인

쇼피파이 테마는 헤더, 풋터, 네비게이션과 같은 공통 영역의 디자인을 쉽게 수정할 수 있는 옵션을 제공합니다.

• 테마 설정
  • 헤더와 풋터 설정: 로고 추가, 메뉴 설정, 소셜 미디어 링크 삽입 등
  • 컬럼 스킨 및 글꼴 설정: 브랜드 이미지에 맞는 색상과 글꼴을 지정하여 일관된 스토어 디자인을 구현할 수 있습니다.
  • 상품 페이지, 장바구니, 결제 페이지와 같은 공통 영역의 디자인을 커스터마이징하여 전체적인 사용자 경험을 향상시킬 수 있습니다.

5. 기본 제공 페이지 수정

쇼피파이는 제품 페이지, 블로그, 장바구니 페이지 등 기본 페이지를 제공합니다.

이러한 페이지들은 테마 사용자 지정 도구를 통해 수정할 수 있습니다.

• 페이지 수정 방법
  
  • 온라인 스토어 > 테마 > 사용자 지정에서 각 페이지의 레이아웃과 스타일을 변경합니다.
  • 필요한 경우 코드를 수정하여 페이지를 맞춤화할 수 있습니다.
    • 이때 HTML, CSS, Liquid 템플릿 언어에 대한 기본적인 이해가 필요할 수 있습니다.
  • 제품 페이지, 장바구니 페이지, 결제 페이지 등 중요한 페이지의 디자인을 최적화하여 더 나은 사용자 경험을 제공합니다.

테마 사용자 지정의 좌, 우측에서 각각 확인할 수 있음

Edit code

6. 테마 작업 전 준비 사항

테마 변경 작업을 시작하기 전에 준비할 사항들이 있습니다.

잘못된 설정이 스토어에 영향을 미치지 않도록 대비해야 합니다.

• 테마 작업 전 준비 사항
  • 백업: 테마를 변경하기 전에 항상 기존 테마를 복사하여 백업을 만들어 둡니다.
  • 테마 미리보기: 새로운 테마를 실제로 적용하기 전에 미리보기 모드를 통해 변경 사항을 확인하고, 수정할 부분을 사전에 파악합니다.
  • 커스터마이징 계획: 스토어에 맞는 맞춤화 작업을 하기 위해 어떤 요소를 변경할 것인지 계획하고, 필요한 리소스(이미지, 글꼴 등)를 준비합니다.

복사 또는 다운로드 가능

View 클릭 시 테마 미리 보기

---

쇼피파이의 테마를 통해 스토어의 외관을 맞춤형으로 디자인할 수 있습니다.

테마 설치, 관리, 사용자 지정 과정을 거쳐 스토어의 브랜드 이미지에 맞는 디자인을 완성할 수 있으며, 이를 통해 고객에게 더 나은 경험을 제공할 수 있습니다!

 

<틀린 내용, 궁금한 사항 댓글 남겨주세요>