Siddesigner

Med Page Designer bygger du din egen sidlayout genom att lägga till, flytta och konfigurera innehållsblock. Du kan skapa unika layouter för din förstasida, kategorisidor, produktsidor, landningssidor, kassan och många fler typer av sidor. Allt utan att behöva koda.

Var hittar jag Page Designer?

Du hittar Page Designer under Konto " Online Shop " Page Designer i din Shoporama-administration. Här kan du skapa nya siduppsättningar eller redigera befintliga.

Vilka typer av sidor stöder Page Designer?

Page Designer 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 typen eller bara för utvalda sidor:

• Kategori (inklusive startsidan). Layouten för alla kategorisidor och förstasidan. Förstasidan är den kategori som är markerad som förstasidans kategori, så om du vill ha en specifik layout på förstasidan skapar du en specifik kategoriinställning som pekar på den valda kategorin.
• Produkt. Layouten för produktsidor.
• Landningssida. Layouten för landningssidor.
• Statisk sida. Layouten för statiska sidor, t.ex. Om oss och Villkor och bestämmelser.
• Blogginlägg. Layouten för blogginlägg.

Den andra gruppen är fasta sidor, där det bara kan finnas en layout per shop:

• Sök-sida
• Korgen
• Adressida (i kassan)
• Fraktsida (i kassan)
• Auktorisationssida (i kassan)
• Betalningssida
• Tack för beställningen-sida
• Säljarens sida
• Beställningssida
• Returcenter
• Inloggningssida
• Användarens beställningar
• Användarens önskelista

Om ditt tema definierar anpassade temataggar (återanvändbara innehållsplatser) kan du även skapa Page Designer-inställningar för dem. De visas i en separat grupp när de skapas.

Så här skapar du en siduppsättning

1. Gå till Konto " Webbshop " Siddesigner.
2. Klicka på Skapa ny.
3. Välj vilken sidtyp som inställningen ska gälla för.
4. För dynamiska sidtyper (Kategori, Produkt, Landningssida, Statisk sida, Blogginlägg) kan du välja om inställningen ska gälla för alla sidor av den typen eller bara för specifika sidor. För fasta sidor kan det bara finnas en layout per butik.
5. Eventuellt kan du ge inställningen ett namn så att du kan känna igen den i listan.
6. Spara och börja lägga till block.

Hur man bygger en förstasida

Förstasidan är en vanlig kategori som är markerad som en förstasideskategori. Om du vill ge förstasidan ett speciellt utseende gör du så här:

1. Se till att du har en kategori som är markerad som en förstasideskategori (görs på själva kategorin). Läs mer i Konfigurera förstasidan.
2. Gå till Siddesigner och klicka på Skapa ny.
3. Välj sidtypen Kategori (inklusive förstasida).
4. Välj Specifika sidor och tilldela din förstasideskategori.
5. Lägg till de block som ska utgöra förstasidan, t.ex. en hero section, en product slider, value propositions och en blog list.

Den specifika konfigurationen används nu på förstasidan, medan dina andra kategorier körs med den allmänna kategorikonfigurationen (eller temats standardinställning).

Tillgängliga blocktyper

Vilka blocktyper som är tillgängliga beror på ditt tema. Här är de vanligaste i Delaware, DelawareDK och Montana:

• Hjälte. Stor hero-sektion med rubrik, beskrivning, knapp och bakgrundsbild.
• Banner. Bilder i karusell-/liderformat.
• Text. Fritextblock med rubrik och formatering.
• Text med bild. Tvåspaltig text med text på ena sidan och bild på den andra.
• Text itvå kolumner. Text uppdelad i två kolumner.
• Produktlista. Visa produkter från en kategori, landningssida eller baserat på popularitet/nyaste.
• Produktslider. Produkter i karusellformat.
• Kategorilista. Visa produktkategorier.
• Skjutreglage för kategori. Kategorier i karusellformat.
• Bildgalleri. Rutnät med bilder med valfria länkar.
• Adress & karta. Visa butikens adress med en interaktiv karta. Ingen Google Maps API-nyckel krävs. Läs mer om hur det fungerar.
• Facebook. Följ-knapp för din Facebook-sida (eller ladda ett flöde via anpassad kod).
• Instagram. Visa din offentliga Instagram-profil med senaste inlägg, en följ-knapp eller båda.
• Lista över bloggar. Visa de senaste blogginläggen.
• Trustpilot. Widget för Trustpilot-recensioner.
• Värdeförslag. Lyft fram dina USP:er, t.ex. fri frakt eller snabb leverans.
• Knapp. Call-to-action-knapp med länk.
• RenHTML för full kontroll över innehållet.

