Bản nháp
Giao diện quyết định cửa hàng của bạn trông như thế nào. Cửa hàng mới đã được cài sẵn một giao diện và đã xuất bản, nên bạn không bắt buộc phải làm gì ở chương này — nhưng đây là nơi cửa hàng của bạn thôi giống mọi cửa hàng khác.
Một giao diện đang chạy, nhiều bản nháp
Trang Themes chia làm hai phần, và ranh giới giữa chúng là toàn bộ ý tưởng:
Current theme — giao diện khách đang nhìn thấy. Đúng một cái, có huy hiệu Active, kèm ngày sửa gần nhất và dòng "Based on …" cho biết nó được tạo từ mẫu nào và ở phiên bản nào.
Draft themes — mọi thứ khác. Sửa thoải mái, xem trước thoải mái; khách không thấy gì cho tới khi bạn bấm Publish.
Đây là lưới an toàn: sửa một bản nháp thì không có rủi ro nào cả. Muốn đổi lớn thì nhân bản giao diện đang chạy, sửa bản sao, xem trước, rồi mới xuất bản.
Nút trên đầu trang: View live store mở cửa hàng thật; Explore theme market mở chợ giao diện. Trong menu ⋯ của mỗi giao diện:
| Mục | Việc |
|---|---|
| Preview | Mở giao diện đó bằng link xem trước, không ảnh hưởng khách |
| Rename | Đổi tên trong thư viện |
| Duplicate | Nhân bản. Đây là việc nên làm trước mọi thay đổi lớn |
| Publish | Đưa bản nháp này lên thay cho giao diện đang chạy |
| Delete | Xoá. Bị khoá với giao diện đang chạy — cửa hàng luôn phải có một giao diện |
Chợ giao diện
Explore theme market liệt kê các mẫu cài được. Cài một mẫu là tạo một bản nháp mới trong thư viện của bạn — nó không đụng gì tới giao diện đang chạy, nên thử một mẫu mới không có rủi ro.
Giao diện đã cài là một BẢN SAO. Cài xong là nó thuộc về bạn: mẫu gốc có cập nhật cũng không tự sửa giao diện của bạn (và cũng không tự xoá những gì bạn đã chỉnh). Khi có bản mới, thư viện sẽ báo, và nhận bản mới nghĩa là cài thêm một bản nháp nữa cạnh bản cũ — không có thao tác nào ghi đè lên công sức của bạn.
Trình dựng theme
Bấm Customize để mở trình dựng.
Ba khu vực:
Bên trái — cấu trúc trang. Danh sách các section xếp theo đúng thứ tự chúng hiện trên trang. Luôn có ba nhóm: Header, trang hiện tại, và Footer — header và footer để riêng vì chúng xuất hiện trên mọi trang, không riêng trang bạn đang sửa. Kéo thả để đổi thứ tự. Ô chọn trang ở trên cùng chuyển giữa Trang chủ, Trang sản phẩm, Trang bộ sưu tập, Giỏ hàng…
Ở giữa — cửa hàng thật. Không phải ảnh mô phỏng: đó là chính storefront của bạn chạy trong khung. Rê chuột lên một phần bất kỳ sẽ thấy viền nét đứt kèm tên của nó; bấm vào là chọn luôn section đó ở cột trái. Hai nút ⊕ ở trên và dưới mỗi section để chèn section mới đúng chỗ đó. Nút chuyển máy tính/điện thoại đổi bề rộng khung xem trước.
Bên phải — thuộc tính. Cài đặt của thứ bạn đang chọn. Chọn một section thì đó là cài đặt của section; chọn một block bên trong nó thì là cài đặt của block.
Trên cùng: tên giao diện (bấm để đổi), trạng thái Active/Draft, Undo / Redo (Ctrl+Z, Ctrl+Shift+Z), và Publish. Menu cạnh Publish có Save draft.
Bản nháp tự lưu, còn xuất bản thì không. Mọi thay đổi được lưu vào bản nháp sau khoảng một giây. Cửa hàng thật không đổi cho tới khi bạn bấm Publish. Nên có thể để dở giữa chừng và quay lại hôm sau.
Ctrl+Z trong ô nhập là hoàn tác chữ, không phải hoàn tác giao diện. Khi con trỏ đang ở trong một ô nhập, phím tắt trả về cho ô đó — đúng như bạn mong đợi khi đang gõ. Bấm ra ngoài rồi Ctrl+Z mới hoàn tác thay đổi giao diện.
Section và block
Một section là một dải ngang của trang: ảnh bìa, lưới sản phẩm, dải logo, câu hỏi thường gặp. Một block là một phần tử bên trong section: một dòng chữ, một nút, một ô đánh giá.
Section nào cũng có một nhóm cài đặt chung — bảng màu, bề rộng, khoảng cách trên dưới, ẩn trên máy tính hoặc điện thoại. Ngoài ra mỗi loại section có cài đặt riêng của nó.
Trang sản phẩm và giỏ hàng đi xa hơn: chúng được lắp từ block, nên bạn đổi được thứ tự giá, nút mua, mô tả, ô đánh giá — và bỏ hẳn thứ mình không dùng.
Cửa hàng thật
Đây là kết quả: trang chủ dựng từ giao diện mặc định, hiện đúng sản phẩm và bộ sưu tập của cửa hàng.
Bảng tra cứu
| Nơi | Nút | Việc |
|---|---|---|
| Themes | View live store | Mở cửa hàng thật |
| Themes | Explore theme market | Chợ giao diện |
| Themes | Customize | Mở trình dựng cho giao diện đó |
| Themes | Add blank theme | Bản nháp trắng, không dựa trên mẫu nào |
| ⋯ | Preview | Xem trước không ảnh hưởng khách |
| ⋯ | Rename · Duplicate | Đổi tên · Nhân bản |
| ⋯ | Publish | Đưa bản nháp lên thay giao diện đang chạy |
| ⋯ | Delete | Bị khoá với giao diện đang chạy |
| Builder | Sections / Theme settings | Hai chế độ của cột trái |
| Builder | Undo / Redo | Ctrl+Z · Ctrl+Shift+Z. Không hoạt động khi con trỏ ở trong ô nhập |
| Builder | Publish ▾ → Save draft | Ép lưu ngay, không đợi tự lưu |
Bảng tra cứu — cài đặt giao diện
Đây là toàn bộ cài đặt trong tab Theme settings, theo từng nhóm. Bảng này được sinh tự động từ chính mã nguồn, nên nó không bao giờ lệch khỏi những gì bạn thấy trên màn hình.
| Nhóm | Trường | Điều khiển | Ghi chú |
|---|---|---|---|
| Logo | Logo image | Ảnh | |
| Max width | Thanh trượt | 60–400px — mặc định 140 |
|
| Alt text | Ô chữ | ||
| Favicon | Favicon (32×32 recommended) | Ảnh | |
| Colors | Background | Màu | |
| Text | Màu | ||
| Primary / brand | Màu | ||
| Muted text | Màu | ||
| Borders | Màu | ||
| Headings | Màu | ||
| Button background | Màu | ||
| Button text | Màu | ||
| Header background | Màu | ||
| Header text | Màu | ||
| Footer background | Màu | ||
| Footer text | Màu | ||
| Sale price | Màu | ||
| Badge background | Màu | ||
| Badge text | Màu | ||
| Typography | Heading font | Phông chữ | |
| Body font | Phông chữ | ||
| Heading size | Thanh trượt | 24–72px — mặc định 40 |
|
| Body size | Thanh trượt | 12–20px — mặc định 16 |
|
| Heading letter-spacing | Thanh trượt | 0–8px — mặc định 0 |
|
| Uppercase headings | Bật/tắt | mặc định false |
|
| Uppercase buttons | Bật/tắt | mặc định false |
|
| Layout | Header layout | Danh sách chọn | Logo left, menu beside it · Logo centred, menu left · Logo left, menu centred · Logo centred, menu below · Logo left, menu in a drawer · Logo centred, menu in a drawer — mặc định logo-left |
| Transparent header over the home hero | Bật/tắt | mặc định false |
|
| Page width | Thanh trượt | 1000–1600px — mặc định 1200 |
|
| Section spacing | Thanh trượt | 0–100px — mặc định 48 |
|
| Style | Corner radius | Thanh trượt | 0–32px — mặc định 10 |
| Shadow | Danh sách chọn | None · Small · Medium · Large — mặc định none |
|
| Corner radius | Thanh trượt | 0–40px — mặc định 10 |
|
| Fill style | Danh sách chọn | Solid · Gradient · Outline — mặc định solid |
|
| Height (vertical padding) | Thanh trượt | 4–32px — mặc định 11 |
|
| Width (horizontal padding) | Thanh trượt | 8–48px — mặc định 20 |
|
| Border width | Thanh trượt | 0–6px — mặc định 0 |
|
| Border color | Màu | ||
| Shadow | Danh sách chọn | None · Small · Medium · Large — mặc định none |
|
| Button background/text color are set under Colors → Button background / Button text. | help_text | ||
| Product cards | Card style | Danh sách chọn | Plain · Boxed (border + padding) · Text over image · Editorial caption — mặc định plain |
| Image ratio | Danh sách chọn | Adapt to image · Square (1:1) · Portrait (3:4) · Landscape (4:3) — mặc định adapt |
|
| Text alignment | Danh sách chọn | Left · Center — mặc định left |
|
| Image hover | Danh sách chọn | None · Zoom · Show second image — mặc định zoom |
|
| Bestseller badge | Bật/tắt | mặc định false |
|
| Bestseller tag | Ô chữ | mặc định bestseller |
|
| Sale badge | Bật/tắt | mặc định false |
|
| Sale badge shows | Danh sách chọn | Percent off (-25%) · Amount off · Fixed text — mặc định percent |
|
| Sale badge text | Ô chữ | mặc định Sale |
|
| Quick add button | Bật/tắt | mặc định false |
|
| Product page | Product page layout | Danh sách chọn | Even split · Wide media · Media full width, info below — mặc định split |
| Sticky add-to-cart bar | Bật/tắt | mặc định true |
|
| Show "Only N left" | Bật/tắt | mặc định true |
|
| Trust badges | Ô chữ nhiều dòng | ||
| Sale urgency timer | Bật/tắt | mặc định false |
|
| Timer length | Thanh trượt | 1–120min — mặc định 15 |
|
| Timer label | Ô chữ | mặc định Sale ends in |
|
| Show star ratings | Bật/tắt | mặc định false |
|
| Popup | Show newsletter popup | Bật/tắt | mặc định false |
| Heading | Ô chữ | mặc định Get 10% off |
|
| Text | Trình soạn thảo | mặc định Join our list for early access + a welcome discount. |
|
| Image (optional) | Ảnh | ||
| Show after | Thanh trượt | 0–30s — mặc định 4 |
|
| Button text | Ô chữ | mặc định Sign up |
|
| Style | Danh sách chọn | Follow theme settings · Custom — mặc định theme |
|
| Background | Màu | ||
| Text color | Màu | ||
| Height | Thanh trượt | 0–96px — mặc định 0 |
|
| Corner radius | Thanh trượt | 0–40px — mặc định 10 |
|
| Border width | Thanh trượt | 0–6px — mặc định 0 |
|
| Border color | Màu | ||
| Shadow | Danh sách chọn | None · Small · Medium · Large — mặc định none |
|
| Animations | Scroll reveal | Danh sách chọn | None · Fade in · Fade up — mặc định none |
| Announcement bar | Show announcement bar | Bật/tắt | mặc định false |
| Messages | Ô chữ nhiều dòng | mặc định Free shipping on orders over $50 |
|
| Rotate every | Thanh trượt | 3–15s — mặc định 5 |
|
| Link (optional) | link | ||
| Let visitors close it | Bật/tắt | mặc định false |
|
| Experience | Page-load preloader | Bật/tắt | mặc định false |
| Scroll-progress bar | Bật/tắt | mặc định false |
|
| Infinite scroll on collections | Bật/tắt | mặc định false |
|
| Sticky bottom bar | Bật/tắt | mặc định false |
|
| Sticky bar text | Ô chữ | mặc định Summer sale — up to 50% off |
|
| Sticky bar button label | Ô chữ | mặc định Shop now |
|
| Sticky bar link | link | ||
| Back-to-top button | Bật/tắt | mặc định false |
|
| Age verification | Require age confirmation | Bật/tắt | mặc định false |
| Heading | Ô chữ | mặc định Are you old enough? |
|
| Text | Trình soạn thảo | mặc định You must confirm your age to enter this store. |
|
| Confirm button | Ô chữ | mặc định Yes, I am |
|
| Decline button | Ô chữ | mặc định No, take me away |
|
| Send declines to | Ô chữ | mặc định https://www.google.com |
|
| Cookie consent | Show cookie banner | Bật/tắt | mặc định false |
| Text | Trình soạn thảo | mặc định We use cookies to improve your experience and measure our ads. |
|
| Accept button | Ô chữ | mặc định Accept |
|
| Decline button | Ô chữ | mặc định Decline |
|
| Policy link label | Ô chữ | mặc định Privacy policy |
|
| Policy link | link | mặc định /policies/privacy |
|
| Position | Danh sách chọn | Bottom bar · Bottom-left card — mặc định bottom |
|
| Social media | Ô chữ | ||
| Ô chữ | |||
| TikTok | Ô chữ | ||
| X (Twitter) | Ô chữ | ||
| YouTube | Ô chữ | ||
| Ô chữ | |||
| Ô chữ | |||
| Footer | Layout | Danh sách chọn | Columns · Centered stack — mặc định columns |
| Content alignment | Danh sách chọn | Left · Center — mặc định left |
|
| Content width | Danh sách chọn | Wide (full page) · Narrow (boxed) — mặc định wide |
|
| Footer menu | Chọn menu | mặc định footer |
|
| Footer text | Trình soạn thảo | ||
| Show store contact (address / phone / email) | Bật/tắt | mặc định true |
|
| Show social icons | Bật/tắt | mặc định true |
|
| Custom CSS | Custom CSS | Ô mã |
Bảng tra cứu — thư viện section
Mọi section đặt được, kèm nơi đặt được, số cài đặt và số loại block bên trong. Cũng được sinh tự động.
| Section | Đặt được ở | Cài đặt | Block |
|---|---|---|---|
| Advanced content | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 3 | 5 |
| Announcement bar | Header | 4 | 1 |
| Background image with text | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 10 | — |
| Before / after slider | Trang chủ · Trang sản phẩm · Trang thường | 8 | — |
| Blog posts | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 8 | — |
| Bundle deals | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 7 | 1 |
| Cart drawer | Giỏ hàng | 3 | 17 |
| Collage | Trang chủ · Trang thường · Trang bộ sưu tập | 1 | 1 |
| Collapsible content (FAQ) | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 2 | 1 |
| Collection header | Trang bộ sưu tập | 9 | — |
| Collection list | Trang chủ · Trang thường | 2 | 1 |
| Comparison table | Trang chủ · Trang sản phẩm · Trang bộ sưu tập · Trang thường | 5 | 1 |
| Contact form | Trang chủ · Trang thường | 5 | — |
| Content tabs | Trang chủ · Trang sản phẩm · Trang bộ sưu tập · Trang thường | 1 | 1 |
| Countdown timer | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 9 | 3 |
| Custom columns | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 3 | 1 |
| Custom HTML / embed | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 4 | — |
| Customer reviews | Trang sản phẩm · Trang chủ · Trang thường · Trang bộ sưu tập | 10 | — |
| Delivery estimate | Trang sản phẩm · Trang chủ · Trang thường | 1 | 1 |
| Discount code chip | Trang chủ · Trang sản phẩm · Trang bộ sưu tập · Trang thường | 3 | — |
| Editorial split | Trang chủ · Trang thường · Trang bộ sưu tập | 8 | — |
| Featured collection | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 9 | — |
| Featured on (press bar) | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 4 | 1 |
| Featured product | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 3 | — |
| Footer | Footer | 9 | 6 |
| Footer promotions | Footer | 4 | 1 |
| Gallery | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 2 | 1 |
| Header | Header | 7 | 1 |
| Icon bar | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 1 | 1 |
| Icons with content | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 5 | 1 |
| Image & video slider | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 6 | 1 |
| Image banner | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 8 | 3 |
| Image grid | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 6 | 1 |
| Image with text | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 11 | — |
| JSON animation (Lottie) | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 10 | — |
| Logo list | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 6 | 1 |
| Map | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 10 | — |
| Marquee | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 4 | 1 |
| Multicolumn | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 4 | 1 |
| Multirow | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 2 | 1 |
| Music player | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 5 | 1 |
| Newsletter | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 6 | — |
| Page content | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 2 | — |
| Parallax hero (3D) | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 9 | — |
| Pricing table | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 3 | 1 |
| Product features | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 3 | 1 |
| Product information | Trang sản phẩm | 2 | 43 |
| Product, full width | Trang chủ · Trang thường · Trang bộ sưu tập | 8 | — |
| Promo grid | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 5 | 7 |
| Pull quote | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 4 | — |
| Recently viewed | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 4 | — |
| Redirect to page | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 4 | — |
| Related products | Trang sản phẩm · Trang chủ · Trang thường · Trang bộ sưu tập | 4 | — |
| Results / stats | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 3 | 1 |
| Review avatars | Trang chủ · Trang sản phẩm · Trang bộ sưu tập · Trang thường | 3 | 1 |
| Rich text | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 7 | — |
| Section divider | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 4 | — |
| Section group | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 7 | — |
| Shop the look | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 3 | 1 |
| Shoppable hero | Trang chủ · Trang thường · Trang bộ sưu tập | 11 | 1 |
| Size chart | Trang sản phẩm · Trang thường | 2 | 1 |
| Slideshow | Trang chủ · Trang thường | 5 | 1 |
| Slideshow hero | Trang chủ · Trang thường · Trang bộ sưu tập | 3 | 1 |
| Stat band | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 3 | 1 |
| Testimonials | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 2 | 1 |
| Timeline | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 2 | 1 |
| Track order | Trang chủ · Trang thường · Trang bộ sưu tập | 6 | — |
| Vertical ticker | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 9 | — |
| Video | Trang chủ · Trang thường · Trang sản phẩm · Trang bộ sưu tập | 5 | — |
Tiếp theo: Kết nối tên miền riêng — thay tenshop.dikafy.com bằng
tenshop.com.
Đối chiếu với bản 82dff35b1474 · 2026-08-29