ตัวอย่างนี้ผมจะสอนเกี่ยวกับการกำหนดสีของสินค้า โดยลูกค้าจะสามารถเลือกได้ว่าจะเอาสีไหน แล้วถ้าเลือกขนาดนี้จะราคาเท่าไร ตัวอย่างนี้จะเป็น iPod shuffle สีน้ำเงิน เขียว และชมพู ขนาดจะมี 8gb และ 16gb
1. ให้เราไปหน้า admin ของ prestashop จากนั้นไปที่เมนู Catalog >> Attributes and groups จากนั้นทำการเพิ่มกลุ่มของคุณลักษณะก่อน

2. ใส่รายละเอียดลงไป ในหัวข้อ กลุ่มสี: ให้ติ้กถูกด้วยครับเดียวเราจะมาเล่น Color picker กัน

3. คลิกเพิ่มคุณลักษณะ แล้วทำการเพิ่มคุณลักษณะ (attributes) ลงในกลุ่มที่เราสร้างขึ้น ในที่นี้ผมก็ใส่ น้ำเงิน เขียว ชมพู

4. ที่นี่เราจะมาเพิ่มในส่วนของ Color picker กันให้คลิกที่กลุ่ม color เราจะเจอกับ attributes ที่เราทำการเพิ่มเข้ามาจากนั้นคลิกแก้ไข

5. กำหนดค่าสีลงไปให้ใกล้เคียงกับสินค้าของเรา เช่น ชมพู ก็จะเป็น #FF00E2 โดยค่าสีจะเป็นโหมดของ HTML สามารถดูได้จาก http://html-color-codes.com/

กำหนดเสร็จจะได้ดังรูป

6. เพิ่มกลุ่ม Diskspace มาอีก 1 กลุ่มและใส่ attributes เป็น 8gb และ 16gb แต่หัวข้อ กลุ่มสี: ในข้อ 2 กลุ่มนี้ให้ติ้กผิดไปครับคือไม่เลือกนั้นเอง เสร็จแล้วจะได้ดังรูป

7. ตอนนี้เราก็กำหนด attributes ครบแล้วให้เราไปทำการแก้ไขสินค้าของเรา ในที่นี้คือ iPod shuffle โดยผมได้ใส่รูป iPod shuffle ครบทั้งสามสีไว้แล้ว ให้ไปที่ การจัดกลุ่ม แล้วทำการเพิ่มคุณลักษณะที่ต้องการของสินค้าลงไป ดังตัวอย่างในรูปจะเป็น ipod shuffle สีชมพู ขนาด 8gb รูปภาพเราก็ติ้กที่สีชมพูด้วย เพราะเมื่อลูกค้าคลิกที่ attributes ตัวนี้รูปภาพจะเปลี่ยนเป็นสีชมพูตาม แล้วกด Add This Combinations

8. ต่อมาผมก็จะทำการเพิ่ม สีชมพู ขนาด 16gb ให้ราคาเพิ่มขึ้น 800 บาทดังรูป

9. จากนั้นกำหนด attributes ให้ครบตามต้องการ

10. เลื่อนลงมาด้านล่างสุดที่หัวข้อ Color picker: ให้เลือกกลุ่ม color แล้วกด ตกลง เพื่อใช้งาน Color picker กับสินค้าคัวนี้

เสร็จละครับขั้นตอนในการใช้งาน attributes ของ prestashop เรามาดูหน้าร้านกันว่าจะเป็นยังไง
เมื่อคลิกเข้ามาชมสินค้า

ลูกค้าสามารถคลิกเลือกสีได้จาก Color picker เมื่อทำการคลิกเลือกสีรูปภาพสินค้าจะเปลี่ยนไปตามที่เราได้ตั้งไว้ข้างต้น เช่น คลิกสีน้ำเงิน รูปภาพก็เปลี่ยนเป็นสีน้ำเงิน

เมื่อเลือกขนาดความจุ ราคาก็จะเปลี่ยนตาม