Email-Icon Created with Sketch. Group 3 Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Icon-Internet Created with Sketch. Trust Pilot Stars Created with Sketch. 1-5-million Created with Sketch. Control-panel-Icon Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. icon-slider-next Created with Sketch. icon-slider-prev Created with Sketch. Webmail-icon Created with Sketch. heart Created with Sketch. Open-24-7 Created with Sketch. open24 Created with Sketch. 24 7 trusted Created with Sketch. Fill 1 Created with Sketch.

CSS-parametre for Webshoppen

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
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; }

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:

HTML parametre til at embedde Webshoppen
I gang med webshop