Το τμήμα Product info είναι το κύριο μέρος της σελίδας προϊόντος. Δείχνει τις εικόνες του προϊόντος στη μία πλευρά και τα στοιχεία του προϊόντος (όνομα, περιγραφή και φόρμα παραγγελίας) στην άλλη. Είναι υποχρεωτικό στη σελίδα προϊόντος, οπότε μπορείτε να το διαμορφώσετε αλλά όχι να το διαγράψετε.
Πού θα το βρείτε
- Ανοίξτε τον builder και επιλέξτε Product page στην καρτέλα Pages.
- Επιλέξτε ένα προϊόν για προεπισκόπηση. Αυτό αλλάζει μόνο το τι δείχνει η προεπισκόπηση: ο σχεδιασμός σας ισχύει για όλα τα προϊόντα μαζί.
- Κάντε κλικ στο Product info στην προεπισκόπηση ή στην καρτέλα Sections.
Το τμήμα έχει δύο σταθερά μέρη, Media και Details. Δεν μπορείτε να τα αφαιρέσετε ή να τα μετακινήσετε, μόνο να τα ρυθμίσετε. Στα κινητά μπαίνουν το ένα κάτω από το άλλο: πρώτα οι εικόνες, μετά τα στοιχεία.
Ρυθμίσεις του τμήματος
- Section width: το Page κρατά το περιεχόμενο στο πλάτος της σελίδας σας, το Full πηγαίνει από άκρη σε άκρη.
- Equal columns: όταν είναι ενεργό, οι εικόνες και τα στοιχεία πιάνουν το καθένα το μισό πλάτος. Όταν είναι ανενεργό, κάθε στήλη παίρνει τον χώρο που χρειάζεται.
- Color scheme, Gap (απόσταση ανάμεσα στις δύο στήλες), περιθώρια (padding) και Custom CSS.
Media: η συλλογή εικόνων
Δείχνει τις φωτογραφίες και τα βίντεο που προσθέσατε στο προϊόν.
- Mode: Carousel (μία εικόνα κάθε φορά) ή Grid (όλες οι εικόνες μαζί).
- Sticky: Off, Desktop, Mobile ή Both. Μια sticky συλλογή εικόνων μένει ορατή ενώ οι αγοραστές κάνουν κύλιση στα στοιχεία.
- Grid: Columns (1 ή 2), Gap και Full width first (η πρώτη εικόνα πιάνει και τις δύο στήλες).
- Carousel: Navigation icons (Arrows, Chevrons ή None), Icon background, Desktop pagination (Dots, Counter, Thumbnails) και Mobile pagination (Dots, Counter, Hint, Thumbnails). Το Hint δείχνει ένα κομμάτι της επόμενης εικόνας.
- Thumbnails: με μικρογραφίες στον υπολογιστή, ορίστε Desktop position (Left, Bottom, Right) και Desktop size. Στα κινητά βρίσκονται πάντα κάτω από την εικόνα.
- Aspect ratio: το Auto κρατά το σχήμα κάθε εικόνας. Με Portrait, Square ή Landscape, το Media fit επιλέγει Cover (γέμισμα και περικοπή) ή Contain (εμφάνιση ολόκληρης της εικόνας).
- Enable zoom: οι αγοραστές κάνουν κλικ ή πατούν μια εικόνα για να τη δουν σε πλήρη οθόνη.
Details: τα μπλοκ δίπλα στις εικόνες
Το Details έχει Gap και Sticky on desktop (η στήλη μένει ορατή ενώ οι αγοραστές κάνουν κύλιση πέρα από τις εικόνες). Επιλέξτε το και κάντε κλικ στο Add new block για να προσθέσετε μπλοκ και σύρετέ τα με όποια σειρά θέλετε.
- Title: το όνομα του προϊόντος, μία φορά ανά σελίδα. Ορίστε Width, Alignment, Preset, Line height και Letter spacing. Το Show above image on mobile μετακινεί το όνομα (με τη βαθμολογία του) πάνω από τη συλλογή εικόνων στα κινητά. Το Show reviews above title βάζει τα αστέρια βαθμολογίας πάνω από το όνομα.
- Description: το κείμενο του προϊόντος σας. Ορίστε ύψος γραμμής και απόσταση γραμμάτων. Με ενεργό το Click image to scroll, ένα κλικ μέσα στην περιγραφή κάνει κύλιση στη φόρμα παραγγελίας όταν δεν υπάρχει φόρμα στην οθόνη. Οι σύνδεσμοι εξακολουθούν να λειτουργούν.
- Form: η τιμή, οι παραλλαγές και το κουμπί αγοράς. Οι επιλογές του βρίσκονται στο Πώς ρυθμίζω το τμήμα Landing info και τη φόρμα παραγγελίας (κουμπιά, αντίστροφη μέτρηση, WhatsApp);
- Divider: έως 2 γραμμές ανάμεσα στα μπλοκ.
- Collapsibles, Delivery timeline, Size guide, Badges και Before and after: δείτε το Πώς προσθέτω πτυσσόμενες καρτέλες, ημερομηνίες παράδοσης, οδηγό μεγεθών, σήματα ή εικόνες πριν και μετά στη σελίδα προϊόντος;
Τα Form και Description είναι υποχρεωτικά: μπορείτε να τα μετακινήσετε αλλά όχι να τα διαγράψετε.
Sticky κουμπί
Κρατά έναν τρόπο αγοράς στην οθόνη μόλις οι αγοραστές απομακρυνθούν από τη φόρμα παραγγελίας. Κρύβεται ξανά όσο είναι ορατή οποιαδήποτε φόρμα. Mode:
- None: κανένα sticky στοιχείο.
- Bar: μια μπάρα στο κάτω μέρος με την τιμή, την ποσότητα και το κουμπί αγοράς.
- Button: ένα αιωρούμενο κουμπί που κάνει κύλιση στη φόρμα. Ορίστε Label (κενό σημαίνει το κείμενο του κουμπιού αγοράς σας), Style (Primary ή Secondary), Position (Start, Center, End) και Animation (Pulse, Heartbeat, Shake, Bounce, Glow, Ripple, Wiggle ή None).
- Image: μια αιωρούμενη εικόνα της επιλογής σας που κάνει κύλιση στη φόρμα, με Position και Animation.
Στον builder το sticky στοιχείο εμφανίζεται όσο το τμήμα είναι επιλεγμένο, ώστε να μπορείτε να το διαμορφώσετε.