Als je een Webshop hebt ingesloten in je HTML-script en je wilt er stijlen aan toevoegen, raden we aan om een CSS-stylesheet aan je webruimte toe te voegen. Hiermee kun je lettertypes, kleuren en meer wijzigen.
Je kunt het CSS-bestand downloaden via Shopfront in je Webshop beheer. Als je al een CSS-bestand hebt, kun je de onderstaande stijlen kiezen en deze toevoegen aan het bestand.
Waar moet ik het CSS-bestand plaatsen?
Wij raden aan om het CSS-bestand in dezelfde map te plaatsen als waar het HTML bestand van je Webshop staat. In het HTML-bestand moet je een link naar het CSS-bestand plaatsen.
De link naar je CSS-bestand moet er zo uit zien:
<link rel="stylesheet" type="text/css" href="shopfront-embed-style.css">
Vervang shopfront-embed-style.css met de naam van je CSS-bestand, als je het hernoemd hebt. Je plaatst de link net na de head-tag, maar voor het sluiten van /head-tag.
Stijlparameters
Je kunt de volgende parameters aanpassen:
- Lettertype familie
- Kleur lettertype
- Vulkleur
- Dropdown menu's
- Randen
- Aandachtskleuren
- Promotie label
- Webshop in mobiele weergave
Lettertype familie
Met lettertype familie kun je het standaardlettertype dat in je Webshop gebruikt wordt, wijzigen. Het eerste lettertype is wat weergegeven wordt. De andere twee zijn reserve voor als het eerste lettertype niet geladen kan worden.
Voorbeeld:
font-family: "Times New Roman",Times,serif;
Kleur lettertype
De standaardkleur voor het lettertype is hetzelfde voor text, links, aanwijzen en meer. Als je de kleur wilt veranderen, wijzig je de HEX code.
Als je een andere kleur wilt gebruiken als iemand bijvoorbeeld een link aanwijst, scheid je parameter in de lijst en geef je deze zijn eigen HEX kleurcode.
Voorbeeld:
.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;
}
Vulkleur
Vulkleuren worden toegepast op achtergronden en iconen in de Webshop. Je kunt deze kleuren aanpassen.
SVG-icoonkleur
De vulkleur wordt toegepast op SVG iconen in de Webshop, zoals bijvoorbeeld het winkelwagenpictogram. Je kunt de kleur aanpassen door de HEX code te wijzigen.
Voorbeeld:
.onecom-webshop-main .text-color svg {
fill: #363636;
}
Achtergrondkleur (Webshop)
Hiermee stel je een achtergrondkleur in voor je gehele Webshop. Je kunt de HEX kleurcode aanpassen.
Voorbeeld:
.onecom-webshop-main {
background-color: #fdfdfd
}
Dropdown menu's
Categoriën kiezen en producten sorteren gebeurt middels dropdown menu's. Je kunt de kleur van deze menus aanpassen.
Achtergrondkleur (dropdown)
Dit bepaalt de kleur van de dropdown achtergrond. Je kunt de HEX code aanpassen.
Voorbeeld:
.onecomwebshop-main .bg-color {
background-color: #ffffff !important;
}
Randkleur (dropdown)
De gekozen kleur bepaalt de kleur van de rand van het dropdown menu. Je kunt de HEX en RGBA code aanpassen.
Voorbeeld:
.onecomwebshop-main .border-color {
border-color: rgba(0,0,0,0.5) !important;
}
Tekstkleur (dropdown)
De gekozen kleur bepaalt de kleur van de tekst in het dropdown menu. Je kunt de HEX kleurcode aanpassen.
Voorbeeld:
.onecomwebshop-main .category-text {
color: #000000 !important;
}
Geselecteerde waarde (dropdown)
Hiermee wijzig je de kleur van geselecteerde tekst of items in een dropdown menu. Je kunt de HEX kleurcode aanpassen.
Voorbeeld:
.onecom-webshop-main .selected-text {
color: #000000 !important;
}
Aanwijskleur (dropdown)
De twee onderstaande instellingen bepalen de lettertypekleur bij aanwijzen en de achtergrondkleur. Je kunt de HEX and RGBA codes aanpassen.
Voorbeeld:
.onecomwebshop-main .bg-light-focus:hover {
color: #000 !important;
background-color: rgba(99,170,219,0.5) !important;
}
Randen
Randkleur Vorige-knop
Deze instellingen bepalen de de randkleur van de Vorige-knop, de "Terug naar de winkel" en het navigeren van het afrekenen. Je kunt de HEX code wijzigen naar de gewenste kleur.
Voorbeeld:
.onecomwebshop-main .border-fcolor {
border-color: #363636 !important;
}
Rand om bestellingsdetails
Tijdens het afrekenen zie je een kader met een overzicht van de producten. Met deze instelling pas je de kleur aan van de rand van dit kader. Je kunt de RGBA code wijzigen naar de gewenste kleur. De tekst in dit kader is altijd zwart.
Voorbeeld:
.onecomwebshop-main .border-light-font-color {
border-color: rgba(54,54,54,0.5) !important;
}
Koprand
Met deze instelling wijzig je de kleur van de onderlijning van koppen, bijvoorbeeld op de afrekenpagina. Je kunt de HEX kleur wijzigen naar de gewenste kleur.
.onecomwebshop-main .border-light-color {
border-color: #363636 !important;
}
Bodemrand
Hiermee plaatst je een lijn onder de items op de afrekenpagina. Je kunt de HEX kleurcode aanpassen.
Voorbeeld:
.onecom-webshop-main .product-item {
border-color: rgba(54,54,54,0.2) !important;
}
Aandachtskleuren
De aandachtskleuren worden gebruikt bij prijzen, het winkelwagenicoon en mobiele sliders. Je kunt de HEX kleur wijzigen naar de gewenste kleur.
Voorbeeld:
.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a {
color: #63aadb !important;
}
.onecomwebshop-main .focus svg{
fill: #63aadb !important;
}
Aandachtskleuren bij aanwijzen
Dit zijn dezelfde kleuren als hierboven, maar dan tijdens het aanwijzen. Je kunt de RGBA kleuren wijzigen naar de gewenste kleur.
Voorbeeld:
.onecomwebshop-main .bg-extra-light-focus:hover {
background-color: rgba(99,170,219,0.1) !important;
}
Promotie label
Met deze instelling kun je de kleur van de tekst en de achtergrond van het promotie label bepalen. Met een promotie label kun je een product in de Webshop meer zichtbaarheid geven. Bekijk ook onze handleiding over het promoten van producten in de Webshop.
Voorbeeld:
.onecom-webshop-main .product-label {
background-color: #63aadb !important;
color: white !important;
}
Webshop in mobiele weergave
Als je wilt wijzigen hoe je Webshop eruitziet op mobiele apparaten kun je je eigen "viewport" metatag toevoegen aan de head-sectie van het HTML bestand van je Webshop.
Als zo'n metatag niet gevonden wordt, voegen wij deze automatisch voor je toe.
meta name="viewport" content="width=320, initial-scale=1"
Gerelateerde artikelen
