Ret design

I denne artikel:


Introduktion

Under Kontrolpanel > Design Manager > Ret design har du mulighed for at ændre følgende indstillinger:

  1. Opsætning
  2. Struktur
  3. Indsæt Javascript
  4. Indsæt CSS (sæt farve på tekster og elementer med CSS)
  5. Sprog

 

Opsætning

Temaer

Under temaer vælger du hvilket farvetema du ønsker at benytte på den aktive design template. For inaktive designs vælger du det inaktive design som du ønsker at ændre og benytter samme fremgangsmåde. Efterfølgende kan du gå videre til farvesektionen og justere det pågældende tema efter ønske.

Bemærk: Du kan arbejde på en inaktiv kopi af dit design hvis du ikke ønsker at foretage ændringer på det aktive design. Se hvordan her.

 

Farver

Under sektionen Farver har du mulighed for at ændre en række generelle farveindstillinger. Farver er inddelt i følgende grupper:

  • Template farver
  • Tekstfarver
  • Knap farver
  • Diverse farver
  • Badges (produkt ikoner for nyhed, tilbud og udsolgt)

For at ændre farve på et eller flere elementer, på det valgte farvetema, skal du gøre følgende:

  1. Klik her for at åbne farvevælgeren
  2. Vælg den ønskede farve (eller indsæt en farvekode i feltet nedenfor)

Når du har valgt de ønskede farveændringer, skal du klikke Gem.

 

Grafik og skrifttyper

Under punktet Grafik & Skrifttyper kan du indsætte dit logo og vælge imellem skrifttyper (fonte) til dit design. Du kan ligeledes ændre diverse grafiske elementer, som vist her:

  1. Logo: Hvis du har dit logo som grafik-fil, kan du uploade det her. Du kan vælge at uploade et andet logo til e-mails og pdf. mv. (ellers vælger du det samme logo begge steder). Du har mulighed for at indsætte to forskellige logofiler, da et logo til f.eks. faktura og mails, kan være at foretrække i en anden størrelse, eller f.eks. i gråtoner mv. Hvis du ikke har en grafisk fil som logo, skal du i "Logo type" vælge "Tekst". Du får herefter mulighed for at vælge farven til dit logo. Teksten i dit logo er det samme som det navn, du har angivet til din shopløsning, i feltet "Titel" under Kontrolpanel > Weboplysninger.
  2. Skrifttyper: Vi anbefaler, at du vælger en læsevenlig skrifttype under Skrifttype generel, mens du kan vælge en mere spændende skrifttype til dine overskrifter. Vi har udvalgt en række fonte, som er anvendelige på internettet. Og hvis du ønsker en specialfont, som ikke findes i listen, skal denne ændring foretages i rediger filer, som en special tilretning af shoppens design template. Man kan ikke vælge størrelser på fonte, da disse styres i forhold til den enhed, de vises på. Det er dog muligt at angive specifikke størrelser via rediger filer.
  3. Diverse grafik: Her kan du ændre grafik for:
  • Favicon
  • Sidens baggrund
  • Vandmærke (herunder placering og størrelse)

TIP: Vandmærke er et billede, der placeres oveni et eksisterende billede, for at angive ejerskabet af billedet. For at vandmærket tager sig bedst ud, bør det være et billede af typen PNG med gennemsigtig baggrund.

Bemærk: hvis du ændrer i indstillinger for vandmærke, skal thumbnails (miniaturebilleder) nulstilles via Kontrolpanel > Shop indstillinger > Nulstil, for at ændringerne slår igennem ude på shoppen.

Indstillinger

Under Indstillinger kan du ændre visnings-indstillinger for designet:

  • Navigationslinje (bread crumb)
  • Søgefelt (i toppen)
  • Lille indkøbskurv (i toppen)
  • Menupunktet "Din konto"
  • Printvenligt ikon og sitemap
  • Informationer i bunden

 

Struktur

Under fanebladet "Struktur" kan du indsætte forskellige bokse –f.eks. en boks med produktkategorier, blogindlæg og sideindhold fra en af dine sider på shoppen. Bemærk: Strukturboksene vises ikke ved mobil-visning af shoppen, da designet går over i en mobil venlig udgave hvor menu strukturen er tilpasset mindre skærmstørrelser.

 

Du kan trække elementer fra det "skjulte område" i venstre-siden ind i enten venstre- eller højrekolonnen. Hvis du fortryder, kan du trække en boks tilbage til det "skjulte område".

Herover trækker vi boksen Produkt kategorier over i venstre side af shoppens layout. Boksen Sideindhold trækker vi over i højre side, og vælger hvilket indhold vi ønsker at vise i den. Boksen Sideindhold viser altid en side fra sidetræet.

Bemærk: Farver og udseende på boksene afhænger af din designopsætning. Du kan ligeledes tilrette farverne på strukturboksene ved at følge denne guide.

Visningsindstillinger

For hver boks du trækker ind i venstre- eller højrekolonnen, kan du ændre visningsindstillingerne. På den måde kan du indstille, hvilke sider boksene skal vises på. Klik på den lille blyant på boksen for at ændre visningsindstillinger.

Top produktliste

Top produktliste er en af de bokse, der har nogle ekstra indstillinger. Disse indstillinger findes under tandhjulet. Når der klikkes på tandhjulet, kommer en pop-up frem, hvor der kan vælges mellem, hvor mange produkter, der skal vises i produktlisterne. Der kan også vælges mellem tre forskellige produktlister:

  • Nyeste varer: Her figurerer de nyeste oprettede varer
  • Mest købte: Her figurerer de produkter, der er solgt flest af (opdateres automatisk én gang i døgnet)
  • Tilbud: Her figurerer de produkter, der er oprettet tilbud på senest.

 

Indsæt javascript

Her kan du indsætte Java Script i Hostedshop. Det er muligt at indsætte JavaScript tre steder i shoppens HTML struktur:

  1. I sidens <head> tag
  2. I toppen af sidens <body> tag
  3. I bunden af sidens <body> tag

Indsættelse af Javascript er f.eks. nødvendigt, når man ønsker at indsætte en sporingskode fra Google Adwords eller en kode fra TrustPilot. Indsættelse af kode i bunden af <body> tagget benyttes hvis et script skal køres efter sidens indhold er indlæst i browseren.

 

Indsæt CSS

Hvis du ønsker at foretage design ændringer af elementer på Hostedshop som du ikke umiddelbart har adgang til at ændre via templateindstillingerne, kan du benytte CSS. CSS er nogle simple tekster du kan indsætte for at skifte farve og størrelse på elementer mv. Det kunne f.eks. være at du ønsker at ændre farve på sidemenuen i shoppen, uafhængigt af det valgte farvetema.

Du kan læse mere om tilpasning af dit design med CSS her.

 

Sprog

Hvis din løsning har sine egne sprogvariabler, vil punktet "Sprog" blive vist. Her er det muligt at redigere dine sprogvariable specifikt for templaten. Det er muligt at redigere sprogvariable for alle sprog på løsningen. Vælger du at eksportere din template, følger disse sprogvariable med.

 

Nyttige links

  • Se hvordan du arbejder på en inaktiv kopi af dit design her
  • Se hvordan du retter farver på elementer som ikke direkte er omfattet af indstillingerne i Design Manager her
  • Læs mere om hvordan du laver avanceret tilpasning af shoppens design her