Konfiguration och anpassning med Delaware-tema

Delaware är Shoporamas mest använda tema. Det är modernt, responsivt och byggt på Tailwind CSS, så det fungerar bra på både dator och mobil. Nästan allt utseende och beteende kan anpassas från Design i admin utan att skriva kod. I den här guiden går vi igenom de viktigaste inställningarna.

Var hittar du inställningarna

Nästan allt styrs från Konto → Webshop → Tema → Inställningar. Fälten är grupperade i avsnitt som Allmänt, Företag, Tema, Badges, Produkt, Checkout, Integrationer och Anpassad kod. Varje fält har en kort beskrivning på själva sidan, så du behöver ofta inte leta upp det här i guiden.

Logotyp, färger och badges

Under Tema kan du:

• Infoga URL för logotyp och favicon (ladda upp filen under Tema → Filer och kopiera URL:en)
• Välja primär- och actionfärg som hex-kod, t.ex. #1a73e8
• Skriv en alt-text på logotypen (viktigt för tillgänglighet och SEO)

Under Badges kan du anpassa färgerna på de små badges som visas på produkter, t.ex. Offer, New, In stock och Quantity discount.

Menyer i sidfoten

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 en av dessa taggar: footer_menu_1, footer_menu_2 eller footer_menu_3
3. Lägg till de menyalternativ som du vill visa
4. Namnet på menyn blir automatiskt rubriken i sidfoten

Mega-meny

En megameny är en stor rullgardinsmeny med flera kolumner som vanligtvis används som huvudnavigering för att hjälpa kunderna att snabbt hitta rätt i ett stort sortiment.

I Delaware aktiveras megamenyn med CSS-klassen megamenu (exakt den här strängen - inte mega_menu och utan mellanslag). Klassen ställs in i fältet Class för det enskilda menyalternativet i huvudnavigeringen - inte i själva menyn. Du hittar fältet under Innehåll → Menyer → Redigera ett menyalternativ.

Själva strukturen kräver tre nivåer: huvudnavigeringen innehåller ett menyalternativ med klassen megamenu som pekar på en megamenybehållare; behållaren har ett menyalternativ per kolumn som pekar på en kolumnmeny; och det första alternativet i kolumnmenyn blir kolumnrubriken (resten blir länkar). Om du ställer in show_image-klassen på det första menyalternativet i en kolumn och det är en kategori-, produkt- eller landningssida, visas objektets bild som ett blickfång högst upp i kolumnen.

Betalnings- och fraktsymboler i sidfoten

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

Fältet Payment methods (path: payment_methods) är en kommaseparerad lista, t.ex:

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

Dessa namn är inbäddade som ikoner i Delaware:

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

Skriv namnen med gemener, utan mellanslag mellan kommatecknen. Ett namn som inte finns som en inbyggd ikon kommer helt enkelt att hoppas över utan fel.

Fältet Shipping methods (sökväg: 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 sitt eget Template ID som du kopierar från Trustpilot Business-portalen. Fälten finns under Integrationer:

1. Aktivera Aktivera Trustpilot
2. Ange ditt Trustpilot Business ID (sökväg: trustpilot_business_id) detta är din butiks unika ID på Trustpilot
3. Fyll i mall-ID för de widgets som du faktiskt vill visa:

• Trustpilot Template ID Carousel(trustpilot_template_id_carousel) stort karusellelement som vanligtvis visas på förstasidan och i kassan
• Trustpilot Template ID Micro Star(trustpilot_template_id_micro_star) kompakta stjärnor i sidhuvudet och i början av kassan
• Trustpilot Template 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) totalpoäng i sidhuvud och sidofält i kassan
• 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 recensionslista på produktsidan
• Trustpilot Template ID Starter(trustpilot_template_id_starter) används om du inte har några recensioner ännu

Instagram, Facebook och andra sociala länkar

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)
• URL till Facebook (facebook_url)
• URL till YouTube(youtube_url)
• Google URL (google_url)

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

Värdeförslag (USP:er)

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

Framsida och Page Designer

Förstasidan byggs upp via Page Designer, där du kan lägga till sektioner som t.ex. hjältebanners, produktkaruseller, bildgallerier, text och bloggflöden. Du drar och släpper sektioner och redigerar innehåll utan att röra koden.

Funktioner på produktsidan

Under Produkt kan du slå på och av en mängd olika funktioner:

• Andra har också köpt, Liknande produkter, Relaterade produkter, alla med autofyll 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
• Logga in, meddelande om restorder, kampanjmeddelande
• Bildgalleri med tummar och lightbox
• Tvättinstruktioner och storleksguide
• Omnibus-prisvisning av lägsta pris de senaste 30 dagarna på kampanjvaror

Anpassningar av kassan

Avsnitten Checkout : General, Checkout : Cart, Checkout : Address och Checkout : Approve styr varje fas i kassaprocessen. Här kan du aktivera/inaktivera inloggning, presentkort, ApplePay/MobilePay snabbkassa, nyhetsbrevsregistrering, merförsäljning och välja om du riktar dig till privatkunder (B2C), företagskunder (B2B) och/eller offentliga kunder (B2G/EAN).

Webbplatsmeddelande (banner högst upp)

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

Andra integrationer

Under Integrationer kan du även aktivera Trustpilot och Pricerunner:

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

Anpassningar (anpassad CSS och JS)

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

Ofta ställda frågor

Vilken Smarty-version körs Delaware på?

Delaware och DelawareDK körs på Smarty 4. Det här är den senaste versionen och den vi rekommenderar för alla nya teman på Shoporama. Om du anpassar mallar själv 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 på admin-etiketterna i temainställningarna: Delaware har engelska etiketter (t.ex. "Theme", "Company", "Integrations"), DelawareDK har danska. Den faktiska butikstexten på framsidan styrs oberoende av detta via butikens språkinställning.

Mina betalningsikoner visas inte i sidfoten, vad gick 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 är inbäddat som en ikon kommer att hoppas över utan fel.

Vilket Trustpilot-fält ska jag fylla i?

Först Trustpilot Business ID (ditt butiks-ID ). Sedan ett Template ID per widget som du vill använda. Om du till exempel bara vill ha stjärnor under produktnamnet fyller du i Trustpilot Template ID Product Mini. Lämna de andra fälten för mall-ID tomma så kommer de inte att visas.

Kan jag visa mina senaste Instagram-foton direkt på förstasidan?

Inte direkt från start. Delaware visar bara 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, till exempel Behold eller Elfsight, som du bäddar in via ett HTML-block i Page Designer.

Var skapar jag sidfotstexter med företagsadress och företagsnamn?

Företagsnamn, adress, stad, postnummer, CVR, telefon och e-post anges under Företag i temainställningarna. Dessa uppgifter visas automatiskt i sidfoten och används också för strukturerad data (Schema.org) så att Google förstår din butik bättre.

Använder Delaware Theme Builder?

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

Hur bra fungerar Delaware på mobilen?

Delaware är byggt med Tailwind CSS och är helt responsivt. Mega-menyn kollapsar till en mobil meny, bilderna skalas automatiskt till skärmstorleken och kassan är optimerad för touch. Du kan också välja separat text för webbplatsmeddelandet på mobilen.

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

Ja, det kan du. Du kan till och med blanda dem i samma huvudnavigering. Endast de menyobjekt som har CSS-klassen megamenu kommer att visas som en stor megameny - objekt utan klassen kommer att visas som en vanlig rullgardinsmeny. Och du kan fortfarande ha separata menyer för toppen och de tre sidfotspositionerna.

Ska jag välja Delaware eller DelawareDK?

Välj DelawareDK om ditt team arbetar på danska och föredrar danska administratörsetiketter. Välj Delaware om du föredrar engelska eller arbetar i en internationell butik. Om du byter mellan dem senare kommer dina inställningar inte att gå förlorade.

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