Siddesigner
Lær hvordan du bruger Sidedesigner i Shoporama til at opbygge sidelayouts med blokke som hero-sektioner, produktlister, bannere og meget mere, helt uden kodning.
Med Sidedesigner skapar du din egen sidlayout genom att lägga till, flytta och konfigurera innehållsblock. Du kan skapa unika layouter för din startsida, kategorisidor, produktsidor, landningssidor, kassan och många fler typer av sidor. Helt utan att behöva koda.
Var hittar jag Sidedesigner?
Du hittar Siddesigner under Butik » Design » Siddesigner i din Shoporama-administration. Här skapar du nya sidlayouter eller redigerar befintliga.

Vilka sidtyper stöder Sidedesigner?
Sidedesigner stöder två grupper av sidtyper. Den första gruppen är dynamiska sidor, där du kan välja om inställningen ska gälla för alla sidor av den typen eller endast för utvalda sidor:
- Kategori (inkl. startsidan). Layouten på alla kategorisidor och startsidan. Startsidan är den kategori som är markerad som startsidskategori, så om du vill ha en speciell startsidlayout skapar du en specifik kategorin inställning som pekar på just den kategorin.
- Produkt. Layouten på produktsidor.
- Landningssida. Layouten på landningssidor.
- Statisk sida. Layouten på statiska sidor, t.ex. Om oss och Affärsvillkor.
- Blogginlägg. Layouten på blogginlägg.
Den andra gruppen är fasta sidor, där det endast kan finnas en layout per webbutik:
- Söksidan
- Varukorgen
- Adresssidan (vid utcheckning)
- Fraktsidan (i kassan)
- Bekräftelsessidan (vid utcheckning)
- Betalningssidan
- Tack-för-beställningen-sidan
- Sidan för tilläggsköp
- Ordersidan
- Returcenter
- Inloggningssidan
- Sidan för att skapa konto
- Användarens beställningar
- Användarens önskelista
Om ditt tema definierar egna temataggar (återanvändbara innehållsplatser) kan du även skapa inställningar i Siddesigner för dem. De visas i en separat grupp vid skapandet.
Viktigt: Försidan är inte en fristående sidtyp. Startsidan styrs via kategoritypen, eftersom startsidan i Shoporama alltid är en vanlig kategori som är markerad som startsidekategori. Det finns heller ingen 404-sida i Siddesigner. 404-sidan styrs via ditt tema och kan inte utformas via Siddesigner.
Så här skapar du en sidkonfiguration
- Gå till Butik » Design » Sidedesigner.
- Klicka på Skapa ny sidlayout.
- Välj vilken sidtyp uppsättningen ska gälla för.
- Ge eventuellt layouten ett namn så att du kan känna igen den i listan.
- Klicka på Skapa. Du hamnar direkt i sektionsredigeraren, där du kan börja lägga till block.
- En dynamisk layout gäller som utgångspunkt för alla sidor av den typen. Om du vill begränsa den till utvalda sidor öppnar du Inställningar och lägger till sidorna under Välj specifika sidor. Fasta sidor kan endast ha en layout per butik.
Tips: Du kan skapa en allmän inställning för t.ex. alla produktsidor och sedan skapa en specifik inställning för utvalda produkter som ska se annorlunda ut. Specifika inställningar har företräde framför allmänna.
Så här skapar du startsidan
Startsidan är en vanlig kategori som är markerad som startsidskategori. Om du vill ge startsidan ett särskilt utseende gör du så här:
- Se till att du har en kategori markerad som startsidskategori (görs på själva kategorin). Läs mer i Inställningar för startsidan.
- Gå till Siddesigner. Under rubriken Innehållssidor finns ett kort som heter Förstasidan.
- Klicka på Skapa layout på det kortet. Siddesignern skapar en kategoriinställning som redan är kopplad till din startsidskategori.
- Lägg till de block som ska utgöra startsidan, t.ex. en hero-banner, en produktkarusell, ett USP-block och en blogglista.
Den specifika inställningen används nu på startsidan, medan dina övriga kategorier använder den allmänna kategoriinställningen (eller temats standard).
Tillgängliga blocktyper
De tillgängliga blocktyperna beror på ditt tema. Här är de vanligaste i Delaware, DelawareDK och Montana:
- Hero. Stor hero-sektion med rubrik, beskrivning, knapp och bakgrundsbild.
- Banner. Bilder i karusell-/sliderformat.
- Text. Fritextsblock med rubrik och formatering.
- Text med bild. Två kolumner med text på ena sidan och bild på den andra.
- Tvåkolumns text. Text fördelad i två kolumner.
- Produktlista. Visa produkter från en kategori, en landningssida eller baserat på popularitet/nyhet.
- Produktslider. Produkter i karusellformat.
- Kategorilista. Visa produktkategorier.
- Kategorislider. Kategorier i karusellformat.
- Bildrutnät i Delaware och DelawareDK, bildgalleri i Montana och MontanaB2B. Rutnät med bilder och valfria länkar.
- Adress & karta. Visa butikens adress med en interaktiv karta. Kräver ingen Google Maps API-nyckel. Läs mer.
- Facebook. Följ-knapp till din Facebook-sida (eller bädda in ett flöde via egen kod).
- Instagram. Visa din offentliga Instagram-profil med de senaste inläggen, en ”Följ”-knapp eller båda delarna.
- Blogglista. Visa de senaste blogginläggen.
- Trustpilot. Widget med Trustpilot-recensioner. Finns i Delaware och DelawareDK, men inte i Montana.
- Värdeerbjudanden i Delaware, Värdeerbjudanden i DelawareDK och Värden/USP:er i Montana och MontanaB2B. Lyft fram dina USP:er, t.ex. gratis frakt eller snabb leverans.
- HTML. Ren HTML för full kontroll över innehållet.
Om du använder ett annat tema kan listan se annorlunda ut. Öppna en inställning och klicka på fliken Moduler till höger för att se vilka block som ditt tema faktiskt stöder.
Nyare block som du kanske inte har upptäckt
Listan över block utökas kontinuerligt, och de senaste har lagts till i Montana. Här är de block som har tillkommit utöver klassikerna, och vad du kan använda dem till. Namnen nedan är de som visas i Montana. I DelawareDK heter de nästan samma sak, och i Delaware står de på engelska. Om en block endast finns i vissa teman anges detta vid blocket.
Tänk också på att flera av de välkända blocken har fått nya namn i Montana. Hero heter nu Stort banner, produktlistan heter Produktkarusell, bildrutnätet heter Bildgalleri och HTML-blocket heter Anpassad kod. Det är samma funktion, bara med ett namn som är lättare att förstå.
Rubrik, textbanner och mellanrum
- Rubrik. En riktig H1-rubrik för toppen av sidan, med justering till vänster, mitt eller höger och en valfri tunn understrykning. Använd den när sidan ska ha en sidrubrik istället för bara ett textblock.
- Textbanner. En smal textremsa med bakgrundsfärg, textfärg, justering och teckenstorlek. Den kan göras klickbar med en länk, och om du markerar ”Kan stängas” får meddelandet ett litet kryss. När en besökare stänger bannern förblir den stängd i dennes webbläsare. Perfekt för ”Fri frakt över 499 kr.” eller ett kort kampanjmeddelande. Finns i Montana och MontanaB2B.
- Mellanslag & avgränsare. Ett luftigtmellanrum mellan två sektioner i fem storlekar, från extra liten till extra stor, med möjlighet till en horisontell linje i mitten. Löser det klassiska problemet där två sektioner ligger för nära varandra. Finns i Montana och MontanaB2B.
Produktblock som lyfter fram produkter och kategorier
- Produktblock. En enskild produkt som visas i stor format med bild, namn, pris och en knapp till produktsidan. Du väljer om bilden ska placeras till vänster eller höger, hur de två kolumnerna ska fördelas (50/50, 60/40 eller 40/60) och om produktbeskrivningen ska visas.
- Produktfeature. En kampanjyta med rubrik, brödtext, två knappar och en bakgrundsbild, plus en produktkarusell bredvid. Passar bra för ”Månadens märke” eller en ny kollektion.
- Kategorifunktion. Samma idé, men för kategorier. Välj upp till tre kategorier, en bakgrundsbild eller bakgrundsfärg, ljust eller mörkt överlägg, samt hur stora kategoribilderna ska vara.
- Hero-video med kategori eller landningssida. En stor banner med bakgrundsvideo och upp till tre utvalda kategorier eller landningssidor ovanpå. Finns i Delaware och DelawareDK.
Nyhetsbrev mitt i innehållet
Nyhetsbrevsblocket placerar ett anmälningsformulär direkt i sidans innehåll, så att du inte bara samlar in anmälningar i sidfoten. Du väljer mellan tre layouter:
- Enkel. Ett centrerat formulär på en färgad bakgrund.
- Centrerad med bakgrundsbild. Samma uppbyggnad, men med en bild i bakgrunden och ett ljust eller mörkt överlägg.
- Delad med bild. Bild på ena sidan och formulär på den andra.
Dessutom anger du rubrik, brödtext, knapptext och en samtyckestext under formuläret, och du kan välja om förnamn också ska efterfrågas. Var anmälningarna hamnar beror på om du har aktiverat Använd intern nyhetsbrevlista i nyhetsbrevmodulen:
- Om inställningen är aktiverad skapas anmälan som prenumerant i butikens eget nyhetsbrevsmodul och läggs till i din standardlista. Om du samtidigt har aktiverat ”Kräv bekräftelse (double opt-in) ” får den som registrerar sig automatiskt ett bekräftelsemejl och blir först aktiv när länken i mejlet har klickats på.
- Om inställningen är avstängd skickas registreringen istället vidare till det externa nyhetsbrevssystem som du har kopplat till, t.ex. Mailchimp, Klaviyo eller Brevo. Det skapas alltså ingen prenumerant i Shoporamas eget nyhetsbrevsmodul, och ett eventuellt bekräftelsemejl hanteras av den externa leverantören.
I båda fallen sparar Shoporama en registrering av samtycket med tidpunkt, IP-adress och webbläsare, så att du kan dokumentera registreringen. Läs mer i nyhetsbrevmodulen.
Modulpanelen: så här lägger du till en sektion
Du lägger till sektioner från en panel till höger i sektionsredigeraren. Om panelen är stängd öppnar du den på fliken Moduler i högerkant av skärmen. Panelen kommer ihåg om du hade den öppen eller stängd, så den står som du lämnade den nästa gång.
- Sökfält. Skriv t.ex. ”produkt” eller ”text” så filtreras listan omedelbart. Sökningen sker både i modulens namn och i dess beskrivning.
- Förhandsvisningar. Varje modul visas med en liten skiss av sin uppbyggnad, så att du kan känna igen den utan att behöva gissa utifrån namnet. Skisserna är vägledande och visar inte din egen design.
- Ett klick. Klicka på en modul så läggs sektionen in på sidan. Den nya sektionen fälls ihop, sidan rullar ner till den och den blinkar kort så att du kan se var den hamnade.
Varje sektion har fyra knappar i rubriken: döpa om, fälla ut eller ihop, kopiera och ta bort. Kopiera skapar en kopia precis under originalet med ”(kopia)” i namnet, vilket är det snabbaste sättet att få två nästan identiska banners. Högst upp i sektionslistan finns en knapp som växlar mellan ”Vik in alla” och ”Vik ut alla”, så att du kan få en översikt över en lång sida med ett enda klick.
Vissa block har en länk med texten ”Läs mer om detta block” längst ner under fälten. Det gäller bland annat ”Adress & karta” samt ”Facebook” och ”Instagram”, där det finns en artikel med den fullständiga inställningen.
Längst ner på sidan finns en fast menyrad med ”Spara”, ”Spara och stäng” samt ”Ta bort sidkonfiguration”. Ordningen på sektionerna sparas automatiskt när du drar runt dem, men innehållet i fälten sparas först när du klickar på ”Spara”.
Dra och släpp
Du kan enkelt ändra ordningen på dina block genom att dra dem uppåt eller nedåt. Ta tag i blockets rubrik och dra den till önskad position. Ordningen sparas automatiskt.
Du kan också fälla ihop block för att få en bättre överblick om du har många block på en sida.
Konfiguration av block
Varje block har sina egna inställningar, beroende på typ. Vanliga alternativ är:
- Text och rubriker. Skriv direkt i en textredigerare.
- Bilder. Ladda upp bilder direkt från din dator.
- Bakgrundsvideo. Ladda upp eller välj en MP4-/WebM-video, t.ex. som bakgrund i en hero-banner. Videon spelas upp automatiskt, utan ljud och i loop på alla enheter.
- Produktval. Välj specifika produkter, kategorier eller landningssidor.
- Länkar och knappar. Lägg till URL:er och knapptexter.
- Upprepningsbara element. I vissa block (t.ex. banners) kan du lägga till flera element i samma block.
Du kan ge varje block ett eget namn, så att det blir enklare att hålla reda på dem i översikten.
Produktväljare i Delaware/DelawareDK
I Delaware och DelawareDK har flera Sidedesigner-sektioner (Produktlista, Produktslider och Produktfeature) ett fält som heter Product Selector. Detta fält används för att ange vilka produkter som ska visas i sektionen.
Så här använder du Product Selector
- Välj först en produkttyp i rullgardinsmenyn, t.ex. ”Efter kategoritagg”, ”Efter landningssidatagg” eller ”Efter produkt-ID”.
- Fyll sedan i fältet ”Product Selector” med det relevanta värdet (se nedan).
Om du väljer ”Newest Products”, ”Popular Products” eller ”Most Sold Products” som produkttyp behöver du inte fylla i fältet ”Product Selector”. Produkterna hämtas automatiskt.
Vad ska jag skriva i fältet?
Det beror på vilken produkttyp du har valt:
- ”By Category Tag”. Skriv in kategoriens tagg. Du hittar taggen genom att redigera kategorin i admin under fältet ”Tag”. Exempel: sommarerbjudanden
- Efter landningssidans tagg. Skriv landningssidans tagg. Du hittar taggen genom att redigera landningssidan i admin. Exempel: nyheter
- Efter produkt-ID (finns i produktlistan). Skriv produkt-ID:n åtskilda med kommatecken. Du hittar ett produkts ID i produktlistan eller i URL:en när du redigerar produkten. Exempel: 123,456,789
Tips: Produktväljare är ett begrepp som endast används i Delaware och DelawareDK. Andra teman kan ha liknande funktionalitet, men med andra fältnamn.
Allmänna kontra specifika inställningar
För dynamiska sidtyper finns det två sätt att använda Sidedesigner på:
- Allmän inställning. Gäller för alla sidor av en viss typ. Till exempel en inställning för alla kategorisidor.
- Specifik inställning. Gäller endast utvalda sidor. Till exempel en särskild inställning för en viss landningssida eller för kategorin ”försida”.
Specifika inställningar har företräde. Om en produkt har en egen inställning används den istället för den generella produktsidans inställning.
Smartare fält i Montana-temat
Montana-temat använder de senaste fälttyperna i Siddesigner, vilket gör det enklare att välja innehåll:
- Produktsökning. Sök och välj flera produkter samtidigt. De visas som taggar som du enkelt kan lägga till och ta bort.
- Kategorisökning. Välj kategorier och visa automatiskt produkter från dem.
- Landningssidesökning. Välj landningssidor och hämta deras produkter.
- Smart länkfält. Sök över produkter, kategorier, landningssidor, statiska sidor och blogginlägg. Varje resultat är märkt med en färgkod som visar vilken typ det är.
- Videofält. Ladda upp eller välj en bakgrundsvideo direkt i sektionen, t.ex. till hero-bannern. Stöder MP4 och WebM, och använder en bild i samma sektion som inlägg.
I Montanas produktlista och produktkarusell kan du kombinera produkter från flera källor (handplockade produkter, kategorier och landningssidor). Systemet tar automatiskt bort dubbletter.
Läs mer i vårt blogginlägg: Smartare fälttyper i Siddesigner.
Så här avgör ditt tema vad Sidedesigner kan
Sidedesigner är ramen. Själva blocken kommer från ditt tema. Det är därför två butiker kan ha väldigt olika möjligheter i samma Sidedesigner, och det förklarar de flesta frågorna av typen ”varför har jag inte det där blocket?”. Konkret är det temat som avgör:
- Vilka block som finns. Modulpanelen visar exakt de block som ditt tema tillhandahåller, varken fler eller färre.
- Vilka fält varje block har. Två teman kan båda ha en produktlista, men med helt olika inställningar. I Delaware fyller du i ett Product Selector-fält med en kategoritagg, medan du i Montana söker fram kategorier och klickar på dem.
- Vad fälten heter. Delaware är ett engelskt tema, så dess fältnamn är på engelska. DelawareDK och Montana är danska och visar danska fältnamn. Det är temats egna texter, inte ditt språkval i admin.
- Hur blocket ser ut. Design, färger, avstånd och responsivitet ligger i temat. Samma produktlista ser därför inte likadan ut i de två teman.
- Vilka sidtyper som kan utformas. Ett tema behöver inte stödja alla sidtyper.
- Om delade block är aktiverade. Möjligheten att placera sektioner både ovanför och under sidans huvudinnehåll är en inställning i temat.
- Om det finns temataggar. De extra innehållsplatserna som du kan utforma utöver de vanliga sidorna definieras av temat. Alaska2 har till exempel plats för fyra fotkolumner och en bottenrad.
Därför kan modulpanelen vara tom
När du skapar en ny layout visar Sidedesignern alltid alla fasta sidtyper i rullgardinsmenyn, oavsett vilket tema du använder. Men blocken dyker först upp om temat också stöder just den sidtypen. Om du till exempel väljer sidan ”Adress” i ett tema utan block för kassastegen får du en tom sidlayout utan moduler att välja mellan.
- Montana och MontanaB2B stöder alla sidtyper, inklusive alla steg i kassan, ordersidan, returcentret och önskelistan.
- Delaware och DelawareDK stöder kategorier (och därmed startsidan), produkter, landningssidor, statiska sidor, blogginlägg, söksidan, varukorgen, tack-för-beställningen-sidan, inloggning, skapa konto och Användarens beställningar. Däremot stöder de inte adresssidan, fraktsidan, godkännandesidan, betalningssidan, tilläggsköpsidan, ordersidan, returcentret eller önskelistan.
- Äldre och enklare teman kan vara begränsade till ett fåtal sidtyper. California har till exempel endast block för statiska sidor, kategorier och landningssidor.
Om panelen är tom är det alltså inte ett fel i Sidedesignern. Det är temat som saknar block för den typen av sida.
Vad händer när du byter tema?
Dina sektioner och deras innehåll hör till siduppsättningen, inte till temat, så de försvinner inte när du byter tema. Men det nya temat måste känna till blocket för att kunna visa det:
- Om blocket inte finns i det nya temat visas inte sektionens innehåll. I Montana visas istället ett tydligt meddelande på sidan om att sektionen saknas. Meddelandet är också synligt för dina kunder, så det måste åtgärdas omedelbart.
- Om blocket finns, men med andra fält, bevaras innehållet. De fält som det nya temat inte känner igen används helt enkelt inte. Om du till exempel byter från Delaware till Montana måste produktvalet i en produktlista ställas in på nytt, eftersom Delaware lagrar en tagg medan Montana lagrar specifika produkter, kategorier eller landningssidor.
- Om du byter tillbaka till det gamla temat är allt som förut.
Gå därför igenom dina sidinställningar och kontrollera dem i förhandsgranskningen direkt efter ett temabytet.
Egna teman och teman från temabutiken
Om du har ditt eget tema i butiken läses blocken in därifrån. Detsamma gäller ett tema från temabutiken. Ordningen är: först ditt eget tema, sedan ett tema från temabutiken och till sist ett av Shoporamas standardteman. Om du vill ha en ny block i ditt eget tema är det en uppgift för din temautvecklare. Se även Vilka teman finns på Shoporama?
Tips: Om du ska utvärdera ett nytt tema, titta på dess block innan du byter. Det är blocken, inte färgerna, som avgör hur långt du själv kan komma utan en utvecklare.
Delade block: block ovanför och under innehållet
Om ditt tema stöder delade block kan du placera block i två zoner: ovanför och under sidans huvudinnehåll. Det ger större flexibilitet i layouten. Du kan till exempel ha en hero-banner ovanför produktlistan och rekommendationer under.
När split blocks är aktiverat visar Sidedesigner två separata listor med en visuell markering av ”Sidans huvudinnehåll” däremellan. Du kan fritt dra block mellan de två zonerna.
Tips: Split blocks finns tillgängligt i Montana-temat och kan aktiveras av din utvecklare i andra teman. Läs mer i vårt blogginlägg: Split Blocks: placera block ovanför och under innehållet.
Förhandsgranskningslänk: dela utkast med kollegor och kunder
När du arbetar med en ny version av en sidlayout kan du behöva visa resultatet för en kollega eller kund innan du publicerar den. Det kan du göra med en förhandsgranskningslänk: en delbar länk som visar din layout i webbutiken, även om den är offline.
Så här fungerar det:
- Hitta layouten i sidredigerarens översikt eller öppna den för redigering.
- Klicka på ögonikonen i listan eller på förhandsgranskningsknappen högst upp i redigeringsvyn. Länken öppnar webbutiken i ett nytt flikfönster med din layout aktiverad.
- Om du vill dela länken med en kollega eller kund kopierar du den från adressfältet i den nya fliken. Du kan också högerklicka på ögonikonen i översikten och kopiera länkadressen.
Tips: När någon öppnar förhandsgranskningslänken kan personen klicka runt i webbutiken och fortfarande se inställningarna, eftersom länken sparas i en cookie. Högst upp på sidan visas en tydlig banner som informerar om att det är ett förhandsgranskningsläge som vanliga kunder inte kan se. Du stänger förhandsgranskningen igen genom att klicka på Stäng förhandsgranskning i bannern.
Förhandsgranskningslänkar indexeras inte av Google eller andra sökmotorer, så du kan dela dem utan att de dyker upp i sökresultaten.
Länken fungerar tills sidkonfigurationen raderas. Om en delad länk behöver dras tillbaka, t.ex. för att den har skickats till någon som inte längre ska ha åtkomst, skriv då till support@shoporama.dk så återställer vi den åt dig.
Mobil och dator: så här fungerar dina sektioner
Du skapar en layout, och samma layout visas på alla skärmar. Det finns ingen separat mobilversion som du redigerar för sig. Istället är blocken responsiva: de ändrar automatiskt antalet kolumner och staplar innehållet under varandra när skärmen blir smalare. Här är vad som faktiskt händer i Montana, så att du vet vad du kan räkna med när du bygger.
Antalet kolumner ändras beroende på skärmbredden
De flesta rutnätsblock fungerar i tre steg: mobil, surfplatta från cirka 768 pixlar och dator från cirka 1024 pixlar.
- Produktlista. 2 produkter per rad på mobil, 3 på surfplatta och 4 på dator.
- Produktkarusell och kategorikarusell. 2 synliga element på mobiltelefon, 3 från cirka 640 pixlar och 4 till 6 på stora skärmar. På mobiltelefonen bläddrar man i dem med fingret.
- Kategorilista. Beror på visningen: Stora bilder ger 1 per rad på mobilen, medelstora bilder ger 2, små bilder ger 3 och miniatyrer ger hela 5.
- Bildgalleri. Fältet ”Kolumner” gäller först från surfplatta och uppåt. På mobilen visas 2 kolumner oavsett vad du väljer, såvida du inte väljer 1 kolumn i full bredd.
- Värden/USP:er. 1 per rad på mobilen, 2 från cirka 640 pixlar och det antal per rad du valt först från cirka 1024 pixlar.
- Blogglista. 1 per rad på mobiltelefon, 2 på surfplatta och det antal kolumner du valt på dator.
Tvåkolumnsblock staplas, och ordningen spelar roll
- Text och bild. På mobilen staplas de två kolumnerna. Om du väljer Bildplacering: Vänster, placeras bilden överst och texten under. Om du väljer Höger, kommer texten först och bilden under. Om du har en viktig poäng som ska läsas först på mobilen, välj då Höger.
- Produktblock. Här visas produktbilden alltid överst på mobilen, oavsett om du har valt bildplacering till vänster eller höger. Inställningen gäller först från surfplatta och uppåt.
- Text i två kolumner, Kategorifunktion, Produktfunktion och Nyhetsbrev med delad bild. Alla staplas i en kolumn på små skärmar. Funktionsblocken och nyhetsbrevet växlar först till två kolumner från cirka 1024 pixlar, det vill säga först på dator.
- Fördelningar som 60/40 eller 33/66 gäller endast från surfplatta och uppåt. På mobiltelefon fyller båda delarna hela bredden.
Block där du själv måste tänka på mobilanpassning
- Stor banner. Du väljer höjden som Liten (40 % av skärmhöjden), Medel (60 %) eller Stor (hela skärmhöjden). Om du väljer Stor fyller bannern hela telefonens skärm, och allt annat hamnar under vikningen. Det kan vara precis vad du vill, men var medveten om det.
- Rubrikstorleken i den stora bannern finns just för att långa rubriker bryts på ett olyckligt sätt på smala skärmar. Sänk till ”Liten” om din rubrik tar mycket plats.
- Kategorifunktion. Antalet kategoribilder bredvid texten är detsamma på alla skärmar. Väljer du ”Miniatyr” får du 5 små bilder på bredden, även på en telefon. Välj ”Stora bilder” om mobilen är viktigast för dig.
- Textbanner. Teckenstorlekarna ”Extra stor” och ”Jätte” tar mycket plats på en mobil. Håll kampanjtexten kort.
- Bilder. Temat levererar automatiskt bilderna i WebP och i flera storlekar, så att en mobil hämtar en mindre fil än en dator. Du måste fortfarande ladda upp en skarp bild med bra upplösning. Läs mer i Optimering av bilder för mobil.
Så här kontrollerar du resultatet
- Öppna förhandsgranskningslänken på din egen mobil. Det är det mest realistiska testet, och du kan klicka dig runt i butiken medan förhandsgranskningen är aktiv.
- Alternativt kan du dra webbläsarfönstret så att det blir smalare på datorn och se hur sektionerna växlar under tiden.
- Om du kör en A/B-test på sidlayouten kan du i statistiken filtrera på Mobil, Surfplatta eller Dator och se om en variant vinner på den ena skärmen och förlorar på den andra. Läs mer i Så här skapar och kör du en A/B-test.
Viktigt: Du kan inte visa en sidlayout på mobil och en annan på dator. En sidlayout gäller för alla enheter. Om en enskild sektion endast ska visas på stora skärmar är det en CSS-uppgift för din utvecklare.
För utvecklare
I Montana pakas varje sektion in i ett section-element med attributet data-section, där värdet är blockets id, t.ex. data-section="hero". Det ger en stabil möjlighet att dölja eller justera en viss sektions typ vid givna skärmbredder från butikens egen stilmall, utan att ändra själva temat. Läs mer i Egen stilmall (Custom CSS).
Vanliga frågor
Kan jag skapa en separat layout för startsidan?
Ja. Försidan är den kategori som är markerad som förskatskategori. Det snabbaste sättet är kortet Försidan i Sidedesigner-översikten: klicka på Skapa layout, så skapas en kategoriinställning som är kopplad till din förskatskategori. Den inställningen används endast på startsidan, medan din allmänna kategorinställning används på alla övriga kategorisidor.
Finns det en 404-sida i Sidedesigner?
Nej. 404-sidan är inte en sidtyp som stöds i Sidedesigner. Den hanteras via ditt tema. Om du vill ändra utseendet på 404-sidan måste du justera temats mallar eller fråga din temautvecklare.
Vilka block kan jag välja mellan?
Det beror på ditt tema, och blocken har inte samma namn i alla teman. Delaware, DelawareDK och Montana har bland annat Hero (i Montana: Stor banner), Banner, Text, Text med bild, Produktlista, Produktslider (i Montana: Produktkarusell), Kategorilista, ett bildrutnätsblock (Image Grid i Delaware och DelawareDK, Bildgalleri i Montana), Blogglista, en USP-block (Value Propositions i Delaware, Värdeerbjudanden i DelawareDK och Värderingar/USP:er i Montana), Nyhetsbrev och en block för fri HTML-kod. Trustpilot finns i Delaware och DelawareDK, medan Textbanner och Mellanslag & avgränsare finns i Montana och MontanaB2B. Öppna en inställning och klicka på fliken Moduler till höger för att se den fullständiga listan som gäller för ditt tema.
Ser mina Sidedesigner-sidor bra ut även på mobilen?
Ja. Standardblocken i Delaware, DelawareDK och Montana är helt responsiva och anpassar sig automatiskt till mobilskärmar. Hero-bilder skalas ned, kolumner staplas under varandra och produktsliders förvandlas till karuseller som man kan svepa igenom. Använd komprimerade bilder så att sidan laddas snabbt även med mobildata.
Hur många specifika inställningar kan jag ha?
Det finns ingen övre gräns. Du kan skapa så många specifika inställningar du vill. Varje inställning kan kopplas till en eller flera specifika produkter, kategorier, landningssidor, statiska sidor eller blogginlägg.
Påverkar många Sidedesigner-block sidans hastighet?
Sidedesigner-utdata cachelagras, så själva visningen går snabbt. Det som vanligtvis påverkar hastigheten är antalet bilder och videor på sidan. Använd komprimerade bilder och lazy loading där det är möjligt.
Kan jag flytta ett block mellan två layouter?
Nej, block är kopplade till den layout de skapats i. Men du kan duplicera ett block inom samma layout och manuellt kopiera innehållet till en annan layout.
Kan jag se hur sidan ser ut medan jag redigerar?
Ja. Du kan klicka på knappen Förhandsgranska högst upp i redigeringsvyn, då öppnas en förhandsgranskningslänk till webbutiken i ett nytt fönster. Ordningen på sektionerna sparas automatiskt när du drar runt dem, men text, bilder och övriga fält sparas först när du klickar på Spara. Uppdatera sedan förhandsgranskningsfliken för att se resultatet. Även om inställningarna är offline kan du se dem via förhandsgranskningslänken, och du kan dela länken med kollegor eller kunder.
Kan jag utforma kassan med Sidedesigner?
Ja, om ditt tema stöder det. Varje steg i kassan (adresssidan, fraktsidan, godkännandesidan, betalningssidan och tacksidan) är en fast sidtyp där du kan lägga till t.ex. ett USP-block, ett textblock eller ett block med fri kod med extra säkerhetssignaler. Montana och MontanaB2B stöder alla steg i kassan, medan Delaware och DelawareDK endast stöder sidan ”Tack för beställningen”. Alaska2 stöder adresssidan, fraktsidan och betalningssidan, men varken bekräftelsessidan eller sidan ”Tack för beställningen”. Själva kassafälten styrs av temat, inte av blocken.
Vad är skillnaden mellan en ”dynamisk” och en ”fast” sidtyp?
Det finns många dynamiska sidtyper (Kategori, Produkt, Landningssida, Statisk sida, Blogginlägg), så du kan ha både en allmän inställning och flera specifika. Fasta sidor (varukorg, kassasteg, ordersida, inloggning osv.) finns bara en av per butik, så de kan bara ha en layout.
Jag kan inte hitta den block som min kollega har i sin butik. Varför?
Detta beror på att blocken kommer från temat och inte från Sidedesignern. Ni använder troligtvis två olika teman. Öppna en sidinställning och klicka på fliken Moduler till höger, så ser du exakt vilka block din butik har. Om du saknar ett visst block kan du antingen byta tema eller be en utvecklare att bygga in blocket i ert eget tema.
Kan jag skapa en layout för mobil och en annan för dator?
Nej. En sidlayout gäller för alla enheter, och blocken anpassar sig automatiskt efter skärmbredden. Om du vill optimera för mobil arbetar du med ordningen på sektionerna, höjden på den stora bannern, rubrikstorleken och hur mycket innehåll som ligger framför det viktigaste. Om du genomför en A/B-test kan du efteråt se i statistiken om en variant presterar bättre på mobil än på dator.
Vad händer med mina sektioner om jag byter tema?
De finns kvar. Sektioner och innehåll sparas i siduppställningen och inte i temat. Men det nya temat visar bara de block som det känner igen, och fält som det inte känner igen används inte. Gå därför igenom dina siduppsättningar och kontrollera dem i förhandsgranskningen direkt efter ett temabytet. Om något ser fel ut kan du byta tillbaka, och då är allt som förut.
Modulpanelen är tom på den sida jag just har skapat. Är det något fel?
Nej. Det betyder att ditt tema inte har några block för just den sidtypen. Sidedesignern visar alltid alla fasta sidtyper när du skapar en layout, men det är temat som avgör om det finns något att lägga till. Detta märks oftast i kassastegen, som inte alla teman stöder. Ta bort uppsättningen igen eller välj en sidtyp som ditt tema stöder.
Om du har frågor om Sidedesigner är du välkommen att kontakta oss på support@shoporama.dk.
Relaterade artiklar
Uppsättning av förstasidan
Lær hvordan du sætter forsiden op i din Shoporama-webshop. Forsiden er en kategori, som du kan tilpasse med Sidedesigner i understøttede temaer.
Konfiguration och anpassning med Delaware-tema
Komplett guide för att ställa in Delaware-temat på din Shoporama-webbutik. Sidfot, megameny, färger, betalningsikoner, Trustpilot, Instagram-länk...
Kategorier i din webbshop
Lär dig hur du skapar och hanterar kategorier i din Shoporama-webbutik. Guide till hierarkisk struktur, SEO-inställningar, import via CSV,...
Bilder på landningssidor
Så här laddar du upp bilder till en Shoporama-landningssida och visar dem korrekt i ditt tema med getImages() och getSrc().
Implementera Theme Builder i ditt tema
Guide för att implementera Shoporamas Theme Builder i ditt tema så att handlaren kan bygga sidor visuellt.