Hur man döljer otillgängliga varianter i Shopify.

Innehållsförteckning

1. Introduktion
2. Förstå utmaningen med otillgängliga varianter
3. Varför du bör dölja otillgängliga varianter
5. Alternativa lösningar
6. Vikten av användarupplevelse i e-handel
7. Slutsats
8. FAQ-sektion

Introduktion

Har du någonsin upplevt frustrationen av att navigera i en rörig nätbutik, bara för att hitta otillgängliga produktvarianter kvar på display? Som onlineåterförsäljare förstår du att en sömlös shoppingupplevelse är avgörande för att hålla kunder engagerade och uppmuntra konverteringar. När kunder presenteras med alternativ de inte kan välja—som en storlek som inte finns för en viss färg—kan det leda till förvirring och till och med övergivande av deras kundvagn.

I e-handelsvärlden spelar varje detalj roll. Att hantera produktvarianter effektivt handlar inte bara om estetik; det påverkar direkt användarupplevelsen och försäljningen. Detta blogginlägg syftar till att vägleda dig genom de väsentliga stegen för hur man döljer otillgängliga varianter i Shopify, vilket säkerställer att dina kunder endast ser alternativ de faktiskt kan köpa. I slutet av detta inlägg kommer du inte bara att förstå de tekniska aspekterna av att implementera denna funktion, utan även uppskatta dess betydelse för att förbättra användarupplevelsen.

Vi kommer att utforska de utmaningar som ställs av att visa otillgängliga varianter, de lösningar som finns, och hur man implementerar anpassad kod i ditt Shopify-tema. Dessutom kommer vi att ge insikter om vikten av användarupplevelse och hur korrekt hantering av varianter kan bidra till ditt varumärkes framgång. Låt oss dyka ner i detaljerna!

Förstå utmaningen med otillgängliga varianter

När du hanterar en nätbutik, särskilt en med många produkter och alternativ, kan du stöta på situationer där vissa kombinationer av varianter inte finns. Till exempel, om du säljer T-shirts i olika färger och storlekar, kanske du bara erbjuder specifika storlekar för vissa färger. Den standardbeteende som Shopify har är att visa alla möjliga varianter—detta inkluderar de som är otillgängliga, vilket kan vara frustrerande för kunder.

Effekten på användarupplevelsen

När kunder ser alternativ som är gråtonade eller markerade som otillgängliga, kan det dra ner deras shoppingupplevelse. Det leder till förvirring, eftersom de kanske inte förstår varför de inte kan välja vissa alternativ. En välorganiserad produktsida som bara visar tillgängliga varianter kan avsevärt förbättra användarengagemang och minska avvisningsfrekvensen.

Genom att dölja otillgängliga varianter skapar du ett renare, mer intuitivt shoppinggränssnitt. Detta förbättrar inte bara användarupplevelsen utan avspeglar också positivt på ditt varumärkes rykte.

Varför du bör dölja otillgängliga varianter

1. Förbättrad användarupplevelse: Kunder uppskattar en enkel shoppingupplevelse utan onödiga distraktioner. Genom att visa endast tillgängliga varianter strömlinjeformar du beslutsprocessen.

2. Ökade konverteringsnivåer: Att minska förvirringen på produktsidorna kan leda till högre konverteringsnivåer. Kunder är mer benägna att avsluta ett köp när de ser alternativ som uppfyller deras behov.

3. Förbättrad varumärkesuppfattning: En välorganiserad nätbutik avspeglar professionalism och uppmärksamhet på detaljer. Detta kan uppmuntra till återkommande affärer och kundlojalitet.

4. Minskade kundförfrågningar: Genom att rensa upp förvirringen kring otillgängliga varianter kan du minska antalet kundtjänstförfrågningar angående produkt tillgänglighet.

Även om Shopify inte tillhandahåller en inbyggd funktion för att dölja otillgängliga varianter, kan du uppnå denna funktionalitet genom att lägga till en liten bit anpassad kod i ditt tema. Nedan följer stegen för att genomföra denna lösning:

Steg-för-steg-guide för att implementera anpassad kod

Steg 1: Åtkomst till din Shopify-administrationspanel

1. Logga in på din Shopify-administrationspanel.
2. Navigera till Försäljningskanaler > Nätbutik > Teman.

Steg 2: Anpassa ditt tema

1. Hitta det tema du vill redigera och klicka på Anpassa.
2. Välj Produktmall där du vill dölja de otillgängliga varianterna.

Steg 3: Lägg till anpassad kod

1. Inom avsnittet Produktinformation, klicka på + Lägg till block och välj Custom liquid block.
2. Kopiera och klistra in följande anpassade JavaScript-kod i Custom liquid-fältet:

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

3. Klicka på Spara för att tillämpa ändringarna.

Steg 4: Testa ändringarna

