Sudes Craft

Hướng dẫn sử dụng Theme Sudes Craft

Xin chào! Cám ơn bạn đã chọn giao diện của chúng tôi. Dưới đây là những hướng dẫn để bạn cài đặt cũng như sử dụng chủ đề của chúng tôi. Mọi thắc mắc bạn có thể gửi về [email protected] Chúng tôi thực sự đánh giá cao và hi vọng bạn sẽ thích giao diện của chúng tôi.

Giới thiệu

Sudes Craft là một giao diện được thiết kế chuyên biệt cho website kinh doanh về đa lĩnh vực, đặc biệt là các sản phẩm về đồ thủ công,nội thất, decor gia dụng và quà tặng,...

Thiết lập chung

Sau khi cài đặt theme mới lên cửa hàng, bạn bấm vào TÙY CHỈNH GIAO DIỆN để tùy chỉnh theme:

Đầu tiên, bạn tìm đến THIẾT LẬP CHUNG:

 

Tại phần thiết lập chung, chúng tôi cung cấp cho bạn được tùy chỉnh mạnh mẽ giao diện:

 

Thiết lập chatlive

Để thiết lập bạn tìm đến phần thiết lập Thiết lập chatlive:

Bạn chọn Chuyển sang Messenger

Bạn cần gắn đường dẫn theo cú pháp https://m.me/id_fanpage, trong đó id_fanpage bạn có thể nhập id hoặc user của fanpage

 

Đầu trang

header

Để thiết lập đầu trang, bạn tìm đến phần thiết lập Đầu trang:

Tại đây cho phép bạn cấu hình các nội dung và tính nnag8 như sau:

 

Chân trang

Để thiết lập chân trang, bạn cần tìm đến mục Chân trang:

 

Tại đây bạn có thể thiết lập các nội dung và tính năng ở chân trang như:

 

Thiết lập trang chủ

Trên trang chủ, chúng tôi chung cấp 15 module cho phép bạn có thể lựa chọn và sắp xếp vị trí của chúng trên trang chủ

 

Để chọn lựa và sắp xếp các module trang chủ, bạn cần tìm đến thiết lập Trang chủ:


 

Nếu module nào bạn không muốn sử dụng hoặc ẩn nó trên website, bạn có thể lựa chọn là không dùng


 

 

Module Slider

Tại đây bạn thiết lập các ảnh slider, liên kết ảnh, hiệu ứng cho slider..

 

Module Danh mục sản phẩm

 

Module Bộ sưu tập

Theme cung cấp cho bạn khối 6 banner trên trang chủ thể hiện 6 bộ sưu tập nỗi bật nhất. Để cấu hình bạn vào mục Trang chủ - Module Bộ sưu tập:

 

Module Sản phẩm khuyến mãi

Để cấu hình khối sản phẩm khuyến mãi (Flash sale). Bạn có thể cấu hình trong Trang chủ - Sản phẩm khuyến mãi:

 

- Phần Cấu hình đếm ngược khuyến mãi. Theme cung cấp cho bạn hiển thị tối đa 3 khung giờ khác nhau và có 3 trạng thái cho mỗi khung giờ bao gồm: [Đã kết thúc], [Đang diễn ra] và [Sắp diễn ra]. Bạn vui lòng nhập thời gian chương trình theo cấu trúc [ngày bắt đầu]/[ngày kết thúc]. Định dạng Tháng-Ngày-Năm-Giờ-Phút-Giây. Ví dụ Chương trình bắt đầu lúc 00:00 01/06/2025 và kết thúc lúc 23:59 30/06/2025 thì sẽ nhập là 06-01-2025-00-00-00/06-30-2025-23-59-00.

- Để hiển thị thanh đã bán trong tag sản phẩm khách hàng nhập item_số sản phẩm đã bán và sản phẩm được quản lý tồn kho.

- Điều kiện cho sản phẩm đã bán:

+ Khách hàng chọn quản lý tồn kho và nhập số tồn kho sản phẩm

+ Nhập tag số lượng đã bán (nhập trong tag item_) lớn hơn tồn kho thực của sản phẩm

+ Số sản phẩm đã bán sẽ bằng số lượng đã bán (nhập trong tag item_) trừ đi số tồn kho thực

Ví dụ tag: item_100, số tồn kho thực tế là 90 thì thanh đã bán sẽ hiển thị Đã bán sẽ là 100 - 90 = 10

Chỉ có Tab khung giờ đang có trạng thái là [Đang diễn ra] thì mới hiện giao diện sản phẩm đã bán.

 

Module Mã khuyến mãi

- Theme hỗ trợ hiển thị 6 mã khuyến mãi (coupon), Bạn vui lòng vào mục Trang chủ - Module Mã khuyến mãi

 

Module Tab Sản Phẩm

