Shopify 액체? 기본 사항에 대한 빠른 설명

이상 4.4 만 전자상거래 웹사이트는 Shopify 플랫폼. 2006년부터 웹을 뒤흔든 올인원 전자 상거래 플랫폼입니다. 판매자는 쉬운 결제 설정부터 내장된 마케팅 도구 등에 이르기까지 다양한 이유로 온라인 상점을 호스팅하기 위해 이 플랫폼을 선택합니다.

그러나 중요한 측면 중 하나는 Shopify 수천 가지 테마가 있는 직관적인 사이트 빌더이며 Shopify 선택할 수 있는 앱 통합.

그러나 코드 없는 빌더 놀랍고 독특한 웹 사이트를 만들 수 있지만 몇 가지 제한 사항이 있습니다. 예를 들어 온라인 스토어 구축을 시작할 때 콘텐츠에 대한 제어 수준과 배열을 정의하는 테마를 선택해야 합니다. 빈 테마, 즉 콘텐츠가 없는 테마를 선택하더라도 콘텐츠 구성 방식을 미리 정의하는 기본 코드 아키텍처가 여전히 있습니다.

하지만 좋은 소식이 있습니다. 나만의 창작물을 만들고 싶다면 Shopify 귀하의 사이트 또는 다른 사람의 템플릿이 있습니다. Shopify 액체.

관심 있는? 다음 질문에 답하기 위해 저와 함께 노력하십시오. Shopify 액체? 다이빙하자!

Shopify 액체?

재미있게, Shopify 액체는 그 이후로 주변에 있었다 Shopify의 시작. 언제 Shopify의 제작자는 처음에 플랫폼을 설계했으며 모두를 위한 템플릿 언어 역할을 하는 오픈 소스 프로젝트를 구성했습니다. Shopify 웹 사이트 템플릿.

초보자에게 '오픈 소스 프로그래밍 언어'는 대중이 자유롭게 사용할 수 있는 소프트웨어의 소스 코드를 의미하며 누구나 어떤 목적으로든 코드를 사용, 수정 및 배포할 수 있습니다.

Ruby를 사용하여 생성, Shopify 리퀴드 기본적으로 미리 정의된 형식에 데이터를 삽입할 수 있는 플레이스홀더 역할을 합니다(아래에서 자세히 설명).

그렇다면 어떻게 작동합니까?

이를 이해하려면 먼저 웹사이트가 일반적으로 정적이거나 동적이라는 사실을 알아야 합니다. 정적 저장소는 콘텐츠를 예를 들어 HTML로 작성된 대로 정확하게 표시하기 위해 하드코딩됩니다. 반대로 동적 웹 사이트는 사용자가 웹 사이트와 상호 작용하는 방식에 따라 다른 콘텐츠를 표시할 수 있습니다.

이제 정적 웹 사이트가 있다고 가정해 보겠습니다. 사이트의 기본 골격은 사전 설정되어 있지만 동적 콘텐츠를 렌더링하려고 합니다. 글을 쓰는 곳입니다 Shopify HTML 코드에 액체를 넣는 것은 편리합니다. 이는 동적 콘텐츠를 위한 자리 표시자 역할을 합니다.

Shopify Liquid는 매장과 매장 사이의 중개자 역할을 합니다. Shopify의 서버에서 Liquid가 데이터를 가져올 수 있도록 합니다. Shopify의 서버에 저장하여 매장으로 배송합니다. Liquid는 세 가지 주요 데이터 유형을 요청할 수 있습니다.

사물
태그
필터

아래에서 각 데이터 유형을 차례로 살펴보겠습니다.

액체 물체

개체는 기능 또는 콘텐츠 라이브러리와 유사합니다. 각 개체에는 다양한 속성이 있습니다.

개체의 개념에 익숙하지 않은 경우 간략한 개요는 다음과 같습니다.

개체는 프로그래밍의 기본 개념입니다. 개체는 두 가지 구성 요소로 구성됩니다.