1. Uppdatera din produktsida för att säkerställa att de otillgängliga varianterna nu är dolda baserat på de valda alternativen.
2. Testa funktionaliteten genom att välja olika alternativ för att bekräfta att endast tillgängliga varianter visas.

Genom att följa dessa steg kan du effektivt dölja otillgängliga varianter i din Shopify-butik och erbjuda en renare och mer användarvänlig shoppingupplevelse.

Alternativa lösningar

Om du föredrar att inte hantera kodning finns det alternativa metoder för att hantera otillgängliga varianter:

1. Använd tredjepartsappar

Flera Shopify-appar kan hjälpa dig att hantera produktvarianter och dölja utsålda artiklar. Några populära alternativ inkluderar:

• Out-of-Stock Police: Denna app gör det möjligt för dig att helt dölja utsålda produkter och deras varianter eller helt enkelt trycka ner dem på kategorisidorna.
• King Product Options: Denna app utnyttjar villkorlig logik för att hantera och visa produktalternativ baserat på tillgänglighet.

2. Ändra lagerinställningar

Om du vill ha en enkel metod kan du manuellt justera lagerinställningarna för varje variant:

1. Gå till din Shopify-administrationspanel.
2. Navigera till Produkter och välj artikeln.
3. I avsnittet Varianter, avmarkera alternativet för att fortsätta sälja när det är slut i lager, och sätt lagerantalet till noll.

Men kom ihåg att denna metod helt tar bort produkterna från synlighet, vilket kanske inte är idealiskt för alla butiksägare.

Vikten av användarupplevelse i e-handel

Att skapa en optimal användarupplevelse handlar om mer än bara att dölja otillgängliga varianter. Det omfattar alla aspekter av din nätbutik, från design till funktionalitet. En väl utformad användarupplevelse kan leda till högre kundnöjdhet, ökad lojalitet och ytterst större försäljning.

Samarbeta med experter

Vi på Praella specialiserar oss på användarupplevelse och design, och erbjuder datadrivna lösningar som är skräddarsydda för dina specifika behov. Vårt team kan hjälpa dig att skapa oförglömliga, varumärkesanpassade upplevelser för dina kunder. Oavsett om du behöver webbutveckling eller strategisk rådgivning, är vi här för att vägleda dig på din resa mot exponentiell tillväxt. Utforska våra tjänster på Praella Solutions.

Slutsats

I den konkurrensutsatta världen av e-handel kan en organiserad och användarvänlig presentation av dina produkter särskilja din butik från mängden. Att dölja otillgängliga varianter i Shopify förbättrar inte bara den estetiska översikten av dina produktsidor utan förbättrar också den övergripande shoppingupplevelsen för dina kunder.

Genom att följa stegen som anges i detta blogginlägg kan du säkerställa att dina kunder endast ser potentiella alternativ, vilket i sin tur kan leda till ökade konverteringar och kundnöjdhet. Kom ihåg, varje detalj räknas i världen av onlineförsäljning.

Om du vill ytterligare förbättra din Shopify-butik eller behöver hjälp med anpassade lösningar, överväg att kontakta oss för professionell hjälp. Tillsammans kan vi utforska hur ditt företag kan dra nytta av strategisk planering, webbutveckling och exceptionella designtjänster.

FAQ-sektion

Q1: Kan jag dölja otillgängliga varianter utan att koda?

Ja, du kan använda tredjepartsappar som Out-of-Stock Police eller King Product Options för att hantera och dölja otillgängliga varianter utan att behöva koda.

Q2: Vad händer om jag av misstag döljer för många varianter?

Om du märker att för många varianter är dolda kan du enkelt återgå till ändringarna genom att ta bort den anpassade koden eller justera inställningarna i din lagerhantering.

Q3: Kommer dölja otillgängliga varianter att påverka min SEO?

Att dölja otillgängliga varianter bör inte påverka din SEO negativt om det görs korrekt. Säkerställ att ditt butiksinnehåll förblir relevant och tillgängligt för sökmotorer.

Q4: Hur kan jag förbättra den övergripande användarupplevelsen i min Shopify-butik?

Att förbättra användarupplevelsen handlar om att optimera din sidas design, säkerställa snabba laddningstider, strömlinjeforma navigeringen och ge tydlig produktinformation. Överväg att konsultera med professionella som Praella för att förbättra dessa aspekter.

Q5: Vilka andra funktioner kan jag implementera för att öka försäljningen?

Överväg att införa funktioner som kundrecensioner, önskelistor eller produktrekommendationer. Dessa kan förbättra användarengagemanget och driva högre konverteringsnivåer.

Genom att införliva dessa strategier kommer du inte bara att förbättra effektiviteten i din Shopify-butik utan också bidra till en mer njutbar shoppingupplevelse för dina kunder.