Shopify 온라인 스토어 2.0 – 알아야 할 모든 것

이 페이지의 링크에서 서비스에 가입하면 Reeves and Sons Limited가 수수료를 받을 수 있습니다. 우리의 윤리 성명서.

2020 년에 450 억 XNUMX 천만 명이 넘는 사람들이 Shopify. 이 회사는 총 상품 량에서 120 억 달러 이상을 처리했습니다. 명백한 사실입니다. Shopify 거대하고 커지고 있습니다.

Shopify 화요일 (29 년 2021 월 XNUMX 일) 많은 새로운 기능 발표, 스토어를 운영하는 모든 사용자를 위해 플랫폼을보다 맞춤화 할 수 있도록하기 위해 Shopify. 온라인 Shopify 2.0은 새로운 기능과 테마의 방대한 목록을 제공합니다. Shopify 상인.

의 단어 Shopify 온라인 스토어 2.0은 템플릿 구축에 사용하는 가장 중요한 언어 인 Liquid 언어를 재 구축 한 결과물입니다.

우선, 개편 된 온라인 스토어는 개발자가 자신의 스토어에 맞춤형 기능을 쉽게 추가 할 수 있도록 할 것입니다. Netflix는 초기에이 플랫폼에 대한 액세스 권한을 받았으며이 액세스 권한을 사용하여 Netflix의 첫 번째 전자 상거래 상점 인 Netflix.shop을 만들었습니다.

다음은 Online Store 2.0이 귀하에게 의미하는 바에 대한 간략한 개요입니다.

살펴보기

Online Store 2.0의 새로운 기능은 새로운 편집 환경에서 시작됩니다. 새로운 편집기를 사용하면 판매자가 처음부터 상점을 구축하고 다양한 테마 확장을 추가하고 테마 내에서 앱을 관리하는 것이 정말 간단합니다. 새로운 편집기의 아이디어는 사용 가능한 모든 기능을 중앙 집중화하는 것이 었습니다.

개발중인 새로운 표준 상점 테마 인 참조 테마 Dawn은 현재 기본 테마보다 35 % 더 빠를 것입니다 (내부 추정치에 따름). Shopify 또한 새로운 테마는 15 년 2021 월 XNUMX 일부터 개발자 제출을 위해 공개 될 것이라고 언급했습니다.

또한, Shopify 또한 회사가 인프라 투자와 개발자 도구를 크게 늘릴 것이라고 밝혔습니다. 결과적으로 상인은 헤드리스 상거래 상점을 구축하거나 상점을 사용자 정의하기 위해 플랫폼을 다시 구축해야하는 골칫거리를 겪을 필요가 없습니다.

새롭게 개편 된 온라인 스토어 2.0으로 Shopify 플랫폼을 개발자와 기술 거물에게 더 잘 보이게 만들려고합니다. 이에 대한 신호는 Store 2.0에 대한 Netflix의 조기 액세스를 제공하는 것입니다 (앞서 언급).

Online Store 2.0은 모든 것을 포용합니다. 새로운 스토어를 통해 모든 사람이 생성, 사용자 지정, 확장 및 수익 창출 옵션을 갖게됩니다. Shopify.

새로운 테마 아키텍처

이전 버전의 온라인 상점에서는 상점 내에서 사용할 수있는 블록 수가 제한되었습니다. 이전에는 상점에 다른 제품에 매핑 된 다른 템플릿이있었습니다. 2.0 버전에서 판매자는 이제 각 새 페이지에 섹션을 추가 할 수 있습니다. 이전에는 홈페이지에만 섹션을 추가 할 수있었습니다.

페이지에 대한 설정을 지정하는 JSON 템플릿 파일을 사용하여 각 페이지에 대한 템플릿을 활성화 할 수 있습니다. 이를 통해 페이지, 컬렉션 페이지, 사용자 지정 페이지, 블로그 게시물 등의 모든 섹션을 나열 할 수 있습니다.

JSON 템플릿 파일 내에서 표시 될 섹션을 정의 할 수 있습니다.

템플릿 파일은 기본적으로 표시되는 섹션과 설치 한 테마에 표시되는 순서를 지정합니다. 템플릿이 추가되면 테마 편집기로 이동하여 동적 섹션을 테마 사전 설정으로 추가 할 수 있습니다.

앱 블록이있는 테마 앱 확장

개발자를위한 테마 앱 확장을 사용하면 확장은 물론 다양한 기능을 추가 할 수 있습니다. 이를 통해 판매자의 사이트 기능을 확장 할 수 있습니다.

