Yêu cầu:

1. Tài khoản Đối tác Shopify và Cửa hàng Shopify: Nếu bạn muốn sử dụng cửa hàng phát triển để làm việc trên một giao diện, hãy tạo hoặc đăng nhập vào tài khoản Đối tác Shopify, sau đó tạo một cửa hàng phát triển nếu bạn chưa có. Nếu bạn muốn làm việc trên một cửa hàng đã được thiết lập, hãy đảm bảo bạn có tài khoản cộng tác viên hoặc nhân viên với quyền “Quản lý giao diện” hoặc bạn là chủ sở hữu cửa hàng.
2. Node.js: Cài đặt phiên bản mới nhất của Node.js, vì nó cần thiết để chạy các công cụ cần thiết cho phát triển giao diện Shopify.
3. Git: Cài đặt Git để quản lý kiểm soát phiên bản và dễ dàng cộng tác với các nhà phát triển khác.
4. Shopify CLI: Đảm bảo bạn đã cài đặt Shopify CLI trên hệ thống của mình cùng với mọi thứ được đề cập trong tài liệu Shopify CLI. Nếu bạn chưa cài đặt, hãy tham khảo tài liệu Shopify CLI để biết hướng dẫn cài đặt và sau đó bạn có thể sử dụng lệnh dưới đây.
   

npm install -g @shopify/cli @shopify/theme

Thiết lập Môi trường Phát triển Cục bộ

Bước 1: Tạo Thư mục Dự án

Tạo một thư mục dành riêng cho dự án của bạn và điều hướng đến nó:

mkdir ten-thu-muc-cua-ban
cd ten-thu-muc-cua-ban

Bước 2: Kéo Giao diện từ Cửa hàng của Bạn

Sử dụng lệnh sau để kéo giao diện từ cửa hàng của bạn về hệ thống cục bộ:

shopify theme pull --store=ten-cua-hang-cua-ban.myshopify.com

• Nếu đây là lần đầu tiên bạn chạy lệnh trên, bạn sẽ được yêu cầu đăng nhập vào Shopify.
• Nếu bạn đã đăng nhập vào cửa hàng của mình ít nhất một lần, bạn sẽ được yêu cầu chọn giao diện.
• Chọn giao diện bạn muốn và nhấn Enter để bắt đầu tải xuống.

Bước 3: Mở Trình soạn thảo Mã của Bạn

Khởi chạy trình soạn thảo mã ưa thích của bạn và tải thư mục dự án bạn đã tạo trước đó.

Bạn sẽ thấy tất cả các tệp có trong giao diện cửa hàng của bạn hiện có sẵn trong thư mục cục bộ.

Bước 4: Khởi tạo Phát triển Giao diện

Thực hiện lệnh sau trong terminal của trình soạn thảo mã của bạn (đảm bảo bạn đang ở trong thư mục dự án):

shopify theme dev

Lệnh này sẽ tạo một giao diện phát triển, cho phép bạn thực hiện các sửa đổi cục bộ mà không ảnh hưởng đến cửa hàng trực tuyến của bạn.

Bước 5: Xem trước Giao diện Phát triển trong Môi trường Cục bộ

Sau khi bạn chạy shopify theme dev, bạn có thể tương tác với giao diện của mình trong trình duyệt. Shopify CLI tải lên giao diện như một giao diện phát triển trên cửa hàng.

Lệnh sẽ trả về một URL tự động tải lại các thay đổi cục bộ, cho phép bạn xem trước các thay đổi trong thời gian thực bằng cách sử dụng dữ liệu của cửa hàng.

Bạn có thể điều hướng đến http://127.0.0.1:9292 để mở bản xem trước giao diện trong trình duyệt của mình.

Bước 6: Xem trước Các Thay đổi Được Thực hiện trong Mã Cục bộ của Bạn

Hãy thoải mái chỉnh sửa mã của giao diện phát triển của bạn và xem trước các thay đổi trong thời gian thực. Ví dụ, bạn có thể muốn điều chỉnh văn bản hiển thị trong thanh thông báo của cửa hàng của mình.

Khi bạn đã hài lòng với các thay đổi của mình, bạn có thể dễ dàng đẩy chúng lên kho GitHub của mình và sau đó triển khai chúng lên cửa hàng trực tuyến của bạn.