Kuinka piilottaa käytettävissä olevat variantit Shopifyssä

Sisällysluettelo

Johdanto
Ymmärtäminen saatavilla olevien varianttien haasteesta
Miksi sinun tulisi piilottaa saatavilla olevat variantit
Miten piilotetaan saatavilla olevat variantit Shopifyssä
Vaihtoehtoiset ratkaisut
Käyttäjäkokemuksen tärkeys verkkokaupassa
Yhteenveto
UKK-osio

Johdanto

Oletko koskaan kokenut turhautumista navigoidessasi sekavassa verkkokaupassa, vain löytääksesi saatavilla olevat tuotevariantit esillä? Verkkokauppiaana ymmärrät, että sujuva ostokokemus on ratkaisevan tärkeää asiakkaiden sitouttamiseksi ja konversioiden edistämiseksi. Kun asiakkaille esitetään vaihtoehtoja, joita he eivät voi valita – kuten koko, jota ei ole tietyn värin kohdalla – se voi johtaa sekaannukseen ja jopa ostoskorin hylkäämiseen.

Verkkokaupan maailmassa jokaisella yksityiskohdalla on merkitystä. Tuotevarianttien tehokas hallinta ei ole vain esteettinen kysymys; se vaikuttaa suoraan käyttäjäkokemukseen ja myyntiin. Tämä blogikirjoitus pyrkii opastamaan sinua olennaisten vaiheiden kautta kuinka piilottaa saatavilla olevat variantit Shopifyssä, varmistaen, että asiakkaasi näkevät vain ne vaihtoehdot, joita he voivat todella ostaa. Tämän kirjoituksen lopussa ymmärrät paitsi tämän ominaisuuden toteuttamisen tekniset näkökohdat myös sen merkityksen käyttäjäkokemuksen parantamisessa.

Tutkimme saatavilla olevien varianttien esittämiseen liittyviä haasteita, tarjolla olevia ratkaisuja ja kuinka lisätä mukautettua koodia Shopify-teemasi. Lisäksi tarjoamme näkemyksiä käyttäjäkokemuksen tärkeydestä ja siitä, kuinka oikea hallinta variantteihin voi edistää brändisi menestystä. Sukelletaan yksityiskohtiin!

Ymmärtäminen saatavilla olevien varianttien haasteesta

Kun hallitset verkkokauppaa, erityisesti sellaista, jossa on useita tuotteita ja vaihtoehtoja, saatat kohdata tilanteita, joissa tietyt varianttien yhdistelmät eivät ole olemassa. Esimerkiksi, jos myyt T-paitoja eri väreissä ja kooissa, saatat tarjota vain tiettyjä kokoja tietyn värin kohdalla. Shopifyn oletuskäyttö on näyttää kaikki mahdolliset variantit – mukaan lukien ne, jotka eivät ole saatavilla, mikä voi olla asiakkaalle turhauttavaa.

Vaikutus käyttäjäkokemukseen

Kun asiakkaat näkevät harmaana tai saatavilla ei olevina vaihtoehtoina, se voi heikentää heidän ostokokemustaan. Se johtaa sekaannukseen, koska he eivät ehkä ymmärrä, miksi he eivät voi valita tiettyjä vaihtoehtoja. Hyvin organisoitu tuotesivu, joka näyttää vain saatavilla olevat variantit, voi merkittävästi parantaa käyttäjien sitoutumista ja vähentää poistumisprosenttia.

Piilottamalla saatavilla olevat variantit luot puhtaamman, intuitiivisemman ostosliittymän. Tämä ei ainoastaan paranna käyttäjäkokemusta, vaan heijastaa myös myönteisesti brändisi mainetta.

Miksi sinun tulisi piilottaa saatavilla olevat variantit

