Hvordan man skjuler utilgængelige varianter i Shopify

Indholdsfortegnelse

Introduktion
Forstå udfordringen med utilgængelige varianter
Hvorfor du bør skjule utilgængelige varianter
Hvordan skjuler jeg utilgængelige varianter i Shopify
Alternative løsninger
Vigtigheden af brugeroplevelse i e-handel
Konklusion
FAQ-sektion

Introduktion

Har du nogensinde oplevet frustrationen ved at navigere i en rodet onlinebutik, kun for at finde utilgængelige produktvarianter tilbageholdt på display? Som onlineforhandler forstår du, at en problemfri indkøbsoplevelse er afgørende for at holde kunderne engagerede og opmuntre til konverteringer. Når kunderne præsenteres for valgmuligheder, de ikke kan vælge - som en størrelse, der ikke eksisterer for en bestemt farve - kan det føre til forvirring og endda opgivelse af deres indkøbskurv.

I e-handelsverdenen betyder hver detalje noget. Effektiv håndtering af produktvarianter er ikke kun et spørgsmål om æstetik; det påvirker direkte brugeroplevelsen og salget. Dette blogindlæg har til formål at guide dig gennem de essentielle trin om hvordan man skjuler utilgængelige varianter i Shopify, så dine kunder kun ser muligheder, de faktisk kan købe. Ved slutningen af dette indlæg vil du ikke kun forstå de tekniske aspekter af implementeringen af denne funktion, men også værdsætte dens betydning for at forbedre brugeroplevelsen.

Vi vil udforske de udfordringer, der opstår ved at vise utilgængelige varianter, de tilgængelige løsninger, og hvordan man implementerer brugerdefineret kode i dit Shopify-tema. Derudover vil vi give indsigt i vigtigheden af brugeroplevelse og hvordan korrekt håndtering af varianter kan bidrage til din brands succes. Lad os dykke ind i detaljerne!

Forstå udfordringen med utilgængelige varianter

Når du administrerer en onlinebutik, især en med flere produkter og muligheder, kan du støde på situationer, hvor visse kombinationer af varianter ikke eksisterer. For eksempel, hvis du sælger T-shirts i forskellige farver og størrelser, kan du kun tilbyde specifikke størrelser for visse farver. Standardadfærden i Shopify er at vise alle mulige varianter - dette inkluderer dem, der er utilgængelige, hvilket kan være frustrerende for kunderne.

Indvirkningen på Brugeroplevelsen

Når kunderne ser muligheder, der er gråtonede eller markeret som utilgængelige, kan det trække fra deres indkøbsoplevelse. Det fører til forvirring, da de måske ikke forstår, hvorfor de ikke kan vælge visse muligheder. En velorganiseret produktside, der kun viser tilgængelige varianter, kan betydeligt forbedre brugerengagementet og reducere afvisningsprocenten.

Ved at skjule utilgængelige varianter skaber du en renere, mere intuitiv indkøbsgrænseflade. Dette forbedrer ikke kun brugeroplevelsen, men afspejler også positivt på dit brands omdømme.

Hvorfor du bør skjule utilgængelige varianter

Forbedret Brugeroplevelse: Kunder værdsætter en ligetil indkøbsoplevelse uden unødvendige distraktioner. Ved kun at vise tilgængelige varianter, strømline du beslutningsprocessen.
Øgede Konverteringsrater: At reducere forvirring på produktsiderne kan føre til højere konverteringsrater. Kunder er mere tilbøjelige til at gennemføre et køb, når de ser muligheder, der matcher deres behov.
Forbedret Brandopfattelse: En velorganiseret onlinebutik afspejler professionalisme og opmærksomhed på detaljer. Dette kan tilskynde til gentagne køb og kundeloyalitet.
Reducerede Kunderhenvendelser: Ved at rydde op i forvirringen omkring utilgængelige varianter kan du mindske antallet af kundeservicehenvendelser vedrørende produktets tilgængelighed.

Hvordan skjuler jeg utilgængelige varianter i Shopify

Selvom Shopify ikke tilbyder en indbygget funktion til at skjule utilgængelige varianter, kan du opnå denne funktionalitet ved at tilføje et lille stykke brugerdefineret kode til dit tema. Nedenfor er trinene til at implementere denne løsning:

Trin-for-trin-guide til implementering af brugerdefineret kode

Trin 1: Adgang til dit Shopify Admin Panel

Log ind på dit Shopify admin panel.
Naviger til Salgs Kanaler > Onlinebutik > Temer.

Trin 2: Tilpas dit Tema

Find det tema, du vil redigere, og klik på Tilpas.
Vælg Produkt skabelon, hvor du vil skjule de utilgængelige varianter.

Trin 3: Tilføj Brugerdefineret Kode

Inden for Produktinformation-sektionen, klik på + Tilføj blok og vælg Brugerdefineret flydende blok.
Kopier og indsæt følgende brugerdefinerede JavaScript-kode i Brugerdefineret flydende 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>

