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 parameters voor Webshop

Als u een webshop heeft ingevoegd bij uw HTML script en u wilt er stijlen aan toevoegen, raden wij u aan om een CSS stylesheet toe te voegen aan uw webruimte. Hiermee kunt u lettertypes, kleuren en meer wijzigen.

U kunt het CSS bestand downloaden via Voorkant Webshop in uw webshop beheer. Als u al een CSS bestand heeft, kunt u 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 uw webshop staat. In het HTML bestand moet u een link naar het CSS bestand plaatsen.

De link naar uw 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 uw CSS bestand, als u het hernoemd heeft. U plaatst de link net na uw head-tag, maar voor het sluiten van /head-tag.


Stijlparameters

U kunt de volgende parameters aanpassen:

Lettertype familie
Kleur lettertype
Vulkleur
Dropdownmenus
Randen
Aandachtskleuren
Promotielabel
Webshop in mobiele weergave

Lettertype familie

Met lettertype familie kunt u het standaardlettertype dat in uw 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 u de kleur wilt veranderen, wijzigt u de HEX code.

Als u een andere kleur wilt gebruiken als iemand bijvoorbeeld een link aanwijst, scheidt u parameter in de lijst en geeft u 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. U kunt deze kleuren aanpassen.

SVG-icoonkleur

De vulkleur wordt toegepast op SVG iconen in de webshop, zoals bijvoorbeeld het winkelwagenicoon. U kunt de kleur aanpassen door de HEX code te wijzigen.

Voorbeeld:

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

Achtergrondkleur (webshop)

Hiermee stelt u een achtergrondkleur in voor uw gehele webshop. U kunt de HEX kleurcode aanpassen.

Voorbeeld:

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

Dropdownmenus

Categoriën kiezen en producten sorteren gebeurt middels dropdownmenus. U kunt de kleur van deze menus aanpassen.


Achtergrondkleur (dropdown)

Dit bepaalt de kleur van de dropdownachtergrond. U 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 dropdownmenu. U 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 dropdownmenu. U kunt de HEX kleurcode aanpassen.

Voorbeeld:

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

Geselecteerde waarde (dropdown)

Hiermee wijzigt u de kleur van geselecteerde tekst of items in een dropdownmenu. U 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. U 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. U kunt de HEX code wijzigen naar de gewenste kleur.

Voorbeeld:

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

Rand om bestellingsdetails

Tijdens het afrekenen ziet u een kader met een overzicht van de producten. Met deze instelling past u de kleur aan van de rand van dit kader. U 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 wijzigt u de kleur van de onderlijning van koppen, bijvoorbeeld op de afrekenpagina. U kunt de HEX kleur wijzigen naar de gewenste kleur.

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

Bodemrand

Hiermee plaatst u een lijn onder de items op de afrekenpagina. U 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. U 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. U 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; }

Promotielabel

Met deze instelling kan u de kleur van de tekst en de achtergrond van het promotielabel bepalen. Met een promotielabel kan u een product in de webshop meer zichtbaarheid geven. Bekijk ook onze handleiding over het promoten van producten in uw Webshop.

Voorbeeld:

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

Webshop in mobiele weergave

Als u wilt wijzigen hoe uw webshop eruitziet op mobiele apparaten kunt u uw eigen "viewport" meta tag toevoegen aan de head-sectie van het HTML bestand van uw webshop.

Als zo'n meta tag niet gevonden wordt, voegen wij deze automatisch voor u toe.

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

Gerelateerde artikelen

HTML parameters om de webshop te embedden
Aan de slag met Webshop