개체의 상태를 정의하는 속성
개체의 동작을 정의하는 함수

이것이 어떻게 작동하는지 더 잘 설명하기 위해 코딩과 관련되지 않은 예를 사용합니다. 예를 들어, 자동차. 여기서 자동차, 즉 사물은 '가속', '회전', '제동' 등의 기능을 가질 수 있다. 반대로 속성은 자동차의 "창문", "문" 등이 될 수 있습니다.

간단히 말해서 객체는 중요합니다. 코딩의 개념 복잡한 시스템을 보다 관리하기 쉬운 덩어리로 구성하는 데 도움이 되기 때문입니다.

예를 들어 맞춤 설정을 만든다고 가정해 보겠습니다. Shopify 테마 표시하고 싶습니다 블로그 제목 템플릿에서. Liquid를 사용하여 해당 정보를 가져올 수 있습니다. Shopify의 서버에 저장하고 페이지 어딘가에 표시합니다. 이 예에서 이것은 이를 달성하기 위해 사용할 Liquid 코드입니다.

{{Blog.title}}

이것을 분해 해보자 :

여기, '블로그'가 대상입니다.
이 안에서 우리가 원하는 재산 도서관 '로 표시되어 있습니다.제목. '
이 어플리케이션에는 XNUMXµm 및 XNUMXµm 파장에서 최대 XNUMXW의 평균 출력을 제공하는 '.' 이 두 비트의 데이터가 어떻게 관련되어 있는지 Liquid에 알려줍니다.
이중 괄호는 원하는 {{원하는 콘텐츠/출력}}을 정의하는 Liquid 구문입니다. Shopify 서버.

액체 태그

사용시 Shopify 리퀴드, 태그는 우리가 요청한 콘텐츠에 논리를 추가합니다. Shopify 콘텐츠가 페이지에 표시되어야 하는 시기를 정의하는 데 도움이 되는 서버입니다. 예를 들어 축제 블로그 게시물에 특정 그래픽을 표시하고 싶다고 가정해 보겠습니다. 즉, 특정 조건이 충족될 때만 이 그래픽이 나타나기를 원합니다.

다음과 같이 표시될 수 있습니다.

{% if blog.title == '축하' %}

**이미지 HTML**

{%이면 종료}

이것은 복잡해 보일 수 있지만 분해하면 이해하기 매우 간단합니다.

태그는 다음과 같은 개체와 약간 다른 구문을 사용합니다. {%…%}.
첫 번째 태그 {% if blog.title == '축하' %} 서버에서 콘텐츠를 요청하기 전에 어떤 조건이 충족되어야 하는지 Liquid에 알려줍니다.
우리가 요청한 조건은 '만약' 문. 코딩에 익숙하다면 'if' 문이 두 개 이상의 데이터 조각을 서로 비교하여 작동한다는 것을 알 수 있습니다. 일치하면 코드의 다음 줄로 이동합니다. 여기, if blog.title == '축하,' 블로그 제목에 '축하'라는 단어가 포함되어 있는지 Liquid에 확인하도록 요청하고 있습니다. 그렇다면 코드의 다음 줄로 내려갑니다. 그렇지 않으면 Liquid는 어떤 콘텐츠도 반환하지 않습니다.
이 예에서 '축하'라는 단어가 포함된 블로그 제목이 있는 경우 Liquid는 이미지 HTML을 가져와서 표시합니다.
이 작업을 수행하면 다음 줄로 이동합니다. {%이면 종료}, 우리 프로그램을 종료합니다.

이는 태그로 수행할 수 있는 작업의 한 예일 뿐입니다. Shopify Liquid에는 다음에 대한 태그가 있습니다.

Control 코드가 실행될 때
반복/되풀이 (반복) 코드 블록
디스플레이 특정 HTML 마크업
새 변수 만들기.

액체 필터

