우커머스용 워드프레스 테마 Flatsome 데모 설치하기

Flatsome은 우커머스용 워드프레스 테마로서 현재 주간 판매 순위 5위를 차지하고 있는 인기 테마 중 하나입니다.

워드프레스 Flatsome 테마

워드프레스에서 쇼핑몰을 운영하려는 경우 Flatsome과 같은 우커머스 전용 테마를 사용하거나 Avada, Enfold 등의 다목적 테마를 사용할 수 있습니다.

지난 블랙프라이데이 기간 동안 Flatsome이 35달러에 할인 판매되어 Flatsome, Salient 등 몇 개 테마를 구입했습니다. 어제 Flatsome을 설치해보았습니다.

워드프레스 Flatsome 테마 설치

먼저 Envato Market에서 테마 설치 파일을 다운로드해야 합니다.

워드프레스 테마 다운로드

Download 페이지에서 해당 테마의 Download 드롭다운 메뉴에서 다운로드할 수 있습니다. All files & documentation을 선택하면 설치 파일과 설명서(documentation)를 비롯하여 모든 파일을 다운로드할 수 있습니다. Installable WordPress file only를 선택하여 다운로드하면 설치 파일만 다운로드됩니다. Flatsome은 설치 절차 중에 차일드 테마(자식 테마)를 설치하는 옵션이 있으므로 Installable WordPress file only를 선택하여 다운로드해도 됩니다.

워드프레스 관리자 페이지에서 외모 > 테마 > 새로 추가를 클릭하고 "테마 업로드" 버튼을 클릭하여 방금 다운로드한 테마 설치 파일을 업로드하여 설치합니다.

워드프레스 Flatsome 테마 설치

Welcome 화면이 표시됩니다. 설치하는 데 3~5분이 소요된다고 안내하고 있습니다. 하단의 Let's Go!를 클릭합니다.

워드프레스 Flatsome 테마 설치

Activate Theme(테마 인증) 페이지가 표시됩니다. Purchase code를 입력하면 자동 테마 업데이트가 가능하고 지원을 받을 수 있습니다. 저는 임시 도메인에 설치했기 때문에 지금은 코드를 등록하지 않고 Skip this step을 선택했습니다. 아바다 같은 일부 테마의 경우 정품 인증을 하지 않으면 데모를 설치할 수 없지만, Flatsome은 데모 콘텐츠 설치가 가능합니다. 정품 인증을 하려면 "Activate"를 클릭합니다.

Flatsome 우커머스용 워드프레스 테마 설치 - 차일드 테마

두 번째 단계로 차일드 테마(자식 테마, 하위 테마)를 설치하는 화면이 표시됩니다. 이 단계는 필수가 아니므로 Skip this step을 선택하여 건너뛸 수도 있습니다. 차일드 테마를 만들려면 Create and Use Child Theme을 클릭합니다.

Flatsome 테마 설치 하기 - 필수 플러그인 설치

이제 기본 플러그인을 설치하는 화면이 표시됩니다. 다음과 같은 플러그인이 설치됩니다.

위의 화면에서는 Contact Form 7이 이미 설치되어 있으므로 Activation required(활성화 필요)가 표시되어 있습니다. Continue를 클릭하면 플러그인이 설치됩니다. Nextend Social Login은 설치 도중에 Ajax error 메시지가 표시되었지만, 설치 후에 살펴보니 정상적으로 설치되어 있네요.

Flatsome 테마 설치 - 데모 콘텐츠 설치

다음은 데모 콘텐츠를 설치하는 단계입니다. 설치를 원하는 데모 콘텐츠를 체크한 후에 Continue를 클릭합니다.

워드프레스 우커머스 전용 테마 - Flatsome 설치

다음 단계에서는 로고를 지정하고 전면 페이지로 사용할 디자인을 선택합니다. Select Preset에서 미리 만들어진 페이지를 전면 페이지로 선택하도록 합니다. 현재 총 17개 디자인이 제공됩니다.

참고로 데모 페이지에 이미지는 포함되어 있지 않습니다. 디자인을 선택하고 실제 사이트를 살펴보면 이미지가 없는 상태로 사이트가 표시됩니다. 더미 이미지는 실제 이미지로 대체해야 합니다.

Flatsome 테마 설치

Help and Support 페이지가 표시됩니다. 그러면 Agree and Continue를 클릭합니다.

Flatsome 테마 설치 완료

이제 설치가 완료되었습니다. Setup WooCommerce를 클릭하여 우커머스를 설정하거나 View your new website를 클릭하여 사이트를 볼 수 있습니다.

Flatsome 테마 설치 완료 - 전면 페이지

사이트를 방문하면 선택한 전면 페이지가 표시됩니다. 다만, 이미지는 포함되지 않았기 때문에 이미지는 표시되지 않습니다.

Flatsome에는 UX Builder라는 페이지 빌더가 사용됩니다.

UX Builder 페이지 빌더