이전에는 앱을 테마와 통합 할 방법이 없었습니다. 결과적으로 개발자는 기존 테마에 대한 통합 논리를 코딩해야했습니다. 이로 인해 여러 테마에서 일관되게 작동하는 기능을 만드는 것이 정말 어려웠습니다. 더 이상 그렇지 않습니다.

앱 모듈성

또 다른 하이라이트는 앱 모듈성입니다. 이는 개발자가 이제 테마 편집기를 통해 UI 구성 요소를 추가 및 제거 할 수 있음을 의미합니다. 테마 코드에 액세스 할 필요가 없습니다.

이렇게하면 앱의 지원 자산을 간단하게 관리 할 수 ​​있습니다. 와 Shopify 2.0에서는 앱의 지원 자산을 관리하고 플랫폼에서 매우 쉽게 호스팅 할 수 있습니다.

메타 필드 변경

업데이트 된 테마 편집기를 통해 판매자는 메타 필드 및 속성을 추가 할 수 있습니다. 좋은 소식은 API 나 코딩이 필요하지 않다는 것입니다.

판매자는 제품 페이지에 원하는 콘텐츠를 자유롭게 추가할 수 있습니다.format크기 차트 또는 성분 목록과 같이 잠재 구매자를 도울 수 있는 이온. 상점 편집기에 표시되지 않는 모든 것은 메타 필드를 통해 업데이트할 수 있습니다.

다음은 메타 필드를 수정 한 다양한 방법입니다.

  • 유연성: 메타 필드가 더 유연합니다. 이렇게하면 상거래 데이터를 안전하게 가져올 수 있습니다.
  • 표준 메타 필드: 표준 메타 필드를 사용하면 사용자 정의 테마가 시장 카테고리에 관계없이 상점에서 즉시 작업을 시작할 수 있습니다.
  • 프레젠테이션 힌트: 상점 데이터를 렌더링하기 위해 메타 필드에 프리젠 테이션 힌트를 추가 할 수 있습니다.

파일 선택기

Metafields는 이제 이미지 또는 PDF 파일과 같은 많은 미디어를 지원합니다. 특정 파일 유형을 테마에 하드 코딩하는 대신 메타 필드 파일 선택기로 선택한 미디어를 제품 페이지에 업로드 할 수 있습니다.

이미지는 설정 / 파일 섹션을 통해 액세스 할 수 있으며 즉시 사용할 수 있습니다.

제품 보증 또는 크기 차트가 마음에 들면 파일 선택기를 사용하면 간단한 UX로 특정 파일을 쉽게 선택할 수 있습니다. 이를 통해 메타 필드가 테마 자체에 배치됩니다.

파일 API

API 버전 2021-07에서는 File API를 사용하여 일반 파일을 생성, 업데이트 및 삭제할 수 있습니다. 이를 통해 판매자는 다른 앱에 대해 다른 파일을 재사용 할 수 있습니다. 내부 파일 페이지에 추가됩니다. Shopify 관리자.

개발자는 새로운 파일 API를 통해 설정 / 파일에 액세스 할 수 있습니다. 이 버전에 도입 된 GraphQL API를 사용하면 설정 / 파일을 통해 기존 미디어 파일을 쉽게 업로드하거나 선택할 수 있습니다. 앱은 콘텐츠를 통해 메타 필드를 채우는 동안 관리자의이 특정 영역에 대한 액세스의 이점을 누릴 수 있습니다.

이렇게 하면 앱이 테마에 사용된 이미지를 포함하여 제품과 직접 연결되지 않은 파일 및 이미지에 대해 이 공간을 사용할 수 있는 기회가 열립니다.

액체 입력 설정

테마 편집기에 대한 또 다른 업데이트는 편집기 자체에서 페이지에 사용자 정의 Liquid 코드를 추가 할 수있는 Liquid 입력 설정입니다.

Liquid 설정은 HTML 설정과 유사합니다. 유일한 차이점은 Liquid 변수에 액세스 할 수 있다는 것입니다. 판매자는 전역 및 템플릿 별 Liquid 개체에 모두 액세스 할 수 있습니다.

이 설정은 판매자가 Liquid를 사용하여 앱에 대한 코드를 추가 할 때 테마의 코드를 수동으로 변경할 필요성을 줄여줍니다.

개발자 문서를 사용하거나 Dawn의 사용자 정의 액체 섹션에서 새 테마를 봅니다.

이를 통해 개발자는 매장에 대한 독립적 인 결정을 쉽게 내릴 수있어 창의적인 통합 및 솔루션에 집중할 시간을 확보 할 수 있습니다.

