https://shopify.dev/themes/getting-started/create

 

Create a theme

Follow this tutorial to learn how to set up your development environment and build a new theme using our reference theme, Dawn.

shopify.dev

 

 

다큐먼트에 나와 있는데로 Down theme 설치 완료 후 

shopify theme init

 

로컬 서버 실행

shopify theme dev --store {store-name}

에러 발생

루비를 다운로드 해야 하나보다.  (루비를 건드려 볼줄이야....)

설치를 해본다. 생각보다 시간이 오래걸린다.

설치를 하고 {store-name}에 내가 사용할 스토어 이름을 넣고 명령어를 실행하니 작동이 된다.

 

이제 로컬에서 실행이 되는 것이다!

로컬호스트 localhost:9292로 들어가니 비밀번호를 입력하라고 한다. 

 

비밀번호는 Home 섹션에서 찾아 볼 수 있다

 

에디터에 수정을 하면 로컬에서 적용된 것을 볼 수 있다. 

 

shopify theme push --unpublished

이 명령어를 입력하면 퍼블리쉬가 안된체로 테마를 Theme library에 올릴 수 있다. (새로 생성)

ex)

기존에 있는 theme을 업데이트 하고 싶으면 그냥 flag를 빼고 아래 처럼 명령어를 입력하면 된다.

shopify theme push

 

publish 를 누르면 live로 적용을 시킬 수도 있고 혹은 commend를 통해서 live로 만들 수 있다.

shopify theme publish

회사에서 쇼피파이 대신 워드프레스를 사용하기로 결정해서 워드프레스와 우커머스를 사용하여 쇼핑몰을 만들 계획이다. 워드프레스를 사용하면 코딩 없이 쇼핑몰을 만들 수 있는 장점이 있다.

 

 

0. WAMP설치하기 

1)윈도우에서 실행할 수있는 아파치 MYSQL PHP서버를 설치함.

2)워드프레스용 디비 만들기 

 

혹은 처음부터 호스팅을 시작하기

 hostgator.com / bluehost.com / fastcomet.com

 

블루호스트

1. 그냥 워드프래스를 만든다.

2. 호스팅 이전: 도메인 닷컴에서 블루호스트의 nameserver - ns1.bluehost.com 이걸 등록하고 도메인 dns record의 세팅 ns @ ns1.bluehost.com이걸 바꿔줌

3. ssl이 적용이 안됬을 경우 bluehost에서 ssl 다시 run 시켜줌

 

1. 워드프레스 설치하기

만들어 놓은 디비명을 입력하여 워드프레스를 설치함.

 

2. SETTING 설정 바꾸기

사이트타이틀 바꾸기

사이트 태그라인 바꾸기

자신의 사이트 주소 입력

블로그를 위한 포스트 주소이름 변경

3. 플러그인 설치

워드프레스 설치가 완료 되었으면 관리자 페이지에 들어가 (localhost/wp-admin/)플러그인을 설치해야함

 

1) 엘레멘토 설치 (elemento)

드래그앤드롭으로 쉽게 웹사이트를 만들 수 있는 웹빌더플러그인. 엘리멘토를 사용하면 느려진다는 얘기가 있지만 엘리멘토를 사용하여 사이트를 개발하는게 훨씬 쉽게 느껴졌기 때문에 그걸 감수하는게 낫다 생각함.

 

2) 우커머스 설치

 

4)Essential Addons for Elementor

더 많은 위젯들을 사용할 수 있도록 해줌

프로덕트 그리드 같은 우커머스연동 위젯도 제공함

 

5) wptobe-signinup 설치

사용을 위해서는 sign up과 sign in page 를 만든뒤 아래에서 세팅을 해주면 자동으로 로그인 창이 생성됨 

6) if Menu 설치

메뉴 조건 보여주는 기능

7) storecustomizer 설치

 

8) smush 설치

- 이미지업로드시 이미지 최적화

- 이미지 lazyloading

- 이미지가 안뜨는 경우가 있는데 아래 처럼 세팅하니까 이미지가 잘 뜬다.

 

9) W3 Total Cache

페이지 캐쉬

 

10) starter templates

버전에 따라 이게 자동으로 생성이 안되는 경우가 있나봄.

 

11) translatepress

멀티랭기지 플러그인을 설치하고 세팅에 들어가면 쉽게 번역을 만들 수 있다.

다만 url이 /language/의 형식으로 사용시 번역 페이지가 안뜨고 404가 뜰 경우 

