Delaware og DelawareDK: alle moduler i sidedesigneren

Sådan bruger du guiden

I sidedesigneren bygger du sider op af sektioner: vandrette bånd som et banner, en produktslider, eller en tekst. Et modul er den type byggeklods, du vælger i panelet Tilføj sektion. Når du tilføjer det, bliver det en sektion på siden med dine egne tekster og billeder, og du kan bruge det samme modul flere gange. Hvilke moduler du kan vælge imellem, og hvordan de ser ud, bestemmer temaet. Guiden gennemgår alle moduler i Delaware og DelawareDK. De to temaer har præcis de samme 24 moduler med de samme felter. DelawareDK er den danske udgave, og guiden bruger dens navne med det engelske navn fra Delaware i parentes. Hvert modul har sit eget afsnit, så du kan hoppe direkte til det, du er ved at bygge.

Er du ny i sidedesigneren, så start med lektion 9 om forsiden, der viser, hvordan du opretter et sidelayout, og lektion 2 om forskellen på tema, temaindstillinger, og sidedesigner. Farver, billedformat, kategorikort, og værditilbud sætter du i temaindstillingerne for Delaware. Trustpilot og Clerk sætter du op under Integrationer, som er beskrevet i guiden til kassen, mails, og integrationer i Delaware.

Tilføj, ret, og gem et modul

1. Gå til Design → Sidedesigner, og åbn det sidelayout, du vil bygge. Du kan også klikke på ikonet Rediger sideopsætning ud for en kategori, en landingsside, en side, eller et blogindlæg i listerne. Ud for et produkt hedder det Sideopsætning i produktets menu.
2. Find modulet i panelet Tilføj sektion til højre. Skriv i Søg moduler for at finde det hurtigt. Er panelet lukket, åbner fanen Moduler i højre kant det.
3. Klik på modulet, så lægges det nederst under Sektioner. Du kan også trække det derhen, hvor det skal ligge.
4. Fold sektionen ud med pilen i dens topbjælke. En ny sektion er foldet sammen, når den lige er tilføjet.
5. Udfyld felterne, og klik på Gem. Brug Preview øverst til at se siden i butikken.

1. Søg moduler filtrerer listen på navn og beskrivelse.
2. Klik på et modulkort for at tilføje det nederst, eller træk det på plads.
3. En sektion under Sektioner. Træk i topbjælken for at flytte den.
4. Pilen folder sektionen ud og sammen.
5. Gem gemmer tekster, links, og billeder i alle sektioner.

Rækkefølgen gemmes med det samme, når du trækker en sektion, mens tekster, links, og billeder først gemmes, når du klikker på Gem. En ny sektion vises først i butikken, når du har gemt den. Der er ingen kladde: er layoutet online, kan kunderne se det, du gemmer. Et layout, der ikke er online, kan du stadig se med Preview.

Delawares 24 moduler

Guiden følger rækkefølgen i panelet Tilføj sektion. Grupperet efter formål er modulerne (klik for at gå til afsnittet):

• Bannere og billeder: Hero, Hero-video med kategori/landingsside, Bannere, og Image Grid.
• Tekst: H1-element, Tekst, Tekst - to kolonner, og Tekst med billede - to kolonner.
• Produkter: Produktliste, Produktslider, Produkt-feature, Produktblok, og Anbefalinger.
• Kategorier: Kategoriliste, Kategorislider, og Kategori-feature.
• Blog og nyhedsbrev: Blogliste og Nyhedsbrev.
• Tillid og fordele: Trustpilot og Værditilbud.
• Kort og sociale medier: Adresse & kort, Facebook, og Instagram.
• Hjælpemodul: Tilpasset kode.

Hvor på siden modulerne vises

Du vælger sidetypen under Indstillinger øverst i sidedesigneren. Forsiden er en kategori i Shoporama, så den bygger du med sidetypen Kategori (inkl. forsiden). Lektion 9 om forsiden viser, hvordan du gør.

Alle 24 moduler kan bruges på alle de sidetyper, hvor Delaware viser sektioner. Den eneste undtagelse er Anbefalinger, som kun findes på kategorier (inkl. forsiden), landingssider, produkter, søgesiden, kurven, merkøbssiden, og 404-siden. Derfor nævner afsnittene om modulerne kun sidetyper under Anbefalinger.

Delaware har kun én zone til sektioner, og hvor den ligger, afhænger af sidetypen:

• Forsiden: kun sektionerne. Uden et layout viser Delaware op til 6 kategorier og forside-kategoriens produkter.
• Kategorier: under produkterne, i samme kolonne som dem. Sektionerne vises kun, når kategorien har produkter, og Kategorilayout i temaindstillingerne står på Standard.
• Landingssider: øverst, over landingssidens navn og produkter.
• Produkter: nederst på produktsiden.
• Statiske sider: under sidens tekst. Har siden valgt en Skabelon under Udvidelser, fx Vilkår og betingelser, vises sektionerne ikke.
• Blogindlæg: i stedet for indlæggets tekst.
• Søgesiden, kurven, tak-for-ordre-siden, merkøbssiden, 404-siden, login-siden, opret-konto-siden, og brugerens ordrer: nederst på siden.

