Bildinställningar

Optimera butikens bilder med rätt inställningar. Lär dig använda Slider, hero-bilder, kategoribilder, textblock och kolumner och få tips för mobilanpassning och alt-beskrivningar.

Med rätt inställningar kan bilderna i din butik både inspirera och leda kunderna rätt. Här går vi igenom hur du använder olika block – som Slider, Bilder med text, Hero-bild, Kategoribild och Kolumner – samt tips för mobilanpassning, alt-beskrivningar och tillgänglighet.

Slider

Slider-blocket är ett populärt alternativ för att lyfta fram kampanjer, kategorier eller inspirerande bilder i butiken. Det kan användas både som hero-bild och i andra sammanhang.

Med Slider-blocket kan du bland annat:

• Styra hur många bilder som ska visas, med olika versioner för desktop och mobil*
• Länka upp till 8 bilder för att leda kunder vidare till exempelvis kategorier eller kampanjer
• Välja om bilderna ska bytas automatiskt, samt ställa in visningstid
• Anpassa sliderknapparnas färg (ljusa eller mörka)
• Visa bilder i fullbredd (rekommenderas för skarpa bilder)

Desktopdimensioner kan ibland se konstiga ut i mobilen. Därför är det bra att anpassa bilderna särskilt för mobila användare.

Rekommenderade dimensioner för hero-bilder

• Desktop: 2880 x 1120 pixlar
• Mobil: 1000 x 1450 pixlar

Bilden till vänster används till desktop och bilden till höger är den som syns om man besöker butiken via en mobiltelefon.

Om ni väljer att ha olika bilddimensioner, se till att de matchar varandra. Annars kan ni råka koppla fel bild till fel länk!

Fler tips om användning av hero-bild

Bilder med text-blocken

Det finns fyra olika varianter av ”Bilder med text”-block. Dessa fungerar också bra som hero-bilder och ger möjlighet att kombinera bild och text.

Med dessa block kan du bland annat:

• Välja om blocket ska vara fullbredd eller inte
• Visa eller dölja mellanrum mellan bilderna
• Ställa in höjd på blocket i pixlar
• Anpassa textinställningar för att lägga text direkt på bilderna
• Länka bilderna till valfria sidor
• En färg istället för en bild så kan du kryssa i Bakgrundsfärg och ange färgkod i hex- eller RGB-format.

Tips! På mobil beskärs bilderna annorlunda. Använd gärna bilder med fokus i mitten så att viktiga delar inte kapas. Undvik detaljerade bilder och inbäddad text – använd istället blockinställningarna för responsiv text.

Ett bra sätt att anpassa bilderna är också att justera ljusstyrka och kontrast. Detta är särskilt viktigt om du arbetar med textplattor ovanpå bilderna – texten blir mer lättläst när bakgrunden är tillräckligt ljus eller mörk för att skapa tydlig kontrast. 

Ändra ljusstyrka och kontrast

Texten anpassar sig beroende på vilken enhet kunden besöker butiken på. Bilden till vänster visar hur den ser ut på en dator och den till höger visar bilden på en mobiltelefon.

Hero-bild vs Kategoribild

Hero-bilder och kategoribilder används på olika sätt i butiken:

• Hero-bild: En stor bild högst upp på startsidan (eller andra sidor) som du lägger till via Drag & släpp.
  
  
• Kategoribild: En bild högst upp på butikens kategorisidor eller produktlistningar. Detta är en typ av hero-bild men ändras direkt i Admin.

Kolumner

Kolumnblocket är flexibelt och används ofta för att länka till kategorier eller visa upp USP:ar.

Med kolumner kan du:

• Välja mellan 1–6 kolumner och anpassa hur de visas på dator, läsplatta och mobil
• Välja om blocket ska vara fullbredd eller inte
• Ange bakgrundsfärg

Om du visar kategorier med kolumner – glöm inte att länka både bild och text.

Väljer du att visa upp kategorier på detta sätt, glöm inte att länka både text och bild!

Runda bilder

1. 1. Markera bilden du vill runda. Se till att bilden är kvadratisk för att resultatet inte ska bli ovalt.
   2. Klicka på Infoga/redigera bild.
   3. Under ”Klass” väljer du Rund.

Alt-beskrivning för bilder

När du laddar upp eller redigerar en bild i blocken finns fältet Alternativ beskrivning. Du når det genom att klicka på bildikonen och välja Infoga/redigera bild.

Alt-beskrivningen fyller två viktiga funktioner:

• Tillgänglighet: Hjälper synskadade användare som använder skärmläsare att förstå vad bilden föreställer.
• SEO: Sökmotorer indexerar alt-texter, vilket kan förbättra butikens synlighet i sökresultat.

Tips för bra alt-texter
Beskriv bilden kort och konkret, exempelvis:

• ”Blå soffa i vardagsrumsmiljö”
• ”Sliderbild för kampanjen sommarrea 2025”
  
  
• Undvik att bara skriva ”bild” eller upprepa samma text på flera bilder.
• Använd relevanta nyckelord där det känns naturligt, men överdriv inte.

Mobile first 

Eftersom en majoritet av e-handelskunder handlar via mobil är det viktigt att alltid kontrollera hur butiken ser ut på telefon.

• Gå in via mobilen efter att du sparat ändringar.
• Scrolla igenom hela butiken för att få en helhetsupplevelse.
• Testa gärna att tänka som en kund – fungerar det enkelt att navigera och hitta rätt?