https://translatepress.com/docs/addons/language-get-parameter/

에서 zip파일 플러그인을 받거나

*추천하는 방법인데

settings/Permalink Settings에 들어가서 /파라메터/ 형식으로 바꾸어줘야 함 

 

 

*WPML 유료버전 사용시 년간 $99

 

12) 최적화

https://cafe.naver.com/wphomepage/5986

위의 주소의 글처럼 최적화 했더니 문제 발생

Webcraftic Clearfy – WordPress optimization plugin를 사용하라고 적혀있는데 

이걸 사용했더니 if menu에 문제가 발생함

 

4. 아스트라 테마 설치

1) 스타트업테마로 ecommerce 테마를 설치 함 이때 엘리멘토로 된 테마를 설정해야 함

아스트라 ecommerce를 설치시 함께 추가되는 plugins

 - Cartflows 카트 디자인 플러그인

- WooCommerce Cart Abandonment Recovery 장바구니에 담고 구매하지 않는 고객들 관리 

- WPForms Lite 컨텍트페이지에서 이메일 남기는 플러그인

 

 

 

*엘리멘토 기본 사용법

 

- 섹션: 페이지에 섹션으로 구성되어 있음

동그라미 플러스 버튼을 눌러서 섹션의 스트럭처를 선택함.

* 폴더 모양을 클릭하면 블럭과 템플릿(미리 만들어진 레이아웃)을 불러 올 수 있음 - 처음부터 만드는것 보다 유용 (필요없는 요소는 지우고 이미 디자인된 위젯들은 복붙하고 새로운위젯 추가/수정하여 사용)

 

아래는 섹션요소의 편집창이다.

 

높이(height)속성을  Min Height로 바꾸면 마음데로 섹션의 높이를 바꿀 수 있는 것을 볼 수 있다. 

 

스트럭처를 통해 섹션의 비율도 조절 할 수 있다.

 

또한 새로운 섹션을 기존섹션 위에 추가하고 싶으면 생성된 섹션위의 +버튼을 클릭하여 섹션을 새로운 섹션을 생성 할 수 있다. 

+ 옆의 6개의 점 아이콘을 드래그하면 섹션의 위치를 바꿀 수 있으며 클릭시 섹션의 요소를 바꾸는 창이 나오게 할 수 있다.

섹션의 편집창에 보면 Style이라고 있는데 여기서는 글자색, 글자정렬, 배경색, 배경 이미지, 배경오버레이( 보통 나중 글씨를 배경위에 올리는 색 / 이미지) 섹션의 모양을 노멀과, 호버시에 따라 지정할 수 있다.

 

호버에 속성 변경은 버튼위젯에서 사용하면 좋다. 호버시 애니메이션도 삽입 할 수 있기 때문에 인터렉티브한 웹사이트로 만들 수 있다.

또한 신박한 점은 영상이나 슬라이드쇼를 백그라운드로 간단히 바꿀 수도 있다는 것이다.

고급에 들어가면 PC, 타블릿, 모바일에 따라 안여백, 밖여백, 클레스, 아이디, 모션이펙트 등을 지정할 수 있다.

- 엘리먼트(위젯) 삽입하기

일리먼트(위젯)를 삽입하는 건 쉽다. 일단 편집창에서 목록박스를 두번 누르면 엘리멘트를 볼 수 있는데, 여기서 그냥 자신이 넣고자 하는 위젯을 찾아 드래그하여 원하는 곳에 넣으면 된다. 아래 사진을 보듯 다양한 위젯들을 제공한다. 

 

이렇게 락이 되어있는 것은 유료 버전에서 사용할 수 있는 위젯이다. 여러가지 편리한 위젯을 사용할 수 있는데 1년에 49달러면 비싸게 느껴지진 않는다.

 

 

어째튼 더 밑으로 화면을 내려보면 다시 무료로 사용 할 수 있는 위젯들을 볼 수 있다. 

어째튼 간단히 드래그앤드롭으로 자신이 원하는 위치에 위젯을 놓을 수 있다.

이미 위젯이 있을 경우 그 기존요소의 위나 아래에 드래그 드롭이 가능하다.

 

 

모든 위젯은 수정할 수 있는 왼쪽 상단 아이콘을 가지고 있으며 이것을 클릭하면 각 위젯의 속성을 바꾸어 줄 수 있다.

 

 

 

텍스트위젯을 삽입했을 때 왼쪽 속성창에서 놀랍도록 쉽게 글을 적을 수 있다.

 

 