Edit with UX Builder를 클릭하여 페이지를 편집할 수 있습니다.

워드프레스 Flatsome 페이지 빌더

다른 페이지 빌더와는 조금 다르게 느껴지지만, 익숙해지면 사용법은 비슷할 것 같습니다.

Flatsome 페이지 편집하기

새로운 Element를 추가하기 위해 더하기(+) 아이콘을 누르면 위의 그림과 같이 왼쪽에 레이아웃이나 콘텐츠를 추가할 수 있도록 표시됩니다.

워드프레스 알림판 > 설정 > 읽기에서 데모를 변경할 수 있습니다.

Flatsome 데모 페이지 변경하기

홈페이지 표시 > 정적인 페이지에서 원하는 데모를 선택하여 전면 페이지로 설정합니다.

마치며

이상으로 워드프레스 쇼핑몰에 많이 사용되는 Flatsome 테마의 설치 과정을 살펴보았습니다.

UX Builder라는 페이지 빌더를 사용하는 Flatsome은 우커머스에 특화된 다목적 반응형 우커머스 테마(Multi-Purpose Responsive WooCommerce Theme)입니다. 아바다 등 다목적 테마에서도 쇼핑몰 관련 데모를 제공하지만 개수가 몇 개 되지 않지만 Flatsome에서는 다양한 쇼핑몰 관련 데모 페이지를 제공합니다.

참고:


4개 댓글

  1. 부탁좀 드립니다 ㅜㅜ
    블루호스트를 이용하여 워드프레스 사용 중인데..초보에요.
    테마적용하여 테마 이미지 그대로를 적용 후 이미지를 하나하나 변경하려는데요...
    테마는 적용되는데 이미지를 못하겠어요... 해석하면

    대체: 다운로드한 템플릿 파일(shoppingcart.zip)의 압축을 해제하십시오. FTP를 사용하여 전체 폴더(쇼핑카트)를 서버에 업로드한 후 http://yourdomain.com/wp-content/themes/folder(shoppingcart에 저장하십시오. 디렉터리 이름을 변경하지 마십시오. 따라서 템플릿 파일은 지금 여기에 있어야 한다. http://yourdomain.com/wp-content/themes/shoppingcart/index.php (예를 들어)
    - WP 관리 패널에 로그인하여 [보기] - [테마] 탭을 클릭하십시오. 이제 쇼핑카트 테마를 클릭하여 활성화하십시오.
    - 쇼핑카트 기능을 즐기고 싶다. Dashboard -> 모양 -> ShopingCart 옵션으로 이동하여 사용자 지정 및 재생
    - 테마는 무료로 제공된다.

    이렇게 나오는데 도데체 어쩌라는건지 ㅜㅜ 제발 자세히좀 알려주세요.

    요점은!!! 테마적용은 했는데 테마와같은 데모이미지가 않나와요~~~
    https://demo.themefreesia.com/shoppingcart/
    이렇게 나와야해요 ㅜㅜ

    ㅜㅜ 좋은나날 되시고 성공하시길 바랍니다.

    1. 안녕하세요, 이재헌님.

      이 테마를 설치하여 잠시 테스트해보았습니다.

      테마를 설치하면 다음과 같은 화면이 표시됩니다.

      https://www.screencast.com/t/Fs8isjQ3UQC

      즉, https://themefreesia.com/theme-freesia-demo-import/ 페이지에서 데모 파일을 다운로드하여 설치할 수 있습니다.

      데모 파일을 다운로드하여 압축을 풀어보면 readme.txt 파일이 안에 있습니다.

      Use Theme Freesia Demo importer plugins to import theme demo data with just a single click

      Theme Freesia Demo importer 플러그인을 사용하여 데모 데이터를 임포트(가져오기)할 수 있습니다.

      참고로 질문을 올릴 때, 영문 지시문을 영문 그대로 올려주시기 바랍니다. 구글 번역기나 자동 번역기로 번역하면 번역에 오류가 있을 수 있고 내용을 파악하기가 쉽지 않을 수 있습니다.

      테마 설치는 설치 파일을 다운로드한 후에 테마 디자인 > 테마 아래에서 테마 파일을 업로드할 수 있습니다(https://www.youtube.com/watch?time_continue=173&v=fSzeHOIOYHA 참고).

      ######추가######

      Theme Freesia Demo import 플러그인이 WordPress 저장소에서 삭제된 것 같습니다. 이 플러그인이 없으므로, 테마 제작자에게 문의해보시기 바랍니다.

  2. 항상 워드프레스에 대해 좋은정보 잘 보고 갑니다.
    이제 몇 시간만 있으면 2018년도 지나 가네요.. 내년에도 항상 건강하시고 하시는 일 모두 잘 되시길 바랍니다.
    새해 복 많이 받으세요..!!

    1. 2018년의 마지막 날이네요.

      한 해 잘 마무리하시고 새해에는 계획하는 모든 일이 성취되기를 기원합니다.

      이카루스님도 새해 복많이 받으세요.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.