Thiết Kế Trang Cửa Hàng Với Các Thành Phần Trong Trình Chỉnh Sửa Giao Diện Chủ Đề (Chủ Đề OS 3.0)
Trong Trình chỉnh sửa Chủ đề cho các chủ đề OS 3.0, các thành phần là các khối xây dựng bạn sử dụng để thiết kế mọi trang của cửa hàng, từ trang chủ đến các trang sản phẩm và bộ sưu tập. Mỗi trang được lắp ráp từ các thành phần, và nhiều thành phần có thể được tùy chỉnh thêm với các Khối lồng nhau, mang đến cho bạn một cách nhất quán và mô-đun để xây dựng và điều chỉnh bố cục cửa hàng của bạn.
Hướng dẫn này giải thích cách các trang cửa hàng được cấu trúc, cách các thành phần khác nhau với nhau (Toàn cục so với Riêng trang), nơi tìm các cài đặt đầy đủ cho từng thành phần, và cách sử dụng các hành động trong trình chỉnh sửa như sao chép các thành phần giữa các trang.
|
Trước khi bắt đầu: Xác nhận bạn đang sử dụng công cụ đúng Bài viết này đề cập đến các thành phần trong Trình chỉnh sửa Chủ đề trên Máy tính để bàn (truy cập qua Cửa hàng trực tuyến > Thiết kế). Nếu bạn đang tìm kiếm các cài đặt thiết kế tương đương trong Ứng dụng Người mua, vui lòng tham khảo các bài viết trợ giúp trong mục "Thiết kế Ứng dụng" thay thế. |
Hiểu về Thành phần và Khối trong Trình chỉnh sửa Chủ đề
Mỗi trang cửa hàng được xây dựng từ các thành phần, các mô-đun bạn thêm thông qua nút Thêm thành phần ở thanh bên trái, chẳng hạn như biểu ngữ, băng chuyền sản phẩm hoặc đường dẫn điều hướng. Hầu hết các thành phần có thể chứa một hoặc nhiều khối, là các phần tử nhỏ hơn nằm bên trong thành phần và được thêm thông qua biểu tượng Thêm nội dung (ví dụ, tiêu đề, trường văn bản phong phú hoặc nút mua hàng). Khối có thể được lồng nhau đến vài cấp độ, cho phép bố cục chi tiết hơn trong một thành phần duy nhất.
|
Lưu ý:
|
Thành phần Chung và Thành phần Riêng cho Trang
Thành phần được chia thành hai loại:
- Thành phần Chung: Có thể được thêm vào bất kỳ loại trang nào (ví dụ, Đường dẫn điều hướng). Các cài đặt chung của chúng được mô tả trong bài viết này; nếu một trang có hành vi đặc biệt cho một thành phần chung, bài viết dành riêng cho trang đó sẽ ghi chú và liên kết trở lại đây.
- Thành phần Riêng cho Trang: Chỉ có trên các loại trang cụ thể (ví dụ, Nút mua hàng trên trang chi tiết sản phẩm). Bài viết này giới thiệu chúng là gì và vị trí của chúng; các bước cấu hình đầy đủ và tính khả dụng của chủ đề được mô tả trong bài viết tương ứng của trang đó.
Cấu hình Thành phần Chung
Các chủ đề SHOPLINE OS 3.0 hiện hỗ trợ các thành phần chung sau đây, mỗi thành phần có thể được thêm vào bất kỳ trang nào:
| Thành phần | Mô tả |
| Breadcrumbs | Hiển thị thứ bậc trang mà khách hàng đã theo dõi, với mọi nút ngoại trừ trang hiện tại có thể nhấp được. |
| Before & After | Hiển thị hai hình ảnh cạnh nhau để so sánh trực quan. |
| Blogs | Hiển thị danh sách các bài viết blog. |
| Collage | Sắp xếp nhiều hình ảnh theo bố cục lưới kiểu tranh ghép. |
| Collection list | Hiển thị nhiều bộ sưu tập sản phẩm. |
| Contact form | Một biểu mẫu cho phép khách hàng gửi câu hỏi trực tiếp từ trang. |
| Countdown timer | Hiển thị đồng hồ đếm ngược đến một ngày cụ thể hoặc thời gian kết thúc khuyến mãi. |
| Custom page | Hiển thị tiêu đề trang và hình ảnh cho nội dung trang tùy chỉnh. |
| Custom section | Cho phép bạn xây dựng bố cục hoàn toàn tùy chỉnh bằng mã. Xem Ghi chú bên dưới. |
| Custom SLINE | Cho phép bạn chèn mã SLINE tùy chỉnh để tùy biến bố cục nâng cao. |
| Discount promotion | Nổi bật một chương trình giảm giá hoặc khuyến mãi. |
| Email subscription | Biểu mẫu đăng ký nhận bản tin. |
| FAQs | Hiển thị danh sách các câu hỏi thường gặp theo định dạng có thể thu gọn. |
| Featured collection | Nổi bật một bộ sưu tập sản phẩm cụ thể. |
| Featured product | Nổi bật một sản phẩm cụ thể. |
| Image banner | Biểu ngữ hình ảnh toàn chiều rộng. |
| Image-text list | Hiển thị danh sách kết hợp hình ảnh và văn bản theo cột. |
| Image-text module | Kết hợp một hình ảnh toàn chiều rộng với văn bản và nút tùy chọn. |
| Ingredient display | Hiển thị danh sách thành phần sản phẩm, mỗi thành phần có hình ảnh và mô tả riêng, thường dùng cho sản phẩm làm đẹp, chăm sóc da hoặc thực phẩm. |
| Logo list | Hiển thị một hàng logo thương hiệu hoặc đối tác. |
| Map | Hiển thị bản đồ, ví dụ như vị trí cửa hàng. |
| Media promotion products | Hiển thị sản phẩm qua các ô media (hình ảnh hoặc video), kết hợp với thông tin sản phẩm và nút kêu gọi hành động. |
| Multilevel filter | Cung cấp các tùy chọn lọc với nhiều cấp hoặc danh mục. |
| Recently viewed products | Hiển thị các sản phẩm khách hàng đã xem gần đây. |
| Recommended products | Hiển thị danh sách sản phẩm được chọn lọc hoặc dựa trên thuật toán đề xuất. |
| Rich text | Nội dung văn bản tự do với định dạng phong phú. |
| Shoppable image | Một hình ảnh với các điểm nóng sản phẩm có thể nhấp để mua hàng. |
| Shopping video | Nội dung video có các yếu tố sản phẩm có thể mua được. |
| Slideshow | Bộ sưu tập hình ảnh hoặc slide xoay vòng. |
| Specialty product category | Nổi bật nhóm bộ sưu tập sản phẩm được chọn lọc theo danh mục chuyên biệt. |
| Split slideshow | Trình chiếu với bố cục màn hình chia đôi. |
| Stitched image-text module | Kết hợp hai khối hình ảnh và văn bản cạnh nhau, mỗi khối trong một Container Nội dung riêng, hữu ích để giới thiệu hai sản phẩm hoặc khuyến mãi cùng với tiêu đề và nút. |
| Switch image on hover | Thay đổi hình ảnh khi rê chuột, thường để hiển thị góc nhìn sản phẩm khác. |
| Video | Hiển thị video. |
|
Lưu ý:
|
Các phần sau đây hướng dẫn thiết lập từng bước cho ba thành phần phổ biến nhất, Trình chiếu, Phân cấp đường dẫn, và Bộ chứa nội dung.
Thiết lập Trình chiếu và Thêm Liên kết Hình ảnh
Sử dụng thành phần Trình chiếu để hiển thị nhiều hình ảnh banner và tùy chỉnh cách hiển thị, nội dung và liên kết của chúng. Khi khách hàng nhấp vào hình ảnh có liên kết, họ có thể được chuyển hướng đến một trang cửa hàng khác, một URL bên ngoài hoặc một số điện thoại được chỉ định.
| Lưu ý: Việc thêm liên kết vào hình ảnh trình chiếu được hỗ trợ bởi tất cả các chủ đề OS 3.0 miễn phí chính thức của SHOPLINE ngoại trừ Bottle. |
Thực hiện theo các bước sau để thiết lập trình chiếu:
- Trong trình chỉnh sửa chủ đề, đi đến một trang có chứa thành phần Trình chiếu, chẳng hạn như Trang chủ. Sau đó, chọn Trình chiếu ở thanh bên trái.
-
Trong bảng cài đặt bên phải, cấu hình cách trình chiếu được hiển thị:
- Chiều cao trên máy tính để bàn và Chiều cao trên thiết bị di động: Đặt chiều cao trình chiếu cho máy tính để bàn và thiết bị di động.
- Toàn màn hình: Bật tùy chọn này để hiển thị trình chiếu ở chiều rộng toàn màn hình.
- Kiểu phân trang: Chọn cách khách hàng điều hướng giữa các slide, chẳng hạn như Thanh tiến trình, Mũi tên, hoặc Chấm tròn.
- Bật chuyển đổi tự động: Bật tùy chọn này để tự động chuyển đổi giữa các hình ảnh. Sử dụng Khoảng thời gian chuyển đổi để đặt tần suất chuyển đổi hình ảnh.
- Kiểu bố cục hình ảnh-văn bản trên di động: Chọn cách hiển thị hình ảnh và văn bản trên thiết bị di động, chẳng hạn như Văn bản bên trong hình ảnh, Văn bản bên dưới hình ảnh, hoặc Văn bản chồng lên hình ảnh.
-
Ở thanh bên trái, mở rộng Trình chiếu và chọn khối Hình ảnh bạn muốn chỉnh sửa. Dưới Cài đặt ở bảng bên phải, cấu hình hình ảnh:
- Hình ảnh trên máy tính để bàn và Hình ảnh trên thiết bị di động: Thêm hoặc thay thế các hình ảnh hiển thị trên máy tính để bàn và thiết bị di động.
- Liên kết chuyển hướng hình ảnh: Nhập URL hoặc số điện thoại, hoặc chọn trang cửa hàng để chuyển hướng khách hàng đến. (Cài đặt này không được hỗ trợ bởi chủ đề Bottle.)
- Khu vực hiển thị hình ảnh: Chọn vị trí hình ảnh trong trình chiếu.
- Độ mờ lớp mặt nạ: Điều chỉnh độ mờ của lớp phủ hình ảnh.
- Hiển thị mặt nạ văn bản: Bật tùy chọn này để hiển thị lớp phủ văn bản trên hình ảnh.
- Màu mặt nạ văn bản: Chọn màu của lớp phủ văn bản.
- Kế thừa bảng màu: Bật tùy chọn này để sử dụng bảng màu chủ đề hiện tại cho lớp phủ văn bản.
-
Dưới Cài đặt, mở rộng Bố cục để cấu hình bố cục nội dung, bao gồm Hướng, Tự động xuống dòng, Căn chỉnh, Căn đều, Khoảng cách, Lề và Kích thước.
-
Để thêm nhiều hình ảnh hơn, di chuột qua thành phần Trình chiếu trong thanh bên trái và nhấp vào biểu tượng + để thêm một khối Hình ảnh khác. Sau đó, cấu hình hình ảnh mới theo nhu cầu.
- Nhấp Lưu để áp dụng các thay đổi của bạn.
Sử dụng Breadcrumbs để Điều hướng Trang
Breadcrumbs hiển thị thứ bậc trang mà khách hàng theo dõi (ví dụ: Trang chủ / Danh mục / Sản phẩm), với mọi nút trừ trang hiện tại đều có thể nhấp được.
Để thêm breadcrumbs vào một trang:
- Trong Trình chỉnh sửa Chủ đề, điều hướng đến trang bạn muốn.
-
Nhấp Thêm thành phần, chuyển đến tab Chủ đề, và chọn Breadcrumbs.
- Chọn bảng màu ưa thích, chọn bật hoặc tắt trên máy tính để bàn và/hoặc thiết bị di động, và cấu hình bố cục theo nhu cầu.
- Nhấp Lưu để áp dụng các thay đổi.
|
Lưu ý:
|
Sử dụng Hộp chứa Nội dung cho Bố cục Tùy chỉnh
Một lớp bố cục trung gian cho phép bạn nhóm các khối (như Tiêu đề, Giá, hoặc bộ chọn Số lượng) và sắp xếp chúng theo chiều ngang, thay vì xếp chồng theo chiều dọc.
Để thêm một hộp chứa nội dung:
- Trong một thành phần, nhấp vào Thêm nội dung.
- Chọn Khối chứa nội dung trong tab Giao diện.
- Thêm các khối bạn muốn sắp xếp, sau đó sử dụng các điều khiển bố cục của khối chứa để đặt hướng và căn chỉnh của chúng.
- Nhấp vào Lưu để áp dụng các thay đổi của bạn.
|
Lưu ý:
|
Tái sử dụng Thành phần trên các Trang
Bạn có thể sao chép một thành phần, cùng với tất cả nội dung và cài đặt tùy chỉnh của nó, và dán nó vào một mẫu trang khác. Điều này giúp bạn không phải xây dựng lại thủ công các biểu ngữ, khối hình ảnh hoặc khu vực khuyến mãi giống nhau trên trang Chủ, các trang Bộ sưu tập hoặc bài đăng Blog.
Để tái sử dụng một thành phần trên trang khác:
- Trong Trình chỉnh sửa Giao diện, tìm thành phần bạn muốn tái sử dụng ở thanh bên trái.
-
Nhấp vào biểu tượng ba chấm (Thêm hành động) và chọn Sao chép vào bộ nhớ tạm.
-
Đi đến trang đích, nhấp vào biểu tượng ba chấm trên bất kỳ thành phần hiện có nào, và chọn Dán bên dưới.
- Nhấp vào Lưu.
|
Lưu ý:
|
Bài viết này được dịch bằng AI và có thể chứa những sai sót. Để có thông tin chính xác nhất, vui lòng tham khảo phiên bản tiếng Anh gốc.