1. Theme preview là gì?

Trước khi chọn một theme, bạn có thể mở Preview theme. SenPrints đã dựng sẵn một storefront mẫu với đầy đủ các khối nội dung để bạn nhìn được màu sắc, cách chia phần, kiểu ảnh và cảm giác chung của theme, theme preview được xây dựng với mục địch cho Seller có thể xem trước theme để nắm được phong cách thiết kế và đưa ra lựa chọn đúng nhất và phù hợp với loại sản phẩm mà store đang bán.

1.1 Bản xem thử giúp bạn nhìn thấy

• Phong cách chung: sáng hay tối, nhẹ nhàng hay nổi bật, nhiều ảnh hay nhiều sản phẩm.
• Các kiểu khối nội dung mà theme có thể hiển thị, ví dụ banner, collection, campaign, thư viện ảnh hoặc câu chuyện thương hiệu.
• Cách các phần nối tiếp nhau khi xem trên một trang hoàn chỉnh.
• Cách theme xử lý chữ, nút bấm, ảnh và khoảng trống giữa các phần.
• Cách sắp xếp các thành phần layout để thể hiện câu chuyện thương hiệu muốn thể hiện và cách điều flow tiếp nhận thông tin của người mua hàng.

1.2 Bản xem thử không bắt bạn phải

• Dùng đủ tất cả widget đang xuất hiện trong preview.
• Đặt widget đúng vị trí hoặc đúng thứ tự giống storefront mẫu.
• Dùng cùng tên, cùng hình ảnh, cùng collection hoặc cùng campaign.
• Thêm đúng một con số ảnh, collection, campaign hay media nào đó.

Ví dụ một khối collection trong theme preview. Seller có thể dùng ít hơn, nhiều hơn hoặc không dùng khối này.

2. Đi từ ý tưởng đến storefront

Cách để đúng nhất là đi qua từng bước để xây dựng được một store phù hợp và thu hút thêm khách hàng.

3. Widget là gì?

Widget có thể hiểu đơn giản là một khối nội dung trên storefront. Mỗi khối làm một việc riêng: giới thiệu, dẫn khách đến sản phẩm, kể câu chuyện hoặc tạo điểm nhấn bằng hình ảnh.

Theme: Bộ giao diện quyết định phong cách chung và những cách sắp xếp mà store có thể sử dụng.

Preview: Bản xem thử giúp bạn hình dung theme trước khi chọn.

Widget: Một khối nội dung, ví dụ banner, danh sách collection, gallery ảnh hoặc phần ưu đãi.

Position: Vị trí đặt khối trên trang. Bạn có thể chọn bất cứ vị trí nào đang có trong theme.

Active / Inactive: Active là đang hiển thị; Inactive là tạm ẩn nhưng vẫn giữ nội dung để dùng lại.

4. Bốn điều seller được tự quyết định

Bạn có thể bắt đầu ít rồi thêm dần. Một storefront gọn với vài khối rõ ràng vẫn có thể phù hợp hơn một trang dài có quá nhiều nội dung.

Ví dụ khối hình ảnh cộng đồng trong một theme preview. Số ảnh và cách sắp xếp có thể thay đổi theo ý tưởng của seller.

5. Cách chọn theme phù hợp

Không cần tìm một theme có sẵn đúng tên collection hoặc đúng ảnh sản phẩm của bạn. Nội dung trong preview chỉ là nội dung mẫu; điều cần nhìn là cách theme trình bày.

5.1 Khi xem preview, hãy tự hỏi

• Mình có thích cảm giác chung của theme này không?
• Khách hàng của mình có dễ tìm thấy sản phẩm và các nút cần bấm không?
• Mình muốn dùng nhiều ảnh hay muốn tập trung vào collection và campaign?
• Phần đầu trang có đủ rõ để khách biết store đang bán gì không?
• Khi xem trên điện thoại, chữ và ảnh có còn dễ nhìn không?

5.2 Có thể chọn theo sở thích

Theme là phần nền để bạn bắt đầu. Nếu một theme hợp gu và hợp sản phẩm, bạn có thể chọn nó rồi thay toàn bộ ảnh, chữ, collection, campaign và thứ tự widget sau đó.

6. Chọn nội dung trước, sắp xếp sau

Trước khi thêm widget, hãy nghĩ đơn giản: khách vào store thì mình muốn họ thấy gì và làm gì? Câu trả lời có thể thay đổi theo mùa, chương trình bán hàng hoặc ý tưởng mới.

