Trợ giúp
Đăng nhập

Tùy chỉnh nâng cao về hiển thị sản phẩm và bộ sưu tập cho plugin Shopify

Các cài đặt nâng cao này giúp tùy chỉnh cửa hàng trên WordPress, cá nhân hóa thương hiệu doanh nghiệp và nâng cao trải nghiệm mua hàng của khách hàng.

Trên trang này

Plugin Shopify và các thành phần cửa hàng Shopify

Plugin Shopify được xây dựng bằng Shopify Storefront Web Components. Các thành phần sau đây được sử dụng làm khối dựng cho cửa hàng Shopify:

  • Thành phần thẻ sản phẩm: Thành phần này hiển thị thông tin sản phẩm riêng lẻ, thường xuất hiện trên các sản phẩm đăng tải hoặc trang bộ sưu tập. Thành phần này thường bao gồm các yếu tố như hình ảnh sản phẩm, tiêu đề, giá và nút Thêm vào giỏ hàng.
  • Thành phần hộp tương tác xem nhanh sản phẩm: Thành phần này hiển thị một hộp tương tác đè lên nội dung hiện tại, chứa thông tin chi tiết về sản phẩm, nút Thêm vào giỏ hàng và liên kết để xem chi tiết đầy đủ về sản phẩm.
  • Thành phần trang chi tiết sản phẩm: Thành phần này hiển thị một sản phẩm duy nhất với đầy đủ chi tiết sản phẩm. Mỗi thành phần trang chi tiết sản phẩm đều có một URL riêng.
  • Thành phần bộ sưu tập: Thành phần này hiển thị các bộ sưu tập sản phẩm đã tạo.

Tùy chỉnh hiển thị sản phẩm và bộ sưu tập Shopify

Các thành phần cửa hàng Shopify mặc định trên plugin có các công cụ giúp tạo ra trải nghiệm mua sắm liền mạch. Bạn cũng có thể linh hoạt tùy chỉnh cách hiển thị của các thành phần này để phù hợp với bộ nhận diện thương hiệu và yêu cầu thiết kế cụ thể.

Để thực hiện các tùy chỉnh này, bạn cần có quyền truy cập để sửa đổi các tệp và thư mục chủ đề WordPress. Quá trình này bao gồm việc tạo một thư mục chuyên dụng bên trong thư mục chủ đề WordPress đang hoạt động.

Các bước thực hiện:

  1. Tạo thư mục Shopify: Bắt đầu bằng cách tạo một thư mục mới có tên Shopify ngay bên trong thư mục chủ đề đang hoạt động. Thư mục này đóng vai trò là vị trí trung tâm cho các tệp ghi đè thành phần tùy chỉnh.
  2. Ghi đè từng thành phần: Để sửa đổi một thành phần cụ thể, hãy thêm tệp PHP có tên được chỉ định vào bên trong thư mục Shopify mới tạo. Quy ước đặt tên cho các tệp ghi đè này rất quan trọng để plugin nhận dạng và áp dụng các phiên bản tùy chỉnh:
    • Để ghi đè Thành phần thẻ sản phẩm, hãy tạo một tệp PHP có tên product-card.php trong thư mục Shopify.
    • Để ghi đè Thành phần hộp tương tác xem nhanh sản phẩm, hãy tạo một tệp PHP có tên modal.php trong thư mục Shopify.
    • Để ghi đè Thành phần trang chi tiết sản phẩm, hãy tạo một tệp PHP có tên pdp.php trong thư mục Shopify.
    • Để ghi đè Thành phần bộ sưu tập, hãy tạo một tệp PHP có tên component.php trong thư mục Shopify.

Sau khi tạo tệp PHP tùy chỉnh, plugin sẽ bỏ qua tệp thành phần mặc định đối với thành phần cụ thể đó. Bạn có thể triển khai bất kỳ mã nào trong các tệp ghi đè này, từ các khối HTML tĩnh đến logic PHP phức tạp.

Mặc dù bạn nên tận dụng Shopify Storefront Web Components (như được sử dụng trong cấu trúc plugin mặc định) để đảm bảo tính nhất quán và khả năng truy cập vào các chức năng tích hợp sẵn của Shopify, nhưng bạn không bị giới hạn ở các thành phần này. Bạn có thể tích hợp các phương pháp khác để tìm nạp và hiển thị dữ liệu sản phẩm cũng như bộ sưu tập, qua đó cho phép thực hiện các tùy chỉnh nâng cao.

Để biết thêm thông tin và các thực hành tốt nhất, hãy tham khảo tài liệu dành cho nhà phát triển plugin WordPress.

Viết lại liên kết sản phẩm và bộ sưu tập Shopify

Khi đăng sản phẩm hoặc bộ sưu tập trên Shopify, mỗi sản phẩm và bộ sưu tập sẽ có một URL riêng. Theo mặc định, các URL này được tạo bằng miền Shopify của bạn. Với chức năng viết lại, bạn có thể truy cập các URL riêng đó bằng miền WordPress công khai.

Các bước thực hiện:

  1. Từ plugin Shopify, đi tới phần Cài đặt.
  2. Trong tab Nâng cao, hãy đảm bảo đã kích hoạt hai hộp kiểm trong phần Viết lại liên kết Shopify.
  3. Đi tới Đường liên kết cố định.
  4. Nhấp vào Lưu để áp dụng quy tắc mới này.
  5. Đi tới bảng điều khiển quản trị Shopify, rồi điều hướng đến trang chi tiết bộ sưu tập hoặc sản phẩm mà bạn muốn tạo liên kết WordPress.
  6. Trong thẻ hồ sơ công cụ tìm kiếm, có một URL hiển thị để liên kết trực tiếp khách hàng đến sản phẩm hoặc bộ sưu tập của bạn. Ví dụ: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
  7. Thêm products/huskee-reusable-cup vào cuối URL trang web WordPress. Ví dụ: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Tùy chỉnh hành vi của thẻ sản phẩm

Với các thành phần cửa hàng Shopify, có hai loại thẻ chi tiết sản phẩm:

  1. Xem nhanh: Khi di chuột qua thẻ sản phẩm, khách hàng có tùy chọn Quick Shop (Mua sắm nhanh). Khi nhấp vào, chi tiết sản phẩm sẽ hiển thị theo kiểu cửa sổ bật lên hoặc hộp tương tác đè lên nội dung hiện tại trong nền.
  2. Trang sản phẩm chi tiết: Khi khách hàng nhấp vào thẻ sản phẩm, chẳng hạn như nhấp vào hình ảnh hoặc tên sản phẩm, chi tiết sản phẩm sẽ hiển thị ở chế độ xem toàn trang với một URL riêng.

Bạn có thể thay đổi cài đặt này để chỉ hiển thị chế độ xem nhanh, chỉ hiển thị trang sản phẩm chi tiết hoặc hiển thị cả hai.

Các bước thực hiện:

  1. Từ plugin Shopify trong WordPress, đi tới phần Cài đặt.
  2. Từ tab Nâng cao, đi tới phần Chế độ xem sản phẩm.
  3. Chọn tùy chọn phù hợp nhất với cửa hàng.
  4. Nhấp vào Lưu.