Teman: skapa och redigera dina egna temamallar

Teman är en av de äldsta sidorna i Shoporama-admin. Här skapar du egna versioner av enskilda filer i ditt tema och låter dem ersätta motsvarande filer i det tema du redan använder. Det är samtidigt Shoporamas ursprungliga verktyg för A/B-testning.

Viktigt att notera först: sidan fungerar endast om din webbshop kör Smarty 2. Om din butik kör Smarty 4 finns menyalternativet inte alls, och sidan har ingen effekt. Gå i så fall direkt till avsnittet ”Kör du Smarty 4?” nedan.

Så här ser du om din butik kör Smarty 2 eller Smarty 4

Smarty är det mallspråk som ditt tema är skrivet i, det vill säga koden som hämtar produktnamn, priser och bilder till de sidor som dina kunder ser. Det finns två versioner: den gamla Smarty 2 och den nuvarande Smarty 4.

1. Klicka på Konto i menyn till vänster, fäll ut Webbutik och välj Allmänt.
2. Leta reda på fältet ”Smarty-version”. Där står antingen 2 eller 4 (fungerar eventuellt inte med gamla mallar).

Om fältet är grått står det ”Styrs av temat (Smarty 4)”, och då bestämmer temat själv vilken version som ska användas. Om du vill byta från 2 till 4 ska du först läsa guiden för att byta till Smarty 4. Om du kör Smarty 2 står det också ”Du använder Smarty 2” högst upp på sidan Teman.

Använder du Smarty 4? Då måste du gå någon annanstans

På butiker med Smarty 4 har ”Teman” avsiktligt tagits bort från menyn. Smarty 4 läser endast temats filer från butikens temamapp, så ett tema som skapades här skulle ändå aldrig användas. Det du tidigare brukade göra på den sidan gör du istället här:

• Butik, Design, Kodredigerare för att redigera temats HTML-, CSS- och JavaScript-filer. Se guiden till kodredigeraren.
• Butik, Design, Siddesigner för att bygga sidor av färdiga block, helt utan kod.
• Butik, Design, A/B-test för att testa två versioner av en sida mot varandra. Det nya A/B-testet fungerar tillsammans med Sidbyggaren, fördelar trafiken enligt viktning och kan avsluta sig själv när resultatet är tydligt.
• Butik, Design, Tema-inställningar för färger, logotyper och de alternativ som temat själv erbjuder. Se guiden för tema-inställningar.
• Butik, Design, Stylesheet för egna CSS-justeringar, och Butik, Design, Texter för de fasta texterna.

Vad ett ”tema” betyder här och var du hittar sidan

Ordet tema används på två ställen i admin, och de betyder inte samma sak. Butik, Design, Tema är din egentliga design, det vill säga alla filer som butiken är uppbyggd av, och översikten över teman på Shoporama ger en överblick. Konto, Webbutik, Teman är däremot en liten samling enskilda filer som läggs ovanpå designen. Endast de filer som du själv lägger in skrivs över, och allt annat kommer från ditt vanliga tema.

Filerna sparas i webbutikens databas och inte som vanliga filer, så de skrivs inte över när temats filer läggs upp igen. Det är just det som gör sidan användbar: du kan testa en ändring på ett ställe utan att påverka resten av designen.

Du hittar sidan under Konto, Webbshop, Teman, mellan robots.txt och Återställ. Översikten har tre kolumner: Namn är ditt eget namn på temat, I bruk står på Ja för det aktiva temat och Nej för de övriga, och pennikonen öppnar temats fillista. Längst ner finns knappen Skapa nytt tema.

Så här skapar du ett tema

1. Klicka på Skapa nytt tema. Sidan heter Nytt tema.
2. Fyll i Namn. Välj något du kommer att känna igen om tre månader, t.ex. ”Test av köpknapp”.
3. Om du vill utgå från en befintlig fil markerar du den i ”Eller kopiera från eget tema” (valfritt). Listan visar de temamappar som du eller din utvecklare har lagt upp, och e-postfiler är markerade med (e-post).
4. Klicka på ”Skapa”. Du hamnar omedelbart på temats fillista.

