Hvordan skjule utilgjengelige varianter i Shopify

Innhold

Introduksjon
Forståelse av utfordringen med utilgjengelige varianter
Hvorfor du bør skjule utilgjengelige varianter
Alternative løsninger
Viktigheten av brukeropplevelse i netthandel
Konklusjon
FAQ-seksjon

Introduksjon

Har du noen gang opplevd frustrasjonen ved å navigere i en rotete nettbutikk, bare for å finne utilgjengelige produktvarianter som er synlige? Som nettforhandler forstår du at en sømløs handleopplevelse er avgjørende for å holde kundene engasjerte og oppmuntre til konversjoner. Når kunder blir presentert for alternativer de ikke kan velge—som en størrelse som ikke eksisterer for en bestemt farge—kan det føre til forvirring og til og med at de forlater handlekurven sin.

I netthandelsverdenen betyr hver detalj noe. Å håndtere produktvarianter effektivt er ikke bare et spørsmål om estetikk; det påvirker direkte brukeropplevelsen og salget. Dette blogginnlegget har som mål å guide deg gjennom de essensielle stegene om hvordan skjule utilgjengelige varianter i Shopify, og sørge for at kundene dine bare ser alternativer de kan faktisk kjøpe. Ved slutten av dette innlegget vil du ikke bare forstå de tekniske aspektene ved å implementere denne funksjonen, men også sette pris på dens betydning for å forbedre brukeropplevelsen.

Vi vil utforske utfordringene som visning av utilgjengelige varianter medfører, de tilgjengelige løsningene, og hvordan du implementerer tilpasset kode i Shopify-temaet ditt. I tillegg vil vi gi innsikt i viktigheten av brukeropplevelse og hvordan riktig håndtering av varianter kan bidra til suksessen til merkevaren din. La oss dykke inn i detaljene!

Forståelse av utfordringen med utilgjengelige varianter

Når du håndterer en nettbutikk, spesielt en med mange produkter og alternativer, kan du komme borti situasjoner der visse kombinasjoner av varianter ikke eksisterer. For eksempel, hvis du selger T-skjorter i forskjellige farger og størrelser, kan det hende at du bare tilbyr spesifikke størrelser for visse farger. Den standard oppførselen til Shopify er å vise alle mulige varianter—dette inkluderer de som er utilgjengelige, noe som kan være frustrerende for kundene.

Effekten på brukeropplevelsen

Når kundene ser alternativer som er utgrået eller merket som utilgjengelige, kan det trekke fra handleopplevelsen deres. Det fører til forvirring, ettersom de kanskje ikke forstår hvorfor de ikke kan velge visse alternativer. En godt organisert produktside som bare viser tilgjengelige varianter kan betydelig forbedre brukerengasjementet og redusere fluktfrekvensen.

Ved å skjule utilgjengelige varianter, skaper du et renere, mer intuitivt handlegrensesnitt. Dette forbedrer ikke bare brukeropplevelsen, men gjenspeiler også positivt på merkevarens omdømme.

Hvorfor du bør skjule utilgjengelige varianter

Forbedret brukeropplevelse: Kunder setter pris på en enkel handleopplevelse uten unødvendige distraksjoner. Ved å bare vise tilgjengelige varianter, strømlinjeformer du beslutningsprosessen.
Økte konverteringsrater: Å redusere forvirring på produktsider kan føre til høyere konverteringsrater. Kunder er mer tilbøyelige til å fullføre et kjøp når de ser alternativer som oppfyller behovene deres.
Forbedret merkeoppfatning: En godt organisert nettbutikk reflekterer profesjonalitet og oppmerksomhet på detaljer. Dette kan oppmuntre til gjentatt handel og kundelojalitet.
Redusert kundehenvendelser: Ved å rydde opp i forvirringen rundt utilgjengelige varianter, kan du redusere antall henvendelser til kundeservice angående produkt tilgjengelighet.

Selv om Shopify ikke tilbyr en innebygd funksjon for å skjule utilgjengelige varianter, kan du oppnå denne funksjonaliteten ved å legge til en liten kodebit i temaet ditt. Nedenfor er stegene for å implementere denne løsningen:

Trinn-for-trinn guide for implementering av tilpasset kode

Trinn 1: Få tilgang til Shopify admin-panelet ditt

Logg inn på Shopify admin-panelet ditt.
Gå til Salgs kanaler > Nettbutikk > Temae.

Trinn 2: Tilpass temaet ditt

Finn temaet du vil redigere og klikk på Tilpass.
Velg Produktmalen hvor du vil skjule de utilgjengelige variantene.

Trinn 3: Legg til tilpasset kode

Innenfor Produktinformasjon seksjonen klikker du på + Legg til blokk og velger Tilpasset væske blokk.
Kopier og lim inn følgende tilpassede JavaScript-kode i Tilpasset væske feltet:

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

Klikk Lagre for å bruke endringene.

Trinn 4: Test endringene

