Bước 1: Lấy mã khóa tiện ích Photta của bạn
Đăng nhập vào Bảng điều khiển Photta Business tại business.photta.app. Truy cập Cài đặt → Khóa API và tìm mã khóa công khai của bạn — nó bắt đầu bằng pk_live_ và có dạng pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Nhấp vào biểu tượng sao chép bên cạnh mã khóa. Đây là thông tin xác thực duy nhất bạn cần để tích hợp Shopify; tuyệt đối không dán khóa bí mật sk_live_ vào bất kỳ mã frontend nào.
Nếu bạn chưa có tài khoản, hãy nhấp vào 'Bắt đầu dùng thử miễn phí' trên trang Photta Business. Bản dùng thử cung cấp cho bạn 50 lượt thử đồ miễn phí và không yêu cầu thẻ tín dụng. Mã khóa pk_live_ của bạn sẽ có sẵn ngay sau khi bạn xác minh địa chỉ email và đăng ký tên miền cửa hàng trong Cài đặt → Tên miền được phép.
Bước 2: Mở mã nguồn giao diện Shopify
Trong bảng quản trị Shopify, đi tới Cửa hàng trực tuyến → Giao diện. Bên cạnh giao diện đang hoạt động, nhấp vào menu ba chấm và chọn Chỉnh sửa mã. Trình chỉnh sửa mã sẽ mở ra một cây thư mục ở bên trái. Mở rộng thư mục Layout và nhấp vào theme.liquid — đây là mẫu chính bao bọc mọi trang trên cửa hàng của bạn.
Sử dụng tính năng tìm kiếm tích hợp của trình duyệt (Cmd+F hoặc Ctrl+F) bên trong trình chỉnh sửa mã và tìm kiếm </body>. Bạn sẽ thấy chính xác một kết quả khớp ở gần cuối tệp, ngay phía trên </html>. Đặt con trỏ của bạn ở dòng ngay trước </body>. Mọi thứ bạn dán ở đây sẽ tải trên mọi trang của cửa hàng, đó chính xác là những gì bạn cần.
Bước 3: Dán đoạn mã script Photta
Dán đoạn mã sau vào dòng ngay trước </body>, thay thế pk_live_... bằng mã khóa thực tế bạn đã sao chép ở Bước 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. Thuộc tính defer rất quan trọng — nó ngăn script chặn việc hiển thị trang trong khi vẫn đảm bảo tiện ích khởi tạo sau khi DOM đã sẵn sàng.
Nhấp vào Lưu ở góc trên bên phải của trình chỉnh sửa mã. Shopify sẽ lưu tệp và hiển thị thông báo xác nhận màu xanh lá cây. Đừng xuất bản phiên bản giao diện mới hay làm bất cứ điều gì khác — thay đổi sẽ có hiệu lực ngay lập tức trên giao diện đang hoạt động của bạn khi bạn nhấp vào Lưu.
Bước 4: Xác minh tiện ích đã tải chính xác
Mở bất kỳ trang sản phẩm nào trên cửa hàng của bạn trong một tab trình duyệt mới (sử dụng cửa sổ ẩn danh để bỏ qua bộ nhớ đệm khi đăng nhập). Cuộn xuống phần sản phẩm — bạn sẽ thấy nút 'Thử đồ' gần nút Thêm vào giỏ hàng. Nhấp vào đó, tải lên ảnh thử nghiệm và xác nhận kết quả thử đồ xuất hiện. Nếu bạn thấy nút này, việc cài đặt đã hoàn tất.
Nếu nút không xuất hiện, hãy mở bảng điều khiển dành cho nhà phát triển (F12 → tab Console) và tìm kiếm bất kỳ thông báo lỗi nào từ photta hoặc sdk.js. Vấn đề phổ biến nhất là sai lệch tên miền: tên miền cửa hàng của bạn phải được liệt kê trong Cài đặt → Tên miền được phép trong Bảng điều khiển doanh nghiệp. Thêm nó vào đó, đợi 30 giây và tải lại trang sản phẩm.
Bước 5: Tùy chỉnh màu sắc tiện ích phù hợp với thương hiệu
Theo mặc định, tiện ích sử dụng bảng màu tối trung tính của Photta. Để phù hợp với thương hiệu của bạn, hãy thêm các thuộc tính dữ liệu vào cùng một thẻ script: data-color-primary cho màu nút CTA (giá trị hex, ví dụ: #D4AF37) và data-color-surface cho nền cửa sổ modal. Ví dụ: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Lưu lại theme.liquid sau khi thêm các thuộc tính này.
Để ghi đè hoàn toàn ở cấp độ CSS, tiện ích Photta cung cấp các thuộc tính CSS tùy chỉnh trên không gian tên --photta-* mà bạn có thể nhắm mục tiêu từ CSS cơ sở của giao diện. Gói Growth trở lên cũng cho phép bạn ẩn huy hiệu 'Cung cấp bởi Photta' thông qua Bảng điều khiển doanh nghiệp trong phần Tùy chỉnh → Thương hiệu. Các thay đổi sẽ áp dụng theo thời gian thực sau khi lưu — không cần triển khai lại hoặc cập nhật tiện ích.