Felter der går igen

• Links. Felter som Link, Knaplink, og Primær knaplink er almindelige tekstfelter i Delaware. Skriv adressen selv, fx /kaffeboenner for en side i butikken eller en fuld adresse, der starter med https://. Kopiér gerne adressen fra browseren. Ændrer du adressen på siden, skal du også rette linket.
• Billede. Klik på Vælg fil, og vælg et JPG-, PNG-, eller WebP-billede. Billedet uploades, når du klikker på Gem, og et nyt billede erstatter det gamle. Slet billede fjerner det. Afsnittet om hvert modul fortæller, hvordan Delaware beskærer billedet. Læs også om billedkvalitet og billedformat.
• Lister med Tilføj. Bannere og Image Grid har knappen Tilføj, der laver et nyt tomt element. Træk i bjælken over et element for at ændre rækkefølgen, og klik på Slet i bjælken for at fjerne det.
• Tags. Flere moduler finder en kategori eller en landingsside via et tag. Tagget skriver du på kategorien eller landingssiden under Avanceret i feltet Tag. Skriv præcis det samme tag i modulet, fx forside-kaffe.
• ID'er. Nogle felter tager ID'er på produkter eller kategorier, adskilt med komma, fx 19112,19113. Du finder ID'et sidst i adressen, når du redigerer produktet eller kategorien i admin. Se også find ID på produkt, kategori, og ordre.
• Produkt-ID i Produktblok. Her søger du produktet frem i stedet for at skrive ID'et. Skriv mindst to tegn, og klik på et resultat. Kun produkter, der er online, kan søges frem.
• Tekst med formatering. Delaware fjerner farver, skriftstørrelser, og justering, du sætter i teksteditoren, så teksten følger temaets typografi. En overskrift 1 bliver vist som overskrift 2, og tomme afsnit fjernes. Se hvorfor teksten ser anderledes ud i shoppen.

H1-element (H1 element)

En stor overskrift. Brug den til at give en side, der kun består af sektioner, en tydelig hovedoverskrift, fx forsiden.

1. H1-element er selve overskriften.

• H1-element (H1 element). Teksten, som Delaware viser som sidens H1-overskrift, venstrestillet i indholdets bredde og i temaets overskriftsstørrelse. Hjælpeteksten ved feltet siger "Kun en H1-overskrift".

1. Overskriften fra feltet H1-element.

Kategoriliste (Category List)

Kategorier som kort med billede og navn. Brug den på forsiden, så kunderne hurtigt finder rundt i sortimentet.

1. Kategoritype bestemmer, hvordan kategorierne findes.
2. Kategorivælger med kategoriernes ID'er, adskilt med komma.
3. Maksimalt antal kategorier. Tomt viser alle.

• Titel (Title). Overskriften (H2) over kortene.
• Link (Link). Har ingen virkning i Delaware.
• Kategoritype (Category Type). Alle viser alle kategorier i alfabetisk rækkefølge, også underkategorier, kategorier der er offline, og forside-kategorien. Via tag viser kun kategorier med tagget front, uanset hvad du skriver i Kategorivælger. Via ID'er viser de kategorier, hvis ID'er du skriver i Kategorivælger, i den rækkefølge du skriver dem.
• Kategorivælger (Category Selector). Kategoriernes ID'er adskilt med komma, fx 19112,19113. Bruges kun ved Via ID'er. Kategorier der er offline, kommer også med, så skriv kun ID'er på kategorier, der er online.
• Maksimalt antal kategorier (Maximum Categories to show). Det højeste antal kategorier. Tomt viser alle.

Kortet viser kategoriens første billede og navn, og hele kortet er et link til kategorien. Med standardlayoutet står der to kort pr. række på mobilen, fire på tablet, fem på computer, og seks på store skærme. Kortenes udseende sætter du med Kategorikort-layout under Kategorier og Billedformat under Billeder i temaindstillingerne. Findes der ingen kategorier, vises modulet ikke.

1. Overskriften fra Titel.
2. Ét kategorikort med kategoriens første billede og navn.

Kategori-feature (Category feature)

Modulet er tænkt som en flade med overskrift, tekst, knap, og tre kategorier over et baggrundsbillede. Det virker ikke i Delaware: temaet har ikke den skabelon, der viser modulet i butikken. Lægger du det på en side, ser kunderne en rød boks med teksten "Du mangler sektionen {x}" i DelawareDK og "You are missing the section {x}" i Delaware.

1. Modulets navn i topbjælken.
2. Slet fjerner sektionen igen.

Felterne gemmes, men har ingen virkning i butikken:

