Tips för Brooklyn
I den här artikeln beskrivs några användbara tips och bästa praxis som kan hjälpa dig att konfigurera Brooklyn din webbutik.
Navigeringstips
Lägg till en rullgardinsmeny
Skapa menyer på sidan Navigering för att lägga till rullgardinsmenyer i din huvudmeny. Se Konfigurera rullgardinsmenyer i din webbutik för att lära dig mer.
Huvudmenyn blir en sidopanelsmeny
Om din huvudmeny tar upp mycket utrymme omvandlas menyn till en sidopanelsmeny som öppnas när du klickar på en knapp i headeravsnittet:
Du kan förhindra att huvudmenyn ändras till en sidopanel genom att vidta följande steg:
- Lägg till högst fyra eller fem länkar till din huvudmeny.
- Använd ett smalt typsnitt för dina länkar i huvudmenyn. Du kan ändra typsnittet Accenttext från typografiinställningarna.
- Skapa menyobjekt med ett begränsat antal tecken. Du kan till exempel använda "FAQ" i stället för "Vanliga frågor" eller "Kontakt" i stället för "Kontakta oss".
Bildtips
De bästa typerna av produktbilder för Brooklyn
Eftersom att högupplösta bilder ser förfinade och professionella ut bör dina produktbilder vara minst 1024 x 1024 px. Den bästa formen för dina produktbilder är en kvadrat.
Helst bör dina bilder ha en matt bakgrundsfärg. En matt färg är en solid färg utan skuggning eller markering. Alla dina bilder bör ha samma bakgrundsfärg.
Ställ in bakgrundsfärgen för produkt som transparent från färginställningarna om du vill ta bort ramen från dina produktbilder.
Rekommenderad storlek för bildspel
Båda bildrutorna som visas i Brooklyn demobutik är 1200 x 800 px. Rekommendationen är att alla bildrutor ska vara i samma storlek.
Bildbeskärning för små skärmar
På enheter med små skärmar fyller bildrutorna skärmen från den översta till den understa kanten. Bildrutorna anpassas så att deras höjd är samma höjd som enhetens skärm Bilderna beskärs i vänster och höger kant för att fylla skärmen utan att bli förvrängda.
På stora skärmar är bildrutorna anpassade så att deras bredd passar bredden på webbläsarfönstret. För att fylla fönstret utan att förvränga bilderna beskärs bildrutorna längst ned.
Följande exempel visar skrivbords- och mobilversionen av samma webbbutik:
Ange en bild för bloggposter
Den första bilden i en bloggartikel används som den framhävda bilden för bloggsidan. Du kan lära dig hur du lägger till en bild i en bloggartikel i Skriv blogginlägg.
Produkttips
Lägg till ett reamärke till produkter
Du kan lägga till ett reamärke på en produkt genom att ställa in ett ordinariepris som är högre än det angivna priset. Märket visas över bilden för den produkten på kollektionssidor.
Välj vilka produkter som visas i större format på kollektionssidor
Vissa av dina produkter kommer att synas i stora bilder och vissa kommer att visas i mindre bilder om du väljer att dina kollektionssidor ska visa produkter i ett kollage. Bildens storlek baseras på ordningen för produkterna i deras kollektion. Du kan ändra ordning för produkterna på produktseriesidan på administratörskontot. Klicka på kollektionen som du vill redigera och välj sedan Manuellt i rullgardinsmenyn Sortera under Produkter. Dra och släpp sedan produkterna i den ordning du vill att de ska visas i din webbutik.
För var sjätte produkt har den första produkten och den sjätte produkten stora produktbilder. Till exempel har den första, sjätte, sjunde, tolfte, trettonde och artonde bilden i kollektionen stora bilder:
För att visa ett rutnät av produktbilder som är lika stora ställer du in dina kollektioner att visa produkter i ett rutnät i stället.
Bläddringsanimering när du väljer en variant
På produktsidan, om produktbeskrivningen är tillräckligt kort för att passa på skärmen utan bläddring, ser du en bläddringsanimering när du väljer en variant som har en bild. Om beskrivningen är för lång för att passa på skärmen utan att bläddra ner, ersätts den övre bilden helt enkelt av variantbilden och ingen bläddringsanimering sker.
Om du vill visa bläddringsanimeringen måste du se till att dina produktbeskrivningar är korta.