Βήμα 1: Λάβετε το κλειδί widget Photta
Συνδεθείτε στο Photta Business Dashboard στο business.photta.app. Μεταβείτε στο Settings → API Keys και εντοπίστε το δημοσιεύσιμο κλειδί σας (publishable key) — ξεκινά με pk_live_ και μοιάζει με pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Κάντε κλικ στο εικονίδιο αντιγραφής δίπλα στο κλειδί. Αυτό είναι το μόνο διαπιστευτήριο που χρειάζεστε για την ενσωμάτωση Shopify. Ποτέ μην επικολλάτε το μυστικό κλειδί sk_live_ σε κώδικα frontend.
Εάν δεν έχετε ακόμη λογαριασμό, κάντε κλικ στο 'Ξεκινήστε τη δωρεάν δοκιμή' στη σελίδα Photta Business. Η δοκιμή σάς προσφέρει 50 δωρεάν εικονικές δοκιμές χωρίς να απαιτείται πιστωτική κάρτα. Το κλειδί pk_live_ είναι διαθέσιμο αμέσως μόλις επαληθεύσετε τη διεύθυνση email σας και καταχωρίσετε το domain του καταστήματός σας στο 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 είναι σημαντικό — εμποδίζει το script να μπλοκάρει την απόδοση της σελίδας σας, διασφαλίζοντας παράλληλα ότι το widget θα αρχικοποιηθεί αφού το DOM είναι έτοιμο.
Κάντε κλικ στο Save στην πάνω δεξιά γωνία του επεξεργαστή κώδικα. Το Shopify θα αποθηκεύσει το αρχείο και θα εμφανίσει μια πράσινη επιβεβαίωση. Μην δημοσιεύσετε νέα έκδοση θέματος ή κάνετε οτιδήποτε άλλο — η αλλαγή είναι ενεργή στο θέμα σας τη στιγμή που κάνετε κλικ στο Save.
Βήμα 4: Επαληθεύστε ότι το widget φορτώθηκε σωστά
Ανοίξτε οποιαδήποτε σελίδα προϊόντος στη βιτρίνα σας σε μια νέα καρτέλα προγράμματος περιήγησης (χρησιμοποιήστε παράθυρο ιδιωτικής περιήγησης για να παρακάμψετε τυχόν προσωρινή μνήμη). Κυλήστε προς τα κάτω στην ενότητα του προϊόντος — θα πρέπει να δείτε ένα κουμπί 'Δοκιμάστε το' κοντά στο κουμπί Προσθήκη στο καλάθι. Κάντε κλικ σε αυτό, ανεβάστε μια δοκιμαστική φωτογραφία και επιβεβαιώστε ότι εμφανίζεται το αποτέλεσμα της δοκιμής. Εάν δείτε το κουμπί, η εγκατάσταση ολοκληρώθηκε.
Εάν το κουμπί δεν εμφανίζεται, ανοίξτε την κονσόλα προγραμματιστή του προγράμματος περιήγησης (F12 → καρτέλα Console) και αναζητήστε τυχόν μηνύματα σφάλματος από το photta ή το sdk.js. Το πιο συνηθισμένο πρόβλημα είναι η αναντιστοιχία domain: το domain του καταστήματός σας πρέπει να περιλαμβάνεται στη λίστα Settings → Allowed Domains στο Business Dashboard. Προσθέστε το εκεί, περιμένετε 30 δευτερόλεπτα και ανανεώστε τη σελίδα του προϊόντος.
Βήμα 5: Προσαρμόστε τα χρώματα του widget στην επωνυμία σας
Από προεπιλογή, το widget χρησιμοποιεί την ουδέτερη σκοτεινή παλέτα του Photta. Για να ταιριάζει με την επωνυμία σας, προσθέστε χαρακτηριστικά data στην ίδια ετικέτα script: data-color-primary για το χρώμα του κουμπιού CTA (τιμή hex, π.χ. #D4AF37) και data-color-surface για το φόντο του modal. Παράδειγμα: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Αποθηκεύστε ξανά το theme.liquid μετά την προσθήκη αυτών των χαρακτηριστικών.
Για πλήρη παράκαμψη σε επίπεδο CSS, το widget Photta εκθέτει προσαρμοσμένες ιδιότητες CSS στο namespace --photta-* τις οποίες μπορείτε να στοχεύσετε από το βασικό CSS του θέματός σας. Το πλάνο Growth και άνω σας επιτρέπει επίσης να αποκρύψετε το σήμα 'Powered by Photta' μέσω του Business Dashboard στο Customize → Branding. Οι αλλαγές εφαρμόζονται σε πραγματικό χρόνο μετά την αποθήκευση — δεν απαιτείται επαναδημοσίευση ή ενημέρωση του widget.