Temainställningar: så här anpassar du ditt tema

Ditt tema avgör hur din webbutik ser ut och fungerar. Men ett bra tema är inte en låst låda. De flesta teman har en rad inställningar som du själv kan justera, och dessa finns samlade på ett ställe i Shoporama: sidan Temainställningar. Här kan du ändra färger, korta texter, bilder, rullgardinsmenyer och på/av-funktioner utan att behöva röra en enda rad kod.

Vad är temainställningar?

Ett tema är den mall som styr din butiks design: startsidan, kategorisidorna, produktsidorna, varukorgen och kassan. Temat har skapats av en utvecklare, antingen hos Shoporama eller hos en temautvecklare som du själv har anlitat. När temat byggs kan utvecklaren välja att lägga vissa valmöjligheter till dig som butiksägare: ”vilken färg ska knapparna ha?”, ”ska ett meddelande visas högst upp på sidan?”, eller ”vad är leveranstiden för varor som finns i lager?”. Just dessa val är temainställningar, och de dyker automatiskt upp på sidan. Det innebär två saker:

• Du kan bara ändra det som temat har gjort det möjligt att ändra. Du kan inte själv lägga till nya fält på sidan.
• Två teman har sällan samma inställningar. Det som din granne kan justera i sitt tema finns inte nödvändigtvis i ditt.

Så här hittar du temainställningarna

1. Logga in på din Shoporama-administration.
2. Klicka på Butik i menyn till vänster och fäll ut Design.
3. Klicka på Tema-inställningar.

Under ”Design” hittar du också de närmaste alternativen: Tema (där du väljer vilket tema butiken ska använda), Texter, Stylesheet, Logotyp & villkor samt Siddesigner. Mer om skillnaden längre ner.

Viktigt: inte alla teman har temainställningar

Detta är den vanligaste källan till förvirring, så låt oss klargöra det helt tydligt: temainställningar finns endast i teman som är byggda för att ha dem.

Shoporamas egna teman har vanligtvis många inställningar, från en handfull avsnitt till flera hundra fält. Men om du låter en temautvecklare eller en byrå skapa ett skräddarsytt tema ingår inte temainställningarna automatiskt. De måste byggas in i temat av den som har skapat det, och om de inte är inbyggda är sidan tom.

Om din sida är tom eller om du saknar ett visst fält är svaret därför nästan alltid: kontakta den utvecklare eller den byrå som har skapat ditt tema och be dem lägga in inställningen. Det är en enkel uppgift för den som känner till temat, och du slipper beställa en ändring varje gång du vill justera en färg eller en text. Vill du se vilka teman Shoporama själv erbjuder kan du läsa översikten över teman på Shoporama.

Så här är sidan uppbyggd

Alla inställningar är samlade i sektioner, det vill säga en rubrik med relaterade fält under sig, till exempel ”Allmänt”, ”Företag”, ”Tema & färger” eller ”Produktsida”. Vilken vy du får beror på ditt tema:

• Harmonikavisning: sektionerna fälls ut och in när du klickar på dem. Högst upp finns ett sökfält, Sök i inställningar..., som söker i både sektionsnamn, beskrivningar och fältnamn, fäller ut relevanta sektioner och markerar det som hittas. Webbläsaren kommer ihåg vilka sektioner du hade öppna senast.
• Kortvy: varje avsnitt visas som ett kort under varandra, och på höger sida finns en genvägslista under rubriken Översikt, så att du kan hoppa direkt till ett avsnitt.

De fälttyper du möter

Temautvecklaren bestämmer för varje fält vilken typ det är, och typen avgör hur fältet ser ut för dig:

• Textfält: en enkel rad för korta värden, från ”Fri frakt över 499 kr.” till en Facebook-länk eller en kommaseparerad lista som dankort, visa, mobilepay.
• Textbox: ett större fält med flera rader för längre, ren text.
• Rik text: ett fält med redigerare där du kan skapa fetstil, länkar och punktlistor.
• Färg: ett färgprov som du klickar på, med ett litet fält bredvid där hexkoden står (till exempel #2563eb). De två fälten hör ihop, så du kan antingen peka på färgen eller skriva in koden.
• På/av: en bockruta. Markera rutan för att aktivera funktionen, avmarkera den för att inaktivera den.
• Rullgardinsmeny: en lista med fasta alternativ som temat har definierat.
• Bild: ett uppladdningsfält, till exempel för en bild som ska delas på sociala medier.

Om det står ”Okänd typ” bredvid ett fält istället för ett inmatningsfält är det inget du kan åtgärda. Det betyder att temat begär en fälttyp som sidan inte stöder. Vidarebefordra detta till din temautvecklare.

Så här sparar du dina ändringar

Längst ner på sidan finns en knapp som följer med när du bläddrar: Spara och fortsätt redigera. När du trycker på den:

• sparas alla fält på sidan på en gång, även de i avsnitt som du inte har öppnat;
• rensas butikens cache automatiskt så att ändringarna träder i kraft i webbutiken;
• stannar du kvar på Tema-inställningar så att du kan fortsätta arbeta.

Om du inte ser ändringen direkt i butiken ska du göra en hård uppdatering i webbläsaren (Cmd+Shift+R på Mac, Ctrl+F5 på Windows). Din egen webbläsare sparar nämligen också en kopia av sidan.

Vid färgfält kan det finnas en liten cirkelpil till höger om fältnamnet. Om du håller muspekaren över den visas temats standardfärg, till exempel #111827, och ett klick återställer fältet till det värdet. Kom ihåg att klicka på Spara efteråt.

Om temat har ett bildfält ser du ett uppladdningsfält. När bilden har laddats upp och sparats visas den som en miniatyrbild med kryssrutan ”Ta bort bild?” under. Om du vill byta bild markerar du rutan där, klickar på Spara och fortsätter att redigera, varefter uppladdningsfältet återkommer.

Färgscheman: byt hela paletten på en gång

Vissa teman levereras med färdiga färgpaletter. Om ditt tema har det dyker ett extra menyalternativ upp under Design: Färgscheman. Om ditt tema inte har några färgscheman finns det inte något sådant menyalternativ alls.

Om du väljer ett färgschema skrivs färgerna in direkt i samma färgfält som finns under Tema-inställningar. Det är alltså en genväg för att ställa in många färger på en gång, och du kan finjustera efteråt. Om du senare väljer ett annat schema skrivs de manuella justeringarna över igen.

Vad händer om du byter tema?

Temainställningarna är temaspecifika. Varje tema definierar sina egna fältnamn, och värdena sparas i din webbshop under just dessa namn. Om du byter tema innebär det i praktiken:

• Det nya temat visar sina egna fält. Dina gamla värden överförs inte, och du måste räkna med att ställa in allt från början.
• Dina gamla värden försvinner inte. Om du byter tillbaka till det tidigare temat finns inställningarna fortfarande kvar.
• Logotyp, favicon, handelsvillkor, menyer och produktdata ligger utanför temainställningarna och påverkas inte av ett temabytet.

Planera därför ett temabytet som en liten uppgift och inte som ett enkelt klick. Ta gärna en skärmdump av dina viktigaste avsnitt först, så att du snabbt kan återskapa texterna i det nya temat.

Vad hör inte hemma under temainställningarna

Många letar på fel ställe. Här är en kort checklista:

• Fasta texter i webbutiken som ”Lägg i varukorgen” och ”Gå till kassan” redigerar du under Design, Texter. Se Översätt och anpassa texter i din webbutik.
• Logotyp, favicon och användarvillkor ställer du in under Design, Logotyp & villkor.
• Egen CSS, det vill säga finjustering av designen utöver vad temat erbjuder, gör du under Design, Stylesheet. Se Eget stylesheet (Custom CSS).
• Innehåll på startsidan och landningssidor, såsom banners och produktlistor, skapar du i Sidredigeraren.
• Spårningskoder för Google Analytics, Meta och liknande lägger du in under Konto, Webbshop, Spårning.

Bra tips som ger resultat på resultaträkningen

Varje ändring du själv kan göra här är en ändring som du varken behöver betala en utvecklare för eller vänta på. Där det brukar ge mest:

• Meddelandet i toppfältet är butikens mest synliga plats. Använd det aktivt för gränser för fri frakt, kampanjer och sista beställningsdag före jul, istället för att låta det stå med samma text hela året.
• USP-texterna högst upp på sidan är ett billigt sätt att skapa förtroende. Skriv konkret (”Leverans 1–3 vardagar”) istället för vagt (”Snabb leverans”).
• Leveranstider och ikonerna för betalning och frakt måste stämma överens med verkligheten i kassan. Felaktiga tider leder till supportmejl, och ikoner som inte stämmer kostar konverteringar.
• Ändra en sak i taget när du justerar färgerna, så att du vet vad som fungerade.

För dig som är tekniskt lagd

Formuläret genereras direkt från filen theme_settings.json i temats rotkatalog. Om filen inte finns finns det inga inställningar att visa. Filen innehåller en inställningsmatris med sektioner. Både sektioner och fält har path, name och en valfri description, och fält har dessutom en type:

{
  "accordion": true,
  "settings": [
    {
      "path": "topbar",
      "name": "Topbar-meddelande",
      "description": "Visa ett meddelande högst upp på sidan",
      "fields": [
        { "path": "enabled", "name": "Aktivera", "type": "bool" },
        { "path": "text", "name": "Text", "type": "string" },
        { "path": "bg", "name": "Bakgrundsfärg", "type": "color", "default_value": "#111827" }
      ]
    }
  ]
}

• Stödda typvärden: string, text, wysiwyg, color, bool, list, image. Andra värden, till exempel number och textarea, visas som "Okänd typ". Använd string för korta värden, även siffror, och wysiwyg för rik text.
• Värdena är tillgängliga i temats mallar som $settings.sektion.fält, det vill säga sektionens sökväg följt av fältets sökväg.
• Ett standardvärde fyller endast i fältet i administrationen. Värdet finns först i butiken när man har klickat på Spara, så mallen måste själv hantera att värdet kan saknas.
• default_value i ett färgfält styr återställningsikonen. Ett listfält måste ha en values-array med objekt som har value och name.
• Om du sätter accordion till true används harmonikavisningen. Annars används kortvisningen.
• Oavsett detta: om det finns en color_scheme.json med en schemes-lista i temats rotkatalog läggs menyalternativet Färgscheman under Design till automatiskt.
• Värdena sparas per webbshop och per fältnamn, inte per tema. Om två teman återanvänder samma sektions- och fältnamn delar de värdet.
• Temainställningar kan också läsas och ställas in via Shoporamas REST API, vilket är praktiskt om samma inställningar ska rullas ut på flera webbutiker.

Vanliga frågor

Jag kan inte hitta Tema-inställningar, eller så är sidan helt tom. Vad ska jag göra?

Sidan finns under Design, Tema-inställningar. Om den är tom har ditt tema inga inbyggda inställningar, vilket är helt normalt för skräddarsydda teman. Kontakta utvecklaren eller byrån som har skapat temat och be dem lägga till de önskade fälten. Shoporama kan inte lägga till fält i ett tema som vi inte har skapat.

Jag har precis fått mitt eget tema skapat. Varför har jag inte samma inställningar som Shoporamas teman?

Detta beror på att inställningarna är en del av själva temat och inte en funktion som alla teman automatiskt får. Shoporamas egna teman är byggda med många inställningar. Ett skräddarsytt tema har exakt de inställningar som din utvecklare har valt att bygga in, varken fler eller färre. Kom gärna överens om detta med utvecklaren redan när du beställer temat.

Hur vet jag om min ändring har trätt i kraft i butiken?

Klicka på Spara och fortsätt redigera, öppna sedan butiken i ett nytt flikfönster och gör en hård uppdatering (Cmd+Shift+R på Mac, Ctrl+F5 på Windows). Shoporama rensar själv butikens cache när du sparar, så om du fortfarande ser det gamla beror det oftast på att din egen webbläsare inte har uppdaterats.

Kan jag ändra knapptexter som ”Lägg i varukorgen” härifrån?

Nej. Fasta texter i butiken redigerar du under Design, Texter. Tema-inställningarna används för de värden som temat själv har lagt ut, till exempel din egen kampanjtext högst upp på sidan eller dina USP-texter.

Jag har flera webbutiker med samma tema. Kan jag kopiera inställningarna från den ena till den andra?

Det finns ingen kopieringsknapp på sidan, och inställningarna sparas per webbutik, så du måste ställa in dem i varje butik. Om du har många butiker eller många fält kan en utvecklare läsa och ställa in temainställningarna via Shoporamas REST API, så att konfigurationen kan rullas ut automatiskt.

Förlorar jag mina inställningar om jag provar ett annat tema och ångrar mig?

Nej. Inställningarna raderas inte när du byter tema. Det nya temat visar bara sina egna fält, och de är tomma från början. Om du byter tillbaka finns dina gamla värden kvar. Tänk dock på att butikens utseende ändras omedelbart, så välj helst en tidpunkt då det är få besökare.

Det står ”Okänd typ” bredvid ett av mina fält. Är något fel?

Webbutiken fungerar som den ska, men fältet går inte att redigera. Det betyder att temat kräver en fälttyp som sidan inte stöder. Vidarebefordra meddelandet till din temautvecklare så att de kan korrigera fälttypen i temat.

Vi har bytt fraktleverantör. Var ändrar jag ikonerna i sidfoten?

Om ditt tema har ett fält för detta finns det vanligtvis i den första sektionen under Tema-inställningar som en kommaseparerad lista, till exempel postnord,gls,dao. Fältets hjälptext anger exakt vilka värden temat känner till. Om fältet inte finns styrs ikonerna fast i temat, och då måste din temautvecklare ta över.