새로운 개발자 도구

온라인 스토어 2.0은 개발자가 새로운 앱과 테마를 구축 할 수있는 다양한 기회를 제공합니다. 새로운 개발자 도구는 새로운 테마의 테스트, 개발 및 배포를 통합하고 지원합니다.

최대 XNUMXW 출력을 제공하는 Shopify GitHub 통합을 사용하면 Shopify 테마 확인과 함께 CLI 도구. 이 두 도구를 사용하면 다음에서 테마를 테스트할 수 있습니다. sandbox 그 결과 개발을 간소화합니다.

Shopify Github 통합

GitHub와의 새로운 통합을 통해 새로운 테마 개발 및 유지 관리가 훨씬 더 쉽게 추적 및 관리 할 수 ​​있습니다. GitHub 사용자 계정을 온라인 스토어에 연결합니다. 변경 사항은 GitHub로 푸시되고 선택한 테마의 현재 상태와 동기화 된 저장소로 가져옵니다.

최대 XNUMXW 출력을 제공하는 Shopify GitHub 통합을 통해 사용자 계정을 Shopify 관리하고 Git 브랜치를 스토어의 테마에 연결합니다. 버전 제어에 대한 기본 지원을 통해 테마 코드를 변경, 추적 및 관리 할 수도 있습니다.

테마와 GitHub 통합을 통해 개발자는 버전 제어에 대한 기본 지원을 도입하여 테마를 편집하여 안전하게 협업 할 수 있습니다. 통합을 통해 개발자는 버전 제어를 지원하여 테마를 편집 할 때 안전하게 협업 할 수 있습니다. 판매자 상점에서 작업 할 때 개발자는 라이브 테마로 채우기 전에 GitHub에서 테마 변경 사항을 검토하고 병합하는 워크 플로우를 구현할 수 있습니다.

Shopify CLI

새로운 변경 사항이 있습니다. Shopify CLI 도구도 있습니다. 앱 개발자는 지금까지 CLI 도구를 사용하여 Node.js 및 Ruby on Rails 앱을 생성했지만 현재 변경 사항에 따라 개발자는 CLI로 사용자 정의 테마를 빌드 할 수 있습니다.

얻을 수있는 모든 기능은 다음과 같습니다.

  • 개발 테마 내에서 테마 변경 사항을 개발, 미리보기 및 테스트 할 수 있습니다.
  • 개발자 서버 덕분에 개발 한 CSS 및 Liquid 섹션 변경 사항을 핫 리로드 할 수 있습니다.
  • 새 테마 Dawn을 사용하여 새 테마 프로젝트를 초기화하십시오.
  • 명령 줄에서 테마 푸시 및 게시
  • 테마에서 테마 확인을 실행합니다.
  • 제품 고객 및 초안 주문에 대한 테마에 대한 테스트 데이터를 채 웁니다.

개발 테마는 일시적으로 숨겨진 테마입니다. Shopify 개발을위한 저장. 개발 테마는 관리 영역에 표시되지 않으므로 상점 방문자가 해당 사이트에서 사이트를 볼 것이라고 걱정할 필요가 없습니다.

개발 테마는 테마 제한에 더해지지 않습니다. 이러한 이유로 인해 XNUMX 일 동안 사용하지 않으면 자동으로 삭제됩니다. 또한 실행하면 삭제됩니다. Shopify-로그 아웃 순서. 로그 아웃 할 때 파괴되지 않는 미리보기 링크가 필요한 경우 테마를 스토어로 푸시하면됩니다.

개발 테마를 사용하여 로컬에서 개발중인 테마의 변경 사항을 실시간으로보고, 테마와 상호 작용하고, 테마 편집기로 테마를 사용자 지정할 수 있습니다. 따라서 새로운 CLI 도구를 사용하면 최종 테마가 표시되는 방식을 충분히 제어 할 수 있습니다.

이 도구는 개발 프로세스를 쉽게 만들고 Online Store 2.0을 빠르게 시작할 수 있도록합니다.

테마 확인

Theme Check는 테마에서 오류를 검색하는 Liquid 및 JSON의 또 다른 필수 구성 요소입니다. 스캔이 완료되면 도구는 두 가지 모두에 대한 모범 사례를 강조 표시합니다. Shopify 플랫폼과 Liquid 언어.

이것은 Visual Studio와 같은 편집기와 통합되고 코드 문제를 식별합니다.

오류 메시지가 지속되는 문제를 이해하기 위해 실패한 검사에 대한 링크가 나타납니다. Theme Check는 Shopify CLI 도구를 사용하므로 별도로 설치할 필요가 없습니다.