Oppdater produktsiden din for å sikre at de utilgjengelige variantene nå er skjult basert på de valgte alternativene.
Test funksjonaliteten ved å velge forskjellige alternativer for å bekrefte at bare tilgjengelige varianter vises.

Ved å følge disse stegene kan du effektivt skjule utilgjengelige varianter på Shopify-butikken din, og gi en renere og mer brukervennlig handleopplevelse.

Alternative løsninger

Hvis du foretrekker å ikke håndtere koding, finnes det alternative metoder for å håndtere utilgjengelige varianter:

1. Bruk tredjepartsapper

Flere Shopify-apper kan hjelpe deg med å håndtere produktvarianter og skjule utsolgte varer. Noen populære alternativer inkluderer:

Out-of-Stock Police: Denne appen lar deg helt skjule utsolgte produkter og deres varianter, eller simpelthen skyve dem ned på kolleksjonssidene.
King Product Options: Denne appen benytter betinget logikk for å håndtere og vise produktalternativer basert på tilgjengelighet.

2. Endre lagerinnstillinger

Hvis du ønsker en enkel tilnærming, kan du manuelt justere lagerinnstillingene for hver variant:

Gå til Shopify admin-panelet ditt.
Naviger til Produkter og velg varen.
I Varianter seksjonen, fjern merket for alternativet for å fortsette å selge når utsolgt, og sett lagerantallet til null.

Vær imidlertid oppmerksom på at denne metoden fjerner produktene fullstendig fra synlighet, noe som kanskje ikke er ideelt for alle butikk-eiere.

Viktigheten av brukeropplevelse i netthandel

Å skape en optimal brukeropplevelse går utover bare å skjule utilgjengelige varianter. Det omfatter alle aspekter av nettbutikken din, fra design til funksjonalitet. En godt utformet brukeropplevelse kan føre til høyere kundetilfredshet, økt lojalitet, og til slutt, større salg.

Samarbeide med eksperter

Hos Praella spesialiserer vi oss på brukeropplevelse og design, og tilbyr datadrevne løsninger skreddersydd for dine spesifikke behov. Teamet vårt kan hjelpe deg med å skape uforglemmelige, merkevareopplevelser for kundene dine. Enten du trenger webutvikling eller strategisk konsultasjon, er vi her for å veilede deg på din vei til eksponentiell vekst. Utforsk tjenestene våre på Praella Solutions.

Konklusjon

I det konkurransedyktige landskapet av netthandel, kan presentasjonen av produktene dine på en organisert og brukervennlig måte skille butikken din fra resten. Å skjule utilgjengelige varianter i Shopify forbedrer ikke bare den estetiske appellen til produktsidene dine, men forbedrer også den generelle handleopplevelsen for kundene dine betydelig.

Ved å følge stegene som er beskrevet i dette blogginnlegget, kan du sikre at kundene dine kun ser levedyktige alternativer, noe som igjen kan føre til økte konverteringer og kundetilfredshet. Husk, hver detalj teller i netthandelens verden.

Hvis du ønsker å ytterligere forbedre Shopify-butikken din eller trenger hjelp med tilpassede løsninger, vurder å ta kontakt for profesjonell hjelp. Sammen kan vi utforske hvordan virksomheten din kan dra nytte av strategisk planlegging, webutvikling, og eksepsjonelle designtjenester.

FAQ-seksjon

Q1: Kan jeg skjule utilgjengelige varianter uten koding?

Ja, du kan bruke tredjepartsapper som Out-of-Stock Police eller King Product Options for å håndtere og skjule utilgjengelige varianter uten å måtte kode.

Q2: Hva hvis jeg utilsiktet skjuler for mange varianter?

Hvis du merker at for mange varianter er skjult, kan du enkelt tilbakestille endringene ved å fjerne den tilpassede koden eller justere innstillingene i lagerstyringen din.

Q3: Vil skjuling av utilgjengelige varianter påvirke SEO-en min?

Å skjule utilgjengelige varianter bør ikke negativt påvirke SEO-en din hvis det gjøres korrekt. Sørg for at innholdet på butikken din forblir relevant og tilgjengelig for søkemotorer.

Q4: Hvordan kan jeg forbedre den totale brukeropplevelsen på Shopify-butikken min?

Å forbedre brukeropplevelsen innebærer å optimalisere designet på nettstedet ditt, sikre raske lastetider, strømlinjeforme navigasjonen, og gi klar produktinformasjon. Vurder å konsultere med fagfolk som Praella for å forbedre disse aspektene.

Q5: Hvilke andre funksjoner kan jeg implementere for å øke salget?

Vurder å inkludere funksjoner som kundeanmeldelser, ønskelister, eller produktanbefalinger. Disse kan forbedre brukerengasjementet og drive høyere konverteringsrater.

Å implementere disse strategiene vil ikke bare forbedre effektiviteten til Shopify-butikken din, men også bidra til en mer gledelig handleopplevelse for kundene dine.

Hvordan skjule utilgjengelige varianter i Shopify.