'쇼피파이개발' 태그의 글 목록

쇼피파이개발에 해당하는 글 2건

쇼피파이 Theme 개발 시작하기2023.01.03
[쇼피파이] 쇼피파이 테마 2.0 개발을 위한 구조분석 및 이해2021.12.26

쇼피파이 Theme 개발 시작하기

Computer 관심/쇼피파이2023. 1. 3. 15:50

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

저작자표시 비영리 변경금지

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

Theme app extensions (0)	2023.01.09
[쇼피파이] 쇼피파이 테마 2.0 개발을 위한 구조분석 및 이해 (0)	2021.12.26

[쇼피파이] 쇼피파이 테마 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":[]
}

섹션의 속성들