주목할만한 기타 기능

대량 돌연변이 API

Bulk OperationRunMutation 엔드 포인트는 Shopify 데이터를 대량으로 저장소로 내 보냅니다.

GraphML 시뮬레이션 대신 대량 변형 작업을 실행할 수 있습니다. 이것은 많은 수의 파일로 인한 병목 현상없이 모든 데이터를 가져올 수있는 간단한 방법입니다.

사용 가능한 옵션은 다음과 같습니다.

  • 제품만들기
  • 컬렉션만들기
  • 제품업데이트
  • 제품업데이트미디어
  • 제품페이지업데이트
  • 제품 변형 업데이트
  • 메타필드업서트
  • priceListFixedPrices추가
  • priceListFixedPrices삭제

할인을위한 Checkout Resource API

체크 아웃 리소스는 체크 아웃에 추가 된 할인에 대해 application_type 속성을 반환합니다. 이 필드에는 할인이 적용된 방식이 표시됩니다.

유효한 값은 automatic, discount_code, manual 및 script입니다.

액체 입력 설정 테마

새로운 Liquid 입력 설정은 판매자가 편집기 자체에서 직접 맞춤형 Liquid 코드를 추가 할 수 있도록합니다. HTML 설정과 매우 유사합니다.

판매자는 테마 코드를 전혀 편집하지 않고 전역 및 템플릿 별 Liquid 개체에 액세스 할 수 있습니다. 새로운 참조 테마는 Dawn입니다. 유연성과 사용 편의성 옵션으로 구운 오픈 소스 참조 테마입니다. JSON 템플릿 및 앱 블록과 같은 여러 Online Store 2.0 기능을 사용합니다.

요약하면 다음과 같습니다.

Shopify 상점에 세 부분이 있습니다.

  • 테마 및 온라인 편집기
  • 콘텐츠 저장
  • 개발자 도구

개발자가 아니고 단순히 상점 소유자라면 새로운 온라인 편집기 및 콘텐츠 관리 시스템이 상점 소유자로서 가장 큰 영향을 미칠 것입니다.

Shopify의 업데이트 된 템플릿 언어에는 이제 2018 년에 출시 된 WordPress의 Gutenberg와 같은 유사한 사내 편집기가 있습니다. 따라서 다음과 같은 플랫폼의 페이지 편집기에 더 가까워집니다. Squarespace 과 Wix.

편집기는 쉽게 여러 Shopify apps 인기있는 Shogun 페이지 빌더를 포함합니다.

새 편집기를 사용하면 중소기업에서 새 페이지 템플릿을 만들고 내장 된 도구를 사용하여 한 줄의 코드를 작성하지 않고도 그 안에 데이터를 채울 수 있습니다. Shopify 페이지 섹션과 블록.

마지막으로 콘텐츠 관리 시스템은 외관과 추가 기능을 갖춘 또 다른 매우 중요한 영역입니다. 새로운 업데이트를 통해 완전히 새로운 사용자 지정 콘텐츠 입력을받을 수 있습니다. 콘텐츠를 한 번 만들고 온라인 상점을 포함한 모든 채널에 게시하십시오.

어떻게 생각하십니까? Shopify 온라인 스토어 2.0? 아래 의견에 알려주십시오.

보그 단 란 세아

Bogdan은 Inspired Mag의 창립 멤버로서이 기간 동안 거의 6 년의 경험을 축적했습니다. 여가 시간에는 클래식 음악을 공부하고 시각 예술을 탐구하는 것을 좋아합니다. 그는 또한 수정 프로그램에 상당히 집착하고 있습니다. 그는 이미 5를 소유하고 있습니다.

코멘트 4 응답

  1. 표시 말한다 :

    으로 Shopify 이러한 개선 사항 중 일부를 기대하고 있습니다. 페이지를 만들고 편집하기 위해 앱에 비용을 지불해야 하는 것에 지쳤습니다. Dick and Jane 용어로 설명된 멋진 기사입니다.

  2. 제인 게이츠 말한다 :

    공유해 주셔서 감사합니다. 쉽게 통찰력 있는 읽기!

  3. 달러 그룹 말한다 :

    훌륭한 기사. 이보다 더 잘 쓸 수는 없습니다.계속하십시오!

    1. 보그 단 란 세아 말한다 :

      ????

댓글을 남겨주세요.

귀하의 이메일 주소는 공개되지 않습니다. *표시항목은 꼭 기재해 주세요. *

평점 *

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.