필터는 개체의 출력을 변경하거나 수정하는 코드 조각입니다. 예를 들어 웹사이트 요소의 색상, 글꼴, 크기 또는 모양을 변경할 수 있습니다.

그러나 객체의 가시적 측면을 변경할 뿐만 아니라 객체에서 기능을 수행할 수 있습니다. 예를 들어 블로그 제목을 대문자로 표시하려는 경우 필터를 사용하면 모든 블로그 제목을 수동으로 변경하지 않고도 이를 달성할 수 있습니다.

{{ blog.title | uppercase }}

필터 구문은 다음과 같습니다. {{…}}.
여기서 우리가 찾는 객체 속성은 '블로그 제목'.
우리가 적용할 필터는 대문자.
이 어플리케이션에는 XNUMXµm 및 XNUMXµm 파장에서 최대 XNUMXW의 평균 출력을 제공하는 '|' 코드의 입력과 출력을 분리합니다.

이제 사용자가 블로그 제목을 보면 대문자로 표시됩니다.

Benefits of Shopify 리퀴드

귀하가 사이트 디자이너 또는 개발자라고 가정합니다. 이 경우 가장 중요한 이점 중 하나는 Shopify Liquid는 웹사이트를 만들거나 수정하는 데 매장 데이터(즉, 매장에 대한 정보)가 필요하지 않다는 것입니다. 이는 사용자가 처음으로 Shopify 저장, 모든 정보는에 저장됩니다 Shopify 즉, Liquid를 사용하여 필요한 데이터를 간단히 검색할 수 있습니다.

그러나 귀하가 웹 개발자가 아닌 경우 매장을 멋지게 꾸미고자 하는 매장 소유자일 경우 다음과 같은 이점이 있습니다.

배우고 사용하기 쉬움 : Liquid는 구문이 단순하고 이해하기 쉬워 개발자와 비개발자가 액세스할 수 있습니다.
동적 콘텐츠: Liquid는 동적인 컨텐츠 생성을 가능하게 합니다.
맞춤 설정 가능 : Liquid를 사용하면 맞춤형 템플릿과 테마를 생성하여 전자 상거래 상점의 모양과 느낌을 완벽하게 제어할 수 있습니다.
성능 향상 : Liquid 템플릿이 컴파일되고 캐시되어 개선됩니다. 웹사이트 성능과 속도 다른 템플릿 엔진과 비교.
대규모 커뮤니티: Shopify 대규모 사용자 커뮤니티가 있어 풍부한 지식과 지원에 대한 액세스를 제공하여 일반적인 Liquid 관련 문제에 대한 솔루션을 더 쉽게 찾을 수 있습니다.

요구조건 니즈

그래서 당신은 무엇을 사용하기 시작해야 Shopify 액체?

광고 ⓘ

이미 Shopify 저장, Shopify Liquid는 무료로 사용할 수 있습니다. 아래에서 Liquid를 찾는 방법에 대해 설명하겠습니다. 하지만 지금 알아야 할 것은 모든 사이트가 Shopify 은 Liquid로 제작되었으므로 사이트를 만들자마자 이 코드를 수동으로 편집할 수 있습니다.

그러나, 당신이 가지고 있지 않은 경우 Shopify 스토어에서 Liquid를 가지고 놀기 위해서는 하나를 만들어야 합니다.

먼저 Shopify and 계획을 선택. 세부 정보를 입력하고 계정을 만듭니다.
너의 Shopify 관리자, 테마를 클릭합니다. Shopify 자동으로 기본 테마를 제공합니다. 그대로 두거나 시작할 다른 테마를 선택할 수 있습니다.
Shopify 매장을 완성하기 위해 살펴볼 수 있는 체크리스트가 있습니다. 제품 페이지 추가, 매장 디자인 등과 같은 모든 기본 사항을 수행해야 합니다.