• Titel (Title). Tænkt som overskrift på fladen.
• Manchet (Lead text). Tænkt som tekst under overskriften.
• Knaptekst (Button text) og Knaplink (Button link). Tænkt som en knap med tekst og link.
• Kategorivælger 1, 2, og 3 (Category selector 1, 2 and 3). Tænkt som tags på tre kategorier.
• Billede (Image). Tænkt som baggrundsbillede.
• Billedoverlay (Image overlay). Lys eller Mørk. Tænkt som et slør over billedet.

Kategorislider (Category Slider)

Kategorier på en vandret række, som kunden bladrer i med pile. Brug den, når du har mange kategorier og vil holde siden kort.

1. Link giver slideren et "Se mere"-link.
2. Kategoritype bestemmer, hvordan kategorierne findes.
3. Kategorivælger med tag eller ID'er.

• Titel (Title). Overskriften (H2) til venstre for pilene.
• Link (Link). Viser linket "Se mere" ved siden af pilene, fx til en overordnet kategori. Tomt viser intet link.
• Kategoritype (Category Type). Alle viser alle kategorier i alfabetisk rækkefølge, også underkategorier, kategorier der er offline, og forside-kategorien. Via tag viser alle kategorier med det tag, du skriver i Kategorivælger. Via ID'er viser de kategorier, hvis ID'er du skriver, i den rækkefølge du skriver dem.
• Kategorivælger (Category Selector). Ét tag, fx kaffe-slider, eller kategoriernes ID'er adskilt med komma. Tomt ved Alle.

Slideren viser højst 20 kategorier. Der står to kort ad gangen på mobilen, tre fra tabletbredde, fire på computer, og fem på store skærme. Pilene vises kun, når der er flere kategorier, end der er plads til. Kortene ser ud som i Kategoriliste. Findes der ingen kategorier, vises modulet ikke.

1. Overskriften fra Titel.
2. "Se mere" vises, fordi Link er udfyldt.
3. Pilene til at bladre. De vises kun, når der er flere kategorier, end der er plads til.

Produktliste (Product list)

Produkter i et gitter med billede, pris, og evt. knappen til kurven. Brug den til et udvalg fra en kategori eller en landingsside, fx på forsiden.

1. Produkttype bestemmer, hvor produkterne kommer fra.
2. Produktvælger med kategoriens tag.
3. Maksimalt antal produkter. Tomt giver 10.

• Titel (Title). Overskriften (H2) over produkterne.
• Produkttype (Product Type). Nyeste produkter viser trods navnet produkter, der er online, i alfabetisk rækkefølge, ikke de senest oprettede. Populære produkter og Mest solgte produkter giver samme liste: de produkter, der er solgt flest af i betalte ordrer de seneste 90 dage, dog højst 25. Via landingsside-tag viser produkterne fra landingssiden med det tag, du skriver i Produktvælger. Via kategori-tag viser de online produkter i kategorien med tagget.
• Produktvælger (Product Selector). Tagget på kategorien eller landingssiden. Bruges kun ved de to tag-typer.
• Maksimalt antal produkter (Maximum Products to show). Det højeste antal produkter. Tomt giver 10.

Produkterne står to pr. række på mobilen, tre på tablet, fire på computer, og fem på store skærme. Hvad produktkortet viser, fx mærke, lagerstatus, og knappen til kurven, sætter du under Produkt: Kort i temaindstillingerne.

1. Overskriften fra Titel.
2. Ét produktkort. Indholdet følger temaindstillingerne under Produkt: Kort.

Anbefalinger (Recommendations)

Produkter der vælges automatisk ud fra, hvad kunden og andre kunder har set og købt. Brug det på produktsider, i kurven, og på 404-siden for at give kunden et relevant næste klik. Læs mere om anbefalinger.

Sidetyper: kategorier (inkl. forsiden), landingssider, produkter, søgesiden, kurven, merkøbssiden, og 404-siden. Modulet findes ikke på de andre sidetyper.

1. Overskrift vises kun, når der er anbefalinger at vise.
2. Anbefalingstype bestemmer, hvordan produkterne vælges.
3. Antal produkter er det højeste antal, der vises.

• Overskrift (Heading). Fx "Andre kiggede også på". Er der intet at anbefale, skjules hele modulet, også overskriften.
• Brødtekst (Lead text). Valgfri tekst under overskriften.
• Placering (Placement). Centreret eller Venstre for overskrift og brødtekst.
• Anbefalingstype (Recommendation type). Automatisk (efter sidetype) viser "Andre købte også" i kurven og på merkøbssiden, "Populære" på søgesiden og 404-siden, og "Andre så også" på de øvrige sider. Du kan også vælge Andre så også, Andre købte også, Relaterede produkter, Populære lige nu, eller Kundens senest sete. Er der for lidt data, suppleres der med lignende og populære produkter. Kundens senest sete suppleres ikke, så den er tom for en ny besøgende.
• Antal produkter (Number of products). Det højeste antal produkter. Standard er 4.

