Konfigurasjon og tilpasning med Delaware-tema
Komplett guide til hvordan du setter opp Delaware-temaet i Shoporama-nettbutikken din. Bunntekst, megameny, farger, betalingsikoner, Trustpilot, Instagram-lenke og mye mer.
Delaware er Shoporamas mest brukte tema. Det er moderne, responsivt og bygget på toppen av Tailwind CSS, slik at det fungerer utmerket på både stasjonær og mobil. Nesten alt utseende og oppførsel kan tilpasses fra Design i admin uten å skrive kode. Denne veiledningen går gjennom de viktigste innstillingene.
To versjoner: Delaware er tilgjengelig som Delaware (engelske admin-etiketter) og DelawareDK (danske admin-etiketter). De er funksjonelt identiske, så velg den som passer til teamet ditt. Begge kjører på Smarty 4.
Hvor du finner innstillingene
Nesten alt styres fra Konto → Nettbutikk → Tema → Innstillinger. Feltene er gruppert i seksjoner som Generelt, Firma, Tema, Merker, Produkt, Kasse, Integrasjoner og Egendefinert kode. Hvert felt har en kort beskrivelse på selve siden, så du trenger ofte ikke å slå det opp her i veiledningen.
Logo, farger og merker
Under Tema kan du gjøre følgende:
- sette inn URL for logo og favicon (last opp filen under Tema → Filer, og kopier URL-adressen)
- Velge primær- og handlingsfarge som hex-kode, f.eks. #1a73e8
- Skriv en alt-tekst på logoen (viktig for tilgjengelighet og SEO)
Under Merker kan du tilpasse fargene på de små merkene som vises på produktene, f.eks. Tilbud, Ny, På lager og Kvantumsrabatt.
Menyer i bunnteksten
Delaware har plass til tre menyer i bunnteksten. Slik legger du dem til:
- Gå til Innhold → Menyer
- Opprett en ny meny, og gi den en av disse taggene: footer_menu_1, footer_menu_2 eller footer_menu_3
- Legg til menyelementene du vil vise
- Menynavnet blir automatisk overskriften i bunnteksten
Megameny
En megameny er en stor rullegardinmeny med flere kolonner som vanligvis brukes som hovednavigasjon for å hjelpe kundene med å finne frem i et stort sortiment.
I Delaware aktiveres megamenyen av CSS-klassen megamenu (nøyaktig denne strengen - ikke mega_menu og uten mellomrom). Klassen angis i feltet Class på det enkelte menyelementet i hovednavigasjonen - ikke på selve menyen. Du finner feltet under Innhold → Menyer → Rediger et menyelement.
Selve strukturen krever tre nivåer: Hovednavigasjonen inneholder et menyelement med megamenu-klassen som peker til en megameny-container; containeren har ett menyelement per kolonne som peker til en kolonnemeny; og det første elementet i kolonnemenyen blir kolonneoverskriften (resten blir lenker). Hvis du angir show_image-klassen til det første menyelementet i en kolonne og det er en kategori-, produkt- eller destinasjonsside, vil objektets bilde vises som et blikkfang øverst i kolonnen.
Betalings- og fraktikoner i bunnteksten
Du trenger ikke å laste opp bilder av betalingskort eller fraktselskaper. Delaware har innebygde SVG-ikoner og velger dem fra to felt under Generelt.
Feltet Payment methods (path: payment_methods) er en kommaseparert liste, f.eks:
dankort,visa,mastercard,maestro,mobilepay,applepay,googlepay
Disse navnene er innebygd som ikoner i Delaware:
- dankort, visa, mastercard, maestro
- mobilepay, applepay, googlepay, paypal
- klarna, viabill, anyday, bankoverføring, faktura, ean
Skriv navnene med små bokstaver, uten mellomrom mellom kommaene. Et navn som ikke finnes som et innebygd ikon, vil bli hoppet over uten at det oppstår en feil.
Feltet Shipping methods (path: shipping_methods) fungerer på samme måte, f.eks:
gls,postnord,ups,burd
Tips: Hvis en logo mangler som et innebygd ikon, kan du legge til ditt eget SVG-ikon via egendefinert kode eller skrive til kundestøtte, slik at vi kan legge det til i temaet.
Trustpilot-integrasjon
Delaware bruker Trustpilots offisielle widgeter. Hver widget krever sin egen mal-ID som du kopierer fra Trustpilot Business-portalen. Feltene ligger under Integrations:
- Aktiver Aktiver Trustpilot
- Skriv inn din Trustpilot Business ID (sti: trustpilot_business_id), dette er butikkens unike ID på Trustpilot
- Fyll inn mal-ID-en for widgetene du faktisk ønsker å vise:
- Trustpilot Template ID Carousel(trustpilot_template_id_carousel) stort karusellelement som vanligvis vises på forsiden og i kassen
- Trustpilot Template ID Micro Star(trustpilot_template_id_micro_star) kompakte stjerner i overskriften og i starttrinnet av kassen
- Trustpilot Template ID Micro Review Count(trustpilot_template_id_micro_reviewcount) liten tekstwidget med antall anmeldelser i bunnteksten
- Trustpilot Template ID Micro Trustscore(trustpilot_template_id_micro_trustscore) total poengsum i topptekst og kassens sidefelt
- 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) fullstendig liste over anmeldelser på produktsiden
- Trustpilot Template ID Starter(trustpilot_template_id_starter) brukes hvis du ikke har noen anmeldelser ennå
Viktig: En mal-ID er ikke det samme som din bedrifts-ID. Mal-ID-en hentes per widget i Trustpilots bedriftsportal under Showcase → Trustboxes. Du kan utelate widgetfeltene du ikke bruker, Delaware vil ikke vise dem uten en mal-ID.
Instagram, Facebook og andre sosiale lenker
Delaware viser små ikoner i bunnteksten som lenker til profilene dine i sosiale medier. Du fyller inn URL-adressene under Company:
- Instagram URL (sti: instagram_url)
- URL tilFacebook(facebook_url)
- URL tilYouTube(youtube_url)
- Google URL (google_url)
Skriv inn hele URL-en, f.eks. https://www.instagram.com/dinprofil/. Hvis du lar feltet stå tomt, vises ikke ikonet.
Merk: Delaware har ikke en innebygd Instagram-feed eller et bildegalleri. Instagram-URL-feltet er kun en lenke til profilen din. Hvis du vil vise ekte Instagram-bilder på forsiden, må du legge til en tredjepartsløsning som Behold eller Elfsight og bygge den inn via Page Designer. Det finnes ingen Access Token i temainnstillingene.
Verdiforslag (USP-er)
Du kan vise opptil fire verdiforslag, vanligvis under toppteksten eller i bunnteksten. Det kan være "Gratis frakt over 500 kr", "30 dagers returrett" eller "Rask levering". Sett dem opp under Verdiforslag, der hver USP har felt for tekst, beskrivelse, ikon og eventuelt en lenke.
Forsiden og Sidedesigner
Forsiden bygges opp via Page Designer, der du kan legge til seksjoner som heltebannere, produktkaruseller, bildegallerier, tekst og bloggfeeds. Du kan dra og slippe seksjoner og redigere innhold uten å røre koden.
Funksjoner på produktsiden
Under Produkt kan du slå en lang rekke funksjoner av og på:
- Andre har også kjøpt, Lignende produkter, Relaterte produkter, alle med autoutfylling fra samme kategori
- Ønskeliste, både enkel (nettleserbasert) og fullstendig (krever innlogging)
- Faner for produktegenskaper, frakt, retur, betaling og spørsmål
- Få pålager-merke, restordremelding, kampanjemelding
- Bildegalleri med tommeltotter og lysboks
- Vaskeinstruksjoner og størrelsesguide
- Samlet prisvisning av laveste pris de siste 30 dagene på kampanjevarer
Tilpasninger i kassen
Seksjonene Kasse : Generelt, Kasse : Handlekurv, Kasse : Adresse og Kasse : Godkjenn styrer hver fase av betalingsprosessen. Her kan du aktivere/deaktivere innlogging, gavekort, ApplePay/MobilePay hurtigkasse, påmelding til nyhetsbrev, mersalg og velge om du retter deg mot privatkunder (B2C), bedriftskunder (B2B) og/eller offentlige kunder (B2G/EAN).
Site Notice (banner øverst)
Vil du kunngjøre en kampanje, en feriestengning eller en generell melding? Aktiver Site Notice og skriv en tekst med en valgfri lukkeknapp. Du kan ha forskjellig tekst på desktop og mobil, og velge hvor mange dager banneret skal være lukket når kunden klikker det bort.
Andre integrasjoner
Under Integrasjoner kan du også aktivere Trustpilot og Pricerunner:
- Pricerunner ved å sette inn din konto-ID
- E-label ved å sette inn URL-en til e-label-siden din
- Viabill for delbetaling (krever Viabill-butikk-ID)
- AnyDay for avbetaling (krever AnyDay-pristoken)
- Clerk.io for intelligent søk og produktanbefalinger (krever API-nøkkel)
Tilpasninger (egendefinert CSS og JS)
Hvis du trenger å legge til din egen CSS eller JavaScript, kan du gjøre det via Custom Code. Aktiver Enable Custom CSS eller Enable Custom JS og lim inn koden din. Dette er den enkleste måten å gjøre små designjusteringer eller legge til eksterne skript uten å endre selve temafilene.
Ofte stilte spørsmål
Hvilken Smarty-versjon kjører Delaware på?
Delaware og DelawareDK kjører på Smarty 4. Dette er den nyeste versjonen og den vi anbefaler for alle nye temaer på Shoporama. Hvis du tilpasser maler selv, kan du derfor bruke nyere Smarty 4-syntaks som <{$foo = 123}> og <{foreach $items as $item}>.
Hva er forskjellen mellom Delaware og DelawareDK?
Funksjonene er helt identiske. Den eneste forskjellen er språket på administratoretikettene i temainnstillingene: Delaware har engelske etiketter (f.eks. "Theme", "Company", "Integrations"), mens DelawareDK har danske. Selve butikkteksten på forsiden styres uavhengig av dette via butikkens språkinnstillinger.
Betalingsikonene mine vises ikke i bunnteksten, hva gikk galt?
Kontroller at feltet Betalingsmåter under Generelt er fylt ut med en kommaseparert liste, f.eks. visa, mastercard, mobilepay. Skriv navnene med små bokstaver, og bruk bare navn fra listen ovenfor. Et navn som ikke er lagt inn som et ikon, vil bli hoppet over uten feil.
Hvilket Trustpilot-felt skal jeg fylle ut?
Først Trustpilot Business ID (butikk-ID-en din). Deretter en mal-ID per widget du vil bruke. Hvis du for eksempel bare vil ha stjerner under produktnavnet, fyller du ut Trustpilot Template ID Product Mini. Hvis du lar de andre mal-ID-feltene være tomme, vil de ikke vises.
Kan jeg vise de nyeste Instagram-bildene mine direkte på forsiden?
Ikke uten videre. Delaware viser bare en lenke til Instagram-profilen din i bunnteksten. Hvis du vil ha en direkte bildefeed, kan du legge til en tredjepartsløsning, for eksempel Behold eller Elfsight, som du bygger inn via en HTML-blokk i Sidedesigner.
Hvor oppretter jeg bunntekst med firmaadresse og firmanavn?
Firmanavn, adresse, by, postnummer, CVR, telefon og e-post er angitt under Firma i temainnstillingene. Disse dataene vises automatisk i bunnteksten og brukes også til strukturerte data (Schema.org), slik at Google forstår butikken din bedre.
Bruker Delaware Theme Builder?
Ja, det gjør det. Delaware støttes fullt ut av Theme Builder, slik at du kan justere farger, seksjoner og layout med visuell forhåndsvisning. Feltene i denne veiledningen er nøyaktig de samme som du finner i Theme Builder, bare vist i tabellform.
Hvor godt fungerer Delaware på mobil?
Delaware er bygget med Tailwind CSS og er fullt responsivt. Megamenyen kollapser til en mobilmeny utenfor lerretet, bildene skaleres automatisk til skjermstørrelsen, og kassen er optimalisert for berøring. Du kan også velge en egen tekst for nettstedets merknad på mobil.
Kan jeg bruke megamenyen og den vanlige menyen samtidig?
Ja, det kan du. Du kan til og med blande dem i samme hovednavigasjon. Bare menyelementene som har CSS-klassen megameny, vil vises som én stor megameny- elementer uten denne klassen vil vises som en vanlig rullegardinmeny. Og du kan fortsatt ha separate menyer for toppen og de tre bunntekstposisjonene.
Bør jeg velge Delaware eller DelawareDK?
Velg DelawareDK hvis teamet ditt jobber på dansk og foretrekker danske administratoretiketter. Velg Delaware hvis du foretrekker engelsk eller jobber i en internasjonal butikk. Hvis du bytter mellom dem senere, vil ikke innstillingene dine gå tapt.
Trenger du hjelp med Delaware? Skriv til oss på support@shoporama.dk.
Relaterte artikler
Sidedesigner
Lær hvordan du bruger Sidedesigner i Shoporama til at opbygge sidelayouts med blokke som hero-sektioner, produktlister, bannere og meget mere, helt...
Sette opp forsiden
Lær hvordan du sætter forsiden op i din Shoporama-webshop. Forsiden er en kategori, som du kan tilpasse med Sidedesigner i understøttede temaer.
Variabler i et Shoporama-tema
Oversikt over globale og sidespesifikke Smarty-variabler som er tilgjengelige i Shoporama-temaer.
Eget stilark (tilpasset CSS)
Legg til egendefinert CSS i Shoporama-nettbutikken og admin-backend. Tilpass farger, skrifttyper, layout og skjul elementer uten å endre temafiler.
Hvilke temaer finnes det på Shoporama?
Komplett oversikt over alle gratis temaer på Shoporama: Delaware, DelawareDK, California, Alaska 2, Washington, Montana og de klassiske Smarty...
Implementere Theme Builder i temaet ditt
Veiledning for implementering av Shoporamas Theme Builder i temaet ditt, slik at forhandleren kan bygge sider visuelt.