이제 온라인 상점의 기본 뼈대가 있으므로 이 데이터를 Shopify 서버에 저장하고 Liquid를 사용하여 사용자 지정합니다(자세한 내용은 아래 참조).

Liquid 사용을 시작하는 데 코딩 경험이 필요하지는 않지만 기본 코딩 원칙에 익숙하면 여정이 더 쉬워집니다. 그러나 대부분의 경우 다음에서 광범위한 자체 도움말 문서 및 자습서를 찾을 수 있습니다. Shopify 개발자 포털. 여기에 전용 섹션이 있습니다. 액체 기초.

시작하기 전에 이러한 가이드를 살펴보는 데 시간을 할애하는 것이 좋습니다. Liquid는 강력한 사용자 지정 도구이지만, 수행 중인 작업을 모르는 경우 사이트를 손상시킬 가능성도 있습니다!

시작하기 Shopify 리퀴드

이제까지 배운 내용을 사용하여 어떻게 편집할 수 있는지 살펴보겠습니다. Shopify Liquid를 사용한 테마.

Liquid에 액세스하려면 다음 단계를 따르십시오.

테마 복제: 중대한 실수를 방지하기 위해 시작하기 전에 테마 사본을 만드는 것이 좋습니다. 이렇게 하면 실수를 하더라도 원본 Shopify 테마는 그대로 유지됩니다. 이렇게 하려면 오른쪽에 있는 테마 섹션으로 이동합니다. Shopify 계기반. 편집할 테마를 선택하고 작업을 클릭하여 드롭다운 메뉴를 확인합니다. 이제 복제를 선택합니다.
복제본의 이름을 바꿉니다. 테마를 복제하면 테마 목록에 나타나는 것을 볼 수 있습니다. 원본과 복제본을 혼동하지 않도록 복사본의 이름을 바꿀 수 있습니다. 작업 버튼을 다시 클릭하고 드롭다운 메뉴에서 이름 바꾸기를 누르기만 하면 됩니다.
코드 편집기 시작: 이제 복제본에 대한 조치를 다시 선택하고 코드 편집을 선택하십시오. 테마 내의 전체 코드 목록으로 이동합니다. 오른쪽에 나열된 폴더를 살펴보십시오. 레이아웃, 템플릿, 섹션 등과 같은 테마의 다양한 측면을 포함하는 여러 폴더가 표시됩니다. 템플릿 폴더를 엽니다.
액체 코딩: 템플릿 폴더 안에 파일 유형이 .liquid인 파일 목록이 표시됩니다. 템플릿 폴더에서 더하기 버튼을 선택하여 새 Liquid 파일 템플릿을 만들 수도 있습니다. 페이지, 섹션, 블로그 등 만들고 싶은 템플릿과 파일 이름을 묻습니다. 파일을 편집하려면 템플릿 파일을 두 번 클릭하면 오른쪽의 코드 편집기에서 열립니다.

모든 Liquid 파일 내부에는 HTML 스크립트가 있습니다. 이것은 웹사이트의 골격입니다. 이 HTML 내부에서 Liquid 언어를 사용하여 정보를 검색할 수 있습니다. Shopify 섬기는 사람. 올바른 Liquid 구문(예: 괄호)을 사용하는 한 그에 따라 콘텐츠를 렌더링해야 합니다.

설명을 위해 쉬운 예를 살펴보겠습니다.

다음을 사용하여 이미지 크기 조정 Shopify 리퀴드

이미지는 대부분의 필수 요소입니다. Shopify 백화점. 그러나 여러 이미지를 사용하는 경우 깔끔하게 표시되도록 모든 이미지의 크기를 올바르게 조정하는 것은 악몽이 될 수 있습니다. 이 문제를 해결하기 위해 다음을 살펴보고 있습니다. img_url 필터. 다른 필터와 마찬가지로 img_url은 Shopify 서버. 이 필터를 사용하여 이미지의 크기, 배율, 형식 및 자르기를 변경할 수 있습니다.

