Πώς να κρύψετε τις μη διαθέσιμες παραλλαγές στο Shopify

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

Οδηγός Βήμα προς Βήμα για την Υλοποίηση Προσαρμοσμένου Κώδικα

Βήμα 1: Απόκτηση Πρόσβασης στον Πίνακα Διαχείρισης του Shopify

Συνδεθείτε στον πίνακα διαχείρισης του Shopify.
Μεταβείτε στις Διαύλους Πωλήσεων > Διαδικτυακό Κατάστημα > Θέματα.

Βήμα 2: Προσαρμογή του Θέματος σας

Βρείτε το θέμα που θέλετε να επεξεργαστείτε και κάντε κλικ στην Προσαρμογή.
Επιλέξτε το Πρότυπο προϊόντος στο οποίο θέλετε να κρύψετε τις μη διαθέσιμες παραλλαγές.

Βήμα 3: Προσθήκη Προσαρμοσμένου Κώδικα

Στην ενότητα Πληροφορίες προϊόντος, κάντε κλικ στο + Προσθήκη μπλοκ και επιλέξτε το Μπλοκ προσαρμοσμένου υγρού.
Αντιγράψτε και επικολλήστε τον ακόλουθο προσαρμοσμένο κώδικα JavaScript στο πεδίο Προσαρμοσμένο υγρό:

<script language="javascript" type="text/javascript">
const pickerType = (document.querySelector('variant-radios')) ? 'radios' : 'selects';
const variantSelects = (pickerType == 'radios') ? document.querySelector('variant-radios') : document.querySelector('variant-selects');
const fieldsets = (pickerType == 'radios') ? Array.from(variantSelects.querySelectorAll('fieldset')) : Array.from(variantSelects.querySelectorAll('.product-form__input--dropdown'));
const productJson = JSON.parse(variantSelects.querySelector('[type="application/json"]').textContent);
let selectedOptions = [];
variantSelects.addEventListener('change', rebuildOptions);
this.rebuildOptions();

function validCombo(inputValue, optionLevel) {
    for(let i = 0; i < productJson.length; i++) {
        if(optionLevel == 1){
            if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == inputValue) {
                return true;
            }
        } else {
            if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == selectedOptions[1] && productJson[i].option3 == inputValue) {
                return true;
            }
        }
    }
    return false;
}

function rebuildOptions() {
    selectedOptions = fieldsets.map((fieldset) => {
        return (pickerType == 'radios') ? Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value : Array.from(fieldset.querySelectorAll('select'), (select) => select.value);
    });

    for(let optionLevel = 1, n = fieldsets.length; optionLevel < n; optionLevel++) {
        const inputs = (pickerType == 'radios') ? fieldsets[optionLevel].querySelectorAll('input') : fieldsets[optionLevel].querySelectorAll('option');
        inputs.forEach(input => {
            input.disabled = (validCombo(input.value,optionLevel)) ? false : true;
            if(pickerType == 'radios'){
                const label = fieldsets[optionLevel].querySelector(`label[for="${input.id}"]`);
                label.style.display = (input.disabled) ? "none" : "";
            } else {
                input.hidden = (validCombo(input.value,optionLevel)) ? false : true;
            }
        });
    }

    for (let optionLevel = 1, fieldsetsLength = fieldsets.length, change = false; optionLevel < fieldsetsLength && !change; optionLevel++) {
        if(pickerType == 'radios'){
            if(fieldsets[optionLevel].querySelector('input:checked').disabled === true) {
                change = (fieldsets[optionLevel].querySelector('input:not(:disabled)').checked = true);
            }
        } else {
            if(fieldsets[optionLevel].querySelector('option:checked').disabled === true) {
                change = (fieldsets[optionLevel].querySelector('option:not(:disabled)').selected = "selected");
            }
        }
        if(change) variantSelects.dispatchEvent(new Event('change', { bubbles: true }));
    }
}
</script>

Κάντε κλικ στο Αποθήκευση για να εφαρμοστούν οι αλλαγές.

Βήμα 4: Δοκιμή των Αλλαγών

Ανανεώστε τη σελίδα προϊόντος σας για να διασφαλίσετε ότι οι μη διαθέσιμες παραλλαγές έχουν κρυφτεί με βάση τις επιλεγμένες επιλογές.
Δοκιμάστε τη λειτουργικότητα επιλέγοντας διαφορετικές επιλογές για να επιβεβαιώσετε ότι εμφανίζονται μόνο διαθέσιμες παραλλαγές.

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