Parannettu käyttäjäkokemus: Asiakkaat arvostavat suoraviivaista ostokokemusta ilman tarpeettomia häiriötekijöitä. Näyttämällä vain saatavilla olevia variantteja teet päätöksenteosta sujuvampaa.
Korkeammat konversioprosentit: Tuotesivujen sekaannuksen vähentäminen voi johtaa korkeampiin konversioprosentteihin. Asiakkaat ovat todennäköisemmin valmiita tekemään ostoksen, kun he näkevät vaihtoehtoja, jotka vastaavat heidän tarpeitaan.
Parannettu brändin käsitys: Hyvin organisoitu verkkokauppa heijastaa ammattimaisuutta ja huomiota yksityiskohtiin. Tämä voi edistää uusinta liiketoimintaa ja asiakasuskollisuutta.
Vähentynyt asiakaspalveluun liittyvä kysyntä: Selkeyttämällä sekaannusta saatavilla olevien varianttien ympärillä voit vähentää asiakaspalvelukyselyjen määrää, jotka liittyvät tuotteen saatavuuteen.

Miten piilotetaan saatavilla olevat variantit Shopifyssä

Vaikka Shopify ei tarjoa sisäänrakennettua ominaisuutta saatavilla olevien varianttien piilottamiseen, voit saavuttaa tämän toiminnallisuuden lisäämällä pienen mukautetun koodinpätkän teemaasi. Alla ovat vaiheet tämän ratkaisun toteuttamiseksi:

Vaiheittainen opas mukautetun koodin toteuttamiseen

Vaihe 1: Pääsy Shopify-hallintapaneeliisi

Kirjaudu sisään Shopify-hallintapaneeliisi.
Siirry kohtaan Myyntikanavat > Verkkokauppa > Teemat.

Vaihe 2: Mukauta teemaa

Löydä teema, jota haluat muokata, ja napsauta Mukauta.
Valitse Tuotemalli, jossa haluat piilottaa saatavilla olevat variantit.

Vaihe 3: Lisää mukautettua koodia

Tuotetietojen osiossa napsauta + Lisää lohko ja valitse Mukautettu neste-lohko.
Kopioi ja liitä seuraava mukautettu JavaScript-koodi Mukautettu neste -kenttään:

<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>

Napsauta Tallenna muutosten tallentamiseksi.

Vaihe 4: Testaa muutokset

Virtauta tuotetuksesi sivu varmistaaksesi, että saatavilla olevat variantit on nyt piilotettu valittujen vaihtoehtojen perusteella.
Testaa toiminnallisuus valitsemalla erilaisia vaihtoehtoja varmistaaksesi, että vain saatavilla olevat variantit näkyvät.

Seuraamalla näitä vaiheita voit tehokkaasti piilottaa saatavilla olevat variantit Shopify-kaupassasi, tarjoten puhtaamman ja käyttäjäystävällisemmän ostokokemuksen.

Vaihtoehtoiset ratkaisut

Jos et halua käsitellä koodaamista, on olemassa vaihtoehtoisia lähestymistapoja saatavilla olevien varianttien hallintaan:

1. Käytä kolmannen osapuolen sovelluksia

Useat Shopify-sovellukset voivat auttaa sinua hallitsemaan tuotevariantteja ja piilottamaan loppuunkäytyjä tuotteita. Joitain suosittuja vaihtoehtoja ovat:

Out-of-Stock Police: Tämä sovellus mahdollistaa loppuunkäytyjen tuotteiden ja niiden varianttien täydellisen piilottamisen tai niiden alaspäin työntämisen kokoelmasivuilla.
King Product Options: Tämä sovellus hyödyntää ehdollista logiikkaa tuotteiden vaihtoehtojen hallitsemiseksi ja esittämiseksi saatavuuden perusteella.

2. Muokkaa varaston asetuksia

Jos haluat suoraviivaisen lähestymistavan, voit säätää varaston asetuksia manuaalisesti kullekin variantille:

Siirry Shopify-hallintapaneeliisi.
Siirry kohtaan Tuotteet ja valitse tuote.
Variantit-osiossa poista valinta vaihtoehdosta jatka myyntiä loppuunkäydyissä tuotteissa, ja aseta varastomääräksi nolla.

Muista kuitenkin, että tämä menetelmä poistaa tuotteet kokonaan näkyvistä, mikä ei ehkä ole kaikille kauppiaille ihanteellinen.

Käyttäjäkokemuksen tärkeys verkkokaupassa