필터가 기존 이미지를 일시적으로만 수정하기 때문에 이것은 뛰어난 기술입니다. 템플릿을 렌더링할 때마다 새 이미지를 생성하지 않으므로 사이트 로드 시간이 느려지지 않습니다.

이미지 크기를 어떻게 조정합니까?

먼저 변경 사항을 적용할 위치를 결정해야 합니다. 당신은 적용할 수 있습니다 img_url 필터 다음을 포함하여 이미지 속성이 있는 모든 개체:

제품
제품 변형
광고 항목
Collections
기사

편집할 이미지를 결정한 후에는 타겟팅할 속성을 알아야 합니다. 이미지 속성이 있는 속성을 찾으려면 다음을 살펴보세요. Shopify님의 개체 목록 그리고 그들의 속성.

이 예에서는 블로그 기사 이미지를 타겟팅합니다.

기본 코드는 다음과 같습니다.

{{ blog.articles.image | img_url: ‘100×100' }}

고장:

Blog 는 우리가 찾고 있는 객체이며 속성을 원합니다. 기사, 여기에는 블로그의 모든 기사가 포함되어 있습니다. 특히 블로그 기사의 이미지를 변경하고 싶기 때문에 영상 기사 내의 재산.
이제 필터를 적용합니다. img_url.img_url. 그대로 두면 다음에서 제공한 URL에서 가져온 이미지만 표시됩니다. Shopify 섬기는 사람. 그러나 이미지 크기라는 추가 매개변수도 제공할 것입니다. '100×100' (참고 Shopify 픽셀을 사용하여 크기 범위를 결정합니다).
마지막으로 필터에 사용되는 Liquid 이중 괄호 구문을 사용하여 코드를 래핑합니다.

그리고 끝났습니다! 이렇게 하면 모든 블로그 이미지의 출력이 반환되어 크기가 100 x 100픽셀이 됩니다.

팁과 테이크 아웃

이 기사를 읽고 이제 다음 질문에 대한 답을 얻었기를 바랍니다. Shopify 액체?

당신이 볼 수 있듯이, Shopify 리퀴드 디자인하거나 편집할 때 다양한 기능을 제공할 수 있는 다목적 도구입니다. Shopify 주형. 약간의 학습 곡선이 있지만 일단 익숙해지면 특히 Javascript와 같은 더 복잡한 다른 코딩 언어와 비교할 때 상당히 사용하기 쉽습니다.

사용에 관심이 있으시면 Shopify Liquid를 최대한 활용하려면 다음 사항을 따르는 것이 좋습니다.

Liquid에 대한 확실한 이해로 시작하십시오. Liquid에 대한 강력한 이해를 통해 보다 복잡한 사용자 지정 테마를 구축할 수 있습니다. 이 기반을 통해 신규 사용자는 다음의 모든 잠재력을 활용할 수 있습니다. Shopify 독특하고 매력적인 온라인 상점을 만들 수 있습니다.
테마를 철저히 테스트하십시오. 사용자 지정 테마가 다양한 브라우저 및 장치에서 예상대로 작동하는지 확인하려면 테스트가 필수적입니다. 호환성 문제를 조기에 발견하면 고객의 잠재적인 불만을 피할 수 있습니다.
사용 가능한 도구 및 리소스 사용: Shopify 에는 테마 개발자를 도울 수 있는 풍부한 리소스가 있으므로 사용하십시오! 이를 활용하면 개발 프로세스를 더 빠르고 쉽게 만들 수 있습니다.

이 모든 점들을 다루었으니, 나는 이렇게 말하는 것이 안전하다고 생각합니다. Shopify Liquid는 재미있고 효과적인 방법으로 보다 매력적이고 역동적인 콘텐츠를 업데이트하거나 생성할 수 있습니다. Shopify 가게.

그게 전부입니다. 너에게. 에 대한 귀하의 경험에 대해 알려주십시오. Shopify 아래 댓글에 액체!