Konfiguration och anpassning med Delaware-tema

Delaware är Shoporamas mest använda tema. Det är modernt, responsivt och byggt på Tailwind CSS, vilket gör att det fungerar utmärkt både på datorer och mobiler. I stort sett allt utseende och alla funktioner kan anpassas från fliken ”Design” i adminpanelen utan att man behöver skriva kod. Den här guiden går igenom de viktigaste inställningarna.

Var hittar du inställningarna

Nästan allt styrs från Konto → Webbshop → Tema → Inställningar. Fälten är grupperade i avsnitt som Allmänt, Företag, Tema, Badges, Produkt, Kassa, Integrationer och Anpassad kod. Varje fält har en kort beskrivning direkt på sidan, så du behöver oftast inte slå upp något här i guiden.

Logotyp, färger och märken

Under Tema kan du:

• Ange URL till logotyp och favicon (ladda upp själva filen under Tema → Filer och kopiera URL:en)
• Välja primärfärg och aktionsfärg som hexkod, t.ex. #1a73e8
• Skriva en alt-text till logotypen (viktigt för tillgänglighet och SEO)

Under Badges anpassar du färgerna på de små märkena som visas på produkter, t.ex. Erbjudande, Nyhet, Begränsat lager och Mängdrabatt.

Sidfotsmenyer

Delaware har plats för tre menyer i sidfoten. Så här lägger du till dem:

1. Gå till Innehåll → Menyer
2. Skapa en ny meny och ge den ett av följande taggar: footer_menu_1, footer_menu_2 eller footer_menu_3
3. Lägg till de menyalternativ du vill visa
4. Menyns namn blir automatiskt rubriken i sidfoten

Megameny

En megameny är en stor rullgardinsmeny i flera kolumner som vanligtvis används som huvudnavigering, så att kunderna snabbt kan hitta i ett stort sortiment.

I Delaware aktiveras megamenyn av CSS-klassen megamenu (exakt denna sträng – inte mega_menu och utan mellanslag). Klassen anges i fältet Klass för varje enskilt menyalternativ i huvudnavigeringen – inte för själva menyn. Du hittar fältet under Innehåll → Menyer → redigera en menypost.

Själva strukturen kräver tre nivåer: huvudnavigeringen innehåller en menypunkt med klassen megamenu, som pekar på en megameny-behållare; behållaren har en menypunkt per kolumn, som pekar på en kolumnmeny; och kolumnmenyns första punkt blir kolumnrubrik (resten blir länkar). Om du tilldelar klassen show_image till den första menyposten i en kolumn, och det är en kategori, en produkt eller en landningssida, visas objektets bild som blickfång högst upp i kolumnen.

Betalnings- och fraktikoner i sidfoten

Du behöver inte ladda upp bilder på betalkort eller fraktföretag. Delaware har inbyggda SVG-ikoner och väljer dem utifrån två fält under Allmänt.

Fältet Betalningsmetoder (sökväg: payment_methods) är en kommaseparerad lista, t.ex.:

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

Dessa namn är inbyggda som ikoner i Delaware:

• dankort, visa, mastercard, maestro
• mobilepay, applepay, googlepay, paypal
• klarna, viabill, anyday, banköverföring, faktura, ean

Skriv namnen med små bokstäver, utan mellanslag mellan kommatecknen. Ett namn som inte finns som inbyggd ikon hoppas helt enkelt över utan att det uppstår något fel.

Fältet Fraktmetoder (path: shipping_methods) fungerar på samma sätt, t.ex.:

gls,postnord,ups,burd

Trustpilot-integration

Delaware använder Trustpilots officiella widgets. Varje widget kräver ett eget mall-ID som du kopierar från Trustpilots Business-portal. Fälten finns under Integrations:

1. Aktivera Enable Trustpilot
2. Ange ditt Trustpilot Business-ID (sökväg: trustpilot_business_id) – det är ditt butiks unika ID hos Trustpilot
3. Fyll i Template ID för de widgets du faktiskt vill visa:

• Trustpilot Template ID Carousel (trustpilot_template_id_carousel) – ett stort karusellelement som vanligtvis visas på startsidan och i kassan
• Trustpilot Template ID Micro Star (trustpilot_template_id_micro_star) – kompakta stjärnor i sidhuvudet och i kassans första steg
• Trustpilot-mall-ID Micro Review Count (trustpilot_template_id_micro_reviewcount) – liten textwidget med antal recensioner i sidfoten
• Trustpilot Template ID Micro Trustscore (trustpilot_template_id_micro_trustscore) sammanlagd poäng i sidhuvudet och kassans sidofält
• Trustpilot Template ID Product Mini (trustpilot_template_id_product_mini) stjärnor under produktnamnet på produktsidan
• Trustpilot Template ID Product Reviews (trustpilot_template_id_product_reviews) fullständig lista över recensioner på produktsidan
• Trustpilot Template ID Starter (trustpilot_template_id_starter) används om du ännu inte har fått några recensioner

Instagram, Facebook och övriga länkar till sociala medier

Delaware visar små ikoner i sidfoten som länkar till dina profiler på sociala medier. Du fyller i URL:erna under Company:

• Instagram-URL (sökväg: instagram_url)
• Facebook-URL (facebook_url)
• YouTube-URL (youtube_url)
• Google-URL (google_url)

Ange hela URL:en, t.ex. https://www.instagram.com/dinprofil/. Om du lämnar fältet tomt visas inte ikonen.

Värdeerbjudanden (USP:er)

Du kan visa upp till fyra värdeerbjudanden, vanligtvis under rubriken eller i sidfoten. Det kan till exempel vara ”Fri frakt över 500 kr.”, ”30 dagars returrätt” eller ”Snabb leverans”. Ställ in dem under ”Värdeerbjudanden”, där varje USP har fält för text, beskrivning, ikon och eventuellt länk.

Startsidan och sidredigeraren

Forsidan byggs via Sidedesigner, där du kan lägga till sektioner som hero-banners, produktkaruseller, bildgallerier, text och bloggflöden. Du drar och släpper sektioner och redigerar innehållet utan att behöva röra koden.

Produktsidans funktioner

Under ”Product” kan du aktivera och inaktivera en lång rad funktioner:

• Andra köpte också, Liknande produkter, Relaterade produkter – alla med automatisk ifyllning från samma kategori
• Önskelista, både enkel (webbläsarbaserad) och fullständig (kräver inloggning)
• Flikar för produktattribut, frakt, returer, betalning och frågor
• ”Finns i lager”-märkning, meddelande om restorder, kampanjmeddelande
• Bildgalleri med miniatyrbilder och lightbox
• Tvättanvisningar och storleksguide
• Omnibus-prisvisning av lägsta pris de senaste 30 dagarna för erbjudandevaror

Anpassningar av kassan

Avsnitten Checkout: General, Checkout: Cart, Checkout: Address och Checkout: Approve styr varje fas i kassan. Här kan du bland annat aktivera/inaktivera inloggning, presentkort, Apple Pay/Mobile Pay-snabbutcheckning, nyhetsbrevsprenumeration, merförsäljning samt välja om du riktar dig till privatpersoner (B2C), företag (B2B) och/eller offentliga kunder (B2G/EAN).

Site Notice (banner högst upp)

Vill du informera om en kampanj, stängning under helgdagar eller ett allmänt meddelande? Aktivera Site Notice och skriv en text, eventuellt med en stängningsknapp. Du kan ha olika text på dator och mobil och välja hur många dagar bannern ska förbli stängd när kunden klickar bort den.

Andra integrationer

Under ”Integrationer” kan du förutom Trustpilot även aktivera:

• Pricerunner genom att ange ditt konto-ID
• E-mærket genom att ange URL:en till din E-mærket-sida
• Viabill för delbetalningar (kräver Viabill-butiks-ID)
• AnyDay för delbetalningar (kräver AnyDay-pristoken)
• Clerk.io för smart sökning och produktrekommendationer (kräver API-nyckel)

