KakaOnline KB

Shop Page Design

7 phút đọc

Shop Page Design

Nguồn chính thức · TikTok Shop · Thông tin chính thức

Cập nhật: 28/07/2026

Tình huống

TikTok Shop cung cấp công cụ Shop Page Design cho phép người bán tại Việt Nam tùy chỉnh trang chủ cửa hàng thay vì sử dụng giao diện mặc định. Công cụ này hỗ trợ kéo-thả các thành phần để cá nhân hóa trang cửa hàng, nhằm tăng hiệu suất kinh doanh và nhận diện Thương hiệu.

Insight

Shop Page Design là công cụ thiết kế trang cửa hàng trên TikTok Shop cho phép người bán tùy chỉnh giao diện trang chủ thông qua kéo-thả các khối (tiles). Công cụ này bao gồm ba khu vực chính: Store Design Modules (các thành phần trang trí có thể kéo thả), Canvas (khu vực xem trước trực quan), và Component Property Panel (bảng chỉnh sửa thuộc tính từng thành phần).

Các thành phần chính bao gồm:

  1. Header: Cho phép tùy chỉnh tiêu đề trang chủ theo phong cách Thương hiệu. Đặc biệt, cửa hàng Mall có tính năng độc quyền upload ảnh nền và logo tại menu “header image”.

  2. Visuals (Thành phần hình ảnh):

  • Single Image: Định dạng JPG/JPEG/PNG, tối thiểu 800px, tối đa 5MB, tỷ lệ 16:9, 1 hình, có thể cấu hình tiêu đề, hình ảnh, link (sản phẩm đơn hoặc danh mục)
  • Carousel: Định dạng JPG/JPEG/PNG, tỷ lệ 8:10 hoặc 10:8, 2-5 hình, cấu hình tương tự Single Image
  • Multi-click Image: Định dạng JPG/JPEG/PNG, kích thước khuyến nghị 1200x675, chiều rộng >800px, tối đa 2MB, tỷ lệ tự do, 1 hình, hỗ trợ tối đa 10 hotspot có thể cấu hình kích thước, vị trí và link đến sản phẩm hoặc danh mục
  • Multi-Image: Định dạng JPG/JPEG/PNG, khuyến nghị 800x800px, tối đa 2MB, tỷ lệ tự do, 2-4 hình
  1. Products and Categories (Sản phẩm và danh mục):
  • Featured Products (Tự sắp xếp): Layout ngang hiển thị tối đa 6 sản phẩm (3 mỗi hàng, click ”>” xem thêm); layout dọc hiển thị tối đa 3 sản phẩm (click ”>” xem thêm); chọn tối đa 30 sản phẩm; cấu hình tiêu đề, thứ tự sản phẩm, layout ngang/dọc, trang phụ
  • By Category: Layout ngang/dọc, hiển thị 1-3 sản phẩm (click ”>” xem thêm ở trang phụ), chọn danh mục, cấu hình tiêu đề
  • Collection Image: Chỉ 1 hình, định dạng jpg/jpeg/png, chiều rộng >800px, tối đa 2MB; chọn tối đa 30 sản phẩm, tối thiểu 4 sản phẩm; upload hình, tên bộ sưu tập, sản phẩm/danh mục, nút (text và màu)
  • Smart Components: New Release (sản phẩm mới) và Top Products (sản phẩm bán chạy) - tự động hiển thị động không cần chỉnh sửa nhiều
  • Collections: Nhóm sản phẩm theo chủ đề như Summer Collection, Winter Collection
  1. Promotion component (Thành phần Khuyến mãi thông minh):
  • Vouchers: Hiển thị 1-3 coupon, ưu tiên: không ngưỡng > có ngưỡng, giảm giá cao > thấp, gần hết hạn > xa hết hạn
  • Flash Deal: 1-3 sản phẩm trong Flash Sale gần nhất đang diễn ra
  • Seller Buy More Save More: 1-3 sản phẩm trong chương trình mua nhiều giảm nhiều (ưu tiên sản phẩm có doanh số 30 ngày cao hơn); nếu nhiều chương trình cùng lúc, ưu tiên chương trình kết thúc trước
  • Special Deals: 1-3 sản phẩm đang giảm giá (phần trăm hoặc giá cố định), sắp xếp theo mức giảm từ cao đến thấp