Εναλλακτικές Λύσεις

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

1. Χρησιμοποιήστε Εφαρμογές τρίτων

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

Out-of-Stock Police: Αυτή η εφαρμογή σας επιτρέπει να κρύψετε εντελώς τα μη διαθέσιμα προϊόντα και τις παραλλαγές τους ή απλώς να τα σπρώξει κάτω στις σελίδες συλλογής.
King Product Options: Αυτή η εφαρμογή χρησιμοποιεί λογική συνθηκών για να διαχειρίζεται και να εμφανίζει τις επιλογές προϊόντος βάσει διαθεσιμότητας.

2. Τροποποιήστε τις Ρυθμίσεις Αποθέματος

Εάν θέλετε μια απλή προσέγγιση, μπορείτε να ρυθμίσετε χειροκίνητα τις ρυθμίσεις αποθέματος για κάθε παραλλαγή:

Μεταβείτε στον πίνακα διαχείρισης του Shopify.
Μεταβείτε στα Προϊόντα και επιλέξτε το είδος.
Στην ενότητα Παραλλαγές, καταργήστε την επιλογή για συνέχιση πωλήσεων όταν είναι εκτός αποθέματος και ρυθμίστε την ποσότητα αποθέματος στο μηδέν.

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

Η Σημασία της Εμπειρίας Χρήστη στο E-commerce

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

Συνεργασία με Ειδικούς

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

Συμπέρασμα

Στο ανταγωνιστικό τοπίο του e-commerce, η παρουσίαση των προϊόντων σας με οργανωμένο και φιλικό προς τον χρήστη τρόπο μπορεί να διαφοροποιήσει το κατάστημά σας από τα υπόλοιπα. Το κρύψιμο των μη διαθέσιμων παραλλαγών στο Shopify όχι μόνο βελτιώνει την αισθητική των σελίδων προϊόντων σας, αλλά βελτιώνει σημαντικά την συνολική εμπειρία αγορών για τους πελάτες σας.

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

Εάν θέλετε να βελτιώσετε περαιτέρω το κατάστημα Shopify σας ή χρειάζεστε βοήθεια με προσαρμοσμένες λύσεις, εξετάστε το ενδεχόμενο να επικοινωνήσετε για επαγγελματική βοήθεια. Μαζί, μπορούμε να εξετάσουμε πώς μπορεί η επιχείρησή σας να επωφεληθεί από στρατηγικό σχεδιασμό, ανάπτυξη ιστοσελίδων και εξαιρετικές υπηρεσίες σχεδίασης.

Ενότητα Συχνών Ερωτήσεων

Ε1: Μπορώ να κρύψω τις μη διαθέσιμες παραλλαγές χωρίς προγραμματισμό;

Ναι, μπορείτε να χρησιμοποιήσετε εφαρμογές τρίτων όπως το Out-of-Stock Police ή το King Product Options για να διαχειριστείτε και να κρύψετε τις μη διαθέσιμες παραλλαγές χωρίς να χρειάζεται να προγραμματίσετε.

Ε2: Τι γίνεται αν κατά λάθος κρύψω πάρα πολλές παραλλαγές;

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

Ε3: Θα επηρεάσει η απόκρυψη των μη διαθέσιμων παραλλαγών το SEO μου;

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

Ε4: Πώς μπορώ να βελτιώσω την συνολική εμπειρία χρήστη του καταστήματος Shopify μου;

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

Ε5: Ποιες άλλες δυνατότητες μπορώ να εφαρμόσω για να ενισχύσω τις πωλήσεις;

Εξετάστε το ενδεχόμενο ενσωμάτωσης λειτουργιών όπως κριτικές πελατών, λίστες επιθυμιών ή προτάσεις προϊόντων. Αυτές μπορούν να ενισχύσουν την εμπλοκή του χρήστη και να οδηγήσουν σε υψηλότερους ρυθμούς μετατροπής.

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

Πώς να κρύψετε τις μη διαθέσιμες παραλλαγές στο Shopify.

Πίνακας Περιεχομένων

Εισαγωγή

Κατανόηση της Πρόκλησης των Μη Διαθέσιμων Παραλλαγών

Η Επίδραση στην Εμπειρία Χρήστη

Γιατί Πρέπει να Κρύψετε τις Μη Διαθέσιμες Παραλλαγές