Skip to content

E-shop Design

E-commerce Development

Κατασκευή e-shop OATTREE

Στη Soft Bridge σχεδιάσαμε και κατασκευάσαμε από το μηδέν το e-shop του OATTREE σε WordPress και WooCommerce. Οργανώσαμε τα προϊόντα και τα φίλτρα αναζήτησης, υλοποιήσαμε ηλεκτρονικές πληρωμές και διασύνδεση BOX NOW και εντάξαμε εργασίες προσβασιμότητας WCAG στο πλαίσιο του έργου ΕΣΠΑ.

Δείτε το oattree.gr (νέα καρτέλα)
Το e-shop OATTREE σε desktop και κινητό.
  • WooCommerce
  • Φίλτρα προϊόντων
  • Πληρωμές
  • BOX NOW
  • WCAG
Πελάτης
OATTREE
Κλάδος
Τρόφιμα · E-commerce
Αντικείμενο
Σχεδιασμός · Κατασκευή · Διασυνδέσεις
Πλατφόρμα
WordPress & WooCommerce

Η Πρόκληση

Σχεδιασμός και κατασκευή e-shop τροφίμων από το μηδέν

Το OATTREE χρειαζόταν ένα ηλεκτρονικό κατάστημα που να συνδυάζει την ταυτότητα της επιχείρησης με την οργανωμένη παρουσίαση των προϊόντων της. Αναλάβαμε τον συνολικό σχεδιασμό και την κατασκευή, από τη δομή των σελίδων έως τις εμπορικές διασυνδέσεις.

Το αντικείμενο κάλυψε τον κατάλογο, τα φίλτρα, την πληροφορία προϊόντος, τις ηλεκτρονικές πληρωμές, το BOX NOW και την προσβασιμότητα στο πλαίσιο ΕΣΠΑ.

Η Λύση

WooCommerce με οργανωμένη πλοήγηση προϊόντων

Δώσαμε σαφή θέση στις διαφορετικές κατηγορίες, όπως μπάρες ενέργειας, αλείμματα, γκρανόλα και cookies. Οι πράσινες επιφάνειες, οι διακριτικές χρυσές αναφορές και η φωτογραφία συνδέουν το κατάστημα με την εικόνα του OATTREE.

Σχεδιάσαμε την περιήγηση γύρω από την αναζήτηση προϊόντων και την πρόσβαση στις πληροφορίες τους, με φίλτρα που αντιστοιχούν στις κατηγορίες και στα επιμέρους χαρακτηριστικά του καταλόγου.

Βασικά Χαρακτηριστικά

WooCommerce με φίλτρα και οργανωμένο κατάλογο

Αναζήτηση προϊόντων, ηλεκτρονικές πληρωμές, BOX NOW και προσβασιμότητα στο πλαίσιο του έργου.

Φίλτρα καταλόγου

Περιορισμός αποτελεσμάτων με βάση την τιμή, την κατηγορία και τα ειδικά χαρακτηριστικά των προϊόντων.

Ηλεκτρονικές πληρωμές

Διασύνδεση τραπεζικής υπηρεσίας για πληρωμές με κάρτα μέσα στη διαδικασία παραγγελίας.

Διασύνδεση BOX NOW

Σύνδεση του e-shop με BOX NOW για την υποστήριξη αποστολών παραγγελιών.

Προσβασιμότητα WCAG

Εργασίες προσβασιμότητας με αναφορά στις οδηγίες WCAG στο πλαίσιο του έργου ΕΣΠΑ.

Responsive Design

Συνεπής παρουσίαση και πλοήγηση σε desktop, tablet και κινητό.

Shop page με φίλτρα τιμής και χαρακτηριστικών

Οργανώσαμε τη σελίδα καταστήματος με σταθερή θέση για τα φίλτρα και καθαρή διάταξη καρτών προϊόντων. Κάθε κάρτα συγκεντρώνει φωτογραφία, ονομασία, τιμή και ένδειξη διαθεσιμότητας.

Οι κατηγορίες συμπληρώνονται από ειδικά χαρακτηριστικά του καταλόγου, όπως Vegan, Raw και χωρίς προσθήκη ζάχαρης. Ο επισκέπτης μπορεί να περιορίζει τα αποτελέσματα με βάση τις επιλογές που τον ενδιαφέρουν.

  • Φίλτρο εύρους τιμής
  • Κατηγορίες και επιμέρους ομάδες προϊόντων
  • Ειδικά χαρακτηριστικά και ταξινόμηση αποτελεσμάτων
Η σελίδα καταστήματος OATTREE με φίλτρα τιμής, κατηγορίας και ειδικών χαρακτηριστικών.

Σελίδες προϊόντων με περιγραφή και συστατικά

Δώσαμε έμφαση στη φωτογραφία και στη σαφή παρουσίαση των πληροφοριών του προϊόντος. Η τιμή, η κατηγορία και η σύντομη περιγραφή συγκεντρώνονται δίπλα στην εικόνα, με πρόσβαση σε αναλυτικότερο περιεχόμενο.

Ξεχωριστές καρτέλες οργανώνουν την περιγραφή, τις επιπλέον πληροφορίες, τα συστατικά και τον διατροφικό πίνακα. Η δομή βοηθά τον επισκέπτη να βρίσκει την πληροφορία χωρίς ένα ενιαίο, εκτενές κείμενο.

  • Μεγάλη φωτογραφία και συνοπτική παρουσίαση
  • Οργάνωση συστατικών και διατροφικής πληροφορίας
  • Σχετικά προϊόντα για συνέχεια στην περιήγηση
Η πραγματική σελίδα προϊόντος Dark Almond στο OATTREE.

Διασυνδέσεις πληρωμών και BOX NOW

Ηλεκτρονική πληρωμή με κάρτα

Υλοποιήσαμε τη σύνδεση με τραπεζική υπηρεσία ηλεκτρονικών πληρωμών για την πληρωμή παραγγελιών με κάρτα. Η λειτουργία συμπληρώνει την εμπορική υποδομή του WooCommerce και συνδέεται με τη διαδικασία ολοκλήρωσης της παραγγελίας.

Διασύνδεση e-shop με BOX NOW

Στο αντικείμενο της κατασκευής περιλήφθηκε η διασύνδεση με BOX NOW για τις αποστολές. Έτσι, η υλοποίηση καλύπτει τόσο την παρουσίαση του καταλόγου όσο και τις λειτουργίες πληρωμής και αποστολής που χρειάζεται το ηλεκτρονικό κατάστημα.

Εργασίες προσβασιμότητας WCAG για το έργο ΕΣΠΑ

Η προσβασιμότητα αποτέλεσε μέρος της κατασκευής του OATTREE, με αναφορά στις οδηγίες WCAG και στις ανάγκες του έργου ΕΣΠΑ. Στο website είναι διαθέσιμη γραμμή εργαλείων προσαρμογής της προβολής.

Οι επιλογές περιλαμβάνουν αλλαγή μεγέθους κειμένου, υψηλή αντίθεση, κλίμακα του γκρι, υπογράμμιση συνδέσμων και αναγνώσιμη γραμματοσειρά, προσφέροντας πρόσθετους τρόπους προσαρμογής της ανάγνωσης.

  • Ρυθμίσεις μεγέθους κειμένου και γραμματοσειράς
  • Επιλογές αντίθεσης και οπτικής παρουσίασης
  • Σταθερή πρόσβαση στα εργαλεία προσβασιμότητας
Η γραμμή εργαλείων προσβασιμότητας στο OATTREE με επιλογές κειμένου και αντίθεσης.

Το OATTREE σε desktop, tablet και κινητό

Προσαρμόσαμε τις συνθέσεις και την πλοήγηση στις μικρότερες οθόνες. Η αρχική σελίδα δίνει χώρο στη φωτογραφία των προϊόντων, με συμπτυγμένο μενού και άμεση πρόσβαση στις βασικές λειτουργίες του καταστήματος.

Η ίδια οπτική γλώσσα συνδέει την αρχική, τον κατάλογο και τις σελίδες προϊόντων, διατηρώντας την ταυτότητα του OATTREE σε κάθε συσκευή.

Η responsive εμπειρία του OATTREE σε desktop, tablet και κινητό.

Το OATTREE e-shop από τη Soft Bridge

Δημιουργήσαμε από το μηδέν ένα ηλεκτρονικό κατάστημα που συνδυάζει την εικόνα του OATTREE με οργανωμένο κατάλογο, φίλτρα αναζήτησης, πληροφορίες προϊόντων, ηλεκτρονικές πληρωμές και διασύνδεση BOX NOW.

Ο σχεδιασμός, η ανάπτυξη και οι εργασίες προσβασιμότητας διαμορφώνουν μια συνεπή ψηφιακή παρουσία, προσαρμοσμένη στο αντικείμενο και στις λειτουργικές ανάγκες της επιχείρησης.