7. Cách thêm hoặc sửa một widget

Tên các widget có thể hơi khác giữa các theme, nhưng cách làm thường giống nhau. Hãy làm từng widget một để dễ xem và dễ sửa.

Ví dụ danh sách Add Widget. Theme của bạn có thể hiện tên hoặc số loại widget khác.

Ví dụ cửa sổ chỉnh sửa widget. Chỉ dùng để nhận biết các nhóm ô; nội dung và lựa chọn thực tế tùy theme.

8. Chọn vị trí theo cách bạn muốn kể câu chuyện

Position là nơi widget xuất hiện trên trang. Nếu theme đưa ra nhiều lựa chọn, bạn có thể chọn bất cứ vị trí nào phù hợp với ý tưởng của mình.

• Muốn khách thấy ngay: chọn một vị trí gần đầu trang.
• Muốn bổ sung sau khi khách đã xem sản phẩm: chọn vị trí ở giữa hoặc phía sau một phần sản phẩm.
• Muốn kết thúc bằng lời mời khám phá thêm: chọn vị trí gần cuối trang.
• Muốn thử cách khác: đổi Position, lưu và xem lại. Bạn không bị buộc phải giữ vị trí ban đầu.

Ví dụ các nhóm Position trong UI Widgets. Tên nhóm và thứ tự trong theme của bạn có thể khác.

Ví dụ: khi setup theme Flow theo ý tưởng như hình phia dưới (hiển thị section Hot Deals & Top Picks nối sau Thành phần New Arrivals)

Cách config:

- Bước 1: Thêm Widget Hot Deals & Top Picks

- Bước 2: Tại modal edit, điền nội dung muốn hiển thị tại widget, chọn Position: After New Arrivals

- Bước 3: Sau khi đã nhập toàn bộ thông tin mong muốn, chọn Save để lưu thay đổi.

Tương tự, để thêm khối Follow social tiếp sau khối Hot deals & top picks. Chọn thêm khối và chọn Position là After New Arrivals, khối Follow Social được thêm sẽ hiển thị phía sau khối Hot deals và kết quả nhận được là giao diện

9. Số lượng ảnh, collection và campaign

Ví dụ một widget đang chọn nhiều collection. Số đang thấy trong ảnh không phải tiêu chuẩn; seller có thể thêm hoặc bớt theo ý tưởng.

9.1 Khi nào nên dừng thêm?

• Khi mọi mục đều có lý do để xuất hiện và không bị lặp.
• Khi khách có thể hiểu nhanh mà không phải cuộn qua quá nhiều phần giống nhau.
• Khi ảnh, tên collection và campaign đều còn rõ trên điện thoại.
• Khi trang đã đúng mục đích của bạn, dù số lượng khác hoàn toàn preview.

10. Nói qua về các nhóm widget thường gặp

Không phải theme nào cũng có cùng tên hoặc cùng danh sách widget. Phần dưới đây giúp bạn nhận ra công dụng của từng nhóm, không phải danh sách bắt buộc phải dùng.

10.1 Banner / khối mở đầu

Hiểu đơn giản: một vùng hình ảnh và thông điệp nổi bật.

Phù hợp khi: bạn muốn giới thiệu nhanh store, một dịp đặc biệt hoặc một lời mời khám phá.

Bạn được tự chọn:

• Đặt ở đầu, giữa hoặc cuối trang nếu theme cho phép.
• Dùng ảnh và câu chữ của riêng bạn; có thể có hoặc không có nút bấm.
• Không cần giống banner trong preview.

10.2 Collection / Campaign

Hiểu đơn giản: một khối dẫn khách đến các nhóm sản phẩm hoặc chương trình bán hàng.

Phù hợp khi: bạn muốn khách đi nhanh đến một chủ đề, dịp tặng quà, dòng sản phẩm hoặc chương trình đang chạy.

Bạn được tự chọn:

• Collection hoặc campaign nào sẽ xuất hiện.
• Thứ tự của các mục.
• Số lượng phù hợp với nội dung hiện có; không phải đủ một con số cố định.

Ví dụ khối campaign/sản phẩm nổi bật trong theme preview. Seller có thể chọn nội dung và số mục khác.

10.3 Gallery / Media / Social feed

Hiểu đơn giản: một khu vực để kể chuyện bằng nhiều hình ảnh hoặc video.

Phù hợp khi: bạn có ảnh lifestyle, ảnh khách hàng, nội dung mạng xã hội hoặc hình ảnh tạo cảm xúc.

Bạn được tự chọn:

• Dùng ít hay nhiều hình tùy nội dung.
• Sắp xếp ảnh theo câu chuyện hoặc màu sắc mình thích.
• Thêm liên kết cho từng ảnh nếu widget có ô đó và bạn cần dùng.

10.4 Brand Story / phần giới thiệu

Hiểu đơn giản: một khối giúp khách hiểu con người, ý tưởng hoặc giá trị phía sau store.

Phù hợp khi: bạn muốn tạo sự tin tưởng hoặc giải thích vì sao sản phẩm của mình đặc biệt.

Bạn được tự chọn:

• Dùng một ảnh hoặc nhiều phần nhỏ tùy widget đang có.
• Viết ngắn hoặc dài tùy câu chuyện, miễn dễ đọc.
• Đặt ở bất cứ vị trí nào hợp với mạch trang.

10.5 Hot Deals / sản phẩm nổi bật

Hiểu đơn giản: một khối đưa những sản phẩm hoặc chương trình cần chú ý lên storefront.

Phù hợp khi: bạn đang có ưu đãi, sản phẩm mới, sản phẩm bán tốt hoặc một chiến dịch theo mùa.

Bạn được tự chọn:

• Chọn campaign hoặc sản phẩm phù hợp với thời điểm.
• Dùng bao nhiêu mục tùy mục tiêu và cách hiển thị bạn thích.
• Bật, tắt hoặc thay đổi nội dung khi chương trình kết thúc.

11. Hình ảnh, chữ và nút bấm

11.1 Hình ảnh

• Chọn ảnh rõ, đúng sản phẩm và có cùng cảm giác với theme bạn đã chọn.
• Không cần dùng ảnh giống preview. Ảnh của store mới là phần tạo ra dấu ấn riêng.
• Nếu widget có nhiều ảnh, ưu tiên sự liên quan hơn là cố thêm cho đủ.
• Sau khi tải, chờ hình xem trước xuất hiện rồi mới lưu.
• Xem lại trên điện thoại vì ảnh có thể được cắt khác so với máy tính.

11.2 Chữ

• Viết tiêu đề ngắn để khách hiểu ngay phần này nói về gì.
• Dùng cách nói quen thuộc với khách hàng của bạn.
• Không cần điền mọi ô nếu ô đó không bắt buộc và không giúp ích cho nội dung.
• Đọc lại như một khách mới vào store; bỏ bớt phần lặp hoặc khó hiểu.

11.3 Nút bấm và đường dẫn

• Tên nút nên nói rõ việc sẽ xảy ra, ví dụ Xem bộ sưu tập hoặc Khám phá ưu đãi.
• Mở thử đường dẫn sau khi lưu để chắc chắn khách đến đúng nơi.
• Nếu không cần dẫn khách đi nơi khác và widget cho phép, có thể không dùng nút.

12. Khoảng cách giữa các khối

Khoảng cách phía trên và dưới widget chỉ là khoảng thở giữa các phần. Không có một con số đẹp cho mọi theme.

• Hai phần dính sát nhau: tăng khoảng cách một chút rồi xem lại.
• Trang có khoảng trắng quá lớn: giảm khoảng cách.
• Máy tính đẹp nhưng điện thoại quá thưa hoặc quá chật: chỉnh phần dành cho điện thoại nếu widget có lựa chọn này.
• Thay đổi từng lần nhỏ; lưu và xem lại thay vì sửa nhiều con số cùng lúc.

13. Lưu, bật/tắt và đổi thứ tự

14. Xem lại và điều chỉnh

Preview không chỉ dùng trước khi chọn theme. Sau mỗi thay đổi, hãy xem storefront như một khách hàng để biết bố cục có đúng ý hay không.

14.1 Trên máy tính

• Phần quan trọng có xuất hiện ở nơi bạn muốn không?
• Ảnh có rõ và không bị cắt mất nội dung chính không?
• Các khối có nối tiếp tự nhiên hay có phần nào lặp quá nhiều?
• Nút bấm có mở đúng trang không?

14.2 Trên điện thoại

• Chữ có dễ đọc và nút có dễ bấm không?
• Ảnh có bị cắt hoặc quá nhỏ không?
• Số lượng ảnh/collection/campaign có làm trang quá dài không?
• Khoảng cách giữa các phần có đều và dễ nhìn không?

14.3 Nếu chưa đúng ý

