해외 쇼핑몰 제작-(7)Shopify Theme 설치

Shopify 의 Theme

Shopify 역시 쇼핑몰 솔루션이기 때문에 각종 Theme를 선택하여 적용 가능합니다.
Theme를 이용하여 쇼핑몰의 외관과 전반적인 형태를 꾸미는 작업은 생각보다 그리 어렵지 않습니다. 다른 솔루션들과 마찬가지로 Theme 변경의 실시간 적용 화면을 확인할 수 있어, 각종 설정을 확인하고 적용하며 테스트 해 보기 수월합니다.

이번 글에서는 Theme에 관련된 부분에서 가장 중요한, Theme 스토어에 방문해서 Theme를 고르고 설치하는 방법에 대해 다루고, 다음 글에서는 세부 설정을 완료하여 적용(Publish)하는 것에 대해 알아보겠습니다.

Shopify 에서 Theme의 특징

1. 설치!?

Shopify 에서 Theme의 설치는 적용(Publish)과 다릅니다.
내 스토어 Admin의 Theme 설정 페이지로 다운로드 받는 것을 설치라고 합니다. 받아 둔 Theme는 해당 Theme 안에서 색상, 화면, 구성 등을 바꾸는 것이 가능합니다. 기본적으로 Wordpress의 Theme Activation과 비슷하다고 볼 수 있습니다. 수정한 Theme를 Publish 해야 비로소 내 쇼핑몰에 적용이 되는 것입니다.

2. Theme를 바꿔도 상품은 그대로!

Shopify와 대부분의 쇼핑몰 솔루션에서는 Theme는 상품이나 메뉴 등의 쇼핑몰 기본 설정과 별도로 적용됩니다. 즉, Theme를 교체한다고 해서 상품이나 메뉴 자체가 바뀌거나 사라지지 않는다는 의미입니다. 상품에 대한 설정을 고유의 설정대로 존재하며, Theme마다 지니고 있는 특성은 외관 설정의 일부분만 바뀌는 정도로 적용됩니다.

3. 유/무료와 다양한 Theme

Theme Store에 들어가 보면 Shopify에서 무료로 제공하는 기본 Theme와, 디자이너들이 제작하여 판매하고 있는 유료 Theme들이 있습니다. 또한 Third Party Theme들도 존재하여 특색 있는 여러 Theme의 선택이 가능합니다. 다만 이 경우에는 Shopify의 지원을 받기 까다로운 단점이 있습니다.

4. 모바일 반응형 웹 페이지

모바일 쇼핑은 이제는 당연할 정도로 널리 퍼져있으며, 쇼핑몰에서도 모바일에 대응하는 웹 페이지는 필수적입니다. 다만 독자적으로 제작된 모바일 웹인지 반응형 웹인지는 각각 장단점이 존재하고 특징이 다릅니다. Shopify Theme에서는 모바일 반응형 웹 페이지를 기본적으로 제공합니다. 장점으로는 별도로 모바일용 웹 페이지를 제작하거나 특별히 신경 쓰지 않아도 기기에 따라 적절한 화면으로 반응하여 표시된다는 점입니다.

5. Theme에 따라 지원하는 특징이 다를 수 있다.

기본적인 쇼핑몰의 구성 요소들은 공통으로 갖고 있지만, Theme에 따라 특정 기능이 추가된 경우도 있습니다. 예를 들면 어떤 Theme에서는 메뉴의 위치를 Top, 즉 화면 최 상단에만 배치할 수 있는 반면, 어떤 Theme에서는 Left Side Menu 기능을 지원하여 메뉴를 좌측에 배치할 수 있는 것도 있습니다.

Theme 설정 페이지 진입

Theme 설정 페이지는 Admin 페이지에서 Online Store 메뉴-> Themes 메뉴로 진입합니다 (단축키 G W T)
현재 적용중인 Theme의 PC페이지와 모바일 페이지가 미리 보기 화면으로 나타납니다. 아직은 Theme를 제대로 설정한 것이 아니기 때문에, 무채색의 밋밋한 미리 보기가 출력됩니다. 이 화면을 보기 좋게 만드는 것이 Theme의 주요 기능입니다.