Quy trình thiết kế: Bước 1 - Vào Seller Center > Shop Tab > Shop Page Builder > Shop Page Design > Duplicate to edit. Bước 2 - Tùy chỉnh các thành phần trên workbench. Bước 3 - Click “publish” để gửi duyệt, có thể “preview” hoặc “save” trước khi publish.

Quản lý phiên bản: Online Version (trang đang hiển thị, có thể “Replace with default” để khôi phục); Unpublished Version gồm “Under Reviews”, “Change Needed” và “Default Home”; Version Preview để xem trước.

Khi không đạt duyệt, người bán nhận thông báo qua email và seller notification, draft được gắn tag “Change Needed” và workbench hướng dẫn điều chỉnh. Có thể chia sẻ link cửa hàng qua nút Share Store, tải QR code hoặc copy link.

Lưu ý quan trọng: Do đang thử nghiệm hiển thị nhiều phiên bản, người mua có thể thấy các phiên bản khác nhau của Store Page. Voucher chỉ hiển thị khi ở trạng thái active, không hiển thị khi ở trạng thái upcoming.

Hành động

Các bước thực hiện thiết kế trang cửa hàng:

Bước 1: Truy cập Seller Center > “Shop Tab” > Shop Page Builder > Shop Page Design > chọn “Duplicate to edit”

Bước 2: Trên workbench Shop Page Design, tùy chỉnh các thành phần:

  • Kéo thả các module từ Store Design Modules bên trái vào Canvas ở giữa
  • Chọn từng thành phần trên Canvas để mở Component Property Panel bên phải và chỉnh sửa

Các thành phần có thể thêm:

  • Header: Tùy chỉnh tiêu đề theo Thương hiệu. Cửa hàng Mall: upload ảnh nền và logo tại “header image”
  • Visuals: Thêm Single Image, Carousel, Multi-click Image, hoặc Multi-Image với các thông số kỹ thuật đã quy định
  • Products and Categories: Thêm Featured Products (chọn tối đa 30 sản phẩm), By Category, Collection Image (tối thiểu 4 sản phẩm), hoặc sử dụng Smart Components (New Release, Top Products)
  • Promotion: Thêm Vouchers, Flash Deal, Seller Buy More Save More, Special Deals (tự động hiển thị nếu đáp ứng điều kiện)

Mẹo sử dụng Multi-click Image: Kéo thả component vào canvas > Upload hình > Xác định hotspot trên hình > Gắn link cho mỗi hotspot đến sản phẩm hoặc danh mục cụ thể

Mẹo sử dụng Collections: Tạo các bộ sưu tập theo mùa như Summer Sales, Spring Floral để tạo trải nghiệm mua sắm độc đáo

Bước 3: Sau khi hoàn thành, click “publish” để gửi duyệt. Có thể chọn “preview” hoặc “save” nếu chưa muốn publish ngay. TikTok Shop sẽ Reviews và phê duyệt trước khi hiển thị cho khách hàng.

Quản lý draft:

  • Online Version: Xem thông tin trang đang online, click “Replace with default” để khôi phục trang chủ mặc định
  • Unpublished Version: Quản lý các phiên bản “Under Review”, “Change Needed”, “Default Home”
  • “Change Needed”: Có thể edit, duplicate, publish và delete
  • Version Preview: Xem trước thiết kế

Xử lý khi không đạt duyệt:

  • Kiểm tra email và seller notification
  • Tìm draft có tag “Change Needed”
  • Làm theo hướng dẫn điều chỉnh trên workbench
  • Chỉnh sửa và publish lại

Chia sẻ cửa hàng: Click nút Share Store ở góc trên bên phải, tải QR code hoặc copy link

Lưu ý: Đảm bảo Voucher ở trạng thái active mới hiển thị trong module promotion.

Điều kiện áp dụng

Áp dụng cho người bán tại Việt Nam. Cửa hàng Mall có tính năng header độc quyền. Các thành phần Khuyến mãi thông minh chỉ hiển thị khi có chương trình đang diễn ra và đáp ứng điều kiện. Do đang thử nghiệm hiển thị đa phiên bản, người mua có thể thấy các phiên bản khác nhau của Store Page.

Liên kết

Xem thêm:

Sơ đồ

Liên kết ngược