Klik på Gem for at anvende ændringerne.

Trin 4: Test ændringerne

Opdater din produktside for at sikre, at de utilgængelige varianter nu er skjult baseret på de valgte muligheder.
Test funktionaliteten ved at vælge forskellige muligheder for at bekræfte, at kun tilgængelige varianter vises.

Ved at følge disse trin kan du effektivt skjule utilgængelige varianter på din Shopify-butik og give en renere og mere brugervenlig indkøbsoplevelse.

Alternative løsninger

Hvis du foretrækker ikke at håndtere kodning, er der alternative tilgange til at administrere utilgængelige varianter:

1. Brug tredjepartsapps

Flere Shopify-apps kan hjælpe dig med at administrere produktvarianter og skjule udsolgte varer. Nogle populære muligheder inkluderer:

Out-of-Stock Police: Denne app tillader dig at skjule udsolgte produkter og deres varianter helt eller blot skubbe dem længere ned på samlingssiderne.
King Product Options: Denne app anvender betinget logik til at administrere og vise produktmuligheder baseret på tilgængelighed.

2. Ændre lagerindstillinger

Hvis du vil have en ligetil tilgang, kan du manuelt justere lagerindstillingerne for hver variant:

Gå til dit Shopify admin panel.
Naviger til Produkter og vælg varen.
I Varianter-sektionen, fjern fluebenet for at fortsætte med at sælge, når de ikke er på lager, og sæt lagerantallet til nul.

Men vær opmærksom på, at denne metode fjerner produkterne helt fra synlighed, hvilket muligvis ikke er ideelt for alle butiksejere.

Vigtigheden af brugeroplevelse i e-handel

At skabe en optimal brugeroplevelse går ud over bare at skjule utilgængelige varianter. Det omfatter alle aspekter af din onlinebutik, fra design til funktionalitet. En veludformet brugeroplevelse kan føre til højere kundetilfredshed, øget loyalitet og i sidste ende højere salg.

Samarbejde med eksperter

Hos Praella specialiserer vi os i brugeroplevelse og design og tilbyder datadrevne løsninger skræddersyet til dine specifikke behov. Vores team kan hjælpe dig med at skabe uforglemmelige, brandede oplevelser for dine kunder. Uanset om du har brug for webudvikling eller strategisk konsultation, er vi her for at guide dig på din rejse mod eksponentiel vækst. Udforsk vores tjenester på Praella Solutions.

Konklusion

I det konkurrenceprægede landskab af e-handel kan præsentationen af dine produkter på en organiseret og brugervenlig måde adskille din butik fra de andre. At skjule utilgængelige varianter i Shopify forbedrer ikke kun den æstetiske appel af dine produktsider, men forbedrer også den samlede indkøbsoplevelse for dine kunder betydeligt.

Ved at følge de trin, der er beskrevet i dette blogindlæg, kan du sikre, at dine kunder kun ser levedygtige muligheder, hvilket igen kan føre til øgede konverteringer og kundetilfredshed. Husk, at hver detalje tæller i verden af online detailhandel.

Hvis du ønsker at forbedre din Shopify-butik yderligere eller har brug for hjælp til brugerdefinerede løsninger, så overvej at række ud for professionel hjælp. Sammen kan vi udforske, hvordan din virksomhed kan drage fordel af strategisk planlægning, webudvikling og exceptionelle designløsninger.

FAQ-sektion

Q1: Kan jeg skjule utilgængelige varianter uden kodning?

Ja, du kan bruge tredjepartsapps som Out-of-Stock Police eller King Product Options til at administrere og skjule utilgængelige varianter uden at skulle kode.

Q2: Hvad hvis jeg ved et uheld skjuler for mange varianter?

Hvis du bemærker, at for mange varianter er skjult, kan du nemt fortryde ændringerne ved at fjerne den brugerdefinerede kode eller justere indstillingerne i din lagerstyring.

Q3: Vil skjule utilgængelige varianter påvirke min SEO?

At skjule utilgængelige varianter bør ikke påvirke din SEO negativt, hvis det gøres korrekt. Sørg for, at dit butiks indhold forbliver relevant og tilgængeligt for søgemaskiner.

Q4: Hvordan kan jeg forbedre den overordnede brugeroplevelse af min Shopify-butik?

At forbedre brugeroplevelsen involverer optimering af dit websteds design, sikring af hurtige indlæsningstider, strømlining af navigation og at give klar produktinformation. Overvej at konsultere professionelle som Praella for at forbedre disse aspekter.

Q5: Hvilke andre funktioner kan jeg implementere for at øge salget?

Overvej at inkorporere funktioner som kundeanmeldelser, ønskelister eller produktanbefalinger. Disse kan forbedre brugerengagementet og drive højere konverteringsrater.

At inkorporere disse strategier vil ikke kun forbedre effektiviteten af din Shopify-butik, men også bidrage til en mere behagelig indkøbsoplevelse for dine kunder.

Hvordan man skjuler utilgængelige varianter i Shopify.