• Đổi Position hoặc thứ tự widget.
• Bớt một vài mục không cần thiết hoặc thêm nội dung còn thiếu.
• Thay ảnh, rút ngắn chữ hoặc đổi tên nút.
• Tạm ẩn widget rồi nhìn lại toàn trang.

15. Hướng dẫn setup Theme Flow

Phần này minh họa một cách làm hoàn chỉnh cho store quà tặng cá nhân hóa. Bạn có thể làm theo để quen thao tác, sau đó đổi widget, vị trí, nội dung và số lượng theo store của mình.

15.1 Tình huống của store trong ví dụ

Store muốn khách vừa vào trang có thể tìm quà theo người nhận, sau đó xem ảnh sản phẩm trong đời sống và cuối cùng nhìn thấy chương trình đang được ưu tiên.

15.2 Bước 1 — xem preview và chốt mạch trang

Mạch dự kiến của ví dụ: Collection Highlight → Media Gallery → Hot Deals Section. Nếu theme không có đúng tên này, hãy chọn widget có công dụng gần giống.

15.3 Bước 2 — setup Collection Highlight

Widget đầu tiên giúp khách chọn nhanh nhóm quà. Trong ví dụ, seller muốn phần này nằm ở khu vực gần đầu trang.

Ví dụ cửa sổ Collection Highlight. Ảnh đang hiển thị 4 collection, còn tình huống thực hành dùng 3; cả hai đều chỉ là minh họa và không tạo ra số lượng bắt buộc.

15.4 Bước 3 — setup Media Gallery

Widget thứ hai tạo cảm xúc bằng hình ảnh. Trong ví dụ, seller dùng ba ảnh nhưng có thể thêm hoặc bớt theo nội dung đang có.

Phần đầu cửa sổ Media Gallery: chọn trang, Position và tải từng ảnh. Position trong ảnh chỉ là một lựa chọn minh họa.

Phần dưới cửa sổ Media Gallery: bấm Add Media để thêm hoặc dùng nút xóa để bớt. Số ảnh do seller quyết định.

15.5 Bước 4 — setup Hot Deals Section

Widget thứ ba sẽ đưa các colleciton/campaign cần chú ý lên storefront. Trong ví dụ, seller chọn hai campaign đang còn hiệu lực.

Ví dụ cửa sổ Hot Deals Section. Ảnh có 3 campaign; tình huống thực hành dùng 2. Seller được tự chọn số lượng theo chương trình đang chạy.

15.6 Bước 5 — kiểm tra vị trí và thứ tự

Quay lại danh sách UI Widgets và nhìn theo từng nhóm Position. Mục tiêu là kiểm tra storefront có đi theo mạch bạn đã chọn hay chưa.

• Nếu hai widget ở cùng một Position, kéo để đổi thứ tự trong nhóm đó.
• Nếu muốn chuyển widget sang khu vực khác, mở Edit và chọn lại Position.
• Nếu chưa muốn khách thấy một widget, chọn Inactive thay vì xóa.
• Nếu tên Position khó hiểu, lưu rồi mở storefront để nhìn vị trí thực tế.

Ví dụ danh sách widget ở nhiều Position. Seller có thể đổi thứ tự, Edit để đổi Position hoặc tạm ẩn từng widget.

15.7 Bước 6 — mở storefront và chỉnh đến khi đúng ý

Sau khi lưu ba widget, mở storefront như một khách hàng. Đừng chỉ kiểm tra từng widget riêng lẻ; hãy xem toàn bộ mạch trang.

15.8 Kiểm tra trên máy tính

• Khách có hiểu store bán gì ngay ở phần đầu không?
• Ba widget có xuất hiện theo mạch đã chọn không?
• Ảnh và chữ có rõ, nút bấm có mở đúng nơi không?
• Có phần nào lặp lại hoặc chiếm quá nhiều chỗ không?

15.9 Kiểm tra trên điện thoại

• Tiêu đề có dễ đọc và nút có dễ bấm không?
• Ảnh có bị cắt mất phần chính hoặc quá nhỏ không?
• Số collection, ảnh và campaign có làm khách phải cuộn quá lâu không?
• Khoảng cách giữa các khối có tự nhiên không?

16. Khi đổi sang theme khác

Theme mới có thể có widget, Position và cách cắt ảnh khác. Vì vậy hãy xem preview của theme mới và sắp xếp lại theo ý tưởng hiện tại của store.

17. Khi gặp vấn đề — dành cho Seller