1. Overskriften fra Overskrift.
2. De anbefalede produkter.

Produktslider (Product Slider)

Produkter på en vandret række, som kunden bladrer i med pile. Brug den, når du vil vise et udvalg uden at gøre siden lang.

1. Link giver slideren et "Se mere"-link.
2. Produkttype bestemmer, hvor produkterne kommer fra.
3. Produktvælger med produkternes ID'er, adskilt med komma.

• Titel (Title). Overskriften (H2) til venstre for pilene.
• Link (Link). Viser linket "Se mere" ved siden af pilene, fx til hele kategorien. Tomt viser intet link.
• Produkttype (Product Type). Nyeste viser trods navnet produkter i alfabetisk rækkefølge. Populære og Mest solgte giver samme liste: de mest solgte produkter i betalte ordrer de seneste 90 dage. Via landingsside-tag og Via kategori-tag henter produkterne fra landingssiden eller kategorien med tagget. Via produkt-ID'er viser de produkter, hvis ID'er du skriver, i den rækkefølge du skriver dem. De fem Clerk-typer (Nyeste, Populære, Trending, Nyligt købt, og Kigges på nu) henter produkter fra Clerk.io og kræver, at Clerk er sat op under Integrationer i temaindstillingerne.
• Produktvælger (Product Selector). Tagget, eller produkternes ID'er adskilt med komma, fx 232179,232185. Bruges kun ved tag- og ID-typerne.

Slideren viser højst 8 produkter, og med Clerk højst 10. Der står to produkter ad gangen på mobilen, tre fra tabletbredde, fire på computer, og fem på store skærme, og pilene vises kun, når der er flere produkter, end der er plads til. Kun produkter, der er online, vises.

1. Overskriften fra Titel.
2. "Se mere" vises, fordi Link er udfyldt.
3. Pilene til at bladre.

Bannere (Banners)

Kampagnebannere side om side, hvert med billede, titel, undertitel, og knap. Brug dem til at pege på en kategori, en nyhed, eller et tilbud.

1. Ét banner. Træk i bjælken for at flytte det, og klik på Slet for at fjerne det.
2. Link gør hele banneret klikbart.
3. Tilføj laver et nyt tomt banner.

Felterne for hvert banner:

• Titel (Title). Står nederst på billedet i hvid, fed skrift som en H2.
• Undertitel (Subtitle). En kort linje under titlen. Den vises fra tabletbredde og er skjult på mobilen.
• Knap (Button). Teksten på knappen i temaets primære farve. Knappen vises altid, så udfyld feltet, ellers står der en tom knap.
• Link (Link). Hele banneret er et link hertil. Er feltet tomt, fører et klik tilbage til samme side, så udfyld det altid.
• Billede (Image). Beskæres til liggende 4:3. Nederst lægger Delaware en mørk skygge bag teksten, så hold motivet i den øverste del af billedet.
• Alt-tekst (Alt tekst). Har ingen virkning i Delaware.

På mobilen står bannerne under hinanden, og fra lidt større skærme står de to og to side om side. Brug derfor et lige antal bannere.

1. Titel og Undertitel.
2. Knappen med teksten fra Knap. Hele banneret er et link.

Image Grid (Image Grid)

Billeder med overskrift, hvor hvert billede kan linke videre. Modulet og dets felter står på engelsk i både Delaware og DelawareDK, og hjælpeteksten anbefaler fire kvadratiske billeder. Delaware har dog ingen gitter-opsætning til modulet, så billederne står under hinanden i hele indholdets bredde i stedet for fire på en række.

1. Title er overskriften over billederne.
2. Ét billede. Træk i bjælken for at flytte det, og klik på Slet for at fjerne det.
3. Link (optional) gør billedet klikbart.
4. Tilføj laver et nyt tomt billede.

• Title. Valgfri overskrift (H2) over billederne.
• Images. Listen med billeder. Hvert billede har felterne nedenfor.
• Image. Billedet. Det beskæres til kvadratisk og vises i et liggende udsnit, så den nederste del af billedet skæres fra.
• Alt text. Har ingen virkning i Delaware.
• Link (optional). Gør billedet klikbart.

Modulet vises kun, når der er mindst ét billede.

1. Overskriften fra Title.
2. Første billede. Det næste står under det.

Tekst (Text)

Fri tekst med formatering: mellemrubrikker, fed skrift, lister, og links. Brug den til en kort historie om butikken, en købsvejledning, eller en tekst til Google på en kategori.

1. Teksteditoren i feltet Tekst.

• Tekst (Text). Selve teksten. Den vises i indholdets bredde med temaets skrift og farver. Brug overskrift 2 og 3 til mellemrubrikker. Farver, skriftstørrelser, og justering fra editoren fjernes, og en overskrift 1 bliver vist som overskrift 2.

1. Teksten med temaets typografi.

Hero (Hero)

Et stort billede i fuld skærmbredde med overskrift, tekst, og en knap. Brug det øverst på forsiden eller på en kampagneside, hvor det første indtryk skal fortælle, hvad du sælger.

1. Link hører til knappen. Uden link vises knappen ikke.
2. Billede er baggrunden i hele bredden.
3. Tekstplacering flytter teksten op eller ned.
4. Tekststørrelse gør overskrift og beskrivelse mindre eller større.

• Titel (Title). Den store tekst. Delaware gør den til sidens hovedoverskrift (H1), så skriv hvad du sælger, fx "Nyristet kaffe, sendt samme dag", frem for "Velkommen".
• Beskrivelse (Description). En eller to linjer under overskriften.
• Knaptekst (Button Text). Teksten på knappen i temaets primære farve.
• Link (Link). Hvor knappen fører hen. Knappen vises kun, når feltet er udfyldt, så udfyld begge felter.
• Billede (Image). Baggrundsbilledet. Brug et bredt billede på mindst 1600 pixels i bredden med motivet i midten, fordi billedet beskæres, så det fylder hele banneret. På en computer er banneret omkring fire gange så bredt, som det er højt, så et almindeligt liggende billede mister en stor del foroven og forneden. Uden billede er baggrunden sort.
• Tekstjustering (Text alignment). Venstre, Center, eller Højre.
• Tekstplacering (Text position). Top, Midt, eller Bund i banneret.
• Tekststørrelse (Text size). Lille, Mellem, eller Stor for overskrift og beskrivelse. Skru ned, hvis en lang overskrift bliver brudt uheldigt på mobilen.

Banneret er mindst 400 pixels højt på mobilen og 500 pixels på computer, og det bliver højere, hvis teksten kræver det. Teksten er hvid, og Delaware lægger en mørk skygge nederst i billedet, så teksten kan læses. Vælg derfor et billede, der ikke er for lyst i den del, hvor teksten står.

1. Overskriften, som er sidens H1.
2. Beskrivelse.
3. Knappen med Knaptekst og Link.

Blogliste (Blog List)

Dine tre nyeste blogindlæg med billede og titel. Brug den på forsiden for at vise, at der sker noget, og for at lede kunderne videre til dine guides. Se også blog tilknyttet din shop.

1. Titel er overskriften over indlæggene.

• Titel (Title). Overskriften (H2) over indlæggene.

Modulet viser altid de tre nyeste udgivne indlæg med indlæggets første billede i bredformat og titlen. Planlagte indlæg kommer med, når de er udgivet. Indlæggene står under hinanden på mobilen, to og to på tablet, og tre på en række på computer. Indstillingerne under Bloglister i temaindstillingerne påvirker ikke modulet.

1. Overskriften fra Titel.
2. Ét indlæg med billede og titel. Begge dele linker til indlægget.

Tekst - to kolonner (Text - two columns)

To tekstblokke side om side, fx en forklaring til venstre og en punktliste til højre.

1. Tekst 1 er venstre kolonne.
2. Tekst 2 er højre kolonne. Er den tom, fylder Tekst 1 hele bredden.

• Tekst 1 (Text 1). Venstre kolonne.
• Tekst 2 (Text 2). Højre kolonne. Er feltet tomt, vises Tekst 1 i fuld bredde.

Kolonnerne er lige brede fra tabletbredde. På mobilen står teksterne under hinanden. Formateringen følger de samme regler som i modulet Tekst.

1. Tekst 1.
2. Tekst 2.

Tekst med billede - to kolonner (Text with image - two columns)

En tekst ved siden af et billede. Brug det til at fortælle om et produkt, en bryggemetode, eller butikkens historie.

1. Tekst med formatering.
2. Billede med knappen Slet billede.
3. Billede til venstre? flytter billedet til venstre.

• Tekst (Text). Teksten med formatering.
• Billede (Image). Beskæres til liggende 4:3.
• Billede til venstre? (Image to the left?). Sæt flueben for at få billedet til venstre. Uden flueben står det til højre, som hjælpeteksten også siger.

Tekst og billede er lige brede fra tabletbredde og står i samme højde foroven. På mobilen står det, der er til venstre, øverst.

1. Teksten.
2. Billedet, beskåret til 4:3.

Produkt-feature (Product feature)

En kampagneflade over et baggrundsbillede med overskrift og knapper til venstre og en lille produktslider til højre. Brug den til en kampagne eller en produktserie.

1. Produkttype bestemmer, hvor produkterne kommer fra.
2. Produktvælger med produkt-ID'er eller et kategori-tag.
3. Billede er baggrunden.
4. Billedoverlay styrer sløret og tekstfarven.

• Titel (Title). Overskriften (H2) i stor skrift til venstre.
• Produkttype (Product Type). Nyeste viser trods navnet produkter i alfabetisk rækkefølge. Populære viser de mest solgte produkter de seneste 90 dage. Kategori-tag viser produkter fra kategorien med tagget, og Produkt-ID de produkter, hvis ID'er du skriver. Mest solgte og Landingsside-tag henter ikke produkter i Delaware.
• Produktvælger (Product Selector). Kategoriens tag, eller produkternes ID'er adskilt med komma. Bruges kun ved Kategori-tag og Produkt-ID.
• Manchet (Lead text). Tekst under overskriften.
• Primær knaptekst (Primary button text). Teksten på den første knap i temaets handlingsfarve. Knappen vises altid, så udfyld feltet.
• Primær knaplink (Primary button link). Hvor den første knap fører hen.
• Sekundær knaptekst (Secondary button text). Teksten på knap nummer to med ramme. Knappen vises kun, når teksten er udfyldt.
• Sekundær knaplink (Secondary button link). Hvor knap nummer to fører hen.
• Billede (Image). Baggrundsbilledet bag hele fladen, beskåret så det fylder fladen.
• Billedoverlay (Image overlay). Lys giver sort tekst og et hvidt slør. Mørk giver hvid tekst og et mørkt slør. Sløret ligger der også uden billede.

Fra tabletbredde står tekst og knapper til venstre og produkterne til højre. Slideren viser omkring to produkter ad gangen og starter forfra, når kunden når enden. På mobilen står teksten øverst.

1. Overskrift, manchet, og knapper.
2. Produktslideren med op til fire produkter.

Produktblok (Product block)

Ét produkt fremhævet med billeder, pris, lagerstatus, og knappen til kurven. Brug den til månedens produkt eller en nyhed, du vil give ekstra plads.

1. Titel over blokken.
2. Manchet under titlen.
3. Produkt-ID: søg produktet frem, og klik på det. Krydset fjerner det igen.

• Titel (Title). Overskriften (H2) i stor skrift over blokken.
• Manchet (Lead text). En kort tekst under overskriften. Vises kun, når feltet er udfyldt.
• Produkt-ID (Product ID). Det produkt, der vises. Søg mindst to tegn frem, og klik på produktet. Går produktet offline, forsvinder blokken fra siden.

Blokken henter alt andet fra produktet: billederne, som kunden kan bladre i, mærke, varenummer, navn, pris, lagerstatus, variantvælger, og knappen til kurven. Produktets korte beskrivelse kommer kun med, hvis Aktiver listebeskrivelse er slået til under Produkt i temaindstillingerne. Fra tabletbredde står blokken i en lysegrå boks med billederne til venstre.

1. Titel og Manchet.
2. Produktets billeder.
3. Mærke, varenummer, navn, pris, lagerstatus, og knappen til kurven hentes fra produktet.

Hero-video med kategori/landingsside (Hero video with category/landingpage)

En flade med baggrundsvideo eller baggrundsbillede, en tekst med knap, og op til tre kategorier eller landingssider som klikbare kort. Brug den øverst på forsiden, når du vil vise stemning og samtidig lede kunderne direkte til dine vigtigste områder.

1. Produkttype 1 og Kategorivælger 1 hører sammen og giver det første kort.
2. Baggrundsbillede vises, indtil videoen kan afspilles.
3. Baggrundsvideo er adressen på en MP4-fil.
4. Billedoverlay styrer sløret og tekstfarven.

• Fortitel (Pretitle). En kort linje med store bogstaver over overskriften, fx "Nyt fra risteriet". Den er altid lys, så den passer bedst til Mørk.
• Titel (Title). Overskriften (H2) i stor skrift.
• Manchet (Lead text). Tekst under overskriften.
• Knaptekst (Button text). Teksten på knappen i temaets handlingsfarve. Knappen vises altid, så udfyld feltet.
• Knaplink (Button link). Hvor knappen fører hen.
• Produkttype 1, 2, og 3 (Product Type 1, 2 and 3). Kategori-tag eller Landingsside-tag. Bestemmer, om Kategorivælgeren ved siden af peger på en kategori eller en landingsside.
• Kategorivælger 1, 2, og 3 (Category selector 1, 2 and 3). Tagget på kategorien eller landingssiden. Hvert kort viser første billede, navnet, og "Læs mere", og hele kortet er et link. Et ukendt tag giver intet kort. Bruger du færre end tre kort, så lad de ubrugte felter stå tomme med Produkttype på Kategori-tag.
• Baggrundsbillede (Background image). Billedet bag hele fladen. Uden video er det baggrunden. Med video vises det, indtil videoen er klar.
• Baggrundsvideo (Background video). Adressen på en MP4-video. Upload videoen under Design → Filer, og kopiér adressen fra kolonnen URL. Videoen afspilles automatisk, uden lyd, og i ring. Se også temaets filer.
• Billedoverlay (Image overlay). Lys giver sort tekst og et hvidt slør. Mørk giver hvid tekst og et mørkt slør over hele fladen.

Fra tabletbredde står kortene til venstre og teksten til højre. På mobilen står teksten øverst og kortene under. Kortene har altid mørk baggrund og hvid tekst.

1. Fortitel, Titel, Manchet, og knappen.
2. Kortene fra de tre kategori-tags.

Trustpilot (Trustpilot)

En Trustpilot-karrusel med dine anmeldelser. Brug den på forsiden eller i kurven for at vise, at andre kunder er glade for at handle hos dig.

1. Tekst har ingen virkning i Delaware.

• Tekst (Text). Har ingen virkning i Delaware. Indholdet kommer fra Trustpilot.

Modulet viser en Trustpilot-karrusel i indholdets bredde med anmeldelser på 4 og 5 stjerner. Den kræver, at du under Integrationer i temaindstillingerne har slået Aktiver Trustpilot til og udfyldt Trustpilot Business ID og Trustpilot Template ID Carousel med oplysningerne fra din Trustpilot-konto. Når Trustpilot er slået til, viser Delaware allerede den samme karrusel i bunden af alle sider, så med modulet står anmeldelserne to gange på siden. Se guiden til kassen, mails, og integrationer i Delaware.

Værditilbud (Value Propositions)

En række med butikkens fordele, hver med ikon, tekst, og evt. en kort beskrivelse. Brug det til at fortælle om levering, fragt, returret, eller personlig service.

1. Tekst har ingen virkning i Delaware. Fordelene skriver du i temaindstillingerne.

• Tekst (Text). Har ingen virkning i Delaware.

Modulet viser de fire værditilbud, du har skrevet under Værditilbud i temaindstillingerne. Hvert værditilbud har felterne Tekst, Link, Ikon, og Beskrivelse. Kun værditilbud med tekst vises, og er alle fire tomme, vises modulet ikke. Ikonet står i en firkant i temaets primære farve, og står der et ikonnavn, Delaware ikke kender, er firkanten tom. Med et link bliver hele værditilbuddet klikbart. På mobilen står de to og to, og fra tabletbredde på én række.

1. Ét værditilbud med ikon, tekst, og beskrivelse.

Nyhedsbrev (Newsletter)

En tilmeldingsformular til dit nyhedsbrev med overskrift, tekst, og evt. billede. Brug den på forsiden eller på en kampagneside for at samle modtagere.

1. Layout bestemmer, hvor billedet står.
2. Knaptekst. Tomt giver den engelske tekst Subscribe.
3. Vis navnefelt spørger også efter fornavn.
4. Billede er baggrund eller sidebillede.

• Layout (Layout). Enkel viser overskrift, tekst, og formular centreret uden billede, også selvom du har valgt et. Centreret med baggrundsbillede lægger billedet som baggrund med et slør. Delt med billede sætter billedet til venstre for formularen. Uden billede ser Delt med billede ud som Enkel.
• Overskrift (Title). Fx "Få besked når nye kaffer lander".
• Beskrivelse (Description). Fortæl kort, hvad modtageren får.
• Knaptekst (Button text). Teksten på knappen i temaets handlingsfarve. Tomt giver "Subscribe".
• Vis navnefelt (Show name field). Tilføjer et felt til fornavn.
• Samtykketekst (Consent text). Kort tekst med småt under formularen, fx at man kan afmelde sig igen.
• Billede (Image). Baggrundsbillede i Centreret med baggrundsbillede, sidebillede i liggende 4:3 i Delt med billede. Bruges ikke i Enkel.
• Overlay (Image overlay). Lys (mørk tekst) eller Mørk (hvid tekst) i Enkel og Centreret med baggrundsbillede. Over et baggrundsbillede lægger det også et lyst eller mørkt slør. Vælg kun Mørk sammen med et baggrundsbillede, ellers bliver teksten hvid på butikkens lyse baggrund. Bruges ikke i Delt med billede.

Bruger du Shoporamas eget nyhedsbrev (Brug intern nyhedsbrevsliste under Nyhedsbrev → Opsætning), kommer tilmeldingerne ind dér, og med Kræv bekræftelse (double opt-in) får den nye modtager en mail, der skal bekræftes. Ellers sendes tilmeldingen videre til den mailingliste, du har koblet på under Integrationer → Mailingliste, men uden fornavnet. Efter tilmeldingen viser formularen en kort besked til kunden, fx "Tak for din tilmelding!". Læs mere om nyhedsbrevsmodulet.

1. Billedet i layoutet Delt med billede.
2. Navnefeltet fra Vis navnefelt.
3. Knappen med Knaptekst.

Tilpasset kode (Custom code)

Et felt til din egen HTML, JavaScript, eller strukturerede data. Brug det til en widget fra en anden tjeneste, en indlejret video, eller en særlig boks, som ingen af de andre moduler kan lave.

1. Kode: indsæt din HTML, schema markup, eller script-kode.

• Kode (Code). Koden sættes ind på siden præcis, som du skriver den. I modsætning til de andre moduler får den hverken luft omkring sig eller temaets indholdsbredde, så den går helt ud til kanten. Vil du have luft og bredde, så skriv det i koden.

1. Resultatet af koden.

Adresse & kort (Address & map)

Butikkens adresse, åbningstider, og et kort fra Google Maps. Brug det, hvis du har en fysisk butik, et lager med afhentning, eller et showroom. Læs mere om at vise adresse og kort.

Kortet hentes fra Google Maps, når siden vises. Derfor viser vi kun modulets indstillinger her og ikke kortet i butikken.

1. Adresse bruges både til teksten og til kortet.
2. Egen indlejringskode erstatter kortet.
3. Layout: kortet til højre, til venstre, eller alene.
4. Læs mere om denne blok åbner hjælpeartiklen.

• Overskrift (Heading). Valgfri overskrift (H2), fx "Besøg risteriet".
• Adresse (Address). Gade, postnummer, og by. Linjeskift bliver vist som linjeskift, og Delaware slår adressen op på kortet. Adressen hentes ikke fra temaindstillingerne, så skriv den her.
• Ekstra info (Extra info). Valgfri tekst med formatering, fx åbningstider og parkering.
• Egen indlejringskode (Custom embed code). Avanceret. Indsæt den kode til indlejring, som Google Maps giver dig under Del, hvis kortet skal pege mere præcist, end adressen gør. Koden erstatter kortet.
• Layout (Layout). Kort til højre, Kort til venstre, eller Kun kort. Kun kort viser hverken overskrift, adresse, eller ekstra info.
• Zoomniveau (Zoom level). Tæt på, Normal, eller Oversigt.
• Korthøjde (Map height). Lav (300 pixels), Medium (420 pixels), eller Høj (560 pixels).
• Vis rutevejledning-link (Show directions link). Viser knappen "Få rutevejledning", som åbner Google Maps med ruten i et nyt vindue. Kræver at Adresse er udfyldt.

Modulet vises kun, når Adresse eller Egen indlejringskode er udfyldt. Fra tabletbredde står tekst og kort side om side, på mobilen under hinanden.

Facebook (Facebook)

En knap, der fører til din Facebook-side, eller et feed fra Facebook, hvis du indsætter koden selv. Brug den til at få kunderne til at følge dig. Læs mere om Facebook og Instagram på din webshop.

1. Facebook side-URL er adressen på din side.
2. Egen indlejringskode erstatter knappen med dit eget feed.
3. Læs mere om denne blok åbner hjælpeartiklen.

• Overskrift (Heading). Valgfri overskrift (H2) centreret over knappen.
• Facebook side-URL (Facebook page URL). Fx https://www.facebook.com/ditfirma. Er feltet tomt, bruges Facebook URL fra gruppen Virksomhed i temaindstillingerne. Er begge tomme, og er der ingen indlejringskode, vises modulet ikke.
• Egen indlejringskode (Custom embed code). Avanceret. Indsæt koden til et feed fra Facebook eller en anden tjeneste. Koden vises centreret i stedet for knappen, højst 640 pixels bred, og indholdet hentes fra tjenesten.

Knappen "Følg os på Facebook" står i temaets primære farve og åbner siden i et nyt vindue.

1. Overskriften.
2. Knappen "Følg os på Facebook".

Instagram (Instagram)

Din Instagram-profil indlejret på siden, en følg-knap, eller begge dele. Brug det til at vise butikkens billeder og få flere følgere.

Feedet hentes fra Instagram, når siden vises. Derfor viser vi kun modulets indstillinger her. Hvad Instagram viser i feedet, bestemmer Instagram.

1. Instagram profil-URL er adressen på din profil.
2. Visning: feed, knap, eller begge.
3. Egen indlejringskode erstatter både feed og knap.

• Overskrift (Heading). Valgfri overskrift (H2) centreret over feedet.
• Instagram profil-URL (Instagram profile URL). Fx https://www.instagram.com/ditfirma. Er feltet tomt, bruges Instagram URL fra gruppen Virksomhed i temaindstillingerne. Er begge tomme, og er der ingen indlejringskode, vises modulet ikke.
• Visning (Display). Feed (profil + opslag) indlejrer profilen med Instagrams egen kode, højst 640 pixels bred. Følg-knap viser knappen "Følg os på Instagram". Feed og knap viser begge.
• Egen indlejringskode (Custom embed code). Avanceret. Indsæt koden fra en feed-tjeneste. Den vises i stedet for både feed og knap.

Shoporama Akademi · Temaguide · Nyeste udgave: www.shoporama.dk/akademi/tema-delaware-sidedesignerens-moduler · Udskrevet 14.09.2026