3단계: 온라인 쇼핑몰 제작 가이드를 따라 직접 쇼핑몰을 만들겠습니다. 1단계 ~ 2단계를 보지 않으신 분은 5분만 투자해서 먼저 확인 하시기 바랍니다. 가이드를 차례대로 밟으셔야 쇼핑몰을 완성 할 수 있습니다. 아래에 유튜브 동영상이 있으니 보시고 따라하시면 되겠습니다. 

3단계: 온라인 쇼핑몰 제작 (30분 완성)

도메인과 웹호스팅 세팅을 확인 & SSL (HTTPS) 보안 인정서를 설치합니다.
  • 을클릭,  호스팅 웹사이트를 여세요.
    【Domains】 → 【Manage Domains】클릭하세요.
    도메인과 웹호스팅이 세팅 되었음을 확인 할 수 있습니다.

  • 【Domains】→ 【Manage Domains】→【HTTPS Not Secure】→【Select this Certificate】를 클릭하세요.
    SSL 인증서가 구축될때까지 15분 정도 기다리면 홈페이지에 보안 자물쇠가 보입니다.

내 도메인의 워드프레스 어드민 사이트를 엽니다.

  • 내 도메인명/wp-admin/ 을 브라우저에 입력 하여 워드프레스를 여세요.
    (예: overseastory.com/wp-admin/)
워드프레스 블로그 만들기 3단계 – 블로그 포스팅 10

온라인 쇼핑몰을 만들기 위한 무료 플러그인 툴을 설치합니다.

플러그인 용도 가격
WooCommerce
쇼핑몰
무료
WooCommerce Side Cart
고객이 사용하기 편리한 카트
무료
WooCommerce Stripe Payment Gateway
온라인 결제
무료
WooLentor
제품 카탈로그
무료
Elementor
쇼핑몰 디자인
무료
Duplicate Page
쇼핑몰 구축 효율성 높이는 페이지 듀플리케이터
무료
Autoptimize
쇼핑몰 속도개선, 이미지 용량 줄임등
무료
WP Super Cache
쇼핑몰 구축 효율성 높이는 캐쉬 삭제 툴
무료

YouTube 동영상을 따라 쇼핑몰을 만듭니다.

  • WooCommerce 설정
  • 제품 정보 입력
  • Storefront 쇼핑몰 사이트 설정
  • 메뉴 설정
  • 쇼핑몰 메인 페이지 제작
    (베너제작 포함)
  • 메인 페이지 설정
  • 제품 페이지 제작
  • 로그인/계정 페이지 제작
  • 쇼핑카트, 제품오더, 결제 페이지 설정 및 테스트

쇼핑몰 제작에 사용된 색상 및 CSS

  • 쇼핑몰 제작에 사용된 색상
    Header & Footer Background: #222023
    Header & Footer Text / Link: #f6f5f7
    Link / Accent : #222023
    Table Background: #F9F9F9

  • 브레드크럼브 (위치 네비게이션) 숨기기
    .storefront-breadcrumb .col-full {
    display: none !important; }

  • 클릭시 링크 주변 색깔 없애기
    button:focus {
    outline: 0px solid #96588a; }

  • 내계정 페이지 디자인

    .woocommerce-MyAccount-navigation {
    display:none;}

    .woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;}

  • Footer 수정

    #colophon .site-info {
    text-align:center;}

    #colophon .site-info a {
    display: none;
    color:#222328 !important;}

  • 링크 클릭시 테두리 선 없애기
    a:focus,
    .focus a {
    outline: none !important;}

  • Search Results Page 헤더 타이틀 숨기기
    #main .woocommerce-products-header {
    height:0px;
    display:none;}

쇼핑몰을 완성했습니다.

유튜브 동영상 보고 따라하기

sharing experience and information

Tips!

테마 vs 블로그 빌더

테마는 블로그 형태의 기본적 틀입니다. 그래서 굳이 유료 버전을 구매하실 필요는 없을거에요.
반면, 블로그 빌더는 테마의 기본적 틀안에서 블로그를 디자인하고 기능을 추가하는 역할을 해요.
그래서, 블로그 빌더인 엘리멘터 (elementor)는 유료 버전을 구매하시면 더 프로페셔널한 블로그를 만들 수 있어요.
돈버는 블로그 3단계의 STEP5 에서 포스팅 템플릿을 보시면, 이쁘다 전문적이다 싶은건 오른쪽 상단에 PRO 라고 적혀 있어요. 
이 PRO 를 다운로드 받으려면 elementor.com 에서 가장 저렴한 PERSONAL ($49/년) 구매 하시면 됩세요.
PERSONAL 버전 구매하시면 기본 버전에 없는 여러 추가 기능들 (다이나믹 컨텐츠, 50개 이상의 위젯, 모션 효과, 팝업 기능 등)을  사용하여 블로그를 더 프로페셔널하게  만들 수 있어요.

워드프레스 어드민 사이트 여는 2가지 방법

  • 브라우저에 내 도메인명/wp-admin/ 입력 (예: overseastory.com/wp-admin/)
  • panel.dreamhost.com 에 접속해서 【Open WordPress Editor】  클릭
Skye Noh
Oversea Story
     17 May 2020