ขั้นตอนที่ 1: รับคีย์วิดเจ็ต Photta ของคุณ
เข้าสู่ระบบแดชบอร์ด Photta Business ที่ business.photta.app ไปที่ Settings → API Keys และค้นหา Publishable key ของคุณ — ซึ่งจะขึ้นต้นด้วย pk_live_ และมีลักษณะเหมือน pk_live_xxxxxxxxxxxxxxxxxxxxxxxx คลิกไอคอนคัดลอกข้างคีย์ นี่คือข้อมูลประจำตัวเดียวที่คุณต้องใช้สำหรับการรวมเข้ากับ Shopify ห้ามวางสคริปต์คีย์ที่เป็นความลับ sk_live_ ลงในโค้ดฝั่งหน้าบ้านเด็ดขาด
หากคุณยังไม่มีบัญชี ให้คลิก 'Start free trial' บนหน้า Photta Business ช่วงทดลองใช้งานจะให้คุณลองสวมฟรี 50 ครั้งโดยไม่ต้องใช้บัตรเครดิต คีย์ pk_live_ ของคุณจะพร้อมใช้งานทันทีหลังจากที่คุณยืนยันอีเมลและลงทะเบียนโดเมนร้านค้าใน Settings → Allowed Domains
ขั้นตอนที่ 2: เปิดโค้ดธีม Shopify ของคุณ
ในแผงควบคุม Shopify ของคุณ ไปที่ Online Store → Themes คลิกที่เมนูสามจุดข้างธีมที่ใช้งานอยู่ แล้วเลือก Edit code ตัวแก้ไขโค้ดจะเปิดรายการไฟล์ทางด้านซ้าย ให้ขยายโฟลเดอร์ Layout และคลิกที่ theme.liquid — นี่คือเทมเพลตหลักที่ครอบคลุมทุกหน้าในร้านค้าของคุณ
ใช้ฟังก์ชันค้นหาในตัวของเบราว์เซอร์ (Cmd+F หรือ Ctrl+F) ภายในตัวแก้ไขโค้ดและค้นหา </body> คุณควรจะพบจุดที่ตรงกันเพียงจุดเดียวที่บริเวณด้านล่างสุดของไฟล์ เหนือ </html> ให้วางเคอร์เซอร์ไว้ในบรรทัดก่อนหน้า </body> ทุกสิ่งที่คุณวางที่นี่จะโหลดในทุกหน้าของร้านค้า ซึ่งเป็นสิ่งที่คุณต้องการพอดี
ขั้นตอนที่ 3: วางส่วนของสคริปต์ Photta
วางข้อความสคริปต์ต่อไปนี้ในบรรทัดก่อนหน้า </body> โดยแทนที่ pk_live_... ด้วยคีย์จริงที่คุณคัดลอกมาจากขั้นตอนที่ 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script> คุณสมบัติ defer นั้นสำคัญมาก — มันจะช่วยป้องกันไม่ให้สคริปต์ขัดขวางการแสดงผลหน้าเว็บ ในขณะที่ยังรับประกันว่าวิดเจ็ตจะเริ่มทำงานหลังจากที่ DOM พร้อมใช้งาน
คลิก Save ที่มุมขวาบนของตัวแก้ไขโค้ด Shopify จะบันทึกไฟล์และแสดงข้อความยืนยันสีเขียว ไม่ต้องเผยแพร่ธีมเวอร์ชันใหม่หรือทำอย่างอื่น — การเปลี่ยนแปลงจะมีผลทันทีบนธีมที่ใช้งานอยู่เมื่อคุณคลิก Save
ขั้นตอนที่ 4: ตรวจสอบว่าวิดเจ็ตโหลดถูกต้องหรือไม่
เปิดหน้าสินค้าใดก็ได้บนหน้าร้านค้าของคุณในแท็บเบราว์เซอร์ใหม่ (ใช้หน้าต่างส่วนตัว/ไม่ระบุตัวตนเพื่อเลี่ยงแคช) เลื่อนลงไปที่ส่วนสินค้า — คุณควรเห็นปุ่ม 'Try it on' ใกล้กับปุ่ม Add to Cart คลิกที่ปุ่มนั้น อัปโหลดรูปภาพทดสอบ และยืนยันว่าผลลัพธ์การลองสวมปรากฏขึ้น หากคุณเห็นปุ่ม แสดงว่าการติดตั้งเสร็จสมบูรณ์
หากปุ่มไม่ปรากฏขึ้น ให้เปิดคอนโซลนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ (F12 → แท็บ Console) และมองหาข้อความแสดงข้อผิดพลาดจาก photta หรือ sdk.js ปัญหาที่พบบ่อยที่สุดคือโดเมนไม่ตรงกัน: โดเมนร้านค้าของคุณต้องอยู่ในรายการภายใต้ Settings → Allowed Domains ใน Business Dashboard ให้เพิ่มที่นั่น รอ 30 วินาที แล้วโหลดหน้าสินค้าใหม่อีกครั้ง
ขั้นตอนที่ 5: ปรับแต่งสีวิดเจ็ตให้เข้ากับแบรนด์ของคุณ
โดยค่าเริ่มต้น วิดเจ็ตจะใช้โทนสีเข้มที่เป็นกลางของ Photta หากต้องการให้เข้ากับแบรนด์ของคุณ ให้เพิ่มแอตทริบิวต์ข้อมูลในสคริปต์แท็กเดียวกัน: data-color-primary สำหรับสีปุ่ม CTA (ค่า hex เช่น #D4AF37) และ data-color-surface สำหรับพื้นหลังของโมดอล ตัวอย่าง: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script> บันทึก theme.liquid อีกครั้งหลังจากเพิ่มแอตทริบิวต์เหล่านี้
สำหรับการเขียนทับในระดับ CSS ทั้งหมด วิดเจ็ต Photta จะแสดงคุณสมบัติกำหนดเองของ CSS ในเนมสเปซ --photta-* ที่คุณสามารถกำหนดเป้าหมายได้จาก CSS หลักของธีม แผน Growth ขึ้นไปจะอนุญาตให้คุณซ่อนป้าย 'Powered by Photta' ผ่านทาง Business Dashboard ภายใต้ Customize → Branding การเปลี่ยนแปลงจะแสดงผลแบบเรียลไทม์หลังจากบันทึก โดยไม่ต้องติดตั้งใหม่หรืออัปเดตวิดเจ็ต