Guide: Callisto – Frihet att forma din webbplats

En webbmall för dig som vill ta kontrollen och agera din egen webbdesigner. Callisto ger dig oändliga möjligheter för detaljerad redigering och kreativ frihet.

Med denna mall ingår dessutom en kostnadsfri uppsättningstimme för att du ska komma igång smidigt.

 

Vill du veta mer? Hör gärna av dig till webb@unitedprofile.se – vi hjälper dig gärna! 🎉

 

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.

Optimera struktur och navigering i Administrationen 🧭

I Administrationen hittar du viktiga inställningar för din webbsidas struktur.

Kategoriträd – Skapa en tydlig navigering för dina besökare

Lär dig hur du ordnar och sorterar ditt kategoriträd och era varumärken för en tydligare navigation
i vårt Hjälpcenter. Kategoriträdet - Introduktion. 

Sidhuvudet – Välj mellan 3

I Callisto kan du välja mellan tre olika typer av sidhuvuden, beroende på vilken stil och funktion du vill ha. Oavsett val är ett tydligt och fokuserat sidhuvud nyckeln till en bra användarupplevelse.
Du väljer sidhuvud genom att navigera: Utseende > Alla mallar > Väljer den mall du vill välja sidhuvud på > Fliken "Systemsidor" > och väljer Kugghjulet intill Callisto - Sidhuvud .

Se över sidhuvudet och anpassa länkarna för en smidig navigationsupplevelse.
Vi rekommenderar att du fokuserar på de viktigaste länkarna, såsom Om oss och Kontakta oss etc,
för att hålla menyn ren och lättnavigerad. För övriga länkar kan du istället använda kategorikort eller
andra länkelement på startsidan för en mer strukturerad och användarvänlig upplevelse.

Redigera menyn i Callisto, anpassa menyns ordning och lägg till och ta bort sidor efter behov:

1. Navigera till Utseende → Alla mallar
2. Välj din aktuella mall
3. Klicka på "Menyer" och sedan "Hantera meny"

Sidfoten – Placera viktiga länkar för en bättre användarupplevelse

Här kan du placera sekundära länkar som t ex villkor, integritetspolicy och övrig information.

 

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


 

Maximera startsidan – Lyft fram rätt innehåll 🌟

Videoblock – Fånga besökaren direkt 

Använd videoblocket för att skapa en stark första känsla. En kort video engagerar snabbt och kan visa upp ditt företag, produkter eller miljö på ett levande sätt.

Exempel på användning är att presentera ditt varumärke, visa lokaler eller tillverkning, lyfta kampanjer och nyheter, demonstrera en produkt eller berätta om kundcase.

Tips: Håll det kort (under 1 min), använd undertexter och inkludera en tydlig knapp för vidare handling. Tänk på storleken - Stor video(mb) = lång laddningstid. Liten video = snabb och smidig upplevelse

Önskar man inte video som det översta blocket, har Callisto ett block med endast en bild med text på man kan utnyttja och tända via redigeringsläget.

Rullande Varumärkesbanner - Visa upp dina leverantörer

Varumärkesblocket är ett stilrent sätt att lyfta fram dina leverantörer eller samarbetspartners. Det ger ett professionellt intryck och hjälper kunden att snabbt känna igen varumärken de litar på.

Blocket bygger på kategoriträdet under “Varumärken”, där alla varumärken du lägger in automatiskt hämtas och visas i ordning. Läs mer om att sortera Varumärken här 🗂️

Kategorikort – Utgår från kategoriträdet

Dessa block utgår från hur du sorterat upp i Kategoriträdet. Läs mer om hur du sorterar i Kategoriträdet här 💡

Textblock med bild – Hjälp besökaren hitta rätt snabbt

Med dessa block kan du guida besökaren direkt till populära produktgrupper genom att lägga in länkar – som till muggar, flaskor, pennor och kepsar. Eller till en undersida. Perfekt för kampanjer, nyheter eller lyfta utvalda favoriter.
Läs i denna artikel hur du länkar: Hur länkar jag på sidan?

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

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

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

Produktsidor & visning – anpassa för bättre konvertering💡

Produktlistor

Anpassa hur produkterna visas i listor och på produktsidor på startsidan och under sidhuvudets meny. Du kan skapa egna produktlistor via administrationen. Läs mer om hur du skapar produktlistor här.

Produktetiketter

Etiketter som Nyhet, REA & Finns i fler färger hjälper besökaren att snabbt se vad som är nytt, nedsatt i sortimentet och vilka produkter som finns i fler färger. 
Redigera färgerna på dessa via Designverktyget:

• Nyhet: Nya produkter i sortimentet

• REA: Produkter med rabatterat pris

• Finns i fler färger: Produkter med fler varianter/färger

Färg & design

Se till att färgerna i din webbplats matchar ditt varumärke genom Designverktyget. Tänk också på att ha tillräckliga kontraster mellan text och bakgrund för att säkerställa god läsbarhet och tillgänglighet för alla besökare.

Typsnitt & teckenstorlek

Säkerställ att texten är lättläst och inte för liten eller för ljus.

SEO & synlighet – Gör din webbplats lätt att hitta 🔎

Att investera i SEO för produktsidor ger långsiktiga fördelar genom att driva mer trafik, förbättra användarupplevelsen och öka försäljningen. 

Alt-texter på bilder – Viktigt för SEO och tillgänglighet

Dessa anpassar du via Redigeringsläget på bilderna.

Produktlistningssidan - Fyll på med SEO-anpassad text

För att fylla sökordsoptimerad text går du via Redigeringsläget, klickar på den produktbeskrivande texten under rubriken. Här kan du då bland annat fylla i text som hamnar längst ner på sidan, under produkterna. 

Långsiktig SEO-strategi – Investera i optimering för bättre synlighet 

Att arbeta med SEO är en kontinuerlig process som kan förbättra din webbplats synlighet och driva mer trafik över tid. Vi tillhandahåller verktyg och funktioner för att du ska kunna optimera din webbplats på egen hand, men det är upp till dig att arbeta med innehåll, sökord och struktur för bästa resultat. För mer avancerad SEO kan det vara en fördel att ta hjälp av en expert inom området.

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.

Lycka till med uppsättningen av din nya mall 🎉

Tveka inte att höra av dig till oss om du har några frågor eller funderingar – vi finns här för att hjälpa dig. 📩 Kontakta oss på support@unitedprofile.se

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 »