Om du använder ett annat tema kan listan se annorlunda ut. Klicka på Add block in a setup för att se vilka block som ditt tema faktiskt stöder.

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 det till önskad position. Ordningen sparas automatiskt.

Du kan också kollapsa 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å vilken typ det är. Typiska alternativ är bland annat:

• 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 hjältebanner. Videon spelas upp automatiskt, ljudlöst och i en loop på alla enheter.
• Produktval. Välj specifika produkter, kategorier eller landningssidor.
• Länkar och knappar. Lägg till webbadresser 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 för att göra det lättare att hålla reda på dem i översikten.

Produktväljare i Delaware/DelawareDK

I Delaware och DelawareDK har flera Page Designer-sektioner (Product List, Product Slider och Product Feature) ett fält som heter Product Selector. Det här fältet används för att ange vilka produkter som ska visas i avsnittet.

Så här använder du produktväljaren

1. Välj först en produkttyp i rullgardinsmenyn, t.ex. "Efter kategoritagg", "Efter landningssidetagg" eller "Efter produkt-ID".
2. Fyll sedan i fältet Product Selector med lämpligt värde (se nedan).

Om du väljer "Nyaste produkter", "Populära produkter" eller "Mest sålda produkter" som produkttyp behöver du inte fylla i fältet Product Selector. Produkterna kommer att hämtas automatiskt.

Vad ska jag skriva i fältet?

Det beror på vilken produkttyp som har valts:

• Efter kategoritagg. Ange kategoritaggen. Du hittar taggen genom att redigera kategorin i admin under fältet "Tagg". Exempel: Sommarerbjudande
• Efter tagg för landningssida. Ange taggen för landningssidan. Du hittar taggen genom att redigera landningssidan i admin. Exempel: nyheter
• Efter produkt-id. Skriv in produkt-ID:n åtskilda med kommatecken. Du kan hitta en produkts ID i produktlistan eller i URL:en när du redigerar produkten. Exempel: 123,456,789

Allmänna vs. specifika inställningar

För dynamiska sidtyper finns det två sätt att använda Page Designer:

• 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 bara för utvalda sidor. Till exempel en specifik inställning för en specifik landningssida eller för kategorin förstasida.

Specifika inställningar har företräde. Om en produkt har en egen inställning används den i stället för den allmänna inställningen för produktsidan.

Smartare fält i Montana-temat

I Montana-temat används de senaste fälttyperna i Page Designer som gör det enklare att välja innehåll:

• Produktsökning. Sök och välj flera produkter på en gång. De visas som taggar som du enkelt kan lägga till och ta bort.
• Kategorisökning. Välj kategorier och visa automatiskt produkter därifrån.
• Sökning på landningssida. Välj landningssidor och få upp deras produkter.
• Fält för smarta länkar. Sök bland produkter, kategorier, landningssidor, statiska sidor och blogginlägg. Varje resultat markeras med en färgkodad badge.
• Fält förvideo. Ladda upp eller välj en bakgrundsvideo direkt i avsnittet, t.ex. för hjältebannern. Stödjer MP4 och WebM och använder en bild i samma avsnitt som posterna.

I Montanas produktlista och produktslider 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 Page Designer.

Split Blocks: block ovanför och under innehållet

Om ditt tema stöder delade block kan du placera block i två zoner: ovanför och nedanför sidans huvudinnehåll. Detta ger dig mer flexibilitet i layouten. Du kan t.ex. ha en hjältebanner ovanför produktlistan och rekommendationer nedanför.

När delade block är aktiva visar Page Designer två separata listor med en visuell markör för "Huvudinnehåll på sidan" däremellan. Du kan dra blocken fritt mellan de två zonerna.

Förhandsgranskningslänk: dela utkast med kollegor och kunder

När du arbetar med en ny version av en siduppsättning kan du behöva visa resultatet för en kollega eller kund innan du går live. Det kan du göra med förhandsgranskningslänken: en delbar länk som visar din installation i shoppen, även om den är offline.

Så här fungerar det:

1. Hitta installationen i siddesignerns översikt eller öppna den för redigering.
2. Klicka på ögonikonen i listan eller på knappen Förhandsgranska högst upp i redigeringsvyn. Länken öppnar shoppen i en ny flik med dina inställningar aktiverade.
3. Om du vill dela länken med en kollega eller kund kan du kopiera den från adressfältet eller använda fliken Inställningar där den visas som ett fält som du enkelt kan kopiera.

Förhandsgranskningslänkar indexeras inte av Google eller andra sökmotorer, så du kan tryggt dela dem utan att de dyker upp i sökresultaten.

Om en länk behöver dras tillbaka, t.ex. för att den har delats med någon som inte längre ska ha tillgång till den, kan du klicka på Ny länk bredvid URL-fältet. Den gamla länken slutar att fungera omedelbart och en ny länk genereras.

Vanliga frågor och svar

Kan jag skapa en separat layout för förstasidan?

Ja, det kan du göra. Förstasidan är den kategori som är markerad som förstasidans kategori. Skapa en Page Designer-inställning av typen Kategori, välj "specifika sidor" och tilldela din förstasideskategori. Då används den inställningen bara på förstasidan och din allmänna kategoriinställning används på alla andra kategorisidor.

Finns det en 404-sida i Page Designer?

Nej. 404-sidan är inte en sidtyp som stöds i Page Designer. Den styrs via ditt tema. Om du vill ändra utseendet på 404-sidan måste du justera temamallarna eller fråga din temautvecklare.

Vilka block kan jag välja mellan?

Det beror på vilket tema du har. Delaware, DelawareDK och Montana har Hero, Banner, Text, Text med bild, Produktlista, Produktslider, Kategorilista, Bildgalleri, Blogglista, Trustpilot, Värdeförslag, Knapp och ett HTML-block med fri kod. Klicka på Lägg till block i en installation för att se hela listan som gäller för ditt tema.

Ser mina Page Designer-sidor bra ut i mobilen?

Ja, det gör de. Standardblocken i Delaware, DelawareDK och Montana är helt responsiva och anpassar sig automatiskt till mobilskärmar. Hjältebilder skalas ner, kolumner staplas under varandra och produktsliders blir svepbara karuseller. Använd komprimerade bilder så att webbplatsen är snabb även på 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 som du vill. Varje uppsättning kan kopplas till en eller flera specifika produkter, kategorier, landningssidor, statiska sidor eller blogginlägg.

Påverkar många Page Designer-block sidhastigheten?

Page Designers utdata cachas, så själva renderingen är snabb. 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å inställningar?

Nej, blocken är länkade till den layout de skapades i. Du kan dock 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, det kan du. Du kan klicka på knappen Förhandsgranska längst upp i redigeringsvyn så öppnas en förhandsgranskningslänk till butiken i en ny flik. Page Designer sparar ändringar automatiskt, så du behöver bara uppdatera förhandsgranskningsfliken efter varje ändring för att se resultatet. Även om installationen är offline kan du se den via förhandsgranskningslänken - och du kan dela länken med kollegor eller kunder.

Kan jag designa kassan med Page Designer?

Ja, det kan du. Varje steg i kassan (adresssida, leveranssida, godkännandesida, betalningssida och tacksida) är en fast sidtyp där du kan lägga till Trustpilot-widgets, värdepropositioner, informationsrutor och ett HTML-block med extra säkerhetssignaler. Själva kassafälten styrs dock av temat, inte av blocken.

Vad är skillnaden mellan en "dynamisk" och en "fast" sidtyp?

Dynamiska sidtyper (kategori, produkt, landningssida, statisk sida, blogginlägg) finns det många av, så du kan ha både en allmän inställning och flera specifika. Fasta sidor (korg, kassasteg, ordersida, inloggning etc.) finns bara en per butik, så de kan bara ha en layout.

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