Siddesigner

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 Sidedesigner under Butik » Design » Sidedesigner 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 kategorinstä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 består av fasta sidor, där det endast kan finnas en layout per butik:

• Söksidan
• Varukorgen
• Adresssidan (vid utcheckning)
• Fraktsidan (i kassan)
• Bekräftelsessidan (vid utcheckning)
• Betalningssidan
• Tack-för-beställningen-sidan
• Tillval-sidan
• 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 Side Designer-inställningar för dem. De visas i en separat grupp vid skapandet.

Så här skapar du en sidkonfiguration

1. Gå till Butik » Design » Sidredigeraren.
2. Klicka på Skapa ny sidlayout.
3. Välj vilken sidtyp uppsättningen ska gälla för.
4. Ge eventuellt layouten ett namn så att du kan känna igen den i listan.
5. Klicka på Skapa. Du hamnar direkt i sektionsredigeraren, där du kan börja lägga till block.
6. 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.

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:

1. 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.
2. Gå till Siddesigner. Under rubriken Innehållssidor finns ett kort som heter Förstasidan.
3. Klicka på Skapa layout på det kortet. Siddesignern skapar en kategoriinställning som redan är kopplad till din startsidskategori.
4. 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 kategorinläggningen (eller temats standardinställning).

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. Fritextblock 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 på två kolumner.
• Produktlista. Visa produkter från en kategori, en landningssida eller baserat på popularitet/nyaste.
• 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.
• 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 (heter Anpassad kod i Montana och MontanaB2B). Ren HTML för full kontroll över innehållet. Koden visas där blocket ligger på sidan.

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 lagts till 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 är de på engelska. Om ett 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 mellanslag

• Rubrik. En riktig H1-rubrik för toppen av sidan, med justering till vänster, centrerad eller till höger och en valfri tunn understrykning. Använd den när sidan ska ha en sidorubrik 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 avstånd 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.

Block 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 en bakgrundsfärg, ljust eller mörkt överlägg och 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. Vart 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 nyhetsbrevsmodulen.

Modulpanelen: så här lägger du till en sektion

Du lägger till sektioner från en panel på höger sida av 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 ser ut precis 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 viks 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öp om, fäll 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 skapa två nästan identiska banners. Högst upp i sektionslistan finns en knapp som växlar mellan ”Fäll in alla” och ”Fäll ut alla”, så att du kan få en överblick ö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 meny 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 sektioner i Siddesigner (Produktlista, Produktslider och Produktfunktion) 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

1. Välj först en produkttyp i rullgardinsmenyn, t.ex. ”Efter kategoritagg”, ”Efter landningssidatagg” eller ”Efter produkt-ID”.
2. Fyll sedan i fältet ”Product Selector” med relevant värde (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 in produkt-ID:na åtskilda med kommatecken. Du hittar ett produkts ID i produktlistan eller i URL:en när du redigerar produkten. Exempel: 123,456,789

Allmänna kontra specifika inställningar

För dynamiska sidtyper finns det två sätt att använda Sidedesignern 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 ”Forsida”.

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 dessa.
• 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 avsnittet, t.ex. till hero-bannern. Stöder MP4 och WebM, och använder en bild i samma avsnitt 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 Sidedesigner.

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 vitt skilda 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 kategoritag, 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 två olika 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 Sidedesigner 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 adresssidan i ett tema utan block för utcheckningsstegen 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öpssidan, beställningssidan, 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 Sidedesigner. 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 till 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: ditt eget tema först, därefter ett tema från temabutiken och slutligen 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?

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 nedanför.

När delade block är aktiverade visar Sidedesigner två separata listor med en visuell markering av ”Sidans huvudinnehåll” däremellan. Du kan fritt dra block mellan de två zonerna.

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:

1. Hitta layouten i översikten i Sidedesignern, eller öppna den för redigering.
2. 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.
3. 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.

Förhandsgranskningslänkar indexeras inte av Google eller andra sökmotorer, så du kan dela dem utan att oroa dig för att de ska dyka 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å 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. 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 genom dem med fingret.
• Kategorilista. Beror på visningen: Stora bilder ger 1 per rad på mobiltelefonen, 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å mobiltelefon, 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 på varandra, och ordningen spelar roll

• Text och bild. På mobilen staplas de två kolumnerna. Väljer du Bildplacering: Vänster, placeras bilden överst och texten under. Väljer du Höger, kommer texten först och bilden under. Har du 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 till 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å datorn.
• 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), Medium (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 därfö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 mobil. 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 telefon hämtar en mindre fil än en dator. Du måste fortfarande ladda upp en skarp bild med god upplösning. Läs mer i Optimering av bilder för mobil.

Så här kontrollerar du resultatet

1. Öppna förhandsgranskningslänken på din egen mobil. Det är det mest realistiska testet, och du kan klicka runt i butiken medan förhandsgranskningen är aktiv.
2. Alternativt kan du dra webbläsarfönstret så att det blir smalare på datorn och se hur sektionerna växlar under tiden.
3. 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.

Till utvecklare

I Montana paketas 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 ett stabilt grepp för att dölja eller justera en viss sektions typ vid givna skärmbredder från webbutikens eget stilark, utan att röra själva temat. Läs mer i Eget stilark (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 att använda kortet Försidan i översikten i Siddesigner: 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 Siddesigner?

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: Stort 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 layouter du vill. Varje layout 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, blocken är kopplade till den layout där de skapades. 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 en ny flik. 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, bekräftelsessidan, 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 din beställning”. Alaska2 stöder adresssidan, fraktsidan och betalningssidan, men varken bekräftelsessidan eller sidan ”Tack för din beställning”. 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 sidkonfiguration 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å avsnitten, höjden på den stora bannern, rubrikstorleken och hur mycket innehåll som ligger framför det viktigaste. Om du kör en A/B-test kan du efteråt se i statistiken om en variant presterar bättre på mobilen än på datorn.

Vad händer med mina sektioner om jag byter tema?

De finns kvar. Avsnitt och innehåll sparas i siduppsättningen 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 siduppställningar och kontrollera dem i förhandsgranskningen direkt efter ett temabyt. Om något ser fel ut kan du byta tillbaka, och då blir 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. Det 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.

Kan jag infoga en verifieringsmetatagg från Google Search Console med HTML-blocket?

Nej. HTML-blocket (i Montana Anpassad kod) infogar endast kod där blocket placeras i layouten, det vill säga i sidans innehåll. En metatagg fungerar endast i sidans <head>, och därför hittar Google den inte. Använd istället Webshop → HTML-fält i admin, infoga taggen i ett fält och ställ in Placering på Infoga sist i <head>. Detta gäller även Bing Webmaster Tools, Pinterest, Meta, Cookiebot och Google Tag Manager. Så här använder du HTML-fält.

Om du har frågor om Sidedesigner är du välkommen att kontakta oss på support@shoporama.dk.