Egna anpassningar (anpassad CSS och JS)

Om du behöver lägga till egen CSS eller JavaScript kan du göra det via Custom Code. Aktivera Enable Custom CSS eller Enable Custom JS och infoga din kod. Det är det enklaste sättet att göra små designjusteringar eller lägga till externa skript utan att ändra själva temats filer.

Vanliga frågor

Vilken Smarty-version kör Delaware på?

Delaware och DelawareDK körs på Smarty 4. Det är den senaste versionen, och det är också den vi rekommenderar för alla nya teman på Shoporama. Om du själv anpassar mallarna kan du därför använda nyare Smarty 4-syntax som <{$foo = 123}> och <{foreach $items as $item}>.

Vad är skillnaden mellan Delaware och DelawareDK?

Funktionerna är helt identiska. Den enda skillnaden är språket i admin-etiketterna för temainställningarna: Delaware har engelska etiketter (t.ex. ”Theme”, ”Company”, ”Integrations”), medan DelawareDK har danska. Butikens text på startsidan styrs oberoende av detta via butikens språkinställning.

Mina betalningsikoner visas inte i sidfoten – vad har gått fel?

Kontrollera att fältet Betalningsmetoder under Allmänt är ifyllt med en kommaseparerad lista, t.ex. visa,mastercard,mobilepay. Skriv namnen med små bokstäver och använd endast namn från listan ovan. Ett namn som inte finns inbyggt som ikon hoppas över utan att det uppstår något fel.

Vilket Trustpilot-fält ska jag fylla i?

Först Trustpilot Business ID (ditt butiks-ID). Därefter ett Template ID per widget som du vill använda. Om du t.ex. bara vill ha stjärnor under produktnamnet fyller du i Trustpilot Template ID Product Mini. Låt de andra Template ID-fälten vara tomma så visas de inte.

Kan jag visa mina senaste Instagram-bilder direkt på startsidan?

Inte som standard. Delaware visar endast en länk till din Instagram-profil i sidfoten. Om du vill ha ett live-bildflöde kan du lägga till en tredjepartslösning, t.ex. Behold eller Elfsight, som du bäddar in via ett HTML-block i Siddesigner.

Var anger jag sidfotstexter med företagsadress och CVR-nummer?

Företagsnamn, adress, ort, postnummer, CVR-nummer, telefonnummer och e-postadress anges under ”Company” i temainställningarna. Dessa uppgifter visas automatiskt i sidfoten och används även för strukturerade data (Schema.org), så att Google bättre förstår din butik.

Använder Delaware Theme Builder?

Ja. Delaware stöds fullt ut av Theme Builder, så du kan justera färger, sektioner och layout med visuell förhandsgranskning. Fälten i den här guiden är exakt samma som du hittar i Theme Builder, men visas i tabellform.

Hur bra fungerar Delaware på mobilen?

Delaware är byggt med Tailwind CSS och är helt responsivt. Megamenyn fälls ihop till en mobilmeny utanför skärmen, bilder skalas automatiskt efter skärmstorleken och kassan är optimerad för pekskärm. Du kan också välja separat text till Site Notice på mobilen.

Kan jag använda megamenyn och den vanliga menyn samtidigt?

Ja. Du kan till och med blanda dem i samma huvudnavigering. Endast de menyalternativ som har CSS-klassen megamenu fälls ut som en stor megameny – alternativ utan klassen visas som en vanlig rullgardinsmeny. Och du kan fortfarande ha separata menyer för toppen och de tre positionerna i sidfoten.

Ska jag välja Delaware eller DelawareDK?

Välj DelawareDK om ditt team arbetar på danska och föredrar danska admin-etiketter. Välj Delaware om du föredrar engelska eller arbetar med en internationell webbutik. Om du senare byter mellan dem går dina inställningar inte förlorade.

Behöver du hjälp med Delaware? Skriv till oss på support@shoporama.dk.