23
APOLLOTHEME Copyright © 2015 Apollotheme . All Rights Reserved. Website: http://apollotheme.com/ Gmail : [email protected]

Apollotheme presentation

Embed Size (px)

Citation preview

APOLLOTHEME

Copyright © 2015 Apollotheme . All Rights Reserved.

Website: http://apollotheme.com/Gmail : [email protected]

NỘI DUNG

I. Giới thiệu ApollothemeII. Giới thiệu framework của ApollothemeII. Kinh nghiệm làm theme với Liquid

I.GIỚI THIỆU APOLLOTHEME

• Lịch sử • Lĩnh vực phát triển• Đối tác• Chương trình Apollo

1. LỊCH SỬ PHÁT TRIỂN

• Thành lập : 12/2014• Người sáng lập : Trần Đinh Nghĩa• Nhân viên : 15 người

2. LĨNH VỰC PHÁT TRIỂN• Prestashop

• Shopify

3.ĐỐI TÁC

• Bizweb• Themeforest• Addon Prestashop

4. CHƯƠNG TRÌNH APOLLO

• Website: http://apollotheme.com/• Gmail: [email protected]• Phone : 09 77932264

II. FRAMEWORK APOLLOTHEME

Những module chính sử dụng liquid1. Slideshow2. Megamenu3. Block product list4. Block product tabs

1. SLIDESHOW

1. SLIDESHOW

1. SLIDESHOW

• Tạo config cho slideshow: Config chung, config cho từng slides (Upload hình ảnh, chèn văn vản, link, …)

• Sử dụng Liquid để lấy các biến, nội dung từ config

2. MEGAMENU

3. PRODUCT LIST

4. PRODUCT TABS

II. KINH NGHIỆM LÀM THEMEQuy trình làm theme- Có một theme cơ bản có đầy đủ chức năng làm themebase

- Sử dụng framework boostrap, html5, css3, …- Phân tích file PSD nhận được trước khi bắt đầu làm- Xác định các màu, khoảng cách chính (Màu chính, màu phụ, màu văn bản,

…)- Tạo các config cho các block của theme- Sắp xếp các block theo design- Css từng thành phần (Css các khối chung, khối riêng, các phần tử, …)

Header- Topbar: Danh sách liên kết

- Header main: Logo, block service, block search, block cart

Megamenu

Slideshow- Gồm 2 banner bên phải

Danh sách sản phẩm- Danh sách sản phẩm gồm 2 hàng và 4 cột

- Sử dụng bootstrap carousel

DANH SÁCH LIÊN KẾT- Sử dụng trên topbar, footer, …

- Sử dụng menu để khách hàng có thể tùy biến dễ dàng

DANH SÁCH LIÊN KẾT

• Hai danh sách liên kết: Thông tin, Hướng dẫn

DANH SÁCH LIÊN KẾT- Tạo config cho mỗi block (setting_schema.json)

- Thiết lập giao diện cho block

- Lấy biến từ config. Sử dụng Liquid để in các liên kết

II. KINH NGHIỆM LÀM THEME

- Sau khi hoàn thành cần kiểm tra lại theme- Test lại website trên các trình duyệt, thiết bị.- Kiểm tra các config có trong theme.- Validate html.- Kiểm tra tốc độ load site.

III. ƯU ĐIỂM CỦA HỆ THỐNG

- Tiện lợi cho người sử dụng theme- Có thể chỉnh sửa, thay đổi tạo một phong cách hoàn toàn

riêng biệt dựa trên theme mẫu- Dễ dàng để thiết lập một website thương mại điện tử- Sử dụng theme cho desktop và mobile riêng biệt

IV. HẠN CHẾ

- Chưa sử dụng sass như Shopify- Không có danh mục con- Chưa có tìm kiếm sản phẩm nâng cao

(Theo giá, theo đặc tính, …)- Chưa hỗ trợ multilanguage

THANK YOU FOR LISTENING!