Hvis du har en webshop integreret i dit HTML script og gerne vil anvende formater, anbefaler vi dig at tilføje CSS stylesheet til dit webhotel. Det giver dig mulighed for at ændre skrifttyper, farver og meget mere.
Du kan downloade CSS-filen på din butiksfacadeside i webshoppens kontrolpanel. Hvis du allerede har en CSS-fil, kan du vælge formaterne nedenfor og tilføje dem til din eksisterende fil.
Hvor skal jeg placere CSS-filen?
Vi anbefaler, at du placerer CSS-filen i samme mappe som HTML-filen hvor din webshop er placeret. Du skal også placere et link til CSS-filen i HTML-filen.
Linket til din CSS skal se således ud:
<link rel="stylesheet" type="text/css" href="shopfront-embed-style.css">
Udskift shopfront-embed-style.css med navnet på din CSS-fil, hvis du har omdøbt den. Du bør placere linket lige efter dit head-tag, men før det afsluttende /head-tag.
Formateringsparametre
Du kan ændre de følgende parametre:
- Skrifttypefamilie
- Skrifttypefarve
- Udfyld farve
- Rullegardinmenuer
- Kanter
- Fokusfarver
- Tilbudsetiket
- Webshop i mobilvisning
Skrifttypefamilie
Med skrifttypefamilien kan du ændre den primære skrifttype, der bruges i din webshop. Den første skrifttype er den, der vil blive vist. De andre to er backup-skrifttyper i tilfælde af, at den første skrifttype ikke kan hentes.
Eksempel:
font-family: "Times New Roman",Times,serif;
Skrifttypefarve
Standardskriftfarven er indstillet til at være den samme farve for tekster, links, mus-over osv. Hvis du ønsker at ændre farven, skal du blot ændre HEX koden.
Hvis du ønsker at benytte en anden farve, for eksempel når du holder musen hen over et link, skal du adskille parameteren fra listen og give den dens egen HEX farvekode.
Eksempel:
.onecom-webshop-main,
.onecomwebshop-main a.link,
.onecomwebshop-main a.link:link,
.onecomwebshop-main a.link:visited,
.onecomwebshop-main a.link:hover,
.onecomwebshop-main a.link:active,
.onecomwebshop-main input,
.onecomwebshop-main select,
.onecomwebshop-main .text-color {
color: #363636;
}
Udfyld farve
Fyldfarve tilføjes baggrunden på ikoner gennem butikken. Ændre farverne ved at bruge indstillingerne nedenunder.
SVG-ikonfarve
Fyldfarven vil blive anvendt til SVG-ikoner omkring webshoppen, for eksempel på vognikonet. Du kan ændre farven ved at ændre HEX koden.
Eksempel:
.onecom-webshop-main .text-color svg {
fill: #363636;
}
Baggrundsfarve (webshop)
Denne indstilling vil bestemme baggrundsfarven for hele webshoppen. Du kan ændre farven ved at ændre HEX-koden.
Eksempel:
.onecom-webshop-main {
background-color: #fdfdfd
}
Rullegardinmenuer
Din kategorivælger, samt sorteringen af produkter er rullegardinsmenuer. Du kan justere farven på rullegardinmenuerne.
Baggrundsfarve for rullegardinmenuer
Dette bestemmer farven af baggrunden i rullegardinmenuen. Du skal blot ændre HEX koden i koden til det du foretrækker.
Eksempel:
.onecomwebshop-main .bg-color {
background-color: #ffffff !important;
}
Kantfarven for rullegardinmenuer
Den farve du vælger her vil bestemme kantfarven på din rullegardinsmenu. Du skal blot ændre HEX og RGBA koderne til den farver du foretrækker.
Eksempel:
.onecomwebshop-main .border-color {
border-color: rgba(0,0,0,0.5) !important;
}
Tekstfarven for rullegardinmenuer
Denne indstilling bestemmer farven på den tekst, der bruges i rullegardinmenuer. Du kan ændre farven ved at ændre HEX farvekoden.
Eksempel:
.onecomwebshop-main .category-text {
color: #000000 !important;
}
Valgt værdi (rullegardin)
Denne indstilling bestemmer tekstfarven af de valgte ting i et rullegardin. Du kan ændre farven ved at ændre HEX-farvekoden.
Eksempel:
.onecom-webshop-main .selected-text {
color: #000000 !important;
}
Farve for rullegardinmenuen når man holder musen over
Disse to indstillinger bestemmer farven på skrifttypen, når musen holdes henover og baggrundsfarven. Du skal blot ændre HEX og RGBA koderne i koden til de farver du foretrækker.
Eksempel:
.onecomwebshop-main .bg-light-focus:hover {
color: #000 !important;
background-color: rgba(99,170,219,0.5) !important;
}
Kanter
Farvekant på tilbageknap
Denne indstilling bestemmer kantfarven på din tilbageknap, 'tilbage til butik'-knappen og under købsprocessen. Skift HEX koden i koden til den farve du foretrækker.
Eksempel:
.onecomwebshop-main .border-fcolor {
border-color: #363636 !important;
}
Kant der benyttes omkring ordredetaljer
Under købsprocessen ser man en kasse med en oversigt over de emner, der er ved at blive købt. Med denne indstilling kan du ændre farven til kanten på denne kasse. Du skal blot ændre RGBA farven til en af dine foretrukne. Teksten i kassen er altid sort.
Eksempel:
.onecomwebshop-main .border-light-font-color {
border-color: rgba(54,54,54,0.5) !important;
}
Kant på overskrift
Med denne indstilling kan du ændre farven på understregning af overskrifter, f.eks. på kasse-siden. Du skal blot ændre HEX farven til en af dine foretrukne.
.onecomwebshop-main .border-light-color {
border-color: #363636 !important;
}
Nedre kant
Med denne indstilling placeres en linje under tingene på bestillingssiden. Du skal bare ændre HEX-farven til den du foretrækker.
Eksempel:
.onecom-webshop-main .product-item {
border-color: rgba(54,54,54,0.2) !important;
}
Fokusfarver
Fokusfarver bruges til priser, indkøbsvognikonet og bevægelige skydere. Du skal blot ændre HEX farven til en af dine foretrukne.
Eksempel:
.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a {
color: #63aadb !important;
}
.onecomwebshop-main .focus svg{
fill: #63aadb !important;
}
Fokusfarver når man holder musen over.
Det her er de samme indstillinger som ovenfor, men for farven når man holder musen over. Skift RGBA farverne til den farve du gerne vil have fremgår, når man holder musen over ikonerne.
Eksempel:
.onecomwebshop-main .bg-extra-light-focus:hover {
background-color: rgba(99,170,219,0.1) !important;
}
Tilbudsetiket
Denne indstilling styrer tilbudsetikettens tekstfarve og baggrundsfarve. Du kan tilføje en tilbudsetiket til et produkt for at få det til at skille sig ud. Se også vores guide til, hvordan du reklamerer for produkter.
Eksempel:
.onecom-webshop-main .product-label {
background-color: #63aadb !important;
color: white !important;
}
Webshop i mobilvisning
Hvis du vil ændre hvordan webshoppen ser ud på mobile enheder, can du tilføje din egen "viewport" meta tag til head-sektionen af HTML filen for din webshop.
Hvis der ikke er et sådan meta tag, vil vi automatisk tilføje det følgende meta tag for den optimale mobile oplevelse:
meta name="viewport" content="width=320, initial-scale=1"
Relaterede artikler:
