Home Page

Το Home Page (η «βιτρίνα») είναι η αρχική σελίδα του καταστήματος. Δεν είναι σταθερή σελίδα. Τη στήνεις εσύ από γραμμές (banners) που μπορείς να προσθέτεις, να μετακινείς και να αλλάζεις: εικόνες, slider, βίντεο YouTube, κείμενα και προϊόντα μιας κατηγορίας. Το άρθρο έχει δύο μέρη:

• Front End: πώς φαίνεται η αρχική στον επισκέπτη.
• Back End: πώς τη διαμορφώνεις από το μενού Home Page.

Εργαλεία AI: στο κείμενο κάθε γραμμής υπάρχει το κουμπί Μετάφραση, που μεταφράζει με AI το ελληνικό κείμενο στη γλώσσα που διαλέγεις και το προσθέτει ως δεύτερη γλώσσα. Λειτουργούν όταν είναι ενεργή η σύνδεση με ChatGPT ή Claude στις Ρυθμίσεις Πλατφόρμας.

Front End: η αρχική σελίδα του καταστήματος

Ο επισκέπτης βλέπει τις γραμμές με τη σειρά που τις έχεις ορίσει, η μία κάτω από την άλλη:

• Slider: εικόνες που αλλάζουν με βελάκια και τελείες. Φτιάχνεται από πολλές γραμμές που έχουν το ίδιο «όνομα συσχέτισης» (εδώ 7 εικόνες).
• Βίντεο YouTube: ενσωματωμένο βίντεο. Φορτώνει μόνο αν ο επισκέπτης έχει αποδεχτεί τα cookies, αλλιώς εμφανίζεται πλαίσιο με κουμπί αποδοχής.
• Κείμενο: μια γραμμή που έχει μόνο κείμενο, με ή χωρίς σύνδεσμο (μπορεί να είναι τίτλος, παράγραφος ή μήνυμα στο κέντρο).
• Εικόνα (banner): μια εικόνα που οδηγεί σε μια κατηγορία προϊόντων ή σε κάποια σελίδα. Στο πλάτος της οθόνης χωράνε μία, δύο, τρεις ή τέσσερις μαζί, ανάλογα με το μέγεθος που διάλεξες.
• Προϊόντα: πλέγμα προϊόντων μιας κατηγορίας, με τιμή, έκπτωση και εικονίδιο γρήγορης αγοράς.

Τα κείμενα εμφανίζονται στη γλώσσα του επισκέπτη (ελληνικά ή αγγλικά). Αν ένα κείμενο δεν έχει αγγλική εκδοχή, εμφανίζεται το ελληνικό.

Back End: η διαμόρφωση της αρχικής

Η σελίδα δείχνει όλες τις γραμμές της αρχικής με τη σειρά τους (στην κορυφή γράφει πόσες είναι, π.χ. «13 αποτελέσματα»). Κάθε γραμμή είναι κάρτα: πάνω η προεπισκόπηση όπως θα φανεί στο κατάστημα και κάτω ο τίτλος της και τα εργαλεία της.

Οι τρεις τύποι γραμμής

Τα τρία στρογγυλά εικονίδια αριστερά κάτω από την προεπισκόπηση διαλέγουν τι θα δείχνει η γραμμή. Το επιλεγμένο είναι μπλε:

1. Μεμονωμένη εικόνα: μια εικόνα με τίτλο, ένα βίντεο YouTube ή μόνο κείμενο.
2. Slider: η εικόνα γίνεται μέρος ενός slider. Δίπλα εμφανίζεται πεδίο με το όνομα συσχέτισης. Όσες γραμμές έχουν το ίδιο όνομα ενώνονται σε ένα slider, και το slider εμφανίζεται στη θέση της πρώτης.
3. Προϊόντα: η γραμμή δείχνει πλέγμα προϊόντων.

Οι λεπτομέρειες μιας γραμμής

Το κουμπί Περισσότερα / λιγότερα (βελάκια, δεξιά) ανοίγει και κλείνει τις λεπτομέρειες της γραμμής. Οι ρυθμίσεις είναι σε τρεις ομάδες:

• Τίτλος: Μέγεθος γραμμάτων (σε vw, δηλαδή αναλογικά με το πλάτος της οθόνης), Χρώμα (με επιλογέα), Σκιά (από «none» μέχρι περίγραμμα και σκιά, με διάφανες και αρνητικές εκδοχές) και Θέση (ύψος) του τίτλου πάνω στην εικόνα, σε ποσοστό από 10% έως 90%.
• Εικόνα: το αρχείο της εικόνας και το μέγεθος banner. Το αρχείο το ανεβάζεις με το κουμπί εικόνας ή το διαλέγεις από όσες έχεις ήδη ανεβάσει με το κουμπί σύννεφου («Εμφάνιση εικόνων πλατφόρμας»).
• Περιεχόμενο και σύνδεσμος: οι Κατηγορίες (με το κουμπί δίπλα ανοίγει ο πίνακας κατηγοριών), η Αναζήτηση και το πεδίο Σύνδεσμος / YouTube.

Το μέγεθος banner

Το μέγεθος ορίζει πόσο πλάτος πιάνει η γραμμή και άρα πόσες μπαίνουν δίπλα δίπλα:

• 1280 px (π.χ. 1280 x 540, 1280 x 350, 1280 x 250): όλο το πλάτος.
• 900 px (π.χ. 900 x 450, 900 x 506 16/9): περίπου τα ¾ του πλάτους.
• 800 px (800 x 800, 800 x 450 16/9): το μισό πλάτος, δύο δίπλα δίπλα.
• 600 px (600 x 600, 600 x 338 16/9): το ένα τρίτο, τρεις δίπλα δίπλα.
• 400 px (400 x 400, 400 x 225 16/9): το ένα τέταρτο, τέσσερις δίπλα δίπλα.

Οι επιλογές με «?» (π.χ. 1280 x ?) ακολουθούν το ύψος της εικόνας. Για τις γραμμές προϊόντων το μέγεθος γράφεται ως στήλες x σειρές (π.χ. 4×2 σημαίνει 4 στήλες και 2 σειρές, δηλαδή 8 προϊόντα).

Τι κάνει το κλικ: κατηγορία, αναζήτηση, σύνδεσμος, βίντεο

• Κατηγορίες και Αναζήτηση: σε γραμμή εικόνας, το κλικ ανοίγει τη λίστα προϊόντων της κατηγορίας που διάλεξες, με την αναζήτηση που έγραψες. Σε γραμμή προϊόντων, οι ίδιες επιλογές ορίζουν ποια προϊόντα θα εμφανιστούν (π.χ. κατηγορία «Ανδρικά>Παπούτσια» και μια λέξη στην αναζήτηση για φιλτράρισμα).
• Σύνδεσμος / YouTube: αν γράψεις πλήρη διεύθυνση (που περιέχει «http»), το κλικ ανοίγει αυτή τη σελίδα σε νέα καρτέλα. Αν γράψεις μόνο τον κωδικό ενός βίντεο YouTube (π.χ. «GOlR2LN0PHw»), η γραμμή γίνεται ενσωματωμένο βίντεο.

Ο τίτλος (κείμενο γραμμής)

Κάθε γραμμή έχει πεδίο κειμένου με επεξεργαστή: έντονα, πλάγια, υπογράμμιση, επικεφαλίδες H1 / H2, χρώμα, στοίχιση, σύνδεσμος και καθαρισμός μορφοποίησης. Το κείμενο εμφανίζεται πάνω στην εικόνα, ή μόνο του όταν δεν υπάρχει εικόνα.

• Γλώσσες: το πρώτο μέρος είναι τα ελληνικά. Το εικονίδιο της υδρογείου (🌐) εισάγει διαχωριστικό, ώστε να γράψεις μετά την αγγλική εκδοχή. Το κατάστημα δείχνει την εκδοχή που ταιριάζει στη γλώσσα του επισκέπτη.
• Μετάφραση (AI): το κουμπί «Μετάφραση» μεταφράζει το ελληνικό κείμενο στη γλώσσα που διάλεξες (π.χ. English) και το προσθέτει ως δεύτερη γλώσσα. Έλεγξε το αποτέλεσμα πριν το αποθηκεύσεις.

Προσθήκη, διαγραφή και μετακίνηση γραμμών

• + (Προσθήκη): βάζει νέα γραμμή ακριβώς κάτω από αυτή.
• Κάδος: διαγράφει τη γραμμή (από την αρχική και όταν αποθηκεύσεις).
• Μετακίνηση: πιάνεις τη γραμμή από την χειρολαβή (τετράγωνο με τελείες πάνω αριστερά στην εικόνα) και τη σέρνεις πάνω ή κάτω.

Το αιωρούμενο παράθυρο εργαλείων

Δεξιά στην οθόνη υπάρχει ένα μικρό παράθυρο που ακολουθεί το scroll:

• Μετακίνηση: το σέρνεις όπου σε βολεύει.
• Zoom out / zoom in: σμικρύνει ή μεγεθύνει όλη τη σελίδα σε 10 βήματα (από 30% έως 100%), ώστε να βλέπεις πολλές γραμμές μαζί.
• Περισσότερα / λιγότερα: ανοίγει ή κλείνει τις λεπτομέρειες όλων των γραμμών.
• Σχεδίαση ↔ Προεπισκόπηση: ο διακόπτης δείχνει την αρχική όπως θα φανεί στο κατάστημα, χωρίς τα εργαλεία.

Αποθήκευση

Οι αλλαγές δεν εφαρμόζονται μέχρι να πατήσεις Αποθήκευση (κάτω δεξιά, δίπλα στο Ακύρωση). Η αποθήκευση γράφει όλες τις γραμμές με την τρέχουσα σειρά τους και η αρχική του καταστήματος ενημερώνεται αμέσως.

Τι να προσέχεις: οι εικόνες της αρχικής ανεβαίνουν στον φάκελο «Files/HomePage» και μπορούν να είναι μεγάλες. Προτίμησε εικόνες κατάλληλες για το μέγεθος banner που διάλεξες, για να φορτώνει γρήγορα η αρχική. Αν σβήσεις μια γραμμή που ήταν σύνδεσμος σε καμπάνια, έλεγξε ότι δεν έμεινε κάπου αλλού σύνδεσμος προς αυτήν.