Nødsituation

Ved akutte situationer eller nedbrud kan du sende en SMS til vores vagttelefon

Vagttelefon (kun SMS)

+45 29 70 15 95

Send en SMS med følgende information:

  • Dit navn og webshop
  • Beskrivelse af problemet
  • Dit telefonnummer for tilbageringning

Bemærk: Denne service er kun til kritiske situationer hvor din webshop er nede eller har alvorlige problemer. For almindelig support, brug venligst vores normale supportkanaler.

Delaware Dokumentation

Alt du skal vide for at udnytte Delaware temaets fulde potentiale

Velkommen til Delaware

Delaware er et af Shoporamas indbyggede temaer. Det understøtter Sidedesigneren og har bl.a. mega menu, faner i produktbeskrivelsen, tilkøb, ønskelister, abonnementer, og en checkout i flere trin. Her kan du læse, hvordan funktionerne sættes op, og hvordan temaet er bygget, hvis du vil tilpasse det.

Delaware og DelawareDK: De to temaer er ens. Delaware er den engelske udgave og DelawareDK den danske. Indstillingerne hedder det samme bag kulisserne, men navnene i admin står på engelsk i Delaware og på dansk i DelawareDK. Siden her nævner som regel begge navne.

Bemærk: Videoerne viser en ældre version af Shoporamas admin. Designet er opdateret siden, men opbygningen er den samme, så du finder de samme indstillinger og funktioner på de samme steder.

Hurtig opsætning

Byg sider i Sidedesigneren med temaets 23 færdige sektioner

Mange indstillinger

Styr farver, badges, produktsider, checkout, og e-mails under Temaindstillinger

Responsivt

Layoutet tilpasser sig mobil, tablet, og desktop

Sidedesigner

Med Sidedesigneren bygger du sider af færdige sektioner uden at kode. Du finder den under Design → Sidedesigner. Delaware har 23 sektioner, som du kan se i afsnittet Komponenter længere nede.

Nøglefunktioner:

Brugervenligt interface

  • Træk sektioner på plads, eller klik for at tilføje nederst
  • Preview-link, også til opsætninger der er offline
  • Fold sektionerne ind og ud for overblik
  • Ét layout pr. sidetype, eller kun på udvalgte sider

Avancerede muligheder

  • Planlæg en opsætning med start- og slutdato og prioritet
  • Kopiér en opsætning og split-test den under Design → Split-test
  • Sektionen Tilpasset kode (Custom code) til egen HTML, schema, eller scripts

Tip: Sektioner der henter produkter eller kategorier, finder dem via det tag, du har skrevet i feltet Tag under Avanceret på kategorien eller landingssiden. Giv derfor dine kategorier og landingssider et tag, før du bygger siden.

Video tutorial

Mega Menu

Vis dine produktkategorier og kampagner med en stor dropdown-menu i flere kolonner. Velegnet til shops med mange kategorier.

Det vigtigste først: CSS-klassen "megamenu"

Mega menuen aktiveres ikke af et menu-navn eller et menu-tag. Den aktiveres af CSS-klassen megamenu (præcis denne streng, små bogstaver, uden mellemrum eller underscore) på et menupunkt i hovednavigationen.

Klassen sættes i feltet "Klasse" på det enkelte menupunkt, ikke på selve menuen. Du finder feltet under Indhold → Menuer → rediger et menupunkt.

3-niveau-strukturen

En fungerende mega menu består af tre niveauer af menuer, der ligger inden i hinanden som undermenuer:

Hovedmenu (placering: Øverst)
└── Menupunkt "Løbehjul"  (type: undermenu, klasse: megamenu)
    │
    └── Mega menu-container (undermenuen)
        ├── Menupunkt "Kolonne 1"  (type: undermenu)
        │   └── Kolonne-menu
        │       ├── 1. menupunkt  → bliver kolonne-overskrift
        │       │   (skal være kategori, produkt eller landingsside,
        │       │    evt. med klassen show_image for billede øverst i kolonnen)
        │       ├── 2. menupunkt  → almindeligt link
        │       └── 3. menupunkt  → almindeligt link
        │
        ├── Menupunkt "Kolonne 2"  (type: undermenu)
        │   └── ...
        │
        └── Menupunkt "Kolonne 3"  (type: undermenu)
            └── ...

Opsætning trin for trin

Trin 1: Opret hovednavigationen

  1. Gå til Indhold → Menuer
  2. Opret eller åbn din hovednavigation, og vælg Placering af menuen: Øverst
  3. Navnet på menuen er ligegyldigt for koden, men "Hovedmenu" er en god konvention

Trin 2: Opret mega menu-containeren

  1. Lad Placér i stå på hovednavigationen, klik Tilføj undermenu, og giv den navnet på topmenupunktet (fx "Løbehjul")
  2. Skriv megamenu i feltet Evt. CSS-klasse, eller sæt klassen på punktet bagefter i feltet Klasse
  3. Undermenuen bliver selve mega-dropdownen og skal indeholde ét punkt pr. kolonne

Trin 3: Opret én undermenu pr. kolonne

  1. Vælg mega menu-containeren under Placér i, og klik Tilføj undermenu én gang pr. kolonne, du vil have
  2. Tilføj menupunkter i hver kolonne. Det første menupunkt bliver kolonneoverskrift, resten bliver links
  3. Overskriften vises kun, når det første punkt er en kategori, et produkt, eller en landingsside. Er det et link, en statisk side, eller et blogindlæg, vises punktet slet ikke
  4. Vil du have et billede øverst i kolonnen, sæt klassen show_image på det første menupunkt (kategoriens/produktets/landingssidens første billede vises automatisk)

Trin 4: Tjek strukturen

  1. Topmenupunktet skal være af typen undermenu og have klassen megamenu
  2. Kolonnerne skal også være af typen undermenu. Andre punkter direkte i mega menu-containeren vises ikke
  3. Gem menuen. Punktet i hovednavigationen viser nu en mega menu ved hover på desktop og ved klik på mindre skærme

De to klasser du skal kende

megamenu

Sættes på et menupunkt af typen undermenu i hovednavigationen.

Fortæller temaet at dette topniveau-punkt skal renderes som en stor dropdown i flere kolonner i stedet for en almindelig single-column-dropdown.

show_image

Sættes på det første menupunkt i en kolonne-menu.

Virker for typerne kategori, produkt, og landingsside. Henter automatisk det første billede fra det valgte objekt og viser det øverst i kolonnen som et klikbart billede. Har objektet intet billede, vises kun overskriften.

Best practices

Anbefalinger:

  • • Planlæg 3-niveau-strukturen på papir før du opretter menuerne i admin
  • • Stav klassen præcis som megamenu, ikke mega_menu, mega-menu, eller Megamenu. Sammenligningen er case-sensitiv
  • • Brug beskrivende titler der giver mening for kunder
  • • Test mega menuen på både desktop og mobile enheder (den foldes sammen til off-canvas på mobil)
  • • Hold antallet af kolonner i hver mega menu på 3-5. Flere bliver uoverskuelige
  • • Brug show_image sparsomt. Det stjæler opmærksomhed og virker bedst som blikfang i én af kolonnerne

Se demo:

Se mega menuen i aktion på: https://delaware.shoporama.dk

Komponenter

Delaware har 23 færdige sektioner til Sidedesigneren og en række faste komponenter på produkt-, kategori-, og checkout-siderne. Her er et overblik over, hvad der findes.

Sektioner i Sidedesigneren

Navnene herunder er dem, du ser i DelawareDK. I Delaware står de på engelsk. Den tekniske nøgle i parentes er navnet på skabelonen i templates/sections/.

Produkter

  • Produktliste (product-list): nyeste, populære, mest solgte, eller via kategori- eller landingssidetag
  • Produktslider (product-slider): som produktlisten, plus produkt-ID'er og Clerk.io-typer
  • Produkt-feature (product-feature): udvalgte produkter med baggrundsbillede og to knapper
  • Produktblok (product-block): ét produkt med titel og tekst
  • Anbefalinger (recommendations): fx "Andre så også", "Andre købte også", populære, eller kundens senest sete

Kategorier

  • Kategoriliste (category-list): alle kategorier, via tag, eller via ID'er
  • Kategorislider (category-slider): samme udvalg som en slider
  • Hero-video med kategori/landingsside (hero-video-categories): baggrundsvideo med op til tre kategorier eller landingssider

Indhold

  • Hero (hero), Bannere (banner), og Image Grid (image-grid)
  • Tekst (text), Tekst - to kolonner (text-two-columns), og Tekst med billede - to kolonner (text-image-two-columns)
  • H1-element (h1-element) og Blogliste (blog-list)

Tillid og kontakt

  • Trustpilot (trustpilot) og Værditilbud (value-propositions)
  • Nyhedsbrev (newsletter): tre layouts, evt. med navnefelt
  • Adresse & kort (address-map), Facebook (facebook-feed), og Instagram (instagram-feed)
  • Tilpasset kode (custom-code): egen HTML, schema, eller scripts

Hvor kan de bruges?

Sektionerne kan bruges på forsiden, kategorier, landingssider, produkter, statiske sider, bloggen og blogindlæg, søgning, kurven, takkesiden, kundesiderne, og 404-siden. Anbefalinger kan dog ikke vælges på statiske sider, blogindlæg, bloggen, takkesiden, og kundesiderne.

Kategori-feature (category-feature) står på listen i Sidedesigneren, men Delaware har ingen skabelon til den. Vælger du den, viser siden en rød fejlboks i stedet for sektionen. Brug Kategoriliste eller Hero-video med kategori/landingsside i stedet.

Produkt Komponenter

Produktvisning

  • Produktgrid - På kategorier med filtre og sortering, og på landingssider
  • Produktslider - Swipe-venlig slider med lazy-loadede billeder
  • Hurtigt køb - Læg i kurv fra produktkortet, med variantvælger som dropdown på desktop og panel på mobil
  • Badges - Udsalg, nyhed, få på lager, samlepakke, mængderabat, varianter, og op til tre egne badges
  • Mest solgte - Via Produktliste med typen Mest solgte produkter (Most Sold Products) eller Produktslider med typen Mest solgte (Most Sold)

Kundeengagement

  • Ønskelister og favoritter - Se afsnittet Ønskelister
  • Få besked når på lager - Tilmeldingsformular på udsolgte produkter eller varianter
  • Senest sete - Via sektionen Anbefalinger
  • Størrelsesguide og vaskeanvisning - Som faner på produktsiden
  • Stil et spørgsmål - Fane med kontaktformular på produktsiden

Content & Layout Komponenter

Hero & Banners

  • • Hero i fuld bredde med knap
  • • Tekstplacering og -størrelse i Hero
  • • Baggrundsvideo via link til en videofil
  • • Lys eller mørk overlay på flere sektioner
  • • Bannere i to kolonner
  • • Billedgrid i fire kolonner

Social Proof

  • • Trustpilot-widgets i header, footer, og på produktsiden
  • • e-mærket-widget i header, footer, og på produktsiden
  • • Egen bedømmelse med stjerner og antal anmeldelser
  • • Produktanmeldelser på produktsiden
  • • Facebook- og Instagram-sektioner

Information

  • • Faner i produktbeskrivelsen
  • • Faste faner med levering, retur, og betaling fra dine vilkår
  • • Fane med produktets PDF-filer
  • • Lange kategoribeskrivelser kan foldes sammen
  • • Værditilbud med ikoner

Adresse & kort

  • • Indlejret Google-kort uden API-nøgle
  • • Skriv adresse, eller indsæt egen embed-kode
  • • Layout: kort til højre, til venstre, eller kun kort
  • • Zoom, korthøjde, og rutevejledning-link
  • • Ekstra info-felt til åbningstider mv.
  • • Responsivt på mobil

Marketing & Konvertering

Urgency & Scarcity

  • Nedtælling - Til kampagnens udløb på produktsiden, og for mersalg på takkesiden
  • Få på lager - Badge under en grænse du selv sætter, evt. med antal
  • Udsalg og kampagner - Udsalgs-badge og kampagnebesked på produktet
  • Restordrebesked - Når kunden bestiller flere, end der er på lager

Lead Generation

  • Nyhedsbrev - Tilmelding i footeren, som sektion, og i checkout
  • Site notice - Bjælke øverst med egen tekst til desktop og mobil
  • Kurvdeling - Kunden kan dele et link til kurven
  • Mersalg efter køb - Tilbud på takkesiden, som lægges til den netop gennemførte ordre, evt. med nedtælling

Navigation & Søgning

Navigation

  • • Mega menu med billeder (show_image)
  • • Brødkrummer, som kan slås fra på mobil
  • • Kategorimenu i siden af kategorisiden
  • • Menu-knap og panel-menu på mobil
  • • Filterbjælken følger med, når kunden scroller

Søgning

  • • Forslag mens kunden skriver
  • • Viser både kategorier og produkter med billede
  • • Piletasterne flytter mellem forslagene
  • • "Se alle" fører til søgesiden
  • • Kan erstattes af Clerk.io

Checkout & Trust

Komponenter i checkout

  • Trinvisning øverst i checkout
  • Trustpilot eller din egen bedømmelse
  • Ikoner for betalings- og fragtmetoder
  • Valg af pakkeshop
  • Køb uden at oprette en konto
  • Ordreoversigt ved siden af formularen
  • Rabatkodefelt i kurv og checkout
  • Ikoner til MobilePay, Apple Pay, og Google Pay

Tilpassede Komponenter

Sådan er temaet bygget

Skabeloner
  • • Smarty 4 med <{ }> som skilletegn
  • • Genbrugelige dele i templates/components og templates/partials
  • • Sidedesigner-sektioner i templates/sections
  • • Alpine.js til dropdowns, kurv, og filtre
Styling
  • • Færdigbygget CSS og JavaScript i dist/
  • • CSS-variabler til farverne, fx --primary og --action
  • • Ikoner som SVG-sprites i dist/svg
  • • Mobile-first media queries

Performance & SEO

Det gør temaet for hastighed og søgemaskiner:

  • Lazy Loading - Billeder indlæses, når de kommer i syne
  • Minificeret JavaScript - Én samlet fil i dist/scripts
  • WebP - Billeder leveres som WebP i den størrelse, der skal bruges
  • Schema Markup - Struktureret data for produkter, brødkrummer, og butikken
  • Mobiloptimeret - Layoutet er bygget til små skærme først
  • Tilgængelighed - Spring-til-indhold-link og aria-labels på knapper

Se alle komponenter i aktion:

Oplev Delaware komponenterne live på: https://delaware.shoporama.dk

Kortkoder

Brug kortkoder til at indsætte links, produkter, billeder, og video direkte i dine tekster.

Hvor virker kortkoderne? I statiske sider, blogindlæg, kategoriernes beskrivelser, landingssidernes beskrivelser, tekstsektionerne i Sidedesigneren, og produktbeskrivelser uden faner. Har en produktbeskrivelse faner (se punkt 7), bliver kortkoderne i den ikke oversat. Billedkortkoderne i punkt 4 og 5 virker kun i statiske sider, blogindlæg, kategori- og landingssidebeskrivelser, og produktbeskrivelser uden faner.

1. Indsæt links til produkter, kategorier, og landingssider

Kortkode med custom tekst:

[link type="product" id="2627350" text="Din anchor tekst"]
[link type="category" id="122617" text="Din anchor tekst"]
[link type="landingpage" id="15252" text="Din anchor tekst"]

Kortkode med objektets titel:

[link type="product" id="2627350"]
[link type="category" id="122617"]
[link type="landingpage" id="15252"]

Bemærk: Rækkefølgen skal være type, id, og til sidst text. Findes objektet ikke, vises en overstreget tekst "Link not found" ("Link ikke fundet" i DelawareDK).

Sådan finder du ID'et:

ID'et findes i Shoporama kontrolpanelet i URL'en når du redigerer et produkt/kategori/landingsside.
Eksempel URL: /admin/en/6581/product/edit/2633263
ID'et er det sidste tal i URL'en (2633263)

2. Indsæt produktliste

Kortkode syntax:

[products ids="123,456,789,101112"]
[products ids="123,456,789" columns="3"]
[products category="122617" columns="4" max="8"]
[products landingpage="15252" max="8"]

Bemærk: Ingen mellemrum mellem produkt ID'er. columns kan være 3, 4, eller 5 (standard er 4), og max (standard 4) gælder kun for category og landingpage. Med ids vises alle de produkter, du skriver. Skriv attributterne i rækkefølgen ids/category/landingpage, columns, max. Har du flere kategori- eller landingssidekortkoder i samme tekst, viser de alle den første kategori eller landingsside. Desuden bruger alle [products]-kortkoder af samme slags i samme tekst columns og max fra den første.

3. Indsæt YouTube video

Kortkode syntax:

[youtube_embed id="lJIrF4YjHfQ"]

Bemærk: Erstat med videoens ID på 11 tegn. Du finder det i videoens adresse efter watch?v=.

4. Indsæt uploadede billeder

Kortkode for uploadet billede:

[image index="1"]

Bemærk: Indsætter det første billede, du har uploadet til siden, blogindlægget, kategorien, landingssiden, eller produktet. index="2" giver det andet billede osv. Husk anførselstegnene om tallet. Billedets beskrivelse vises som billedtekst, hvis den er udfyldt.

5. Indsæt billeder med absolut sti

Kortkode for absolut billedsti:

[image href="https://www.ditdomæne.dk/billeder/banner.jpg"]

Bemærk: Virker de samme steder som [image index="1"]. Brug fx adressen på en fil, du har lagt op under Design → Filer.

6. Indsæt dine vilkår

Kortkoder for vilkår:

[terms_trade]
[terms_return]
[terms_delivery]
[terms_payment]
[terms_eprivacy]
[terms_gdpr]

Bemærk: Kortkoderne indsætter teksterne fra Temaindstillinger → Servicevilkår (Terms of service). Så skal du kun rette vilkårene ét sted.

7. Faner i produktbeskrivelsen

Del en produktbeskrivelse op i faner ved at skrive en start- og en slutmarkør. Hver markør skal stå på sin egen linje i editoren, så den ligger i sit eget afsnit:

Kort introduktion til produktet.
[tab type="materiale" title="Materiale"]
100 procent bomuld.
[/tab]
[tab type="pasform" title="Pasform"]
Normal pasform.
[/tab]

I HTML-koden skal markørerne ligge i hvert sit afsnit:

<p>[tab type="materiale" title="Materiale"]</p>
<p>100 procent bomuld.</p>
<p>[/tab]</p>
  • • type og title må kun indeholde a-z, A-Z, tal, mellemrum, og understregning. Æ, ø, å, bindestreger, og tegnsætning virker ikke, og så vises markørerne som almindelig tekst
  • • title bliver fanens overskrift. type bruges som CSS-klasse (accordion--type) og kan være hvad du vil
  • • Tekst før første fane vises i fanen "Beskrivelse", og tekst efter sidste fane i fanen "Mere information" ("Description" og "More information" i Delaware)
  • • Skriv mindst ét afsnit almindelig tekst før den første fane
  • • Kortkoder som [youtube_embed] og [products] bliver ikke oversat i en beskrivelse med faner

Video tutorial

Filtre & Søgning

Produktfiltre på kategorisiderne, der opdaterer produktlisten uden at genindlæse siden, og søgning med forslag mens kunden skriver.

Filter typer

  • Brand filter
  • Attribut filtre, fx farve og størrelse
  • Sortering: mest populære og pris
  • Flere værdier kan vælges på én gang

Opsætning af filtre

  1. Slå filtrene til under Temaindstillinger → Kategorier → Aktiver filtrering (Categories → Enable filtration)
  2. Skriv attributternes tags kommasepareret under Temaindstillinger → Filtre (Filters), fx farve,stoerrelse. Tagget står på attributten i produktprofilen
  3. Vil du have andre filtre på en bestemt kategori, skriv filters=farve,materiale i kategoriens Ekstra-felter under Avanceret. Det erstatter den generelle liste på den kategori. Står linjen på en overkategori, lægges dens filtre i stedet oven i den generelle liste på underkategorierne

Bemærk: Filtre og sortering vises kun på kategorisider og styres alene af indstillingen under Kategorier. Landingssider har hverken filtre eller sortering, og indstillingen "Aktiver filter" (Enable filter) under Landingssider bruges ikke af temaet.

Video tutorial

Fragtmetoder

Tilpas fragtmetoder med leverandørikoner, leveringstider, og beskrivelser for at forbedre kundeoplevelsen.

Leverandør ikoner opsætning

HTML felt konfiguration:

Gå til Levering → Fragtmetoder, rediger fragtmetoden, og klik Tilføj nyt HTML-felt. Kald feltet carrier, og skriv ikonets navn i feltet. Flere ikoner adskilles med komma.

Feltnavn: carrier
Placering: Tilføj ikke automatisk
Indhold: gls
Eller flere: gls,postnord

Tilgængelige leverandør ikoner:

📦
burd
Burd
🚚
gls
GLS
📮
postnord
PostNord
🏪
pickup
PickUp
📦
bring
Bring
🚛
budbee
Budbee
✈️
dhl
DHL
🚐
dao
DAO
🚚
dkfragt
DK Fragt
📪
instabox
Instabox
🏃
coolrunner
CoolRunner
📬
swipbox
SwipBox
📦
ups
UPS

Leveringstid opsætning

HTML felt konfiguration:

Opret et HTML-felt kaldet delivery_time på fragtmetoden. Teksten vises under fragtmetodens navn i checkout.

Feltnavn: delivery_time
Indhold: 1-2 hverdage
Best practice:

Brug klart og konsekvent sprog som "1-2 hverdage", "Samme dag", "3-5 arbejdsdage". Feltet vises som ren tekst, så HTML virker ikke her.

Leveringstid på produktsiden:

Produktsiden viser lagerstatus med en leveringstid. Den tages fra produktets egne leveringstider, og ellers fra Temaindstillinger → Generelt:

  • • Leveringstid: Varer på lager
  • • Leveringstid: Varer på fjernlager (varer der må sælges, selvom lageret er tomt)
  • • Leveringstid: Udsolgte varer

Bemærk: Gruppen Fragt (Shipping) har tre lignende leveringstidsfelter. Dem læser temaet ikke, så brug felterne under Generelt.

Leveringsbeskrivelse opsætning

HTML felt konfiguration:

Opret et HTML-felt kaldet delivery_info. Teksten vises under fragtmetoden, når kunden har valgt den, og den vises også som ren tekst.

Feltnavn: delivery_info
Indhold: Leveres til nærmeste pakkeshop
Eksempler på beskrivelser:
  • • "Leveres direkte til døren"
  • • "Afhentning i nærmeste pakkeshop"
  • • "Levering mellem 08:00-16:00"
  • • "Gratis ved køb over 500 kr."

Se demo:

Se fragtmetoder i aktion på: https://delaware.shoporama.dk

Support:

Mangler der ikoner for din leverandør? Kontakt os på support@shoporama.dk

Vis efter postnummer

Vis kun relevante fragtmetoder baseret på kundens postnummer.

Skjul efter postnummer

Skjul fragtmetoder for specifikke områder eller postnumre.

Generel fragtmetode opsætning

Betalingsmetoder

Vis kortikoner ved betalingsmetoderne i checkout.

HTML felt opsætning

Opsætning proces:

Gå til Integrationer → Betalingsgateways, rediger betalingsmetoden, og klik Tilføj nyt HTML-felt. Kald feltet cards.

Feltnavn: cards
Format: Komma-separeret liste
Indhold: dankort,mastercard,visa,mobilepay

Et HTML-felt kaldet payment_info vises under betalingsmetoden, når kunden har valgt den. Her må du gerne bruge HTML.

Tilgængelige betalingsikoner

📅
anyday
Anyday
📱
applepay
Apple Pay
🏦
banktransfer
Bank Transfer
💳
dankort
Dankort
📊
ean
EAN
📱
googlepay
Google Pay
🧾
invoice
Faktura
🛍️
klarna
Klarna
💳
maestro
Maestro
💳
mastercard
Mastercard
📱
mobilepay
MobilePay
🅿️
paypal
PayPal
📊
viabill
ViaBill
💳
visa
Visa

Konfiguration eksempel

Eksempel opsætning for en Dankort betalingsmetode:

cards: dankort,mastercard,visa

Så vises ikonerne for Dankort, Mastercard, og Visa ved denne betalingsmetode.

Se demo:

Se betalingsmetoder i aktion på: https://delaware.shoporama.dk

Support:

Mangler der ikoner for din betalingsmetode? Kontakt os på support@shoporama.dk

Video tutorial

Størrelses- og vaskeanvisninger

Vis en størrelsesguide og en vaskeanvisning som faner på produktsiden. Teksterne skrives én gang på en statisk side og kobles til produkterne med produktlabels.

1. Aktivering i Temaindstillinger

Aktiver funktionalitet:

  1. Gå til Design → Temaindstillinger
  2. Find gruppen Produkt (Product)
  3. Slå "Aktiver vaskevejledning" (Enable washing instructions) og/eller "Aktiver størrelsesguide" (Enable size guide) til
  4. Valgfrit: Skriv din egen fanetitel. Standard er "Vaskeanvisning" og "Størrelsesguide" i DelawareDK og "Washing instructions" og "Size guide" i Delaware

2. Oprettelse af labels

Gå til Produkter → Produktlabels:

Opret en label pr. guide. Det er labelens felt Tag, der tæller: det skal indeholde washing-instruction for en vaskeanvisning og size-guide for en størrelsesguide. Navnet kan du frit vælge.

Tags til vaskeanvisninger:
washing-instructions-1
washing-instructions-2
washing-instructions-3
Tags til størrelsesguides:
size-guide-1
size-guide-2
size-guide-3

3. Oprettelse af instruktionssider

Gå til Indhold → Statiske sider:

  1. Opret ny side med beskrivende titel
  2. Skriv vaskeanvisningen eller størrelsesguiden i sidens tekst. Det er teksten, der vises i fanen
  3. Under Avanceret skriver du labelens tag i feltet Evt. tag
  4. Gem siden
Eksempel på tags der matcher:
Labelens tag: washing-instructions-1
Sidens tag: washing-instructions-1

4. Anvend på produkter

Gå til specifikt produkt i Produkter:

  1. Find boksen Labels på produktet
  2. Vælg den relevante vaske-/størrelses label
  3. Gem produktet

Har produktet flere labels af samme slags, bruges den første, der har en side med samme tag.

Fleksibelt system

Systemets fordele:

  • Multiple instruktionssæt: Opret forskellige vaske-/størrelsesguides for forskellige produkttyper
  • Fleksibel anvendelse: Samme instruktioner kan bruges på flere produkter
  • Nem administration: Centraliseret styring af alle instruktioner
  • Automatisk visning: Instruktionerne vises automatisk på produktsider

Se demo:

Se størrelses- og vaskeguides i aktion på: https://delaware.shoporama.dk

Video tutorial

Checkout Features

Delawares checkout er delt op i trin med en ordreoversigt ved siden af formularen. Hvilke felter og valg kunden ser, styrer du under Temaindstillinger i grupperne, der begynder med "Checkout".

Checkout Process Flow

1

Kurv

Se og ret varer, evt. rabatkode

2

Information

Kontakt- og adresseoplysninger

3

Levering og godkend

Fragt- og betalingsmetode, derefter godkendelse af ordren

✓

Betaling og tak

Betaling hos gatewayen og takkeside

  • • Har shoppen kun én fragtmetode og én betalingsmetode, vælges de på informationstrinnet, og leveringstrinnet springes over
  • • Godkend-trinnet springes over, når Spring "Godkend ordre" over? er slået til under Webshop → Generelt. Betingelserne vises så på trinnet før betaling

Betaling annulleret / fejlet

Når en kunde annullerer eller fejler i betalingsflowet, sender flere betalingsgateways kunden tilbage til shoppen med parameteren ?payment_cancelled=1 i URL'en.

Delaware-temaet viser automatisk en advarsel øverst på siden via partials/header.html, når denne parameter er til stede.

Smarty kode i dit tema:

<{if $get.payment_cancelled}>
  <{include file="components/alert.html" variant="warning" icon="information" text="Din betaling blev ikke gennemført."}>
<{/if}>

Kunden beholder sin kurv og kan prøve betalingen igen.

Bemærk: Brug $get, $post, og $cookie i webshop-templates. $smarty.get, $smarty.post, og $smarty.cookie er spærret i temaerne.

Valg i checkout

Kurv og adresse

  • Rabatkode - Slås til under Checkout: Generelt. Feltet i kurven kræver desuden Aktiver rabatkode under Checkout: Kurv
  • Kurvdeling - Kunden kan dele et link til kurven
  • Kundetyper - Privat, virksomhed, og offentlig (EAN) under Checkout: Adresse
  • Kommentar - Felt til en besked med ordren
  • Ordreopsalg - Forslag til flere varer i ordreoversigten

Konto og nyhedsbrev

  • Køb uden konto - Kunden behøver ikke at oprette sig
  • Log ind - Log ind-knap i headeren (Aktiver login (Beta) under Checkout: Generelt)
  • Opret profil - Kunden kan oprette en profil under adressetrinnet (Beta)
  • Nyhedsbrev - Afkrydsning for tilmelding
  • Takkeside - Egen titel og tekst, evt. med konfetti

Mobile betalinger

Delaware har ikoner til de tre mobile betalingsmetoder. Om kunden kan betale med dem, afhænger af din betalingsgateway.

Apple Pay

Ikonnavn: applepay

Google Pay

Ikonnavn: googlepay

MobilePay

Ikonnavn: mobilepay

Trust & Sikkerhed

Regler og vilkår

  • Fortryd købet - Fast link i footeren til den digitale fortrydelsesfunktion
  • Handelsbetingelser - Titel og kort tekst ved accept, under Checkout: Godkend
  • Nyhedsbrev - Egen titel og tekst til samtykket
  • Billede i checkout - Fx et 18+-mærke under ordreoversigten (feltet Billede til godkendelsesside)

Trust Badges & Certificeringer

  • e-Mærket - Widget i header, footer, og på produktsiden
  • Trustpilot Integration - Widgets i header, checkout, og footer
  • Egen bedømmelse - Stjerner og antal anmeldelser, hvis du ikke bruger Trustpilot
  • Gratis fragt - Besked om, hvor meget der mangler til gratis fragt

Fortrydelseslinket kan slås fra med Deaktivér digital fortrydelse under Checkout: Generelt, men kun hvis du alene sælger til virksomheder. Linker en af dine footer-menuer selv til /withdrawal, vises det faste link ikke.

Betalingsmetoder

Hvilke betalingsmetoder kunden kan vælge, afhænger af din betalingsgateway. Delaware har ikoner til bl.a. disse (se hele listen under Betalingsmetoder):

Dankort
Visa
Mastercard
MobilePay
PayPal
Klarna

Leverings Options

Fragtmetoder i checkout

  • • Leveringstid og beskrivelse via HTML-felter
  • • Vis eller skjul fragtmetoder efter postnummer
  • • Fragtmetoder over vægtgrænsen vises overstreget
  • • Produkter kan nøjes med afhentning (se nedenfor)

Pakkeshop Integration

  • • Liste med pakkeshops ud fra kundens postnummer
  • • Navn og adresse på hver pakkeshop
  • • Besked, hvis der ikke findes pakkeshops til postnummeret
  • • Hvilke fragtfirmaer der har pakkeshops, afhænger af din fragtopsætning

Kun afhentning: Sæt flueben i Kun afhentning (Pickup Only Settings) under produktets Temaindstillinger, og skriv afhentningsmetodernes ID'er i Fragtmetode-ID'er for afhentning (Shipping Method Ids for pickup) under Temaindstillinger → Fragt. Ligger sådan et produkt i kurven, viser checkout kun de metoder.

Forladte kurve

Kurven bliver gemt

  • • Kurven er der stadig, hvis betalingen afbrydes
  • • Kunden får en besked øverst på siden

Kurv-mail

  • • Mail om forladt kurv bruger Delawares skabelon
  • • Emne og tekst under Temaindstillinger → E-mails (Kurv-e-mail)
  • • Tags: [basket_url], [products_list], [company_email], og [company_phone]

Forsendelsesalarm

  • • Nedtælling til næste afsendelse i kurven og når en vare lægges i kurven
  • • Afsendelsesdage, klokkeslæt, og lukkedage under Forsendelsesalarm (Beta)

Sporing og test

Conversion Tracking

Når sporing er slået til under Webshop → Sporing, sender Delaware e-handelshændelser til dataLayer:

  • view_item, view_item_list, search
  • add_to_cart, remove_from_cart, view_cart
  • begin_checkout, add_shipping_info, purchase

A/B Testing

  • Sidedesigner - Split-test af opsætninger under Design → Split-test
  • Fragtpriser - Split-test under Levering → Splittest af fragtpriser

Test checkout processen:

Prøv Delawares checkout på: https://delaware.shoporama.dk

Integrationer

Delaware har indbygget understøttelse af en række tredjepartstjenester. De fleste slås til under Temaindstillinger → Integrationer (Integrations).

Sporing

  • • E-handelshændelser til dataLayer med GA4-navne
  • • Meta Pixel- og Google Analytics-ID sendes med
  • • Slås til under Webshop → Sporing
  • • Se listen over hændelser under Checkout

Social Media

  • • Instagram-sektion med feed eller følg-knap
  • • Facebook-sektion med følg-knap eller eget feed
  • • Links til Facebook, Instagram, Google, og YouTube i footeren
  • • Eget billede til deling (Open Graph)

Tools

  • • Trustpilot
  • • e-mærket
  • • Pricerunner-mærke på produktbilledet
  • • ViaBill og Anyday på produktsiden

C
Clerk.io Integration

Med Clerk.io kan Delaware bruge Clerks søgning og anbefalinger i stedet for Shoporamas egne.

Funktioner der kan erstattes med Clerk.io:

  • Søgning - Clerk - Erstat søgning (Clerk Replace Search)
  • Produktanbefalinger - Relaterede, lignende, og "Andre har også købt" på produktsiden
  • Kurv anbefalinger - Anbefalinger i kurven (Clerk - Kurvprodukter)
  • Produktslider - Clerk-typer som nyeste, populære, trending, og senest købt

Opsætning: Slå Aktiver Clerk til, og skriv din Clerk.io API-nøgle under Temaindstillinger → Integrationer. Vælg derefter, hvilke dele Clerk skal overtage. Selve Clerk-kontoen opretter du hos Clerk.

Ikon Bibliotek

Delaware har sine egne ikoner som SVG-sprites i dist/svg/default.svg. Navnene herunder bruger du i værditilbuddenes Ikon-felt, i menupunkter med [icon id="..."], og i dine egne templates. Ikonerne på denne side er kun illustrationer, det er navnet, der tæller.

<{include file="components/svg.html" icon="truck" width="24" height="24"}>

Brand Ikoner

brand-applepay

brand-emaerket

brand-googlepay

brand-mobilepay

Betalingskort Ikoner

card-anyday

card-dankort

card-mastercard

card-paypal

card-visa

card-klarna

Alle 14: card-anyday, card-applepay, card-banktransfer, card-dankort, card-ean, card-googlepay, card-invoice, card-klarna, card-maestro, card-mastercard, card-mobilepay, card-paypal, card-viabill, og card-visa. I HTML-feltet cards og i indstillingen Betalingsmetoder skriver du navnet uden "card-".

Fragtmetoder Ikoner

carrier-bring

carrier-dhl

carrier-gls

carrier-postnord

carrier-ups

Alle 13: carrier-bring, carrier-budbee, carrier-burd, carrier-coolrunner, carrier-dao, carrier-dhl, carrier-dkfragt, carrier-gls, carrier-instabox, carrier-pickup, carrier-postnord, carrier-swipbox, og carrier-ups. I HTML-feltet carrier og i indstillingen Fragtmetoder skriver du navnet uden "carrier-".

Sprogflag

flag-da

flag-en

flag-nb

flag-sv

Yderligere Ikoner

Generelle ikoner, fx til værditilbud og menupunkter:

truck

arrow-return

search

shopping-cart

user

heart

star

home

Resten af de generelle ikoner: adjustment, adjustments, caret-right, chart-bar, check, chevron-down, chevron-left, chevron-right, chevron-up, cloud-arrow-down, cog, create, credit-card, document-check, document-text, eye, filter, heart-solid, information, language, lifebuoy, loader, menu, minus, orders, pencil, play, plus, question-mark, queue-list, shopping-bag, sign-out, star-outline, storefront, test, trash, truck-loading, wrench, og x.

Behov for flere ikoner? Kontakt os på support@shoporama.dk for at anmode om yderligere ikoner til dit tema.

Vaskesymboler

Delaware har internationale vaskesymboler som SVG-ikoner i dist/svg/washicons.svg. Du vælger dem pr. produkt med et ekstra felt.

Sådan viser du vaskesymboler

  1. Giv produktbeskrivelsen en fane med [tab] (se Kortkoder, punkt 7), fx en fane med titlen "Pleje"
  2. Skriv ikonernes navne kommasepareret i produktets Ekstra felter:
washing=washing-30deg,bleaching-not-allowed,drying-tumble-low-heat,iron-low

Bemærk: Symbolerne vises kun, når beskrivelsen har faner, og de kommer med i alle beskrivelsens faner. Brug derfor kun én fane på produkter med vaskesymboler. Uden mellemrum mellem navnene.

Vask

washing-30deg

washing-40deg

washing-60deg

washing-hand

washing-not-allowed

washing-30deg-extra-care

Der findes også 50, 70, og 90 grader, 95 grader som washing-95deg-alt, håndvask ved 30 og 40 grader, varianter med -permanent-press og -extra-care, og alternative tegninger med -alt, fx washing-40deg-alt.

Blegning

bleaching-non-chlorine

bleaching-not-allowed

bleaching

Tørring

drying-tumble-low-heat

drying-line-dry

drying-line-dry-shade

drying-flat-dry

Flere: drying, drying-drip-dry, drying-drip-dry-shade, drying-dry-shade, drying-flat-dry-shade, drying-not-allowed, drying-tumble, drying-tumble-medium-heat, drying-tumble-high-heat, drying-tumble-no-heat, drying-tumble-not-allowed, og varianter med -permanent-press og -extra-care.

Strygning

iron-low

iron-medium

iron-high

iron-not-allowed

Flere: iron og iron-steam-not-allowed. Til rens findes drycleaning, drycleaning-a, drycleaning-p, drycleaning-f, drycleaning-w, drycleaning-not-allowed m.fl., og desuden wringing-not-allowed og en række custom-ikoner som custom-t-shirt og custom-washing-machine.

Brand Management

Delaware kan vise alle dine brands på én side med logo og link til brandets kategori eller landingsside.

Opsætning af Brand Oversigt

  1. Opret ny side: Gå til Indhold → Statiske sider, og opret en ny side
  2. Vælg skabelon: Vælg "Brands" i feltet Skabelon (Template) under sidens Temaindstillinger
  3. Automatisk indlæsning: Alle brands vises under sidens tekst i den rækkefølge, de har i admin
  4. Gem siden: Og link til den fra fx en footer-menu

Oprettelse af Brands

Administration

  • • Gå til Produkter → Brands
  • • Opret et brand
  • • Udfyld Navn
  • • Vælg en kategori eller landingsside under "Link til"
  • • Upload brandets billede

Billedanbefalinger

  • • Format: PNG med transparent baggrund
  • • Kvadratisk format, da logoet vises i en kvadratisk ramme
  • • Høj kvalitet logoer
  • • Konsistent styling

Brand Funktioner

Din egen rækkefølge

Brands vises i den rækkefølge, du har givet dem i admin, og ellers alfabetisk

Responsivt Design

Brandsiden tilpasser sig skærmstørrelsen

Automatiske Links

Hvert logo linker til den kategori eller landingsside, du har valgt på brandet

Eksempel: Se hvordan brand oversigten fungerer på delaware.shoporama.dk/brands

Avancerede Postnummer Funktioner

Med to HTML-felter på fragtmetoden kan Delaware vise eller skjule fragtmetoden ud fra postnummeret i kundens leveringsadresse.

To Metoder til Postnummer Kontrol

Vis ved Match

Fragtmetoden vises kun for bestemte postnummerområder.

Brug: Når du kun vil tilbyde en fragtmetode i specifikke områder (fx by-levering)

Fjern ved Match

Fragtmetoden skjules for bestemte postnummerområder.

Brug: Når du vil udelukke en fragtmetode fra specifikke områder (fx øer eller fjerntliggende steder)

Vis ved Match Metode

Implementering:

  1. Gå til Levering → Fragtmetoder, og rediger fragtmetoden
  2. Klik Tilføj nyt HTML-felt, og kald feltet allowed_zip_codes
  3. Indtast postnummerområder i formatet: 1000-1999,3000-3999,5000-5999
  4. Gem indstillingerne
Eksempel på postnummerområder:
1000-1999,2000-2999,3000-3999,4000-4999,5000-5999

Dette vil vise fragtmetoden for postnumre 1000-5999

Video tutorial - Vis fragtmetoder

Fjern ved Match Metode

Implementering:

  1. Gå til Levering → Fragtmetoder, og rediger fragtmetoden
  2. Klik Tilføj nyt HTML-felt, og kald feltet disallowed_zip_codes
  3. Indtast postnummerområder i formatet: 3700-3790,3900-3999
  4. Gem indstillingerne
Eksempel på udelukkelse:
3700-3790,3900-3999

Dette vil skjule fragtmetoden for Bornholm (3700-3790) og Grønland (3900-3999)

Video tutorial - Skjul fragtmetoder

Format Retningslinjer

Understøttede Formater

  • 1000-1999 - Område fra 1000 til 1999
  • 2000,2100,2200 - Specifikke postnumre
  • 3000-3999,4000 - Kombineret område og specifik
  • 5000-5999,6000-6999 - Flere områder

Vigtige Noter

  • • Brug komma til at adskille områder
  • • Bindestreg for at definere områder
  • • Ingen mellemrum mellem værdier
  • • Intervaller virker kun med postnumre, der består af tal
  • • Brug kun ét af felterne pr. fragtmetode. Har den begge, vises den for alle postnumre undtagen dem i disallowed_zip_codes

Praktiske Anvendelseseksempler

Cykellevering

Kun i hovedstadsområdet og Aarhus

allowed: 1000-2999,8000-8270

Express Levering

Ikke til Bornholm og Grønland

disallowed: 3700-3790,3900-3999

Ølevering

Kun for Bornholm

allowed: 3700-3790

Pro tip: Test altid dine postnummer konfigurationer grundigt ved at simulere forskellige kundeadresser under checkout processen.

Video Embedding

Vis YouTube-videoer på produktsiden og i dine tekster, og brug en videofil som baggrund på forsiden.

Understøttede platforme

  • YouTube-videoer (ikke playlister)
  • Videofil som baggrund i sektionen Hero-video med kategori/landingsside

Sådan gør du

  • Produktvideo: Skriv videoens ID i feltet YouTube ID under Videoindstillinger (Video Settings) i produktets Temaindstillinger. Så får produktbilledet og produktkortet en afspilningsknap, der åbner videoen
  • Video i tekst: Brug [youtube_embed id="..."] (se Kortkoder)
  • Baggrundsvideo: Indsæt et direkte link til en videofil i feltet Baggrundsvideo (Background video). Den afspilles automatisk uden lyd og i loop

Pro tip: Video-ID'et kan også stå som youtube_id=... i produktets Ekstra felter. Udfylder du begge, bruges feltet under Temaindstillinger.

Video tutorial

Produkt Add-on System

Add-on systemet gør det muligt for dine kunder at tilføje relaterede produkter med et enkelt klik. Produkterne vises som afkrydsningsfelter i "Læg i kurv"-formularen ("Add to cart" i Delaware) på produktsiden, hvilket gør det nemt at mersælge tilbehør, forsikringer, eller andre relevante produkter.

Hvad er Add-ons?

Add-ons er en funktion der lader dig knytte relaterede produkter til et hovedprodukt. Når kunden klikker "Læg i kurv" ("Add to cart" i Delaware), kan de vælge at tilføje add-on produkterne samtidig ved at sætte kryds i checkboxes.

Eksempler på brug:

  • Batterier til elektronik
  • Forsikring eller garantiforlængelse
  • Tilbehør til hovedproduktet
  • Komplementære produkter (fx kaffe til kaffemaskine)

Sådan konfigureres Add-ons

1. Produkt niveau (højeste prioritet)

Dette er den mest specifikke konfiguration og overskriver alle andre indstillinger:

  1. Gå til det produkt hvor du vil tilføje add-ons
  2. Åbn Temaindstillinger på produktet
  3. Find sektionen Tilføjelsesprodukter (Addon Settings)
  4. I feltet Produkt-ID'er (Product Ids) indtaster du komma-separerede produkt-ID'er

Eksempel:

123,456,789

2. Kategori niveau

Gælder for produkter med kategorien som hovedkategori (hvis de ikke har add-ons på produktniveau):

  • Skriv addon_ids=123,456 i kategoriens Ekstra-felter under Avanceret
  • Produkterne i kategorien får automatisk disse add-ons

3. Parent kategori niveau (fallback)

Hvis hverken produkt eller kategori har add-ons konfigureret:

  • Temaet tjekker hovedkategoriens overkategorier, fra den øverste og nedefter
  • Bruger første parent kategori der har addon_ids sat

Vigtige begrænsninger

  • Add-ons med varianter får deres egen variantvælger, men kun når varianten er en værdiliste. Er varianten af en anden type, kan add-on'et ikke vælges og vises uden afkrydsningsfelt. Det samme gælder, hvis et add-on ingen varianter har på lager
  • Add-ons tilføjes som separate kurvlinjer (ikke bundlet med hovedproduktet)
  • Add-ons tilføjes altid med antal 1 (ikke konfigurerbart)
  • Ingen special pricing eller bundle-rabatter for add-ons
  • Kunden kan frit ændre eller fjerne add-ons i kurven bagefter

Brugeroplevelse

På produktsiden

  • Overskrift: "Læg i kurv med" ("Add to cart with" i Delaware)
  • Checkbox liste med alle add-ons
  • Hvert add-on viser:
    • • 32x32px produkt billede
    • • Produkt navn
    • • Pris
    • • Øje-ikon (link til fuld produktside)
    • • Variantvælger, når add-on'et har varianter

I kurven

  • Add-ons vises som normale produkter
  • Ingen visuel indikation af at de var add-ons
  • Kan ændres og fjernes uafhængigt
  • Ingen binding til hovedproduktet

Tekniske detaljer

Extension field navn:

addon_product_ids

Ekstra felt (produkt og kategori):

addon_ids

Format:

Komma-separerede produkt ID'er (fx: 123,456,789)

Prioriteret rækkefølge:

  1. Produkt extension value (addon_product_ids)
  2. Produktets ekstra felt (addon_ids)
  3. Hovedkategoriens ekstra felt (addon_ids)
  4. Overkategoriernes ekstra felt (addon_ids)

Best Practices

  • Brug kun relevante add-ons der giver værdi til kunden
  • Hold antallet af add-ons mellem 2-5 for ikke at overvælde kunden
  • Brug kategori-niveau konfiguration for produkter med samme add-ons
  • Test add-on produkternes priser - for høje priser kan mindske konvertering
  • Vælg add-on produkter med gode produkt billeder og beskrivelser
  • Brug værdiliste-varianter på add-ons, der skal have en variantvælger

Tilkøb i kurv og checkout

Ud over add-ons på produktsiden kan butikken tilbyde tilkøb for hele ordren, fx gaveindpakning, hilsenkort, eller opbæring. Tilkøbene er almindelige produkter i en produktprofil med fluebenet "Tilkøbsprofil". De holdes ude af lister, søgning, sitemap, og feeds. I stedet vises de som afkryds-felter i kurven og på sidste trin før betaling.

Hvor vises de?

  • I kurven (basket.html), over ordreoversigten
  • Øverst på godkend-trinnet (approve.html)
  • På leveringstrinnet (shipping.html), når Spring "Godkend ordre" over? er slået til

Komponenten ligger i components/basket-addons.html og tager parametrene return (basket, shipping, eller approve) og class. Hvert tilkøb er sin egen formular, så komponenten skal inkluderes uden for trinnets egen form. Den vises ikke på adresse-trinnet, fordi et klik genindlæser siden, og kunden ville miste de udfyldte felter.

Metoder og formular

  • $webshop->getBasketAddOnProducts() returnerer tilkøbene som produkter (højst 20, efter navn). Listen er tom, når kurven ikke har almindelige varer, og udsolgte tilkøb er sorteret fra.
  • $product->getBasketAmount() giver antal i kurven, så feltet kan vises som valgt.
  • Formularen sendes med POST til / med felterne basket_addon (produkt-id), basket_addon_state (1 = læg i kurven, 0 = fjern), og basket_addon_return.
<{foreach $webshop->getBasketAddOnProducts() as $addon}>
    <{$selected = $addon->getBasketAmount() > 0}>
    <form action="/" method="post">
        <input type="hidden" name="basket_addon" value="<{$addon->getProductId()}>">
        <input type="hidden" name="basket_addon_state" value="<{if $selected}>0<{else}>1<{/if}>">
        <input type="hidden" name="basket_addon_return" value="basket">
        <label>
            <input type="checkbox" onchange="this.form.submit()"<{if $selected}> checked<{/if}>>
            <{$addon->getName()|escape}>
        </label>
    </form>
<{/foreach}>

Sæt aldrig feltet som valgt, medmindre tilkøbet allerede ligger i kurven. Forbrugeraftaleloven kræver, at kunden aktivt vælger en ekstrabetaling. Tilkøb der står alene i kurven, fjernes automatisk på kurv- og godkend-trinnet.

Værditilbud

Delaware har plads til fire værditilbud (USP'er). De vises i bjælken øverst på alle sider, i footeren, i sektionen Værditilbud i Sidedesigneren og, hvis du slår det til, på produktsiden.

Opsætning af værditilbud

Navigation til indstillinger:

Gå til Design → Temaindstillinger → Værditilbud (Value Propositions)

For hvert værditilbud kan du konfigurere:
  • • Tekst - Kort overskrift. Uden tekst vises værditilbuddet ikke
  • • Beskrivelse - Vises i footeren, i sektionen, og på produktsiden, men ikke i topbjælken
  • • Ikon - Navnet på et ikon fra Ikon Bibliotek, fx truck
  • • Link (valgfrit) - Link til relevant side
Best practices:
  • • Hold teksterne korte og klare
  • • Vælg ikoner der matcher budskabet
  • • Fremhæv dine unikke fordele
  • • Test på mobil for læsbarhed
  • • Produktsiden viser kun de tre første. Slå dem til med Aktiver værditilbud under Produkt

Eksempler på værditilbud

Gratis fragt

Ved køb over 399 kr

30 dages retur

Fuld returret

Kundeservice

Man-fre 9-17

Sikker betaling

SSL-krypteret

Tilgængelige Ikoner

Skriv navnet på et af Delawares ikoner i Ikon-feltet, fx:

truck

credit-card

check

lifebuoy

arrow-return

shopping-bag

storefront

star

heart

Se alle navnene i Ikon Bibliotek. Skriver du et navn, der ikke findes, vises der intet ikon.

Blog Funktioner

Delaware viser din blog med oversigt, kategorier via en menu, billeder i indlæggene, og en liste med flere indlæg under hvert indlæg.

Oprettelse af Blogindlæg

Grundlæggende opsætning:

  1. Gå til Indhold → Blog → Opret nyt indlæg
  2. Udfyld titel og URL
  3. Skriv dit indhold i editoren
  4. Upload billeder. Det første bliver indlæggets billede i oversigten
  5. Udfyld title og description til søgemaskinerne
  6. Gem, eller vælg en dato under "Udgiv først efter"

Billedindsættelse i Blogindlæg

Billeder med kortkoder:

Brug kortkoder til at indsætte billeder direkte i dine blogindlæg:

[image index="1"]
[image index="2"]
[image index="3"]
Sådan fungerer det:
  1. Upload billeder til indlægget under Billeder
  2. Billederne får et nummer efter deres rækkefølge (1, 2, 3...)
  3. Indsæt billedet med [image index="X"]. Husk anførselstegnene
  4. Billedets beskrivelse vises som billedtekst

Blog Layout Muligheder

Layout: Default

  • • Billede, titel, og uddrag af teksten
  • • Forfatter og dato
  • • Læs mere-link

Layout: Simple

  • • Kun billede og titel
  • • Godt til mange indlæg

Kolonner og kategorier

  • • 2, 3, 4, eller 5 kolonner (standard 3)
  • • Layout og kolonner vælges under Temaindstillinger → Bloglister
  • • Kategorier: en menu med tagget blog vises som kategorivælger over oversigten

Blog SEO Funktioner

On-page SEO

  • • Egen title og description pr. indlæg
  • • Delingsbilledet fra Temaindstillinger → Open Graph bruges, når indlægget deles
  • • Brødkrummer, hvis de er slået til under Brødkrummer

Kategorier & relaterede indlæg

  • • Kategorierne er punkterne i menuen med tagget blog
  • • Under hvert indlæg vises op til 6 indlæg fra bloggen under overskriften "Relaterede blogindlæg"
  • • Sidedesigner-sektioner kan bruges på bloggen og i indlæggene

Farve Tilpasning

Delaware har to hovedfarver og egne farver til badges og til webshop-beskeden øverst på siden. Farverne skrives under Design → Temaindstillinger som en hex-værdi med # (fx #1a1a1a) eller som et HTML-farvenavn.

Primære Farveindstillinger

Tilpas følgende farver:

Tema og farver (Theme & Colors)
Primær farve
theme.primary
Handlingsfarve
theme.action

Begge er sorte (#000), indtil du vælger andet. Primærfarven bruges også til badges uden egen farve og til sliderne.

Andre farver
Webshop-besked: baggrund sitenotice.bg_color
Webshop-besked: tekst sitenotice.text_color
Baggrund bag billeder images.background

Gruppen Kampagner (Campaigns) har også to farvefelter, men dem bruger temaet ikke.

Badge & Label Farver

Under Badges har hvert badge en baggrunds- og en tekstfarve. Uden egen farve får badget primærfarven som baggrund og hvid tekst:

Udsalg
onsale_bg / onsale_text
Nyhed
new_bg / new_text
Få på lager
fewinstock_bg / fewinstock_text
Samlepakke
bundle_bg / bundle_text

Desuden mængderabat (volumediscount_bg/_text) og varianter (variant_bg/_text). Dine egne badges fra produktets Temaindstillinger (Badge 1-3) bruger farverne fra "Få på lager".

Forudindstillede Farveskemaer

Delaware har ingen færdige farveskemaer. Du sætter selv primærfarve, handlingsfarve, og badgefarver. Vil du ændre mere end det, så brug din egen CSS (se herunder).

Avancerede Farveindstillinger

CSS Custom Properties:

Farverne fra Temaindstillinger sættes som CSS-variabler på :root. Du kan overskrive dem i din egen CSS, fx i feltet Brugerdefineret CSS (Custom CSS) under Brugerdefineret kode (Beta):

:root {
--primary: #1a1a1a;
--action: #d97706;
--badge-bg-onsale: #dc2626;
--badge-text-onsale: #ffffff;
}

Badge-variablerne hedder --badge-bg-[type] og --badge-text-[type], hvor type er onsale, new, bundle, volumediscount, fewinstock, eller variant.

Tema Indstillinger

Delaware har over 250 indstillinger fordelt på 36 grupper. De giver dig kontrol over temaets udseende og funktioner uden kodning.

Adgang til indstillinger

Navigation: Admin → Design → Temaindstillinger

I admin:

  • • Søg i indstillingerne
  • • Fold alle grupper ind eller ud
  • • Gem, eller gem og rediger videre

Godt at vide:

  • • Navnene står på engelsk i Delaware og på dansk i DelawareDK
  • • Grupperne Lager, Sider, Checkout: Fragt og Checkout: Betaling er tomme
  • • Nogle få felter bruges ikke af temaet (se nederst i afsnittet)

Generelle Indstillinger

Farver & Branding

  • Farver - Primærfarve, handlingsfarve, og badgefarver
  • Logo - Logoet fra Design → Logo & betingelser, eller en URL og ALT-tekst under Tema og farver
  • Favicon - Fra Design → Logo & betingelser, eller en URL under Tema og farver
  • Billeder - Format (1:1, 2:3, 3:2, eller 16:9), beskæring, luft, og baggrund
  • Open Graph - Billede til deling på sociale medier

Sprog, valuta, og tal

  • Tal - Tusindtals- og decimalseparator
  • Sprog - Sprogkode og lokalindstilling
  • Valuta - Teksten der vises, og om den vises på produktkort
  • Flersprog - Sprogvælger med links til dine andre shops
  • Virksomhed - Kontaktoplysninger, åbningstider, og sociale links til footeren

Layout & Navigation

Kategorisider

  • • Layout for kategorikort og kategoriside
  • • Kategorimenu i siden
  • • Filtre
  • • Fold beskrivelse A og B sammen
  • • Populære produkter

Toppen af siden

  • • Webshop-besked med tekst til desktop og mobil
  • • Beskeden kan lukkes i et antal dage
  • • Værditilbud i topbjælken
  • • Egen bedømmelse eller Trustpilot
  • • Sprogvælger

Breadcrumb

  • • Slå brødkrummer til og fra
  • • Vis eller skjul dem på mobil
  • • Struktureret data for brødkrummer på kategorier, landingssider, og produkter

Produkt Indstillinger

Produktbilleder

  • Lightbox - Vis billederne i stor størrelse
  • Miniaturer - Små billeder under produktbilledet
  • Lazy loading - Performance optimering
  • WebP support - Moderne billedformater
  • Aspect ratio - Ens billedformat under Billeder

Produktinformation

  • Førpris - Laveste pris de sidste 30 dage (Omnibus)
  • Lagerstatus - "Få på lager", lagerantal, og restordrebesked
  • Varianter - Vis udsolgte varianter og varianter uden pris
  • Faner - Produktattributter, levering, retur, betaling, og "Stil et spørgsmål"
  • Anbefalinger - Relaterede, lignende, og "Andre har også købt", evt. udfyldt automatisk

Shop & Checkout Indstillinger

Indkøbskurv

  • Slide-kurv - Kurven glider ind fra siden
  • Kurv i headeren - Antal varer og samlet pris
  • AJAX updates - Ingen side reload ved tilføjelse
  • Bekræftelse - Besked når varen er lagt i kurven
  • Anbefalinger - I slide-kurven og som relaterede produkter i kurven

Checkout Process

  • Checkout i trin - Se afsnittet Checkout
  • Guest checkout - Køb uden registrering
  • Kundetyper - Privat, virksomhed, og offentlig (EAN)
  • Vilkår - Tekster til handelsbetingelser og nyhedsbrev
  • Takkeside og mersalg - Egen tekst, konfetti, og mersalg med nedtælling

Marketing & SEO

Beskeder

  • • Webshop-besked øverst på siden
  • • Nyhedsbrevsboks i footeren
  • • Besked om gratis fragt
  • • Forsendelsesalarm

SEO Optimering

  • • Open Graph-billede
  • • Schema for butikken under Schema: Global (type, beskrivelse, kontakt, betaling)
  • • Canonical-link på siderne
  • • Sitemap-side via feltet Skabelon (Template) på siden
  • • Egne tekster på 404- og 410-siderne

Analytics

  • • E-handelshændelser til dataLayer
  • • Google Analytics- og Meta Pixel-ID sendes med
  • • Slås til under Webshop → Sporing

Tredjeparts Integrationer

I temaet (gruppen Integrationer)

  • Reviews - Trustpilot og e-mærket
  • Search & Discovery - Clerk.io
  • Prissammenligning - Pricerunner
  • Delbetaling - ViaBill og Anyday

I Shoporama

Betaling, fragt, bogføring, og nyhedsbreve sættes op i Shoporama under Integrationer og Levering. De virker uanset hvilket tema du bruger, og har derfor ingen indstillinger i Delaware.

Avancerede Indstillinger

Brugerdefineret kode (Custom Code)

  • Brugerdefineret CSS (Custom CSS) - Bliver sat ind efter temaets farver. CSS'en udskrives, så snart feltet er udfyldt, også selvom "Aktiver brugerdefineret CSS" er slået fra
  • Brugerdefineret Javascript (Custom Javascript) - Udskrives ikke af temaet. Brug i stedet et HTML-felt under Webshop → HTML-felter med placeringen sidst i body
  • Template overrides - Ret temaets filer under Design → Kodeeditor eller via SFTP

Performance

  • Lazy loading - Billeder indlæses, når de kommer i syne
  • Asset minification - CSS og JavaScript er færdigbygget og minificeret
  • Debug mode - "Sæt shoppen i debug mode" under Generelt tvinger browseren til at hente temaets CSS og JavaScript på ny ved hver visning. Slå det fra igen bagefter

Indstillinger uden effekt

Disse felter står i Temaindstillinger, men Delaware læser dem ikke. Udfylder du dem, sker der intet:

  • • Fragt (Shipping): de tre leveringstidsfelter. Brug felterne under Generelt
  • • Brugerdefineret kode (Custom Code): Aktiver brugerdefineret CSS, Aktiver brugerdefineret JS, og Brugerdefineret Javascript (Custom Javascript)
  • • Kampagner (Campaigns): alle fire felter
  • • Nyhedsbrev: knappens tekst (Form Button). Knappen viser altid standardteksten
  • • Landingssider: Aktiver filter
  • • Produkt: Aktiver afkortet lang beskrivelse
  • • Integrationer: Trustpilot Template ID Starter

Se indstillinger i praksis:

Se Delaware med indstillingerne i brug på: https://delaware.shoporama.dk

theme_settings.json Struktur

Delawares indstillinger er defineret i theme_settings.json i temaets rodmappe. Filen bestemmer, hvilke felter der vises under Temaindstillinger.

Fil Struktur

{
"info": "Delaware",
"smarty_version": 4, // Temaet kører Smarty 4
"features": [ // Liste over tema features
"Support for Shoporama Sidedesigner",
"Eget logo og favicon",
// ... flere features
],
"demo": "https://delaware.shoporama.dk/",
"settings": [ // Grupper af indstillinger
// ... indstillings grupper
]
}

Det er alle nøglerne i Delawares fil. Sidedesigner-sektionerne og tema-udvidelserne ligger i andre filer, som du kan læse om længere nede.

Indstillings Grupper

Gruppe Struktur 

{
  "path": "theme",
  "name": "Theme & Colors",
  "description": "",
  "fields": [
    // Individuelle felter
  ]
}

Eksempler på Delawares grupper

  • general - Separatorer, ikoner i footeren, og leveringstider
  • theme og badges - Farver og logo
  • value_propositions - De fire værditilbud
  • product og product_card - Produktside og produktkort
  • checkout, checkout_cart, checkout_address m.fl. - Checkout
  • emails - Emne og tekst til temaets mails

I dine templates læser du en værdi som $settings.[gruppe].[felt], fx <{if $settings.checkout.enable_login}>. Gruppe og felt er de to path-værdier.

Felt Typer

Tekst & Input

  • string - Enkelt linje tekst
  • text - Multi-linje tekst
  • wysiwyg - Rich text editor

Valg & Options

  • bool - Ja/Nej toggle
  • list - Dropdown valg
  • color - Farvevælger

Media & Filer

  • image - Billede upload. I templaten er værdien et billedobjekt

Delaware selv bruger string, bool, list, image, og wysiwyg. Farver skrives i almindelige tekstfelter.

Felt Definition Eksempel

Komplet felt eksempel fra Delaware:

{
  "path": "enable_login",
  "name": "Enable Login (Beta)",
  "description": "Lets your customers create accounts and log in",
  "type": "bool"
}
Påkrævede properties:
  • • path - Unik identifikator
  • • name - Visningsnavn
  • • type - Felttype
Valgfrie properties:
  • • description - Hjælpetekst
  • • default - Udfylder feltet i admin, når det er tomt. Værdien gælder først i shoppen, når indstillingerne er gemt
  • • values - Valgmulighederne i et list-felt

List Felt Eksempel

Dropdown med valgmuligheder (blog_list.layout):

{
  "path": "layout",
  "name": "Layout",
  "description": "Choose the layout for your blog lists",
  "type": "list",
  "values": [
    {
      "name": "Default",
      "value": "default"
    },
    {
      "name": "Simple",
      "value": "simple"
    }
  ]
}

Tema-udvidelser (extensions)

Felter på de enkelte produkter, kategorier, og sider defineres i mappen extensions/ (product.json, category.json, landing_page.json, static_page.json, og blog_post.json). De vises under Temaindstillinger på produktet eller siden i admin. Eksempel fra product.json: 

[
  {
    "name": "Video Settings",
    "description": "",
    "fields": [
      {
        "title": "YouTube Id",
        "id": "youtube_id",
        "type": "text"
      }
    ]
  }
]

Værdien læses med $product->getExtensionValue('youtube_id'). Delawares udvidelser er: på produkter youtube_id, badge-1 til badge-3, addon_product_ids, bundle_hide_view, comment_enabled, comment_attribute_id, pickup_only, hide_discount_pricetable, og hide_variants_pricetable. På kategorier et billede (image) til toppen af kategorisiden, og på statiske sider feltet template (sitemap, terms, unpaid, eller brands).

Ekstra felter, som Delaware læser

Udover udvidelserne læser Delaware nogle nøgler fra feltet Ekstra felter (nøgle=værdi, én pr. linje). I templates hentes de med $product->getMetaValue('subtitle').

På produkter

  • • subtitle= Undertitel under produktnavnet
  • • washing= Vaskesymboler (se Vaskesymboler)
  • • addon_ids= Add-ons (se Produkt Add-ons)
  • • youtube_id= Produktvideo, hvis udvidelsen er tom
  • • variants_landing= ID på en landingsside. Dens produkter vises som en vælger på produktsiden, fx når hver farve er sit eget produkt
  • • googletitle= og g:color=, g:material= m.fl. bruges i temaets egne feeds (google.xml og facebook.xml)

På kategorier og sider

  • • filters= Filtre på kategorien (se Filtre & Søgning)
  • • addon_ids= Add-ons til kategoriens produkter
  • • template=pagebuilder på en statisk side viser kun Sidedesigner-indholdet, uden sidens egen tekst

Sidedesigner Moduler

Sektionerne er ikke defineret i theme_settings.json. De består af tre dele:

  • • components/sections.json - hvilke sektioner der må bruges på hvilke sidetyper
  • • components/sections/[navn].json - sektionens titel og felter
  • • templates/sections/[navn].html - skabelonen, hvor felterne læses som $section.[id]

Felttyperne i Delawares sektioner er text, longtext, richtext, image, list, bool, integer, repeater, og product. Nogle af Delawares 23 sektioner:

banner

product-list

hero-video-categories

text-two-columns

product-slider

trustpilot

newsletter

address-map

facebook-feed

instagram-feed

13 flere

<{if $section.title}>
  <h2><{$section.title|escape}></h2>
<{/if}>

Best Practices

  • Brug beskrivende navne: Gør det klart hvad indstillingen gør
  • Tilføj hjælpetekst: Brug description feltet til at guide brugeren
  • Gruppér relaterede indstillinger: Hold lignende indstillinger sammen
  • Brug standardværdier: Sæt fornuftige defaults
  • Test ændringer: Verificer at indstillinger fungerer korrekt

Ønskelister & Favoritter

Delaware har to uafhængige systemer til at gemme produkter: ønskelister (kræver login, deles via link) og favoritter (lokalt i browseren, hjerteknap).

Ønskelister

Kunden kan oprette flere navngivne ønskelister, tilføje produkter med antal og varianter, og dele dem via et unikt link.

  • Kræver login, og data gemmes i databasen
  • Flere ønskelister pr. kunde
  • Deling via unikt link
  • Varianter og antal understøttet
  • Offentlig visning med "Læg i kurv"-knapper

Aktivering: Temaindstillinger → Produkt → Aktiver ønskelister (Enable Wishlists)

Favoritter

Simpel hjerteknap på produktkort og produktside. Favoritter gemmes lokalt i browseren, så det kræver ikke login.

  • Ingen login påkrævet
  • Hjerteknap på produktkort og produktside
  • Sidepanel med alle favoritter
  • Direkte "Læg i kurv" fra sidepanelet
  • Tæller i headeren

Aktivering: Temaindstillinger → Produkt → Aktiver ønskeliste (Beta) (Enable Wishlist (Beta))

Bemærk: De to systemer er uafhængige, så du kan bruge ét eller begge samtidig. Ønskelister kræver login og er ideelle til deling (fødselsdagsønsker, juleønsker), mens favoritter er hurtige og uforpligtende.

Abonnementer

Delaware understøtter abonnementer (recurring orders), så kunderne kan tegne løbende abonnementer på produkter.

Opsætning af abonnementsprodukter

For at sælge et produkt som abonnement udfylder du boksen Abonnementsindstillinger på produktet:

Abonnementspris

Pris med eller uden moms ved abonnement

Interval

Mulige intervaller i dage, uger, eller måneder

Bindingsperiode

Valgfri minimum varighed

Kundens oplevelse

Produktsiden

  • Abonnementsboks med type og pris
  • Vælg leveringsinterval (fx "Hver 2 måneder")
  • Variantvalg med abonnementspriser
  • Kommentarfelt
  • Bindingsperiode-besked (hvis sat)

Min profil

  • Oversigt over alle abonnementer
  • Ændre næste levering og interval
  • Opdater betalingskort
  • Opsig eller genåbn abonnement
  • Se produkt- og adressedetaljer

Kurv & checkout

  • Abonnementer vises i kurven og sidemenuen med ikon og interval
  • Fjern-knap på abonnementer i kurv og sidepanel
  • "Produktet blev tilføjet til kurven"-modal ved tilføjelse af abonnement
  • Abonnementsbadge på produktkort

Email-skabeloner

Delaware inkluderer 6 email-skabeloner til abonnementer:

Subscription Confirmation
Bekræftelse ved oprettelse
Subscription Cancel
Besked ved opsigelse
Subscription Open
Besked ved genåbning
Subscription Reminder
Påmindelse inden levering
Subscription Cancel After
Planlagt opsigelse efter binding
Subscription Change
Bekræftelse ved kortopdatering

Vigtigt: Abonnementer kræver en betalingsgateway, der kan trække betalinger automatisk på et gemt kort. Kontakt din betalingsudbyder for at sikre, at det er aktiveret på din konto, og skriv til support@shoporama.dk, hvis du er i tvivl om din gateway kan bruges.

Performance & SEO

Det gør Delaware for hastighed og søgemaskiner. Den faktiske score afhænger af dine billeder, sektioner, og scripts, så mål din egen shop med fx PageSpeed Insights.

Performance metrics

WebP
Billeder i rette størrelse
Lazy
Billeder hentes, når de vises
1
Samlet, minificeret JavaScript-fil
SVG
Ikoner som sprites

Brug for hjælp?

Vi er her for at hjælpe dig med at få det bedste ud af Delaware

Kontakt support API dokumentation