Bài viết này sẽ hướng dẫn bạn thiết lập Personalization Studio của Gelato cho các chủ đề Shopify. Nội dung gồm bật xem trước sản phẩm trực tiếp, ẩn các thành phần một cách hợp lý, và tích hợp mượt nút chỉnh sửa trên trang sản phẩm và giỏ hàng — kể cả khi chủ đề của bạn không được hỗ trợ sẵn.
Hiển thị xem trước sản phẩm trực tiếp
Hãy tưởng tượng khách hàng nhìn thấy sản phẩm cá nhân hóa của họ được tạo ra ngay trước mắt. Cách để biến điều đó thành hiện thực:
Kiểm tra để định vị
Mở công cụ dành cho nhà phát triển của trình duyệt web (nhấp chuột phải lên trang và chọn "Inspect" hoặc "Inspect Element").
Dùng công cụ chọn phần tử (thường là biểu tượng mũi tên) để chọn đúng khu vực trên trang sản phẩm nơi bạn muốn hiển thị bản xem trước trực tiếp.
Sao chép tên selector. Đây là đoạn mã dùng để xác định vùng đã chọn (ví dụ: ".product-media").
Tích hợp Selector
Vào trang quản trị Shopify của bạn và mở ứng dụng Personalization Studio.
Tìm phần cài đặt nhúng ứng dụng.
Dán tên bộ chọn đã sao chép vào trường được chỉ định để xem trước trực tiếp.
Lưu cài đặt của bạn.
Trải nghiệm điều kỳ diệu
Làm mới trang sản phẩm. Voila! Giờ bạn sẽ thấy bản xem trước trực tiếp hoạt động.
Mẹo: Để nhắm mục tiêu chính xác, tránh các bộ chọn chung chung như 'col-2', 'col-4' hoặc 'container'. Hãy chọn các bộ chọn cụ thể.
Ẩn phần tử một cách mượt mà
Giữ trang sản phẩm gọn gàng, tập trung bằng cách ẩn các phần không cần thiết. Cách làm như sau:
Kiểm tra rồi chọn
Mở công cụ dành cho nhà phát triển của trình duyệt (nhấp chuột phải + kiểm tra).
Dùng trình chọn phần tử để xác định chính xác phần tử bạn muốn ẩn.
Sao chép tên bộ chọn cho phần tử đó.
Cấu hình Selector
Đi đến phần cài đặt nhúng ứng dụng trong Personalization Studio.
Tìm phần được chỉ định để ẩn các thành phần.
Dán tên bộ chọn đã sao chép vào ô được cung cấp.
Lưu cài đặt của bạn.
Chứng kiến màn biến mất
Làm mới trang, và phần tử đã chọn sẽ biến mất.
Nâng cấp trang giỏ hàng với bản xem trước được Cá nhân hóa
Nâng tầm trải nghiệm mua sắm bằng cách hiển thị bản xem trước sản phẩm được Cá nhân hóa ngay trên trang giỏ hàng. Làm theo các bước sau:
Kiểm tra để nhận diện
Mở công cụ dành cho nhà phát triển của trình duyệt và đi tới trang giỏ hàng của bạn.
Dùng công cụ chọn phần tử để chọn khu vực bạn muốn hiển thị bản xem trước đã Cá nhân hóa. Thường thì đó là trong khung chứa hình ảnh của sản phẩm trong giỏ hàng.
Sao chép tên bộ chọn, và nhớ nhắm đúng vào chính phần tử hình ảnh để bản xem trước hiển thị tối ưu.
Thiết lập bộ chọn
Đi đến cài đặt nhúng ứng dụng trong Personalization Studio.
Dán tên bộ chọn đã sao chép vào trường được chỉ định để xem trước trang giỏ hàng.
Lưu cài đặt của bạn.
Xem trước trong giỏ hàng
Làm mới trang giỏ hàng. Giờ bạn sẽ thấy bản xem trước sản phẩm đã Cá nhân hóa trong từng mục giỏ hàng, giúp nhắc lại trực quan các lựa chọn tùy chỉnh của họ.
Mẹo: Để có bản xem trước cá nhân hóa chính xác, hãy nhắm vào hình ảnh của giỏ hàng cụ thể, không phải toàn bộ div. Chúng tôi khuyến nghị nhắm vào thẻ hình ảnh bên trong div cart-item, ví dụ, ".cart-item img".
Trao quyền chỉnh sửa với nút Sửa trên trang giỏ hàng
Cho khách hàng tự do chỉnh sửa ngay cả sau khi đã thêm sản phẩm vào giỏ. Hướng dẫn từng bước này sẽ giúp bạn thêm nút "Chỉnh sửa" vào trang giỏ hàng:
Kiểm tra và định vị
Mở công cụ dành cho nhà phát triển của trình duyệt và chuyển đến trang giỏ hàng.
Dùng trình chọn phần tử để chọn chính xác vị trí bạn muốn nút "Sửa" xuất hiện cho từng mặt hàng trong giỏ.
Sao chép tên bộ chọn. Có thể bạn sẽ cần dùng các giả bộ chọn như :nth-child() để chọn đúng phần tử trong danh sách sản phẩm trong giỏ hàng.
Tích hợp Selector
Trong cài đặt ứng dụng Personalization Studio, tìm mục dành cho nút chỉnh sửa trang giỏ hàng.
Dán tên bộ chọn đã sao chép vào ô được chỉ định.
Lưu cài đặt của bạn.
Làm mới và xem lại
Làm mới trang giỏ hàng. Giờ bạn sẽ thấy nút "Chỉnh sửa" được đặt đúng chỗ, cho phép khách hàng sửa sản phẩm đã cá nhân hóa mà không cần rời khỏi giỏ hàng.
Thành thạo bộ chọn để nhắm mục tiêu chính xác
Hãy xem selectors như tọa độ GPS của bạn trong thế giới phát triển web. Đây là cách dùng chúng hiệu quả:
Tìm hiểu về "div:nth-child()" Sự kết hợp này là chìa khóa để xác định chính xác các phần tử trong một nhóm. Bộ chọn ':nth-child()' giúp bạn nhắm đến từng phần tử con nằm trong một phần tử cha.
Xác định phần tử cha: Bắt đầu bằng cách tìm phần tử cha đóng vai trò là vùng chứa cho các phần tử con bạn muốn nhắm đến. Ví dụ, một div với class 'cart-item' có thể chứa nhiều phần tử con như hình ảnh, tiêu đề và giá.
Đếm phần tử con: Sau khi xác định được phần tử cha, hãy đếm các phần tử con bên trong nó. Con số bạn dùng trong bộ chọn ':nth-child()' tương ứng với vị trí của phần tử con bạn muốn nhắm tới. Ví dụ, ':nth-child(2)' sẽ chọn phần tử con thứ hai trong phần tử cha đã chỉ định.
Để xem danh sách các giao diện được Personalization Studio hỗ trợ nguyên bản, hãy nhấp vào đây.