Hướng dẫn tạo theme và cài đặt theme Shopify

Rate this post

Thông thường các nhóm khi lập trình theme Shopify thường sẽ tạo một bản theme gốc ban đầu, sau đó yêu cầu các developer sao chép ra một theme mới để bắt đầu dev. Code Tốt xin hướng dẫn các bước tiến hành dành cho các bạn mới làm quen với Shopify.

Tại sao cần tạo theme Shopify từ theme gốc?

Nếu bạn tạo một theme mới hoặc sử dụng theme miễn phí, các thiết lập trong Customize thường sẽ phải làm từ đầu.

Tuy nhiên, thông thường các team có code base với một theme nào đó có sẵn, trong đó có chứa các settings được Team Lead thực hiện một số thiết lập quan trọng như có mã Typekit, các cấu hình về màu sắc, logo, brand,… Nếu ta làm từ đầu để cấu hình thì việc ngốn thời gian là không tránh khỏi. Bởi vậy, ta cần nghĩ đến việc duplicate theme base ra, thì các thiết lập có sẵn trong Customize sẽ có sẵn.

Các bước duplicate giao diện trong backend Shopify

1. Đầu tiên, bạn cần đăng nhập vào backend. Thường liên kết sẽ có dạng, ví dụ: codetot.myshopify.com/admin/

2. Truy cập menu “Themes” từ cột bên trái.

Menu "Themes" trong Shopify
Menu “Themes” trong Shopify

3. Bạn cần tìm theme ID được coi là theme gốc (thường trong tài liệu của team sẽ có nhắc đến) bằng cách hover chuột vào chữ “Customize” như thế này. Trong một số tình huống thì ta có thể dễ dàng tìm thấy hơn nhờ có tên của theme do ai đó đặt, ví dụ “Base Theme” hay gì đó,…

Tìm theme ID của theme trong Shopify
Tìm theme ID của theme trong Shopify bằng cách hover chuột vào chữ “Customize”

4. Bạn lựa chọn “Actions > Duplicate” ở menu cạnh tên theme:

Duplicate theme trong Shopify
Duplicate theme trong Shopify

5. Sau khi theme mới được tạo ra, bạn cũng làm cách tương tự (preview theme hoặc hover trong Customizer để lấy theme id).

6. Phần lớn theme sẽ yêu cầu bạn cung cấp thêm thông tin path CDN để assets images, styles được chính xác khi ta build webproxy. Cách ta lấy CDN link như sau:

Đầu tiên, bạn preview theme:

Preview theme trong Shopify
Preview theme trong Shopify

Sau đó, bạn view-source để ra được path CDN dẫn tới file style hoặc favicon:

Lấy đường dẫn CDN trong theme Shopify
Lấy đường dẫn CDN trong theme Shopify

Một mẹo khá thú vị là các theme trong Shopify nếu cùng một site thì sẽ có số cuối thay đổi như kiểu: /files/x/1111/1111/1111 tức là sẽ nhảy số x.

Bạn có thể dựa vào cách quan sát này để thay đổi path dễ hơn nếu trên code mới nhất đã có update phần path CDN gần chính xác.

Kết luận

Thao tác cài đặt theme Shopify đóng vai trò quan trọng trong quá trình ban đầu khi cài đặt môi trường lập trình Shopify. Nếu bạn không nắm rõ thì nên đọc kĩ tài liệu được cung cấp nội bộ. Ví dụ trên đây của Code Tốt là cách giúp bạn tra cứu thông tin của theme dễ hơn thôi nhé!

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...
Git

18/12/2022

Xử lý lỗi Git không thể tiến hành merge do merge.renamelimit
Khi bạn tiến hành merge nhánh phụ vào nhánh chính hoặc lên nhánh production, có thể xung đột xảy ra...