콘텐츠
지난 몇 주 동안 저는 Viewport Industries, Elliot Jay Stocks와 제가 작년에 설립 한 회사의 Shopify 테마를 구축했습니다. 몇 가지 이유로 Shopify를 선택했습니다.
- 디지털 제품과 실제 제품을 모두 판매 할 수 있습니다.
- 완전히 호스팅되므로 걱정할 서버가 없습니다.
- 우리 은행과 잘 통합되는 여러 지불 게이트웨이를 지원합니다.
- 테마 기반이므로 기존 사이트의 HTML, CSS 및 JavaScript를 쉽게 재사용 할 수 있습니다.
Shopify는 Liquid라는 템플릿 엔진을 사용하여 매장의 데이터를 템플릿으로 출력합니다. Liquid는 아마도 이전에 사용하지 않은 Shopify 테마의 한 요소 일 수 있으며 불쾌 할 수 있습니다. 하지만 좋은 소식은 시작하기가 그렇게 어렵지 않다는 것입니다.
Smarty, ERB 또는 Twig를 사용해 본 적이 있다면 다음 내용이 익숙 할 것입니다. 그렇지 않더라도 걱정하지 마세요. 몇 가지 간단한 규칙을 배우면됩니다. 웹 개발 툴킷에 Liquid 기술을 추가하면 즉시 클라이언트를위한 테마 구축을 시작할 수 있습니다.
테마 파일 및 폴더
Shopify 테마는 여러 파일 (확장자가 .liquid 인 HTML 파일, CSS, JS, 이미지 등) 및 폴더에 불과합니다. 테마는 원하는대로 보이고 작동 할 수 있습니다. 실제로 제한이 없습니다. 테마의 기본 구조는 다음과 같습니다.
- 자산
- 구성
- 레이아웃
- theme.liquid
- 짧은 발췌
- 템플릿
- 404. 액체
- article.liquid
- blog.liquid
- cart.liquid
- collection.liquid
- index.liquid
- page.liquid
- product.liquid
- search.liquid
이러한 파일로 가장 기본적인 테마를 만들 수 있습니다. 물론 CSS, JavaScript 및 이미지 몇 개를 추가하고 싶을 것입니다. 자산 폴더에 넣습니다. (현재 자산 폴더 내에서 하위 폴더가 허용되지 않는다는 점에 유의할 필요가 있습니다.)
테마 작동 방식에 대한 자세한 내용과 config 및 snippets 폴더에 대해 알아 보려면 Shopify Wiki에서 Theme from Scratch 및 Theme Settings를 읽는 것이 좋습니다.
또는 무료 파트너 프로그램에 가입하고 테스트 샵을 만들고 테스트 샵의 관리 영역에서 제공되는 많은 무료 테마 중 하나를 검사 할 수 있습니다. 테마 메뉴에있는 테마 편집기로 이동하면됩니다.
URL을 템플릿에 매핑
Shopify 테마는 현재 URL을 특정 템플릿에 매핑하여 작동합니다. 예를 들어, 다음 URL이있는 제품을보고있는 경우 ...
http://www.unitedpixelworkers.com/products/indianapolis
... 그러면 Shopify에서 product.liquid 주형. 따라서 위에 나열된 파일 이름 만 템플릿에 사용해야합니다.
Shopify는 현재 URL과 관련하여 표시 할 템플릿을 아는 것 외에도 매우 구체적인 여러 변수를 사용할 수 있습니다. 이를 '템플릿 변수'라고하며 템플릿에 데이터를 표시 할 수 있습니다.
예를 들어 product.liquid 템플릿에서 적절한 이름의 생성물 변하기 쉬운. 이것은 우리가 템플릿에 제품의 이름, 설명, 가격 및 가용성을 출력 할 수 있음을 의미합니다. Liquid와 템플릿 변수의 조합을 사용하여 제품과 관련된 데이터로 템플릿을 채울 것입니다.
사용 가능한 템플릿 변수의 전체 목록은 Mark Dunkley의 Shopify 치트 시트를 참조하십시오.
액체 : 기본
Liquid는 테마 디자이너로서 우리의 삶을 더 쉽게 만들기 위해 여기에 있습니다. 이를 수행하는 주요 방법 중 하나는 레이아웃을 사용하는 것입니다. 레이아웃은 머리글, 기본 탐색, 바닥 글 등과 같은 일반적인 페이지 요소를 포함하는 데 이상적입니다.
위의 폴더 구조에서 theme.liquid 레이아웃 폴더에 있습니다. theme.liquid를 마스터 템플릿으로 생각할 수 있습니다. product.liquid와 같은 다른 모든 템플릿은이 마스터 템플릿 내에서 렌더링됩니다. 원하는 경우 둘 이상의 레이아웃을 가질 수 있지만 기본 레이아웃은 항상 theme.liquid라고해야합니다.
United Pixelworkers의 theme.liquid 파일을 보지 못했지만 아래에 빨간색으로 표시된 영역에 대한 마크 업이 포함되어 있다고 상상할 수 있습니다.
기본 theme.liquid 레이아웃은 다음과 같습니다.
- ! DOCTYPE html>
- html>
- 머리>
- {{content_for_header}}
- title> 여기에 페이지 제목 표시 / title>
- / head>
- 몸>
- {{content_for_layout}}
- / body>
- / html>
이중 중괄호로 묶인 두 개의 구문을 볼 수 있습니다. {{content_for_header}} 과 {{content_for_layout}}. 이것이 바로 Liquid의 첫 번째 사례입니다.
Shopify는 종종 {{content_for_header}}를 사용하여 문서의 head> 섹션에 특정 파일을 추가합니다 (예 : 추적 코드 추가). {{content_for_layout}}은 URL 매핑 템플릿의 콘텐츠가 표시되는 곳입니다. 예를 들어 제품 페이지를보고있는 경우 product.liquid 파일이 레이아웃 파일의 {{content_for_layout}}을 대체합니다.
product.liquid 이해
이제 레이아웃의 기본 사항을 살펴 보았으므로 템플릿을 살펴볼 차례입니다.상점은 모두 제품에 관한 것이므로 product.liquid.
다음은 product.liquid 템플릿의 매우 간단하지만 기능적인 예입니다.
- h2> {{product.title}} / h2>
- {{product.description}}
- {% if product.available %}
- form action = "/ cart / add"method = "post">
- select id = "product-select"name =’id’>
- {% for variant in product.variants %}
- option value = "{{variant.id}}"> {{variant.title}}-{variant.price} / option>
- {% endfor %}
- / 선택>
- input type = "submit"name = "add"value = "장바구니에 담기"id = "구매"/>
- / 양식>
- {% 기타 %}
- p>이 제품은 사용할 수 없습니다 / p>
- {% endif %}
여기에는 여러 가지 주요 Liquid 개념이 있습니다. 순서대로 살펴 보겠습니다.
산출
코드의 첫 번째 줄에는 {{product.title}}. 렌더링되면 제품의 제목이 출력되며, 이는 URL에 의해 결정됩니다. 아래 United Pixelworkers 예에서 제품 제목은 단순히 'Indianapolis'입니다.
Liquid는 도트 구문 형식을 사용합니다. 이 경우 {{product.title}}은 제품 템플릿 변수 및 제목 속성과 동일합니다. 같은 방법으로 제품 설명을 출력 할 수 있습니다. {{product.description}}.
이것은 액체 용어로 다음과 같이 알려져 있습니다. 산출. 모든 출력은 {{your_output}}과 같이 이중 중괄호로 표시됩니다.
논리
코드의 다음 줄에서 중괄호 안에 %가있는 문을 볼 수 있습니다.이 경우 {% if product.available %}. 이것은 Liquid의 또 다른 중요한 개념입니다. 논리. 더 내려 가면 {% else %}와 마지막으로 {% endif %} 문을 볼 수 있습니다.
이 if 문 하나 이상의 조건 (이 경우 제품 사용 가능 여부)에 따라 템플릿이 표시하는 내용을 지정할 수 있습니다. 사실상 이것은“우리 제품이 사용 가능하다면 그와 관련된 정보를 보여주십시오. 그렇지 않으면 사용자에게 재고가 없음을 알리는 메시지를 표시합니다.”
Liquid의 모든 논리 문은 중괄호 백분율 표기법을 사용합니다 (예 : {% if… %}). 진술을 적절하게 닫아야합니다. 그렇지 않으면 문제가 발생합니다. 예를 들면 :
- {% if product.available %}
- 여기에 장바구니에 추가 버튼 표시
- {% 기타 %}
- 다음에 제품을 사용할 수있는시기에 대한 메시지 표시
- {% endif %}
필터
Liquid를 사용하면 여러 가지 방법으로 출력을 조작 할 수 있습니다. 그중 하나는 필터를 사용하는 것입니다. 필터에 들어가는 콘텐츠는 특정 방식으로 변경된 다른 쪽 끝이 나옵니다.
위의 product.liquid 예제를 보면 {돈}. 변형은 제품의 변형을 설명하는 데 사용되는 용어입니다 (예 : 다양한 색상 및 크기). 여기서 흥미로운 점은 필터를 사용하여 가격 산출을 변경한다는 것입니다.이 경우에는 돈 필터를 사용합니다. 그러면 상점의 통화 기호가 가격 앞에 추가됩니다.
기타 필터는 다음과 같습니다. strip_html, 지정된 텍스트에서 HTML 태그를 제거하고 ucase, 대문자로 변환됩니다.
필터를 함께 결합 할 수도 있습니다. 예를 들면 :
- {article.content}
이 경우 기사 템플릿 변수의 콘텐츠 속성을 가져 와서 strip_html 필터에 전달하고 마지막으로 자르기 필터에 전달합니다. 자르기 필터를 사용하면 최종 출력의 길이를 지정할 수 있습니다.이 경우 20 자입니다.
또한 필터를 사용하면 템플릿에서 스크립트 및 이미지 요소를 빠르게 생성 할 수 있습니다. 다음은 연결된 alt 태그가있는 이미지를 출력하기 위해 필터를 사용하는 매우 빠른 방법입니다.
- {asset_url}
Shopify 테마에서 이것을 사용하면 템플릿에서 다음과 같은 img 요소가 렌더링됩니다.
- img src = "/ files / shops / your_shop_number / assets / logo.png"alt = "사이트 로고"/>
그만큼 asset_url 필터는 현재 테마의 전체 경로를 반환하므로 매우 유용합니다. 자산 폴더. 이 필터를 사용하면 여러 상점에 테마를 적용하고 경로에 대해 걱정할 필요가 없습니다.
무엇 향후 계획?
이 몇 가지 예를 통해 Liquid가 그렇게 복잡하지 않다는 것을 알 수 있기를 바랍니다. 물론 할 수있는 일이 훨씬 더 많지만 출력, 논리 및 필터를 마스터하면 Shopify 테마를 구축하는 데 필요한 대부분의 내용을 잘 이해할 수 있습니다.
추가 리소스 및 영감
- 유용한 스타터 Shopify 자습서
- Mark Dunkley의 Shopify 치트 시트
- Blankify : Shopify 시작 테마
- 튜토리얼 : 처음부터 테마 빌드
- Shopify 파트너 프로그램
- 40 개의 영감을주는 Shopify 스토어