버튼의 경우 링크 설정시 메인url을 넣지 않는게 좋다. 그래야 도메인이 바뀌더라도 링크가 깨지지 않는다.

즉 (메인url 제거 http://asdfasd.com)/product-category/men/ 옆쪽 굵은 글씨만 링크로 연결하는 게 좋다.

 

 

 

뿐만 아니라 마우스 오른쪽 버튼을 클릭하여 복사 붙여 넣기도 할 수 있다.

 

위젯중 숏코드 사용가능 (옆의 숏코드를 변경하면 자신이 원하는 데로 구조와 상품의 종류를 결정 할 수 있음)

예를 들면

[products limit="4" columbs="4" category="카테고리 슬러그" ]

 

더 많은 숏코드를 보고싶다면

https://woocommerce.com/document/woocommerce-shortcodes/

 

Shortcodes included with WooCommerce

WooCommerce comes with several shortcodes that can be used to insert content inside posts and pages. How to use shortcodes Where to use Shortcodes can be used on pages and posts in WordPress. If you are using the block editor, there is a shortcode block yo

woocommerce.com

 

 

 

 

 

헤더빌더로 헤더 수정하기

마음데로 로고, 메뉴, 카트의 위치를 이동/ 추가/변경 할 수 있다.

 

아래의 디바이스 아이콘을 통해 각각 디바이스 별로 헤더의 위치나 로고 배경색등을 쉽게 지정 할 수 있다. 

 

*우커머스 사용법

위와 같은 양식을 적거나 밑에 스킵을 클릭함

 

제품페이지를 보면 아래 사진 처럼 프로덕트 데이터에서 일반 상품과 제휴상품을 설정 가능

제휴 상품의 경우 제품의 주소를 입력 할 수 있음.

이럴 경우 구매 버튼을 클릭하면 자신이 링크한 페이지로 이동됨.

 

2) 우커머스 세팅에서 배송 및 통화설정을 할 수 있다.

3) 별점 및 리뷰

위의 메뉴에서 

4) 회원가입

세팅에 들어가서 체크

 

 

상품추가하기

1) 카테고리부터 추가함

2) 이름과 슬러그를 정한뒤 카테고리로 추가

이때 자식카테고리로 만들고 싶으면 parent category를 설정함. 

* 자식으로 만들면 '부모카테고리/자식카테고리'의 형식으로 url이 생성됨 

 

3) 상품 만든 뒤 카테고리 결정

4) 상품 대표 이미지 추가 및 기타 이미지 추가 

- 디스크립션 영역은 elemento로 구성이 가능하다.

- 숏디스크립션은 가격아래 나옴

5) 업셀(상품페이지에서 추천으로 보여짐)과 크로스셀(카트페이지에서 추천으로 보여짐)을 설정 할 수 있다.

6) attributes과 variable product > attributes에서 used for variations>variations>create

 

 

이렇게 만든 페이지는 appearance> main menu에서 추가 할 수 있다.

 

우커머스 상점에서 만든 카테고리는 아래처럼 체크를 해야지

메뉴에 추가 할 수 있다.

 

 

우커머스store/cart 페이지 수정하기

- elementor로 수정이 안됨

- appearance>widget으로 들어가서 우커머스사이드바에서 사이드바 순서를 변경하고 추가 할 수 있음

- 사이드바만 수정이 되지 상품 나오는 곳은 코딩으로 수정해야함

 

storecustomizer이걸로 약간 수정 가능

 

 

 

결제까지 가는것을 체크하는 좋은 방법

캐시온 딜리버리 기능을 사용하여 결제과정을 테스트하면 편함

이렇게 구매를 하면 order에 주문리스트가 생성됨

여기서 스테터스를 바꾸어서 배송 상태를 관리 할 수 있다.

 

쿠폰생성

아래처럼 퍼센테이지/픽스드 카트 디스카운트(총 가격에서 할인)/ 픽스드 프로덕 디스카운트(모든상품 일정금액 할인)/ 특정상품 할인 (usage 리스트릭션)

 

 

 

 

블로그 페이지 설정

 

 

결제

국내 결제 플러그인 설치

 

사용할 결제 대행사를 설정

 

이렇게 누르면 자동으로 우커머스페이먼트 탭에 결제가 추가되어진다.

대행사 사이트에서 서비스 신청하기

 

해외 결제

플러그인 설치

사동으로 설치되고 세팅방법은 유튜브나 인터넷 찾아보기

 

 

 

 

