พื้นฐานการออกแบบธีม

สิ่งที่ต้องมีก่อนการสร้างธีม

• มีความรู้ในการเขียนภาษา HTML และ CSS
• พอมีความรู้ Javascript Library เช่น jQuery
• โปรแกรม HTML Editor แนะนำ Komodo Edit เพราะรองรับ Syntax Highlight ของ Template Toolkit?
• Web Browser ที่รองรับเครื่องมือสำหรับพัฒนาเว็บไซต์ เช่น Chrome/Firefox ติดตั้ง HTML Validity Extension เพื่อใช้ตรวจสอบ HTML Syntax
• Web Browser ที่ใช้สำหรับทดสอบการแสดงผล ได้แก่ IE9 (สามารถเลือกการแสดงผล IE7 และ IE8 ได้), Chrome, Firefox, Safari

โครงสร้างเทมเพลต

• assets
• config
• layouts
• pages
• snippets

assets

เก็บไฟล์รูปภาพ, javascript และ stylesheet (CSS) หากมีสไตล์ย่อย ให้สร้างโฟลเดอร์ย่อยเก็บไว้ในนี้

config

เก็บไฟล์ตั้งค่าธีมในรูปแบบ HTML และไฟล์ข้อมูลการตั้งค่าเริ่มต้นในรูปแบบ JSON

layouts

เก็บไฟล์เทมเพลตเลย์เอ้าท์หลักของธีม เช่น theme.tt

pages

เก็บไฟล์เทมเพลตหน้าต่างๆ เช่น คอลเลคชัน, สินค้า เป็นต้น

snippets

เก็บส่วนสคริปต์เทมเพลตที่ใช้สำหรับแทรกลงในเทมเพลตหลักอีกที เพื่อประหยัดเวลา ไม่ต้องเขียนโค้ดซ้ำซ้อน เช่น สคริปต์แทรกปุ่ม Like หรือปุ่ม Share ต่างๆ, สคริปต์สร้าง Meta Tag เป็นต้น

ขนาดรูปภาพ

• icon (32x32)
• tiny (50x50)
• thumb (100x100)
• small (160x160)
• medium (240x240)
• large (480x480)
• grande (600x600)
• original (1600x1600)

เรียกใช้ผ่านฟิลเตอร์ image_uri

[% product.featured_image.src | image_uri ('small') %]