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.

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 i en webbutik. Markören vilar över länken

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:

En sidopanelsmeny till vänster i en webbutik. Huvudmenylänkar såsom

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.

  • Ange din bakgrundsfärg för produkt som transparent från färginställningarna om du vill ta bort ramen från dina produktbilder:

Två produktförteckningar visas med vit bakgrund. Även bakgrunden till webbutiken är vit, och det finns inga ramar runt produktbilderna.

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:

Datorversionen av bildspelet visar en bild som är bredare än vad den är hög. Mobilversionen visar samma bild i samma höjd, men beskuren för att bilden ska passa den smala skärmen.

Visa en edge-to-edge-bild för en produktsamling

Din kollektion måste ha en framhävd bild för att visa en edge-to-edge-bild.

Du kan se hur en edge-to-edge-bild ser ut i Brooklyn-demobutiken. Kollektionsbilden som visas högst upp är 1405 x 800 px.

Datorversionen av bildspelet visar en bild som är bredare än vad den är hög.

Mobilversionen visar samma bild i samma höjd, men beskuren för att passa den smala skärmen.

Ange en bild för blogginlägg

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.

Kollektionssidan på Shopify-administratörskontot.

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:

En produktseriesida som visar produkter i ett kollage. Nummer visas över produkterna för att illustrera hur produktordningen relaterar till bildstorleken.

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.

Är du redo att börja sälja med Shopify?

Prova gratis