블로그로 쓸 페이지를 설정함

그 뒤 메뉴에 추가 하면 됨

 

 

이미지 다운 받기 - 픽사베이

로고디자인 - freelogodesign.org

구성

쇼피파이의 큰 구조는 아래와 같다.

- 아나운스먼트 바

- 헤더

- 템플레이트

- 푸터

 

레이아웃

처음에 실행되는 파일인 theme.liquid 파일을 보면 아래와 같이 {% section %}을 통해 아나운스먼트바, 헤더, 푸터를 불러온다.

{{content_for_header}} liquid 태그는 html <header>태그 사에이 들어가서 스크립트를 불러들이고

{{content_for_layout}} liquid 태그는 는 페이지에 알맞는 템플릿을 불러들이는 역할을 한다.

 

예를 들면 index페이지에선 index.json템플릿을 불러오고 카트페이지에선 cart.json페이지를 불러오는 식으로 말이다.

 

 

theme.liquid가 메인 파일이며 CDN을 설치하고 싶으면 여기 헤더 안에 넣으면 된다.

예를 들면 부트스트랩 설치하고 싶으면 아래의 코드를 layout > theme <head></head>에 사이에 넣는다.

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 

 

 

템플레이트

이중 템플레이트는 쇼피파이에 필요한 페이지를 구성하는 JSON/liquid 파일을 말한다. 쇼피파이 쇼핑몰이 필요한 페이지들의 파일 이름이 아래 사진에 보듯 이미 정의가 되어있어서 자신이 만들 페이지명을 확인 하고 만들면 된다.

 

 

Json file과 liquid file 중 쇼피파이 2.0에서는 템플레이트를 JSON으로 만들어 템플레이트 내부의 섹션들을 자유롭게 배치 할 수있도록 한다.

 

 

아래는 기본적인 템플레이트의 Json파일의 구조이다. 

 

{
"sections":{
    section_name: {
        "type":"",
        "blocks":{
            block_name:{
            "type":"",
            "settings":{}
        },
        "block_order":[],
        "settings":{}
    },
"order":[]
}

 

새로운 섹션을 추가하면  코드에서도  sections 오브젝트에 섹션이 추가 된다. 또한 order에도 섹션의 배치 순서대로 섹션이 배열에 추가된다.

 

 

섹션

아래 사진 처럼 Rich text, collection list 등  template에 넣을 수 있는 요소를 섹션이라 한다. 이러한 섹션은 사용자가 커스터마이즈 하게 제작 할 수도 있다.

 

다시 한번 코드를 보면 섹션은 아래처럼 섹션의 이름(사용자가 만들수있음), type, settings, blocks, block_order로 구성되 있으며 "type" 은 section의 이름을 넣으면 되고 "order"은 사용자가 정의한 섹션의 이름을 넣어서 순서를 정한다.

 

{
"sections":{
    section_name: {
        "type":"",
        "blocks":{
            block_name:{
            "type":"",
            "settings":{}
        },
        "block_order":[],
        "settings":{}
    },
"order":[]
}

섹션의 속성들

• id: refers to the Liquid variable being defined 
• type: defines the kind of output we are creating
• label: provides context displayed on the theme editor
• default: assigns a default value

 

.json파일을 만들때 섹션이 하나라도 등록되어 있어야 다른 섹션을 관리자 페이지에서 넣을 수 있었다. 즉, template이라는 곳에 하나의 섹션은 존재해야 한다. 어떤 유튜버는 main이라고 이름을 정하고 하나의 섹션을 만들어서 넣음. 

 

관리자 페이지에서도 템플릿에 있는 모든 섹션은 지울 수 없다. 적어도 한개는 색션 한개는 있어야 한다. 섹션을 클릭을 해도 지우는 버튼인 remove section이 나오지 않는다.

 

 

 

블록

블럭 역시 섹션처럼 배열의 순서를 바꿈으로써 블록의 순서를 바꿀 수 있는게 특징이다.

 

유용한 자료

 

쇼피파이 테마 구조

https://www.shopify.com/partners/blog/how-to-create-your-first-shopify-theme-section

 

리퀴드

https://shopify.github.io/liquid/basics/introduction/

 

뷰 + 쇼피파이2.0 + tailwindcss를 활용한 스타터 theme :아직 안 써봤지만 좋아보임

https://themelab.uicrooks.com/

 

앱에서 theme에 적용

https://weeklyhow.com/shopify-app-script-tag/