Optimaalisen käyttäjäkokemuksen luominen ylittää saatavilla olevien varianttien piilottamisen. Se kattaa kaikki verkkokauppasi osa-alueet, suunnittelusta toiminnallisuuteen. Hyvin suunniteltu käyttäjäkokemus voi johtaa korkeampaan asiakastyytyväisyyteen, lisääntyneeseen uskollisuuteen ja lopulta suurempiin myynteihin.

Yhteistyö asiantuntijoiden kanssa

Praella:ssa erikoistumme käyttäjäkokemukseen ja suunnitteluun, tarjoten dataan perustuvia ratkaisuja, jotka on räätälöity erityisiin tarpeisiisi. Tiimimme voi auttaa sinua luomaan unohtumattomia, brändättyjä kokemuksia asiakkaille. Tarvitsetko verkkokehitystä tai strategista konsultointia, olemme täällä opastamassa sinua matkallasi kohti eksponentiaalista kasvua. Tutustu palveluihimme osoitteessa Praella Solutions.

Yhteenveto

Verkkokaupan kilpailullisessa ympäristössä tuotteiden esittäminen järjestäytyneellä ja käyttäjäystävällisellä tavalla voi erottaa kauppasi muista. Saatavilla olevien varianttien piilottaminen Shopifyssä ei ainoastaan paranna tuotesivujesi esteettistä vetovoimaa, vaan se myös parantaa merkittävästi asiakkaidesi ostokokemusta.

Seuraamalla tässä blogikirjoituksessa esitettyjä vaiheita voit varmistaa, että asiakkaasi näkevät vain todennettavat vaihtoehdot, mikä voi puolestaan johtaa lisääntyneisiin konversioihin ja asiakastyytyväisyyteen. Muista, että jokaisella yksityiskohdalla on merkitystä verkkokaupan maailmassa.

Jos haluat edelleen parantaa Shopify-kauppaasi tai tarvitset apua mukautettujen ratkaisujen kanssa, käy rohkeasti asiantunteville avustajille. Yhdessä voimme tutkia, kuinka liiketoimintasi voi hyötyä strategisesta suunnittelusta, verkkokehityksestä ja erinomaisista suunnittelupalveluista.

UKK-osio

K1: Voinko piilottaa saatavilla olevat variantit ilman koodausta?

Kyllä, voit käyttää kolmannen osapuolen sovelluksia, kuten Out-of-Stock Police tai King Product Options, hallitaksesi ja piilottaaksesi saatavilla olevia variantteja ilman koodaustarvetta.

K2: Entä jos vahingossa piilotan liian monta varianttia?

Jos huomaat, että liian monta varianttia on piilotettu, voit helposti palauttaa muutokset poistamalla mukautetun koodin tai säätämällä varastonhallinnan asetuksia.

K3: Vaikuttaako saatavilla olevien varianttien piilottaminen SEO:oni?

Saatavilla olevien varianttien piilottamisen ei pitäisi negatiivisesti vaikuttaa SEO:siin, jos se tehdään oikein. Varmista, että kauppasi sisältö pysyy relevanssina ja saavutettavana hakukoneille.

K4: Kuinka voin parantaa verkkokauppani yleistä käyttäjäkokemusta?

Käyttäjäkokemuksen parantaminen edellyttää verkkosivustosi suunnittelun optimointia, nopeiden latausaikojen varmistamista, navigaation sujuvoittamista ja selkeiden tuote-informaation tarjoamista. Harkitse konsultointia asiantuntijoiden, kuten Praella:n, kanssa näiden asioiden parantamiseksi.

K5: Mitä muita ominaisuuksia voin toteuttaa myynnin lisäämiseksi?

Harkitse ominaisuuksien lisäämistä, kuten asiakasarvosteluja, toivelistoja tai tuotesuosituksia. Nämä voivat parantaa käyttäjäengagementia ja johtaa korkeampiin konversioprosentteihin.

Nämä strategiat parantavat paitsi Shopify-kauppasi tehokkuutta, myös tekevät ostokokemuksesta miellyttävämmän asiakkaille.

Kuinka piilottaa käytettävissä olevat variantit Shopifyssä.