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"
Beslektede artikler:
