Om du har en inbäddad webbshop i ditt HTML-skript och vill lägga till stilar på den så rekommenderar vi att du lägger till CSS-filen till ditt webbutrymme. Det låter dig ändra typsnitt, färger med mera.
Du kan ladda ner CSS-filen från sidan "butiken" i Webbshoppens administrationspanel. Om du redan har en CSS-fil kan du välja stilar nedan och lägga till dem till din existerande fil.
Var ska jag placera CSS-filen?
Vi rekommenderar att du lägger CSS-filen i samma mapp som HTML-filen till din webbshop. I HTML-filen måste du ange länken till CSS-filen.
Länken till din CSS ska se ut så här:
<link rel="stylesheet" type="text/css" href="shopfront-embed-style.css">
Ersätt shopfront-embed-style.css med namnet på din CSS-fil ifall du döpte om den. Du ska skriva in länken precis efter din head-tag, men före den avslutande /head-taggen.
Stilparametrar
Du kan ändra på följande parametrar:
- Typsnitt
- Typsnittets färg
- Bakgrundsfärg
- Rullgardinsmenyer
- Kanter
- Fokusfärger
- Kampanjetikett
- Webbshoppens mobilversion
Typsnitt
Med denna inställning kan du ändra det nuvarande typsnittet som din webbshop använder. Det första typsnittet i listan är det som kommer att visas. De andra två används endast ifall det första inte är tillgängligt.
Exempel:
font-family: "Times New Roman",Times,serif;
Typsnittets färg
Som standard är typsnittets färg samma färg för texter, länkar, muspekning etc. Om du vill ändra färgen ska du ändra dess HEX-kod.
Om du vill använda en annan färg, till exempel när du håller muspekaren över en länk så ska du separera den parametern från listan och ge den sin egen HEX-färgkod.
Exempel:
.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;
}
Bakgrundsfärg
Fyllningsfärger används på ikoners bakgrunder i butiken. Ändra färgerna med inställningarna nedan.
Färg på SVG-ikoner
Bakgrundsfärgen kommer att användas för SVG-ikoner i webbshoppen, till exempel för kundvagnen. Du kan ändra färgen genom att ändra HEX-koden.
Exempel:
.onecom-webshop-main .text-color svg {
fill: #363636;
}
Bakgrundsfärg (webbshop)
Den här inställningen styr över bakgrundsfärgen i hela din butik. Du kan ändra färgen genom att ändra HEX-koden.
Exempel:
.onecom-webshop-main {
background-color: #fdfdfd
}
Rullgardinsmenyer
Rullgardinsmenyer används för att välja kategori och sortera dina produkter. Du kan justera färgerna för dem.
Bakgrundsfärg (rullgardin)
Detta styr bakgrundsfärgen på rullgardinsmenyn. Ändra HEX-koden i koden till färgen du föredrar.
Exempel:
.onecomwebshop-main .bg-color {
background-color: #ffffff !important;
}
Kantfärg (rullgardin)
Färgen som du har valt här kommer att styra kantens färg på din rullgardinsmeny. Ändra HEX- och RGBA-koderna i koden till färgen du föredrar.
Exempel:
.onecomwebshop-main .border-color {
border-color: rgba(0,0,0,0.5) !important;
}
Textfärg (rullgardin)
Den här inställningen bestämmer färgen på texten som används i rullgardinsmenyn. Du kan ändra färgen genom att välja en annan HEX-färgkod.
Exempel:
.onecomwebshop-main .category-text {
color: #000000 !important;
}
Markerat värde (rullgardin)
Den här inställningen bestämmer färg på markerade objekt i en rullgardingsmeny. Du kan ändra färgen genom att ändra HEX-färgkoden.
Exempel:
.onecom-webshop-main .selected-text {
color: #000000 !important;
}
Färg vid muspekning (rullgardin)
Följande två inställningar bestämmer typsnittsfärg och bakgrundsfärg vid muspekning. Ändra HEX- och RGBA-koden i koden till färgerna du föredrar.
Exempel:
.onecomwebshop-main .bg-light-focus:hover {
color: #000 !important;
background-color: rgba(99,170,219,0.5) !important;
}
Kanter
Kantfärg för tillbaka-knappen
Den här inställningen bestämmer kantfärgen på tillbaka-knappen, "Gå tillbaka till butik"-knappen och när man går till kassan. Ändra HEX-koden till färgen du föredrar.
Exempel:
.onecomwebshop-main .border-fcolor {
border-color: #363636 !important;
}
Kanten som används runt orderdetaljerna
När du klickar dig vidare till kassan kommer du att se en översikt på produkterna som du har valt. Den här inställningen ändrar färgen på kanten runt rutan. Ändra RGBA-färgen till en som du föredrar. Texten i rutan är alltid svart.
Exempel:
.onecomwebshop-main .border-light-font-color {
border-color: rgba(54,54,54,0.5) !important;
}
Kanten runt rubriken
Med den här inställningen kan du ändra den understrukna färgen för rubriker, till exempel på kassa-sidan. Ändra HEX-färgen till en som du föredrar.
.onecomwebshop-main .border-light-color {
border-color: #363636 !important;
}
Nedre kantlinje
Den här inställningen placerar en linje under objekten i kassan. Ändra HEX-färgen till den färg du vill ha.
Exempel:
.onecom-webshop-main .product-item {
border-color: rgba(54,54,54,0.2) !important;
}
Fokusfärger
Fokusfärger används för priser, kundvagn-ikonen och för bildspel. Ändra HEX-färgen till en som du föredrar.
Exempel:
.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a {
color: #63aadb !important;
}
.onecomwebshop-main .focus svg{
fill: #63aadb !important;
}
Fokusfärger vid muspekning
Det här är samma inställningar som ovan, men för utseendet vid muspekning. Ändra RGBA-färgerna till färgen du vill ska synas vid muspekning.
Exempel:
.onecomwebshop-main .bg-extra-light-focus:hover {
background-color: rgba(99,170,219,0.1) !important;
}
Kampanjetikett
Här kan du ställa in kampanjetikettens text- och bakgrundsfärg. Kampanjetiketter är till för att framhäva särskilda produkter. Se även vår guide om att marknadsföra produkter.
Exempel:
.onecom-webshop-main .product-label {
background-color: #63aadb !important;
color: white !important;
}
Webbshoppens mobilversion
Om du vill ändra webbshoppens utseende i mobilversionen kan du lägga till din egen "viewport"-metatagg i head-sektionen av din HTML-fil för din webbshop.
Om vi inte hittar någon sådan metatagg kommer vi automatiskt lägga till följande metatagg för den perfekta mobilupplevelsen:
meta name="viewport" content="width=320, initial-scale=1"
Relaterade artiklar:
