Delaware-temaet: konfiguration og tilpasning

Delaware er et af Shoporamas gratis standardtemaer. Det er moderne, responsivt, og bygget med Tailwind CSS, så det fungerer flot på både desktop og mobil. Stort set alt udseende og adfærd kan tilpasses fra Design i admin uden at skrive kode. Denne guide gennemgår de vigtigste indstillinger.

Hvor finder du indstillingerne

Næsten alt styres fra Design → Temaindstillinger. Felterne er grupperet i sektioner, og oversigten Overblik i højre side springer direkte til den sektion, du klikker på, fx General (Generelt), Company (Virksomhed), Theme & Colors (Tema og farver), Badges, Product (Produkt), Checkout: General (Checkout: Generelt), Integrations (Integrationer), og Custom Code (Beta) (Brugerdefineret kode (Beta)). Mange felter har en kort hjælpetekst lige under feltet. Gem dine ændringer med knappen Gem og rediger videre.

Standard-leveringstiderne for varer på lager, varer på fjernlager, og udsolgte varer skriver du i felterne Leveringstid under General (Generelt). Sektionen Shipping (Fragt) har felter med næsten samme navne, men dem bruger temaet ikke. Leveringstiden kan overskrives på det enkelte produkt.

Logo, farver, og badges

Under Theme & Colors (Tema og farver) kan du:

• Indsætte URL til logo og favicon (upload selve filen under Design → Filer, og kopiér URL'en). Har du uploadet logo eller favicon under Design → Logo & betingelser, bruger temaet dem i stedet.
• Vælge primær- og action-farve som hexkode, fx #1a73e8
• Skrive en alt-tekst på logoet (vigtigt for tilgængelighed og SEO)

Under Badges tilpasser du farverne på de små mærker, der vises på produkter, fx Tilbud, Nyhed, Få på lager, og Mængderabat.

Footer-menuer

Delaware har plads til to menuer i footeren, mellem kolonnen med dine firmaoplysninger og tilmeldingen til nyhedsbrevet. Sådan tilføjer du dem:

1. Gå til Indhold → Menuer
2. Klik Opret ny menu, skriv et Navn, og klik Opret. Navnet bliver overskriften på kolonnen i footeren.
3. På menuens side skriver du footer_menu_1 eller footer_menu_2 i feltet Tag. Du kan også klikke på et af temaets tags under felterne for at indsætte det. Lad Placering af menuen stå på -- ingen --. Footer-menuerne findes via tagget, og en menu med placeringen Øverst kan ende som hovednavigation.
4. Tilføj de menupunkter, du vil vise, og klik Gem.

Megamenu

En megamenu er en stor dropdown i flere kolonner, der typisk bruges som hovednavigation, så kunder hurtigt finder rundt i et stort sortiment.

Hovednavigationen i Delaware er den menu, hvor Placering af menuen står til Øverst. Du redigerer den under Indhold → Menuer. Der må kun være én menu med placeringen Øverst. En megamenu laves af en undermenu i hovednavigationen, hvor feltet Klasse indeholder megamenu og intet andet (ikke mega_menu, og uden mellemrum eller andre klasser). Klassen skriver du i feltet Klasse på undermenuens række, eller i Evt. CSS-klasse, når du opretter undermenuen med Tilføj undermenu.

Selve strukturen kræver tre niveauer: hovednavigationen indeholder undermenuen med klassen megamenu, og inde i den bliver hver undermenu til en kolonne. Almindelige punkter, der ligger direkte under megamenu-punktet, vises ikke, så de skal ligge inde i en kolonne. I hver kolonne bliver det første punkt kolonneoverskrift, men kun hvis det er en kategori, et produkt, eller en landingsside. Er det første punkt et link eller en statisk side, vises det slet ikke. Resten af kolonnens punkter bliver links. Sætter du klassen show_image på det første punkt i en kolonne, og det er en kategori, et produkt, eller en landingsside, vises objektets billede som blikfang øverst i kolonnen. Brug kun show_image på det første punkt, ellers kommer punktet med to gange. Læs mere i artiklen om menuer og navigation.

Betalings- og fragtikoner i footeren

Du behøver ikke uploade billeder af betalingskort eller fragtfirmaer. Delaware har indbyggede SVG-ikoner og vælger dem ud fra to felter under General (Generelt). Ikonerne vises i footeren og i kurven.

Feltet Betalingsmetoder (path: payment_methods) er en kommasepareret liste, fx:

dankort,visa,mastercard,maestro,mobilepay,applepay,googlepay

Disse navne er indbygget som ikoner i Delaware:

• dankort, visa, mastercard, maestro
• mobilepay, applepay, googlepay, paypal
• klarna, viabill, anyday, banktransfer, invoice, ean

Skriv navnene i små bogstaver, uden mellemrum mellem kommaerne. Et navn, der ikke findes som indbygget ikon, giver ingen fejl, men der vises bare et tomt felt i stedet for et ikon.

Feltet Fragtmetoder (path: shipping_methods) fungerer på samme måde, fx:

gls,postnord,ups,burd

Disse fragtnavne er indbygget: gls, postnord, dao, bring, ups, dhl, burd, budbee, coolrunner, dkfragt, instabox, swipbox, og pickup.

Trustpilot-integration

Delaware bruger Trustpilots officielle widgets. Hver widget kræver sit eget Template ID, som du kopierer fra Trustpilots Business-portal. Felterne ligger under Integrations (Integrationer):

1. Aktivér Enable Trustpilot (Aktiver Trustpilot)
2. Indtast din Trustpilot Business ID (path: trustpilot_business_id). Det er din butiks unikke ID hos Trustpilot
3. Udfyld Template ID for de widgets du faktisk vil vise:

• Trustpilot Template ID Carousel (trustpilot_template_id_carousel): stort karrusel-element øverst i footeren på alle sider, nederst i kassen, og i Sidedesigner-modulet Trustpilot
• Trustpilot Template ID Micro Star (trustpilot_template_id_micro_star): kompakte stjerner i starten af kassen. Den bruges også som reserve i header og footer, hvis felterne til de andre widgets er tomme
• Trustpilot Template ID Micro Review Count (trustpilot_template_id_micro_reviewcount): lille tekst-widget med antal anmeldelser i bunden af footeren
• Trustpilot Template ID Micro Trustscore (trustpilot_template_id_micro_trustscore): samlet score i toppen af headeren og i kassens sidebar
• Trustpilot Template ID Product Mini (trustpilot_template_id_product_mini): stjerner under produktnavnet på produktsiden
• Trustpilot Template ID Product Reviews (trustpilot_template_id_product_reviews): fuld anmeldelsesliste i fold-ud-feltet Anmeldelser på produktsiden
• Trustpilot Template ID Starter (trustpilot_template_id_starter): bruges ikke af temaet, så du kan lade det stå tomt

De to produkt-widgets finder anmeldelserne ud fra produktets SKU, så SKU'en skal være den samme, som Trustpilot kender produktet under.

Instagram, Facebook, og øvrige sociale links

Delaware viser små ikoner i footeren, der linker til dine profiler på sociale medier. Du udfylder URL'erne under Company (Virksomhed):

• Instagram URL (path: instagram_url)
• Facebook URL (facebook_url)
• YouTube URL (youtube_url)
• Google URL (google_url)

Skriv hele URL'en, fx https://www.instagram.com/dinprofil/. Lader du feltet stå tomt, vises ikonet ikke.

Value Propositions (USP'er)

Du kan vise op til fire Value Propositions (Værditilbud). Det kunne være "Fri fragt over 500 kr.", "30 dages returret", eller "Hurtig levering". Sæt dem op under Value Propositions (Værditilbud), hvor hver USP har felter for tekst, beskrivelse, ikon, og evt. link. Når du har udfyldt dem, vises de automatisk i en bjælke øverst på siden og over footeren. Med Enable Value Propositions (Aktiver værditilbud) under Product kan de første tre også vises på produktsiden, og de kan tilføjes som modul i Sidedesigner.

I feltet Icon (Ikon) skriver du navnet på et af temaets indbyggede ikoner, fx truck, arrow-return, check, star, heart, credit-card, storefront, lifebuoy, eller shopping-bag.

Forsiden og Sidedesigner

Forsiden bygges via Sidedesigner, hvor du kan tilføje sektioner som hero-bannere, produktkarruseller, billedgallerier, tekst, og blog-feeds. Du trækker og slipper sektioner og redigerer indholdet uden at røre koden. Sidedesigner kan også bruges på kategorier, landingssider, produkter, og flere andre sidetyper.

Modulet Category feature (Kategori-feature) står i listen over moduler, men Delaware kan ikke vise det, og butikken viser i stedet en fejlboks. Brug Category List (Kategoriliste) eller Category Slider (Kategorislider) i stedet.

Produktsidens funktioner

Under Product (Produkt) kan du slå en lang række funktioner til og fra:

• Andre har også købt, Lignende produkter, og Relaterede produkter, hver med autofyld fra samme kategori
• Ønskeliste, både simpel (browser-baseret) og fuld (kræver login)
• Fold-ud-faner for produktdetaljer, levering, returnering, betaling, og spørgsmål. Fanerne for levering, returnering, og betaling vises kun, når du har skrevet teksten under Terms of service (Servicevilkår) i temaindstillingerne. Delaware bruger ikke feltet Handelsbetingelser under Design → Logo & betingelser. Har du skrevet dine betingelser dér, fx fordi du kommer fra et andet tema, skal du kopiere dem over i Terms of service. Ellers er betingelserne tomme i kassen
• Få på lager-badge, backorder-besked, og kampagne-besked
• Billedgalleri med thumbs og lightbox
• Vaskeanvisning og størrelsesguide, der vises som fold-ud-felter og henter indholdet fra en statisk side via et produktlabel. Se guiden til størrelsesguiden. Vaskeanvisningen virker på samme måde, blot med et tag der indeholder washing-instruction
• Omnibus-pris: visning af laveste pris de sidste 30 dage på tilbudsvarer. Det kræver, at Prislogning er slået til under Statistik → Prishistorik

Egne faner, video, og undertitel på produktet

Du kan dele en lang produktbeskrivelse op i flere fold-ud-faner direkte i feltet Beskrivelse på produktet. En fane starter med en linje med koden [tab type="pleje" title="Pleje"] og slutter med en linje med [/tab], fx:

Vores populære sweatshirt i blød bomuld.
[tab type="materialer" title="Materialer"]
80 % bomuld og 20 % polyester.
[/tab]
[tab type="pleje" title="Pleje"]
Vaskes ved 40 grader.
[/tab]

• Hver kode skal stå i sit eget afsnit, så tryk Enter før og efter koden.
• Der skal stå tekst før den første fane. Den vises under Beskrivelse (Description i Delaware), og tekst efter den sidste fane vises under Mere information (More information i Delaware).
• type og title må kun indeholde bogstaverne a-z og A-Z, tal, mellemrum, og understregning. Æ, ø, å, og bindestreger virker ikke, og så vises koderne som almindelig tekst.

En video på produktsiden tilføjer du ved at skrive videoens YouTube-ID i feltet YouTube Id (YouTube ID) i sektionen Temaindstillinger på produktet. Så kommer der en afspilningsknap på produktbilledet. I tekstfelter som kategoribeskrivelser, statiske sider, blogindlæg, Sidedesignerens tekstmoduler, og produktbeskrivelser uden faner kan du indlejre en YouTube-video med koden [youtube_embed id="VIDEO-ID"].

En undertitel under produktnavnet laver du ved at skrive subtitle=Din tekst i feltet Ekstra felter i sektionen Felter på produktet. Tilkøbsprodukter, som kunden kan lægge i kurven sammen med produktet, angiver du med produkt-ID'er i Addon Settings (Tilføjelsesprodukter) under Temaindstillinger på produktet.

Checkout-tilpasninger

Sektionerne Checkout: General (Checkout: Generelt), Checkout: Cart (Checkout: Kurv), Checkout: Address (Checkout: Adresse), Checkout: Approve (Checkout: Godkend), Checkout: Thank You (Checkout: Tak), og Checkout: Upsell (Checkout: Mersalg) styrer hver fase af kassen. Her kan du blandt andet aktivere og deaktivere login, rabatkoder, nyhedsbrevstilmelding, og mersalg, samt vælge om du henvender dig til private (B2C), erhverv (B2B), og/eller offentlige kunder (B2G/EAN).

Site Notice (banner i toppen)

Vil du fortælle om en kampagne, en helligdagslukning, eller en generel besked? Sæt flueben i Enable Sitenotice (Aktiver webshop-besked) i sektionen Site Notice (Webshop-besked), og skriv en tekst med eventuelt en lukkeknap. Du kan have forskellig tekst på desktop og mobil, vælge farver, og vælge hvor mange dage banneret skal være lukket, når kunden klikker det væk (standard er 7 dage).

Andre integrationer

Under Integrations (Integrationer) kan du udover Trustpilot også aktivere:

• Pricerunner ved at indsætte dit account-ID. Så vises et PriceRunner-mærke på produktbilledet ud fra produktets SKU
• E-mærket ved at indsætte URL'en til din e-mærket-side, så e-mærket-ikonet linker til den. Du kan også vise e-mærkets widgets i headeren, på produktsiden, og i footeren ved at udfylde felterne med widget-ID. Udfyld også E-mærket Widget Script ID, medmindre e-mærkets script allerede ligger under Webshop → HTML-felter, ellers forbliver widgets tomme
• Viabill til delbetalinger (kræver Viabill shop ID)
• AnyDay til delbetalinger (kræver AnyDay price token)
• Clerk.io til intelligent søgning og produktanbefalinger (kræver API-nøgle)

Egne tilpasninger (Custom CSS og JS)

Egen CSS lægger du bedst under Design → Stylesheet. Det er et rent kodefelt, og Delaware indlæser det efter temaets egen CSS, så du kan overskrive temaets styles. Det er den nemmeste måde at lave små designjusteringer uden at ændre selve temaets filer.

Sektionen Custom Code (Beta) (Brugerdefineret kode (Beta)) har også felter til CSS og JavaScript, men de virker anderledes, end navnene antyder. CSS'en i Custom CSS (Brugerdefineret CSS) kommer altid med på alle sider, så snart der står noget i feltet, uanset fluebenet Enable Custom CSS (Aktiver brugerdefineret CSS). Vil du slå den fra, skal du tømme feltet. Feltet Custom Javascript (Brugerdefineret Javascript) bruger Delaware slet ikke. Scripts, fx fra eksterne tjenester, lægger du i stedet under Webshop → HTML-felter med placeringen Indsæt sidst i eller Indsæt sidst i , eller i Sidedesigner-modulet Custom code (Tilpasset kode), hvis det kun skal på én side. Læs mere om HTML-felter.

Ofte stillede spørgsmål

Hvilken Smarty-version kører Delaware på?

Delaware og DelawareDK kører på Smarty 4, som er den nyeste Smarty-version Shoporama understøtter. Hvis du selv tilretter templates, kan du derfor bruge Smarty 4-syntaks som <{$foo = 123}> og <{foreach $items as $item}>.

Hvad er forskellen på Delaware og DelawareDK?

Funktionerne er de samme. Forskellen er sproget, både i butikken og i admin: Delaware har engelske standardtekster i butikken (fx "Size guide" og "Description") og overvejende engelske navne på temaindstillingerne (fx "Company" og "Integrations"), mens DelawareDK har danske tekster og navne. Butikkens tekster kan du rette og oversætte under Design → Tekster i begge temaer. Læs mere om at oversætte og tilpasse tekster.

Mine betalingsikoner vises ikke i footeren. Hvad gik galt?

Oftest er et navn stavet anderledes end i listen over indbyggede ikoner ovenfor. Skriv navnene med små bogstaver, adskilt af komma og uden mellemrum.

Hvilket Trustpilot-felt skal jeg udfylde?

Start med Trustpilot Business ID og Trustpilot Template ID Micro Star. Så har du stjerner i både header og footer. De øvrige felter er kun nødvendige, hvis du vil vise flere widgets.

Kan jeg vise mine seneste Instagram-billeder direkte på forsiden?

Ja. Tilføj modulet Instagram på forsiden i Sidedesigner, og indtast din profil-URL. Lader du feltet stå tomt, bruger modulet Instagram URL fra temaindstillingerne. Din Instagram-profil skal være offentlig. Vil du hellere bruge en tredjepartsløsning, fx Behold eller Elfsight, kan du indsætte dens kode i modulets felt til egen indlejringskode.

Hvor laver jeg footer-tekster med firmaadresse og CVR?

Firmanavn, adresse, by, postnummer, CVR, telefon, og e-mail sættes under Company (Virksomhed) i temaindstillingerne. Disse data vises automatisk i footeren og bruges også til strukturerede data (Schema.org), så Google forstår din butik bedre.

Bruger Delaware Theme Builder?

Nej. Delaware bruger Sidedesigner til sidernes indhold og Design → Temaindstillinger til farver, footer, integrationer, og de andre indstillinger i denne guide. Den gamle Theme Builder findes kun til ældre temaer, og menupunktet vises ikke, når du bruger Delaware.

Hvor godt fungerer Delaware på mobilen?

Delaware er bygget med Tailwind CSS og er fuldt responsivt. Menuen, også megamenuen, åbner som en mobilmenu, der glider ind fra siden, og billeder skaleres automatisk til skærmstørrelsen. Du kan også vælge separat tekst til Site Notice på mobil, og slå brødkrummer til eller fra på mobil.

Kan jeg bruge megamenu og almindelig menu samtidig?

Ja. Du kan endda blande dem inde i samme hovednavigation. Kun de undermenuer, der har klassen megamenu, foldes ud som en stor megamenu. Undermenuer uden klassen vises som en almindelig dropdown, og almindelige punkter som links. Og du kan stadig have separate menuer til toppen og de to footer-kolonner.

Skal jeg vælge Delaware eller DelawareDK?

Vælg DelawareDK, hvis din butik er på dansk. Så er butikkens tekster og navnene i temaindstillingerne på dansk fra start. Vælg Delaware, hvis du foretrækker engelske standardtekster, fx til en international shop. Skifter du senere mellem dem, beholder du dine temaindstillinger. Tekster du har rettet under Design → Tekster, skal du dog gennemgå igen, fordi de to temaer har forskellige standardtekster.

Har du brug for hjælp med Delaware? Skriv til os på support@shoporama.dk.