Fältet ”Kopiera från tema (valfritt) ” precis ovanför är tomt för alla butiker idag, och det är inget du gör fel. Om du inte själv har lagt upp temafiler skapar du bara temat tomt och lägger till filerna efteråt.

Tematets fillista

Filförteckningen heter Templates. Högst upp kan du ändra temats Namn, och därunder finns tabellen med filerna:

• Filnamn är det avgörande fältet. Filen skriver över den fil i ditt tema som har exakt samma namn, t.ex. add_to_basket.html. Om du skriver ett namn som ditt tema inte använder händer ingenting.
• Namn är din egen etikett, t.ex. ”Original” eller ”Version B”. Den syns endast i admin.
• Låst visar om filen är låst som den version som alla ska se. Mer om detta i avsnittet om split-test.
• ”Ändrad” är datum och klockslag för den senast sparade ändringen.
• Blyertsikonen längst till höger öppnar filen för redigering, och bockmarkeringen längst till vänster används av kopierings- och raderingsknapparna nedanför.

Knapparna längst ner: Spara sparar filen med namnet och går tillbaka till översikten. Skapa ny fil i temat öppnar sidan för en ny fil. Kopiera de valda filerna skapar en kopia av varje markerad fil, med samma filnamn och namn som originalet. ”Ta bort de valda filerna ” raderar de markerade filerna efter en bekräftelsefråga ”Är du säker?”. ”Använd detta tema ” aktiverar temat och visas endast när det inte redan är i bruk. ”Ta bort hela temat ” tar bort temat och alla dess filer.

En viktig detalj: bockarna används av flera knappar. Om du har bockat en fil och klickar på Spara eller Använd detta tema kommer filen också att kopieras. Ta därför bort bockarna när du är klar med kopieringen, annars växer listan med dubbletter.

Kom ihåg att ett tema inte har någon effekt förrän du har klickat på Använd detta tema. Det är det klassiska misstaget. Det ska stå Ja i kolumnen I bruk. Det kan bara finnas ett aktivt tema åt gången, och det gamla temat finns kvar så att du kan byta tillbaka.

Skapa och redigera en fil

Sidan ”Skapa ny fil i tema ” har fälten ”Filnamn” och ”Namn” samt samma två kopieringslistor som vid skapandet av temat. Om du lämnar ”Filnamn” tomt skapas filen som noname.html med namnet ”No name”.

Själva redigeringen sker på sidan ”Redigera mall”, där du ändrar ”Filnamn”, ”Namn” och det stora HTML-fältet. ”Spara” sparar och tar dig tillbaka till fillistan, ”Spara och fortsätt redigera” stannar kvar på sidan, och ”Ta bort” raderar filen efter en bekräftelse.

Det finns ingen ångra-funktion och ingen versionshistorik. När du sparar försvinner den gamla versionen, så kopiera innehållet till en textfil innan du redigerar. Ändringen träder i kraft omedelbart. Om du inte ser den kan du prova att göra en hård uppdatering med Cmd+Shift+R eller Ctrl+Shift+R. I en livebutik kan färdiga sidor dessutom ligga sparade i upp till fyra timmar.

Split-test: två versioner av samma fil

Det är här som sidan verkligen betalar sig. Om du lägger in två eller flera filer med samma filnamn i samma tema fördelar webbutiken besökarna mellan dem. Valet sparas i en vecka, så att den enskilde besökaren inte ser knappen byta under tiden.

1. Hitta den fil som innehåller det du vill testa. Om det är texten på köpknappen är det vanligtvis add_to_basket.html.
2. Lägg in originalet i temat och döp det till ”Original”.
3. Markera den, klicka på ”Kopiera de valda filerna” och döp kopian till ”Version B”.
4. Öppna Version B, ändra den enda saken du vill testa och spara. Om du ändrar flera saker vet du inte vad som fungerade.
5. Klicka på ”Använd detta tema” och låt testet pågå tills du har tillräckligt många beställningar för att våga dra några slutsatser.

Kolumnen ”Låst” är den version som alla ska se, oavsett fördelningen. I den nuvarande admin-panelen finns det inget fält för att aktivera den, och om du sparar en fil ställs den in på ”Nej”. Vill du avbryta ett test och behålla vinnaren raderar du därför helt enkelt förloraren.

Om du har få besökare tar det lång tid att få ett resultat du kan lita på, och då är tiden bättre använd på att skaffa trafik. Den sparade versionen av sidorna kan dessutom göra fördelningen mindre exakt. Mer information finns i guiden för split-test i Shoporama.

För dig som är tekniskt kunnig

Filerna är Smarty-mallar, inte ren HTML. Hos Shoporama skrivs Smarty med spetsparenteser utanför de krökta:

<{$product->getName()}>

<{if $product->getPrice()}>
    <p><{$product->getPrice()}> kr.</p>
<{/if}>

Varje <{if}> måste ha en <{/if}>. Om du glömmer en får du vanligtvis en felsida i hela webbutiken. Variabler och metoder beskrivs i Variabler i ett Shoporama-tema. Det finns tre skillnader mellan de två Smarty-versionerna som är värda att känna till:

• Filerna ligger på olika ställen. I ett Smarty 2-tema ligger mallarna fritt i temamappen, t.ex. invoice.html. I ett Smarty 4-tema ligger de i undermappar, t.ex. templates/mails/invoice.html.
• Smarty 4 är strängare. Därför står det bokstavligen ”fungerar eventuellt inte med gamla mallar” i rullgardinsmenyn. Gamla mallar kan innehålla skrivsätt som måste korrigeras först.
• Databasfiler finns endast i Smarty 2. Sidan ”Teman” låter sina filer gå före temats egentliga filer. Denna mekanism finns inte i Smarty 4, där alla nya funktioner byggs in.

Vanliga frågor

Jag kan inte hitta Teman i min meny alls. Var finns den?

Då kör din webbutik Smarty 4, och alternativet är medvetet dolt. Kontrollera det under Konto, Webbutik, Allmänt i fältet Smarty-version. Om du behöver redigera temats filer använder du istället Butik, Design, Kodredigerare.

Raderar jag min riktiga design om jag raderar ett tema här?

Nej. Ett tema här innehåller endast de enskilda filer som du själv har lagt in. Om du tar bort det använder webbutiken återigen motsvarande filer från ditt vanliga tema, och själva designen förblir oförändrad.

Varför är listan ”Kopiera från tema (valfritt)” tom?

Den rutan visar inte längre något innehåll, så hoppa över den. Om du själv har lagt upp temafiler hittar du dem i rutan nedanför, ”Eller kopiera från eget tema (valfritt)”.

Plötsligt fick jag två helt identiska filer i listan. Vad hände?

Bockarna används av flera knappar. Om det finns en bock vid en fil och du klickar på Spara eller Använd detta tema, kopieras filen, precis som om du hade klickat på Kopiera de valda filerna. Ta bort dubbletten och avmarkera bockarna.

Kan jag ångra en ändring dagen efter?

Nej, inga tidigare versioner sparas. Kopiera alltid innehållet till en textfil innan du gör ändringar. Om skadan redan är skedd utan att du har en kopia, raderar du filen från temat så använder webbutiken originalet igen.

Bevaras mina ändringar vid en uppdatering av temat?

Ja. Filerna ligger inte i temamappen, så de skrivs inte över när temats filer laddas upp igen. Däremot kan de orsaka problem om det nya temat har ändrat filen i grunden, så kontrollera dem efter en större uppdatering.

Kan jag rulla ut samma ändring i alla mina webbutiker på en gång?

Nej. Teman och filer hör till den butik du har valt i admin, så det måste göras om i varje butik. Om du har många butiker med samma tema är det mer hållbart att infoga korrigeringen direkt i själva temat.

Jag testar min A/B-testning, men ser alltid samma version. Är den trasig?

Troligtvis inte. Ditt val av version sparas i en vecka, så du ser samma version tills du rensar cookies eller öppnar webbutiken i ett privat fönster.

Jag har redigerat en fil, men ingenting händer i butiken. Vad gör jag nu?

Kontrollera följande i den ordningen: står det Ja i kolumnen I bruk, är filnamnet stavat exakt som filen i ditt tema, och har du provat att ladda om sidan? Om du fortfarande är osäker, skriv till support@shoporama.dk med filnamnet.