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. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Trust Pilot Stars Created with Sketch. 1-5-million Created with Sketch. black-green yellow_blue 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. 247 Created with Sketch. open24 Created with Sketch. 24 7 trusted Created with Sketch. Fill 1 Created with Sketch.

CSS-parametre til nettbutikken

Hvis du har en nettbutikk innebygd i HTML-koden og ønsker å bruke stiler på den, anbefaler vi at du legger til CSS-stylesheetet på webhotellet. Hvis du gjør dette kan du endre skrifttype, farger og annet.

Du kan laste ned CSS-filen på Butikkfront-siden på administrasjonssiden for nettbutikken. Hvis du allerede har en CSS-fil, kan du velge stiler nedenfor og legge dem til i den eksisterende filen.

Hvor skal jeg legge CSS-filen?

Vi anbefaler at du plasserer CSS-filen i samme mappe som du har plassert HTML-filen med nettbutikken. I HTML-filen må du plassere en lenke til CSS-filen.

Lenken til CSS-filen ser slik ut:

link rel="stylesheet" type="text/css" href="shopfront-embed-style.css"

Erstatt shopfront-embed-style.css med navnet på CSS-filen din, hvis du har gitt filen et nytt navn. Du skal plassere lenken direkte foran head-tag, men før den avsluttende /head-tag.


Stil-parametre

Du kan endre følgende parametre:

Skriftserie
Skriftfarge
Fyllfarge
Nedtrekksmenyer
Kantlinjer
Pekefarge
Kampanjeetikett
Nettbutikk i mobilvisning

Skriftserie

Med skriftserie kan du endre hovedskriften som brukes i nettbutikken. Den første skrifttypen er skrifttypen som blir brukt. De to andre er reserveskrifttyper, som brukes i tilfelle den første skrifttypen ikke kan hentes.

Eksempel:

font-family: "Times New Roman",Times,serif;

Skriftfarge

Som standard er skriftfargen satt til samme farge for tekst, lenker, musepeker som hviler over lenker og annet. Hvis du vil endre fargen, endrer du HEX-koden.

Hvis du ønsker å angi en annen farge f.eks. når musepekeren hviler over en lenke, skiller du parameteren fra listen og gir den sin egen HEX-kode.

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

Fyllfarge

Fyllfarge gjelder bakgrunn til ikoner i nettbutikken. Endre farge ved å bruke innstillingene nedenfor.

SVG ikonfarge

Fyllfargen brukes i SVG-ikoner i nettbutikken, for eksempel handlekurv-ikonet. Du kan endre farge ved å endre HEX-koden.

Eksempel:

.onecom-webshop-main .text-color svg { fill: #363636; }

Bakgrunnsfarge (nettbutikk)

Denne innstillingen bestemmer bakgrunnsfargen i hele nettbutikken. Du kan endre farge ved å endre HEX-kode.

Eksempel:

.onecom-webshop-main { background-color: #fdfdfd }

Nedtrekksmenyer

Både valg av kategori og sortering av produkter er nedtrekksmenyer. Du kan endre fargen på teksten i nedtrekksmenyene.


Bakgrunnsfarge (nedtrekksmeny)

Denne verdien bestemmer fargen på bakgrunnen. Her endrer du HEX-koden i koden til den fargen du foretrekker.

Eksempel:

.onecomwebshop-main .bg-color { background-color: #ffffff !important; }

Kantlinjefarge (nedtrekksmeny)

Fargen du velger her styrer kantlinjefargen på nedtrekksmenyen. Du endrer HEX- og RGBA- kodene i koden til fargene du foretrekker.

Eksempel:

.onecomwebshop-main .border-color { border-color: rgba(0,0,0,0.5) !important; }

Tekstfarge (nedtrekksmeny)

Denne innstillingen styrer fargen på teksten som brukes i nedtrekksmenyerne Du kan endre fargen ved å endre HEX-koden.

Eksempel:

.onecomwebshop-main .category-text { color: #000000 !important; }

Valgt verdi (nedtrekksmeny)

Denne innstillingen bestemmer farge på teksten til det valgte elementet i nedtrekksmenyen. Du kan endre farge ved å endre HEX fargekode.

Eksempel:

.onecom-webshop-main .selected-text  { color: #000000 !important; }

Farge når musepekeren hviler over tekst (nedtrekksmeny)

De to innstillingene nedenfor styrer skriftfargen når musepekeren hviler over tekst, samt bakgrunnsfargen. Du kan endre fargen ved å endre HEX- og RGBA-kodene i koden.

Eksempel:

.onecomwebshop-main .bg-light-focus:hover { color: #000 !important; background-color: rgba(99,170,219,0.5) !important; }

Kantlinjer

Kantlinje rundt Tilbake-knappen

Denne innstillingen styrer bakgrunnsfargen til Tilbake-knappen, "tilbake til butikk"-knappen og når kunden går til kassen. Du endrer HEX-koden til fargen du selv foretrekker.

Eksempel:

.onecomwebshop-main .border-fcolor { border-color: #363636 !important; }

Kantlinje brukt rundt ordredetaljer

I kassen ser kunden en boks med oversikt over hvilke varer som ligger i handlekurven. Med denne innstillingen kan du endre fargen på kantlinjen rundt denne boksen. Du endrer RGBA-fargen til den fargen du ønsker. Teksten i boksen er alltid svart.

Eksempel:

.onecomwebshop-main .border-light-font-color { border-color: rgba(54,54,54,0.5) !important; }

Kantlinje på overskrift

Med denne innstillingen kan du endre fargen på understrekingen på overskrifter, for eksempel i kassen. Du endrer bare HEX-fargen til en av favorittfargene dine.

.onecomwebshop-main .border-light-color { border-color: #363636 !important; }

Bunnlinje

Denne innstillingen setter inn en linje under varene på betalingssiden. Her endrer du HEX-farge til den fargen du ønsker.

Eksempel:

.onecom-webshop-main .product-item { border-color: rgba(54,54,54,0.2) !important; }

Pekefarge

Pekefargene brukes til priser, handlekurvikonet og glidebrytere. Du endrer bare HEX-farge til en av favorittfargene dine.

Eksempel:

.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a { color: #63aadb !important; } .onecomwebshop-main .focus svg{ fill: #63aadb !important; }

Pekefarge når du holder markøren over

Dette er de samme innstillingene som angitt over, men gjeldende for når du holder markøren over et sted. Du endrer bare RGBA-fargene til fargen du ønsker skal vises.

Eksempel:

.onecomwebshop-main .bg-extra-light-focus:hover { background-color: rgba(99,170,219,0.1) !important; }

Kampanjeetikett

Denne innstillingen styrer tekstfarge og bakgrunnsfarge på kampanjeetiketten. Du kan legge en kampanjeetikett på et produkt for at det skal skille seg ut. Se også vår guide om hvordan du reklamerer for produkter.

Eksempel:

.onecom-webshop-main .product-label { background-color: #63aadb !important; color: white !important; }

Nettbutikk i mobilvisning

Hvis du ønsker å endre utseendet på nettbutikken på mobile enheter, kan du legge til din egen "viewport" metatag i head-delen av HTML-filen for nettbutikken din.

Hvis vi ikke finner en slik metatag, vil vi automatisk legge til følgende metatag, for den perfekte mobilopplevelsen:

meta name="viewport" content="width=320, initial-scale=1"

Relaterte artikler:

HTML-parametre for å bygge inn nettbutikken
Kom i gang med nettbutikken