쇼파파이테마에 해당하는 글 1

[쇼피파이] 쇼피파이 테마 2.0 개발을 위한 구조분석 및 이해

Computer 관심/쇼피파이|2021. 12. 26. 11:57
반응형

구성

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

- 아나운스먼트 바

- 헤더

- 템플레이트

- 푸터

 

레이아웃

처음에 실행되는 파일인 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/

'Computer 관심 > 쇼피파이' 카테고리의 다른 글

Theme app extensions  (0) 2023.01.09
쇼피파이 Theme 개발 시작하기  (0) 2023.01.03

댓글()