Theme 설정페이지에서는 다음과 같은 작업이 가능합니다.
– Shopify Theme 스토어 방문 : 스토어에서는 유/무료 Theme의 미리 보기와 설치가 가능합니다.
설치된 Theme들 보기(확인) : 다운로드 받아놓은 Theme를 보고 수정할 수 있습니다. 20개의 Theme를 저장할 수 있습니다.
– Theme 설치 : 스토어를 통한 다운로드 설치 혹은 외부 Theme 등의 설치가 가능합니다.
– Theme 적용하기 (Publish)와 해제(Unpublish) : 보유하고 있는 Theme들을 적용하여 내 쇼핑몰의 외관으로 설정하거나 기존에 적용된 Theme를 해제(Unpublish) 할 수 있습니다.
– Theme 커스터마이징 : 기본적으로는 Theme의 Section들을 수정하여 화면을 구성하고 입맛에 맞게 바꿀 수 있습니다. 또한 Html/CSS등의 수정도 가능합니다.
– Theme 언어 번역 : Theme의 메뉴들을 다른 언어로 바꿀 수 있습니다. 물론 추가기능(APP)에서도 번역을 지원합니다.
– Theme 내보내기, 복사하기, 지우기 등 : 수정해 둔 Theme들을 따로 내보내서 저장하고, 복사나 삭제도 가능합니다.

Theme 스토어

Shopify Theme 스토어는 Theme 설정 페이지에서 진입 가능합니다. 하면 위쪽과 아래쪽의 Visit Theme Store를 클릭하여 스토어에 진입합니다. 물론 https://themes.shopify.com/ 에 접속하여 들어갈 수 있습니다.

메뉴는 전체 Theme를 보는 All과, 무료Theme인 Free, 유료 Theme인 Paid 메뉴가 있으며, 유.무료와 무관하게 특정 판매 아이템을 기준으로 제작된 Theme(All industries->세부메뉴) 등을 선택할 수 있습니다. 각 Theme명 아래에는 Style이 몇 개인지 표시되어 있습니다. Style은 Theme의 기능의 차이라기 보다는 외관의 색, 글씨체, 글자 크기, 배경 등의 디자인적 요소를 미리 구성하여 포함하는 것입니다. 일종의 프리셋(Preset)이라고 볼 수 있습니다. 기능상 크게 중요한 점은 아니지만 외관 설정에서 미적 감각을 살리고, 쇼핑몰의 느낌을 쉽게 바꿀 수 있는 기능입니다.

Theme의 색상분위기를 미리 저장 해 둔 Style들

각 Theme는 구매하기 전에 Preview in your store 버튼으로 내 스토어에 해당 Theme를 적용 한 화면의 미리 보기가 가능합니다. 혹은 View demo 기능으로 해당 Theme의 예시 페이지를 볼 수 있습니다. 또한 Demo 페이지에서는 모바일 페이지에서의 미리보기 화면도 제공합니다.

내스토어에 적용된 미리 보기가 가능합니다.

Theme의 선택

Theme 선택은 생각보다 시간을 많이 잡아먹을 수 있습니다. 사실상 중요한 것은 컨텐츠입니다.
미리 보기 화면으로 아무리 멋지고 예쁜 Theme를 발견했다 하더라도, 실제 내 쇼핑몰에 적용하면 기대와는 크게 다른 모습이 나타날 수 있습니다. 컨텐츠가 제대로 준비되지 않은 상태에서는 당연한 결과입니다.
쇼핑몰을 구성하는 화면을 살펴 보겠습니다. Theme의 기능은 화면의 각 요소들을 배치하는 것일 뿐, 실제로 배치되는 내용들은 내가 올린 제품들입니다. 특히 사진들이죠.
아무리 쇼핑몰 Theme를 좋은 것을 구매한다 해도, 그 대부분의 화면을 차지하는 제품의 사진들이 일관되지 못하여 한 화면에서의 배치가 어색하다면 그 쇼핑몰은 제대로 된 쇼핑몰로 보이지 않는 것입니다.
따라서 Theme의 선택은 Theme의 설명과 미리 보기로 가급적 원하는 기능과 화면 구성을 위주로 선택하되, 예시의 상품 사진만을 보고 Theme 선택에 시간을 들이는 것은 지양해야 하겠습니다.

Theme 의 처음 적용 화면입니다. 황량할 따름입니다.

Theme의 설치

Theme 설치는 어렵지 않습니다. 스토어의 Theme를 선택하여 설명 페이지에 들어간 후 무료 Theme는Install theme 버튼을 클릭하고, 유료 Theme는 Buy Theme 버튼을 클릭하여 진행합니다. 유료의 경우Approve Charge 에 대한 설명이 있어 동의를 눌러 진행합니다. 원칙적으로 한 번 구입한 Theme는 취소나 환불이 불가능하니, 구매 전 Preview in your store 기능으로 내 쇼핑몰에 적합한 지 테스트가 필요합니다.

유료 테마 구입 시에는 승인이 필요하며, 환불이 되지 않기 때문에 미리 보기를 참고하여 결정합니다.

이렇게 설치한 Theme는 Admin의 Online Store-Theme 메뉴에서 확인 할 수 있습니다.
설치 과정 중에 Publish하면 바로 쇼핑몰에 적용되고, Unpublish상태에서 Install만 완료했어도 각종 수정이 가능합니다.

다음 편에서는 실제 Theme 설치 후 설정에 대해 알아보겠습니다.