- Theme hỗ trợ hiển thị Block Sản phẩm dạng Tab giúp hiển thị các sản phẩm nội bật nhất theo từng danh mục.

 

Module Sản phẩm 1,2,3,4

- Theme cung cấp cho bạn 4 khối danh mục sản phẩm.

- Bạn có thể thiết lập tiêu đề, số sản phẩm hiển thị và thiết lập banner riêng cho danh mục.

 

Module Giới thiệu

- Theme hỗ trợ hiển thị khối thể hiện giới thiệu sơ lượt về cửa hàng. Để thiết lập, bạn vui lòng vào mục Trang chủ - Module Giới thiệu

 

Module Video Tiktok

- Theme cung cấp cho bạn Module thể hiện kênh Tiktok của cửa hàng.

 

Module Nhận xét khách hàng

 

Module tin tức

 

Trang danh sách sản phẩm

 

Tại đây, bạn được phép thiết lập:

- Ở phần thiết lập Ảnh nền breadcrumb đầu trang. Theme cho phép bạn thiết lập ảnh nền riêng cho từng danh mục sản phẩm bằng cách sử dụng mô tả danh mục sản phẩm như sau:

+ Trong Admin danh mục sản phẩm, ở phần mô tả. Bạn tạo 1 dòng text (1) và chọn định dạn là heading 6 (2) như sau:

+ Ở bên dưới dòng heading 6, bạn up ảnh banner.

- Lưu ý: Nếu 1 danh mục sản phẩm mà không thao tác thiết lập ảnh nền breadcrumb như ở trên thì hệ thống mặc định lấy cấu hình ảnh breadcrumb của cấu hình chung để hiển thị.

Trang sản phẩm

Theme cung cấp cho bạn quyền tùy chỉnh mạnh mẽ trang chi tiết sản phẩm. Để thiết lập trang này, bạn cần tìm đến mục Trang sản phẩm:

Tại đây, bạn được phép thiết lập:

 

Theme hỗ trợ nhóm các ảnh sản phẩm theo màu sắc bằng các bước như sau:

Trong Admin web quản lý 1 sản phẩm. Giả sử sản phẩm của bạn đang có thuộc tính màu sắc là: Vàng, Nâu, Xanh lá, Đen, Xanh

Sau khi bạn upload tất cả các ảnh sản phẩm. Bạn rê chuột vào 1 ảnh và chọn Chỉnh sửa ALT ảnh

Hộp thoại chỉnh ALT ảnh hiện ra. Bạn nhập ALT ảnh ứng với thuộc tính màu mà bạn muốn gom nhóm.

Lưu ý: nếu 1 thuộc tính màu mà ko có ảnh nào có ALT chứa tên tương ưng thuộc tính đó. Web sẽ hiện tất cả các hình ảnh của sản phẩm.

 

Hướng dẫn thiết lập nội dung sản phẩm:

- Đối với 1 sản phẩm muốn thể hiện đầy đủ các thông tin như: Mô tả chi tiết sản phẩm, thông tin thông số kỹ thuật rút gọn, thông số kỹ thuật chi tiết (popup). Bạn sẽ nhập nội dung mô tả sản phẩm theo cấu trúc thứ tự như sau:

1. Mô tả sản phẩm.

2. Dòng Heading 6 thứ nhất.

3. Nội dung cho thông số kỹ thuật tổng quan (dạng bảng table 2 cột).

4. Dòng Heading 6 thứ hai.

5. Nội dung cho thông số kỹ thuật chi tiết (dạng bảng table 2 cột). Nội dung này sẽ hiện trong popup thông số kỹ thuật chi tiết.

- Xem ảnh minh họa:

 

+ Lấy đoạn code HTML mẫu cho mô tả sản phẩm tại đây:

<p>[Nhập nội dung sp tại đây]</p><h6>Thông số kỹ thuật</h6><table><tbody><tr><td>Thông số 1</td><td>Nội dung thông số 1</td></tr><tr><td>Thông số 2</td><td>Nội dung thông số 2</td></tr></tbody></table><p>---</p><h6>Thông số kỹ thuật chi tiết</h6><table><tbody><tr><td>Thông số 1</td><td>Nội dung thông số 1</td></tr><tr><td>Thông số 2</td><td>Nội dung thông số 2</td></tr><tr><td>Thông số 3</td><td>Nội dung thông số 3</td></tr></tbody></table>

Trang Bộ sưu tập

Theme hỗ trợ tính năng tạo các trang theo bộ sưu tập/dự án

+ Lấy đoạn code HTML mẫu cho mô tả các trang Bộ sưu tập:

<p><span>///Module Mô tả</span></p>[Nhập mô tả bộ sưu tập]<p>///Module Slider</p><p><img src='https://example.com/slider-1.jpg'> <img src='https://example.com/slider-2.jpg'> <img src='https://example.com/slider-3.jpg'></p><p>///Module Giới thiệu</p>[Mô tả giới thiệu 1...]<p>---</p><p><img src='https://example.com/banner-gt-1.jpg'></p><p>///Module Giới thiệu</p>[Mô tả giới thiệu 2...]<p>---</p><p><img src='https://example.com/banner-gt-2.jpg'></p><p>///Module Sản phẩm</p>

Trang blog

Để thiết lập trang danh mục blog và chi tiết tin tức, bạn cần tìm đến mục Trang blog:

Tại đây, bạn có thể thiết lập số bài viết hiển thị trên 1 trang, danh mục, tin nổi bật, chia sẽ bài viết, bài viết liên quan,...

Trang liên hệ

Để cấu hình thông tin trang liên hệ, Bạn chọn mục Trang liên hệ

Tại đây bạn có thể thay đổi Bản đồ cũng như các thông tin  liên hệ:

Phần iframe bản đồ. Bạn truy cập vào https://www.google.com/maps nhập địa chỉ shop bạn. Sau đó chọn nút Chia sẻ:

Tiếp theo, bạn chọn tab Nhúng bản đồ và chọn Sao chép HTML

Tiếp theo, bạn parse đoạn mã iframe đó vào ô nhập mã iframe trong thiết lập trang liên hệ:

Cuối cùng. Trong admin website. Bạn tạo 1 trang nội dung và chọn khung giao diện là page.contact

Trang danh sách cửa hàng

Để thiết lập bạn Tạo trang nội dung và chọn layout page.he-thong-cua-hang.

Tiếp theo, để cấu hình danh sách các cửa hàng của bạn. Bạn vào Cấu hình giao diện -> Chọn Trang Hệ thống cửa hàng

Tại đây, cấu hình trang danh sách cho phép bạn có thể nhập và hiển thị bản đồ iframe mặc định và phần chọn trang nội dung JSON chứ danh sách các cửa hàng.

Bước tiếp theo bạn Tạo trang nội dung và chọn layout page.store_list

Tại trang nội dung JSON, cấu hình trang danh sách cho phép bạn có thể nhập và hiển thị địa chỉ chi nhánh. Các thông tin chi nhánh được thiết lập gồm:

Danh sách cửa hàng mẫu:

{name:"Sudes Phone Sài Gòn", address: "Tầng 3, 70 Lữ Gia, Phường 15, Quận 11, Thành phố Hồ Chí Minh",city: "Hồ Chí Minh",district: "Quận 10",ward: "Phường 15", phone:"1900 6750", url: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.518261716127!2d106.65095971411642!3d10.771561562230547!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752f4964c382dd%3A0xb61978d7651a271f!2zUGjhuqduIG3hu4FtIHF14bqjbiBsw70gYsOhbiBow6BuZyBTYXBvIC0gSOG7kyBDaMOtIE1pbmg!5e0!3m2!1svi!2s!4v1649778540165!5m2!1svi!2s"}, {name:"Sudes Phone Hà nội", address: "Tầng 6, Tòa Ladeco, 265 Đội Cấn, Quận Ba Đình, TP Hà Nội",city: "Hà Nội",district: "Quận Ba Đình",ward: "Phường Liễu Giai", phone:"1900 6750", url: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3723.9286789857374!2d105.81375162944714!3d21.03553954813997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ab0d6ed39421%3A0xf5527993cb53ced4!2zMjY1IMSQ4buZaSBD4bqlbiwgTGnhu4V1IEdpYWksIEJhIMSQw6xuaCwgSMOgIE7hu5lpLCBWaeG7h3QgTmFt!5e0!3m2!1svi!2sus!4v1680470551050!5m2!1svi!2sus"}, {name:"Sudes Phone Đà Nẵng", address: "Số 83 Đường Xô Viết Nghệ Tĩnh, Phường Khuê Trung - Quận Cẩm Lệ - TP Đà Nẵng",city: "Đà Nẵng",district: "Quận Cẩm Lệ",ward: "Phường Khuê Trung", phone:"1900 6750", url: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d958.6622551890493!2d108.21444222921468!3d16.031776088254038!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x314219ed468583bd%3A0x683a71dd962f0b30!2zODMgWMO0IFZp4bq_dCBOZ2jhu4cgVMSpbmgsIEhvw6AgQ8aw4budbmcgTmFtLCBD4bqpbSBM4buHLCDEkMOgIE7hurVuZywgVmnhu4d0IE5hbQ!5e0!3m2!1svi!2sus!4v1680470203016!5m2!1svi!2sus"}, {name:"Sudes Phone Huế", address: "480 Lê Duẩn, Phường Tây Lộc, TP. Huế, Tỉnh Thừa Thiên Huế",city: "Huế",district: "TP. Huế",ward: "Phường Tây Lộc", phone:"1900 6750", url: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3723.9286789857374!2d105.81375162944714!3d21.03553954813997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ab0d6ed39421%3A0xf5527993cb53ced4!2zMjY1IMSQ4buZaSBD4bqlbiwgTGnhu4V1IEdpYWksIEJhIMSQw6xuaCwgSMOgIE7hu5lpLCBWaeG7h3QgTmFt!5e0!3m2!1svi!2sus!4v1680470551050!5m2!1svi!2sus"}, {name:"Sudes Phone Bến Tre", address: "910/1 Võ Nguyên Giáp, Ấp 1, Xã Sơn đông, TP.Bến Tre, Tỉnh Bến Tre",city: "Bến Tre",district: "TP.Bến Tre",ward: "Xã Sơn đông", phone:"1900 6750", url: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3926.1333843715915!2d106.35564971533253!3d10.250824671476527!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x310aa934bc1f275b%3A0x89d85cb05018dc1!2zVsSDbiBwaMOybmcgTU9CIC0gQuG6v24gVHJl!5e0!3m2!1svi!2sus!4v1680470755571!5m2!1svi!2sus"}, {name:"Sudes Phone Đồng Nai", address: "118 / 4 kp 12, phường Hố Nai, thành phố Biên Hòa, tỉnh Đồng Nai",city: "Đồng Nai",district: "Thành phố Biên Hòa",ward: "Phường Hố Nai", phone:"1900 6750", url: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3916.9704981604714!2d106.88168951533481!3d10.965599358670561!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3174ddc369eb5549%3A0xb9d6be48c0708120!2zMTE4IEtodSBQaOG7kSAxMiwgSOG7kSBOYWksIFRow6BuaCBwaOG7kSBCacOqbiBIw7JhLCDEkOG7k25nIE5haSwgVmnhu4d0IE5hbQ!5e0!3m2!1svi!2sus!4v1680471031980!5m2!1svi!2sus"}, {name:"Sudes Phone Cần Thơ", address: "Số 64, Đường Tú Xương, KDC Hồng Phát, phường An Bình, Ninh Kiều, Cần Thơ",city: "Cần Thơ",district: "Ninh Kiều",ward: "Phường An Bình", phone:"1900 6750", url: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7857.915762925734!2d105.73843682643769!3d10.020334486548327!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31a089df2f03ecc7%3A0x163f861e9a8fbff0!2zS2h1IGTDom4gY8awIEjhu5NuZyBQaMOhdA!5e0!3m2!1svi!2sus!4v1680471294037!5m2!1svi!2sus"}

Hướng dẫn cách lấy mã embed chi nhánh trên google map

Các bước thao tác tương tự như cách lấy mã iframe google map của Trang liên hệ:

Sau khi bạn sao chép được mã code iframe từ google map. Trong mã iframe bạn vừa sao chép. bạn chỉ sao chép đoạn link embed trong khối src="[ĐOẠN LINK EMBED]"
Ví dụ: Đoạn code iframe bạn vừa sao chép từ google map là:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d31354.574838345663!2d106.6401921!3d10.7866426!3m2!1i1024!2i768!4f13.1!3m3!

1m2!1s0x31752ec84dbc2ab5%3A0xb79273b7eb5c56d8!2zMTc1IEzDvSBUaMaw4budbmcgS2nhu4d0LCBQaMaw4budbmcgNiwgVMOibiBCw6xuaCwgSOG7kyBDaMOtIE1pbmg!5e0!3m2!1svi!2s!4v1537346151870" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Bạn chỉ cần lấy đoạn mã trong phần src="" sẽ là:

https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d31354.574838345663!2d106.6401921!3d10.7866426!3m2!1i1024!2i768!4f13.1!3m3!

1m2!1s0x31752ec84dbc2ab5%3A0xb79273b7eb5c56d8!2zMTc1IEzDvSBUaMaw4budbmcgS2nhu4d0LCBQaMaw4budbmcgNiwgVMOibiBCw6xuaCwgSOG7kyBDaMOtIE1pbmg!5e0!3m2!1svi!2s!4v1537346151870

Cuối cùng, bạn dán đoạn mã vừa sao chép vào dòng url của trang page.store_list

Trang Giới thiệu

Theme hỗ trợ bạn cấu hình 1 trang landing page về Giới thiệu riêng biệt:

Trang FAQ - Câu hỏi thường gặp

Để tạo trang FAQ, bạn tạo 1 trang nội dung, chọn khung giao diện là page.faq

Thực hiện theo hướng dẫn để nhập thông tin trang FAQ:

Liên hệ

Cám ơn các bạn đã chọn theme của chúng tôi.
Ngoài ra, nếu cần sự giúp đỡ, bạn có thể liên lạc với chúng tôi qua email: [email protected].
Chúng tôi luôn vui lòng giúp đỡ các bạn.