Guide till webbmallen Lumi. Mallen för dig som snabbt och enkelt vill starta din webbshop med minimalt arbete. Lumi erbjuder enkelhet och en stilren design för en smidig start.

Så här kommer du igång 📌

Redigera innan aktivering

Lär dig hur du anpassar din mall innan den aktiveras. Läs mer: Redigera ny mall innan den aktiveras

Verktyg för design och anpassning 🛠️

När du följt stegen i ovanstående artikel kommer du till förhandsgranskning av din mall, du kan nu börja jobba med våra verktyg: 

🖌️ Designverktyget – Anpassa färger, typsnitt och layout enkelt
⚙️ Redigeringsläget – Flytta, dölja och anpassa sidans block smidigt

⚙️ Redigeringsläget  aktiveras via kugghjuls-ikonen (till höger). Här kan du flytta, tända eller släcka olika block för att anpassa sidan efter dina behov.

Skapa en kopia av en sida 👯‍♂️

När du kopierar en sida – till exempel för att skapa en kampanjsida baserad på startsidan – är det viktigt att känna till hur inställningarna fungerar.

Designinställningar från Designverktyget följer med till den nya sidan. 
Du kan fortfarande flytta, tända och släcka block som du vill på den kopierade sidan.
Men ändringar i Designverktyget (färger, typsnitt, etikettutseenden m.m.) påverkar alla sidor som delar samma mall – inklusive originalet.

Läs mer i artikeln Skapa en egen sida i din webbshop

Innehåll i mallen 🎨

Bildkarusell

Bildkarusellen är perfekt för att skapa ett starkt intryck på startsidan. Den roterar mellan flera bilder och ger dig möjlighet att kombinera visuella uttryck med korta budskap.
Välj bilder som fungerar i olika skärmstorlekar – särskilt på mobil. Använd gärna bilder med centralt placerade motiv eller mycket luft i kanterna.
Skriv dina budskap i de textfält som hör till karusellen i redigeringsläget – det säkerställer rätt placering och läsbarhet i alla enheter. Ett tips är att använda max 1–2 korta meningar per slide.

Sidhuvud

Webbmallen Lumi erbjuder två olika sidhuvud där ert sortiment presenteras på olika sätt.

För att byta sidhuvud går ni in via Alla mallar > Systemsidor > Kugghjulet

"Lumi - Sidhuvud" visar sortimentet öppet direkt i sidhuvudet:

"Lumi - Sidhuvud 2" visar hela sortimentet i en dropdown meny:

Kampanjboxar

Dessa boxar kan fyllas med bakgrundsbild eller enbart en bakgrundsfärg. Bakgrundsfärgen styrs från designverktyget.

För att lägga till fler antalet boxar klickar ni på knappen "Lägg till nytt objekt"

 

Nedan följer användbara länkar om redigeringsläget samt uppladdning av bilder i filhanteraren:

Läs mer om redigeringsläget här

Läs mer om uppladdning av bild i filhanteraren

Banners och bilder – Optimera bilder för snabbare laddningstid

Se till att dina bilder är optimerade i storlek och kvalitet för att inte påverka sidans laddningstid. På stora bilder är .webp ett optimalt format för att komprimera stora bilder men ändå behålla kvalité. Finns fler onlineverktyg att använda sig av.

Arbeta med Galleri via Filhanteraren. Att byta bilder på sin mall gör en unik och man sätter sin profil även genom ens bilder. Nu finns det lättare sätt att hitta passande bilder! När du är inne på din sida via Redigeringsläget och ska byta ut en bild → Välj "Mina bilder" → Klicka på "Galleri" uppe till vänster → Här kan du nu söka i externa bildbibliotek som Unsplash eller Pixabay.

📸 Bildtips: Använd tydliga, produktfokuserade bilder med enhetlig stil och bakgrund

 

Call to action, CTO – Styr besökaren rätt med tydliga knappar

Placera tydliga knappar som leder besökaren vidare, t.ex. Shoppa nu, Läs mer eller Kontakta oss.

Kontakta oss

För att lägga till fler personalbilder, klicka på knappen "Lägg till nytt objekt":

Autocomplete i sökfältet – snabbare väg till rätt produkt

Med autocomplete visas produkt-, kategori- och varumärkesförslag direkt medan man skriver i sökfältet - utan att trycka Enter eller byta sida. Funktionen gör sökupplevelsen snabbare och mer dynamisk, vilket hjälper besökaren att hitta rätt direkt.

✨ Fördelar:
• Snabbare sökning
• Ingen sidladdning krävs
• Direktlänk till produktsidan från sökförslaget

Så aktiverar du autocomplete:

1. Logga in i administrationen

2. Gå till aktuell mall och klicka på Förhandsgranska

3. Öppna Designverktyget

4. Under Sök – Autocomplete kan du slå på funktionen och justera inställningar

👉 Autocomplete finns i mallarna Lumi, Aura, Modus och Callisto.

Läs mer i andra artiklar 📂

Designverktyget – Introduktion 📖

Redigeringsläget – Introduktion 📖

Kategoriträdet – Introduktion 📖

Redigera ny mall innan den aktiveras

Om sökmotoroptimering (SEO) 💡

Tillgänglighetsanpassning - Så ser du till att din sida följer tillgänglighetsdirektivet

💡 Kom ihåg tillgängligheten
Från och med den 28 juni 2025 gäller nya lagkrav på digital tillgänglighet enligt EU:s tillgänglighetsdirektiv (TGD). Säkerställ att din sida fungerar för alla – oavsett funktionsförmåga – genom att använda tydliga texter, rätt etiketter, god kontrast och tillgängliga knappar och fält.
Vill du veta mer? Läs vår Tillgänglighetsguide här »