CSS-kookboek van Ecwid
U kunt de uitstraling van uw Ecwid-winkel gemakkelijk aanpassen met behulp van Cascading Style Sheets (CSS). Dit kookboek bevat een verzameling CSS-recepten waarmee u uw Ecwid-winkel precies zo kunt laten uitzien als u wilt. Het kookboek is niet uitputtend. Doordat u de HTML-sjablonen en het CSS-stylesheet kunt aanpassen, is het aantal dingen dat u kunt doen alleen beperkt door uw verbeeldingskracht.
Als CSS nieuw voor u is, bekijk dan de volgende tutorials om snel te leren wat de mogelijkheden zijn:
- Inleiding tot CSS (in het Engels) is een videotutorial van het Ecwid-team.
- In de Beginnerstutorial voor CSS leert u net genoeg om aan de slag te gaan.
- Voorbeelden van CSS leidt u door de basisfuncties van de taal met praktische voorbeelden die u gaandeweg kunt proberen.
Verzameling CSS-recepten (index)
Dit kookboek is ingedeeld in secties waarin de onderdelen van de Ecwid-winkeletalage worden behandeld. Elke sectie bevat CSS-codes die u direct in uw winkel kunt plakken. Gebruik de code zoals hij is of bewerk hem om uw eigen code te maken.
Meer informatie over het toevoegen van CSS-codes aan uw Ecwid-winkel →
Knoppen
- Kleur van alle grote knoppen in één keer wijzigen
- Kleur van knop In winkelwagen wijzigen
- Kleur van knop Nu kopen wijzigen
- Kleur van knop Afrekenen wijzigen
- Kleur van knop Doorgaan wijzigen
- Kleur van knop Bestellen wijzigen
- Kleur van kleinere knoppen wijzigen
- Kleur van knop Meer toevoegen wijzigen
- Kleur van knop Naar afrekenen wijzigen
- Kleur van knop Doorgaan met winkelen op de winkelwagenpagina wijzigen
- Knoppen Nu kopen op hetzelfde niveau plaatsen
- Knop In winkelwagen verbergen op alle productpagina's
Lettertypen
Productraster (voorpagina winkel)
- Kleur en grootte van lettertype voor prijs in het productraster wijzigen
- Vergroten van productminiaturen uitschakelen
- Pictogrammen voor 'Volg uw bestelling', 'Favorieten', 'Winkelwagen' en 'Mijn Account' bovenaan winkeletalagepagina plaatsen
- Productafbeeldingen verbergen
Categoriepagina
- Producten in categorieën centreren
- Kleur van prijs wijzigen op een specifieke categoriepagina
- Vergroten van categorieminiaturen uitschakelen
- Gelijk aantal categorieën per rij weergeven
- Muisaanwijzing uitschakelen voor categorietitels
- Afbeeldingen en titels van categorieminiaturen verbergen
- Categorieafbeeldingen verbergen
- Categoriekaarten verbergen op Voorpagina winkel
Productgegevens
- Kleur en grootte van lettertype wijzigen
- Kleur van label 'Uitverkoop' wijzigen
- Galerijafbeeldingen op volledige grootte weergeven op mobiele apparaten
- Naam onder gedetailleerde afbeelding in galerij verwijderen
- Sectie 'Meer weergeven' openen op productpagina's
- 'Gerelateerde producten' bovenaan een pagina weergeven
- Prijs voor specifieke producten verbergen
- Prijzen verbergen voor klanten die niet zijn ingelogd
Winkelwagen
- Stijl van knop 'Product verwijderen' wijzigen
- Veld voor hoeveelheid verwijderen
- Veld van kortingscoupon uitvouwen
- Lege winkelwagen weergeven op Instant Site (originele versie)
Zoekveld
- Ontwerp van zoekwidget wijzigen
- Stijlen van knop Zoeken wijzigen
- Zoekvak verplaatsen
- Zoekvak op Instant Site (originele versie) wijzigen
Afrekenen
- Levertijd verwijderen bij namen van verzendmethoden
- Creditcardlogo's onder betaalopties bij afrekenen wijzigen
- Creditcardlogo's weergeven in voettekst van winkel
Knoppen
Er zijn veel grote en kleine knoppen in uw winkel, zoals de knoppen 'In winkelwagen' of 'Doorgaan'. U kunt ze allemaal tegelijk wijzigen of per knop.
Kleur van alle grote knoppen in één keer wijzigen
De grote knoppen in de winkel zijn In winkelwagen, Doorgaan met winkelen op de productpagina en Doorgaan, Afrekenen en Bestellen. Gebruik de volgende CSS-code om alle grotere knoppen in één keer bij te werken. Hiervoor wijzigt u "#F0F8FF" en “zwart” in het voorbeeld in de gewenste kleur:
/*Kleur knop*/
.ec-size .ec-store .form-control--primary .form-control__button
{ background-color: red;}
/*Kleur knop bij muisaanwijzing*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
background: #F0F8FF;
}
/*Kleur tekst*/
.ec-size .ec-store .form-control--primary .form-control__button {
color: black;
}
/*Kleur tekst bij muisaanwijzing*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
color: black;
}
Op de site CSS Colors kunt u verschillende kleurencombinaties en kleurschakeringen bekijken en een kleur en bijbehorend hex-nummer kiezen.
Kleur van knop In winkelwagen wijzigen
Vervang #FFA500 (oranje) en “#000000” (zwart) door de kleurcodes die u in de winkel wilt weergeven.
/*Kleur knop*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
background: #FFA500;
}
/*Kleur knop bij muisaanwijzing*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
background: #FFA500;
}
/*Kleur tekst*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
color: #000000;
}
/*Kleur tekst bij muisaanwijzing*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
color: #000000;
}
Kleur van knop Nu kopen wijzigen
De knoppen Nu kopen worden weergegeven op categoriepagina's. Vervang #FFFAFA (knopkleur, sneeuwwit) en “#000000” (tekstkleur, zwart) door de kleurcodes die u in de winkel wilt weergeven.
.ec-size .ec-store .grid-product__buy-now .form-control__button {
background: #FFFAFA;
color: #000000;
}Als u een Koopknop aan uw website of blog heeft toegevoegd, kan de lay-out daarvan ook een knop Nu kopen hebben. Als u de kleur van deze knop wilt wijzigen, gebruikt u de volgende code (vervang de kleurcodes door de gewenste kleurcodes):
.ecsp .ecwid-btn--primary,
.ecwid .ecwid-btn--primary {background-color:#2A54D8;}
.ecsp .ecwid-btn--primary:hover,
.ecwid .ecwid-btn--primary:hover {background-color:#2A54D8;}
Kleur van knop Afrekenen wijzigen
Vervang #FFFFFF (wit) en “#000000” (zwart) door de kleurcodes die u in de winkel wilt weergeven.
/*Kleur knop*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
background-color: #FFFFFF;
}
/*Kleur knop bij muisaanwijzing*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
background-color: #FFFFFF;
}
/*Kleur tekst*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
color: #000000;
}
/*Kleur tekst bij muisaanwijzing*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
color: #000000;
}Kleur van knop Doorgaan wijzigen
Vervang #FFFFFF (wit) en “#000000” (zwart) door de kleurcodes die u in de winkel wilt weergeven.
/*Kleur knop*/
.ec-size .ec-store .ec-form__row--continue .form-control__button {
background-color: #FFFFFF;
}
/*Kleur knop bij muisaanwijzing*/
.ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
background: #FFFFFF;
}
/*Kleur tekst*/
.ec-size .ec-store .ec-form__row--continue .form-control__button {
color: #000000
}
/*Kleur tekst bij muisaanwijzing*/
.ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
color: #000000
}
Kleur van knop Bestellen wijzigen
Vervang #FFFFFF (wit) en “#000000” (zwart) door de kleurcodes die u in de winkel wilt weergeven.
/*Kleur knop*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button {
background-color: #FFFFFF;
}
/*Kleur knop bij muisaanwijzing*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
background: #FFFFFF;
}
/*Kleur tekst*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button {
color: #000000
}
/*Kleur tekst bij muisaanwijzing*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
color: #000000
}
Kleur van alle kleinere knoppen in één keer wijzigen
U kunt ook de kleinere knoppen wijzigen, zoals Meer toevoegen, Naar afrekenen en Doorgaan met winkelen op de winkelwagenpagina. Hieronder staan de codes voor het wijzigen van dergelijke knoppen. Vervang #FFFFFF (wit) en “#000000” (zwart) door de kleurcodes die u in de winkel wilt weergeven.
De kleuren van de knoppen Meer toevoegen en Naar afrekenen wijzigen:
/*Kleur knop*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button {
background-color: #FFFFFF;
}
/*Kleur knop bij muisaanwijzing*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
background-color: #FFFFFF;
}
/*Kleur tekst*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button {
color: #000000;
}
/*Kleur tekst bij muisaanwijzing*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
color: #000000;
}
Kleur van knop Doorgaan met winkelen wijzigen:
/*Kleur knop*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
background-color: #FFFFFF;
}
/*Kleur knop bij muisaanwijzing*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
background-color: #FFFFFF;
}
/*Kleur tekst*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
color: #000000;
}
/*Kleur tekst bij muisaanwijzing*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
color: #000000;
}
Kleur van knop Meer toevoegen wijzigen
Vervang #FFA500 (oranje) en “#000000” (zwart) door de kleurcodes die u in de winkel wilt weergeven.
/*Kleur knop*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
background-color: #FFA500;
}
/*Kleur knop bij muisaanwijzing*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
background: #FFA500;
}
/*Kleur tekst*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
color: #000000;
}
/*Kleur tekst bij muisaanwijzing*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
color: #000000;
}Kleur van knop Naar afrekenen wijzigen
Vervang #FFA500 (oranje) en “#000000” (zwart) door de kleurcodes die u in de winkel wilt weergeven.
/*Kleur knop*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
background: #FFA500;
}
/*Kleur knop bij muisaanwijzing*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
background: #FFA500;
}
/*Kleur tekst*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
color: #000000;
}
/*Kleur tekst bij muisaanwijzing*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
color: #000000;
}Kleur van knop Doorgaan met winkelen op de winkelwagenpagina wijzigen
Vervang #FFA500 (oranje) en “#000000” (zwart) door de kleurcodes die u in de winkel wilt weergeven.
/*Kleur knop*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
background-color: #FFFFFF;
}
/*Kleur knop bij muisaanwijzing*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
background-color: #FFFFFF;
}
/*Kleur tekst*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
color: #000000;
}
/*Kleur tekst bij muisaanwijzing*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
color: #000000;
}
Knoppen Nu kopen op hetzelfde niveau plaatsen
Wanneer u producttitels van verschillende lengtes heeft, zijn de knoppen voor Nu kopen mogelijk niet uitgelijnd op de etalagepagina. Als u de Koopknoppen in een rasterweergave wilt uitlijnen:
.grid-product__wrap {
display: flex;
}
.grid-product__price {
flex: 1 0 auto;
align-items: flex-end;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
Knop In winkelwagen verbergen op alle productpagina's
Verberg de knop In winkelwagen op alle productpagina's met behulp van de onderstaande CSS-code:
.details-product-purchase__controls {
display: none;
}Lettertypen
U kunt het standaard lettertype en de kleur instellen voor de hele winkel.
Alle lettertypen wijzigen
Wijzig het lettertype voor de hele winkel. Vervang NAME_OF_FONT door de naam van een lettertype:
.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
font-family: NAME_OF_FONT !important;
}
Kleur van lettertype wijzigen
Wijzig in één keer de kleur van alle lettertypen. Wijzig "#262626" (zeer donkergrijs) in het voorbeeld in elke gewenste kleur:
.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
color: #262626 !important;
}
Productraster (voorpagina winkel)
Het productraster is een lay-out met meerdere producten. Het is te vinden op de volgende plaatsen:
- De categoriepagina's.
- De sectie met de verzameling uitgelichte producten op de startpagina.
- Het raster met gerelateerde producten onder het hoofdproduct op een productpagina.
Kleur en grootte van lettertype voor prijs in het productraster wijzigen
Wijzig de kleur of de grootte van het lettertype voor prijs in het productraster. Wijzigen "blauw" en "20px" in elke gewenste kleur of lettergrootte.
/*Producttitels op cataloguspagina*/
/*Kleur lettertype wijzigen*/
.ec-size .ec-store .grid-product__title-inner {
color: blue;
}
/*Productprijs op cataloguspagina*/
/*Kleur lettertype wijzigen*/
.ec-size .ec-store .grid-product__price-amount {
color: blue;
}
/*Grootte lettertype wijzigen*/
.ec-size .ec-store .grid-product__price-value.ec-price-item {
font-size: 20px !important;
}Vergroten van productminiaturen uitschakelen
Wanneer u met de muis op een productminiatuur klikt, wordt de afbeelding uitvergroot. Deze functie is standaard ingeschakeld voor alle Ecwid-winkels. U kunt dit uitschakelen voor uw online winkel met de onderstaande CSS-codes:
.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__picture {
transform: none;
}Pictogrammen voor 'Volg uw bestelling', 'Favorieten', 'Winkelwagen' en 'Mijn Account' bovenaan de winkeletalagepagina plaatsen
De knoppen 'Volg uw bestelling', 'Favorieten', 'Winkelwagen' en 'Mijn Account' in het voettekstmenu staan standaard onderaan de etalagepagina. Als u ze naar het begin van de pagina wilt verplaatsen, gebruikt u:
.ec-size .ec-store__category-page .ec-store__content-wrapper,
.ec-size .ec-store__category-page .ec-store__content-wrapper > div {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__category-page .ec-footer {
order: -1;
}
Categorie
Winkels met diverse productlijnen gebruiken categorieën om de producten te ordenen en kopers te helpen vinden wat ze zoeken. U kunt stijlwijzigingen toepassen op één categorie en/of in één keer op alle categorieën.
Als u stijlveranderingen wilt toepassen op alle pagina's met categoriegegevens van de Ecwid-winkel, gebruikt u de CSS-klasse .ec-store__category-page.
Als u nog geen categorieën heeft, behoren al uw producten tot de standaardcategorie 'Voorpagina winkel'. Als u stijlveranderingen wilt toepassen op alle producten in de categorie Voorpagina winkel, gebruikt u de CSS-klasse ec-store__category-page--0.
Producten in categorieën centreren
Centreer producten op categoriepagina's (dit werkt het beste als de categorie weinig producten bevat):
.ec-size .ec-store .grid__products {
justify-content: center;
}
Kleur van prijs wijzigen op een specifieke categoriepagina
Wijzig de kleur van de prijs op een specifieke categoriepagina. Wijzig “4002” in de unieke categorie-ID. Vervang #FFA500 (oranje) door de kleurcode die u in de winkel wilt weergeven.
.ec-store__category-page--4002 .grid-product .grid-product__price-amount {
color: #FFA500;
}Vergroten van categorieminiaturen uitschakelen
Wanneer u met de muis op een categorieminiatuur klikt, wordt de afbeelding uitvergroot. Deze functie is standaard ingeschakeld voor alle Ecwid-winkels. U kunt dit uitschakelen voor uw online winkel met de onderstaande CSS-codes:
.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__bg-image {
transform: none;
}Bepaald aantal categorieën per rij weergeven
U kunt opgeven hoeveel ruimte de categorieën in beslag nemen op de totale paginabreedte. Als u de breedte voor categorieën bijvoorbeeld instelt op 20% van de 100% ruimte op een pagina, krijgt u 5 categorieën op een rij. Als u de breedte instelt op 25%, worden het 4 categorieën per rij, enzovoort.
Bepaald aantal categorieën per rij weergeven:
.ec-size .ec-store .grid__categories .grid-category:nth-child(n+1) {
width: 20% !important;
}
Muisaanwijzing uitschakelen voor categorietitels
Wijzig de volgende selector:
.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
transform: none;
}Afbeeldingen en titels van categorieminiaturen verbergen
Bij categorieën zonder afbeeldingen toont Ecwid een afbeelding met kleurverloop als tijdelijke afbeelding in de winkeletalage:
U kunt uw eigen afbeeldingen toevoegen. Of u kunt de afbeeldingen en titels van categoriekaarten volledig verbergen (bijvoorbeeld, als u het horizontale menu als winkelnavigatie gebruikt):
.ec-size .ec-store .grid__categories {
display: none;
}Categoriekaarten verbergen op Voorpagina winkel
Als u de eerste winkelpagina compacter wilt weergeven, bijvoorbeeld alleen met een horizontaal menu en uitgelichte producten, kunt u de categoriekaarten op de voorpagina verbergen. Tegelijkertijd kunt u de categoriekaarten op uw categoriepagina's houden, zodat klanten daar de eventuele subcategorieën kunnen zien.
.ec-size .ec-store.ec-store__category-page--0 .ec-grid .grid__categories {
display: none;
}Productgegevens
Op de productpagina staat een productafbeelding, naam, prijs, beschrijving, enz. U kunt veranderen hoe de inhoud wordt gepresenteerd en u kunt sommige onderdelen verbergen.
Kleur en grootte van lettertype wijzigen
Wijzig de kleur en grootte van het lettertype op de productpagina. Wijzig #FFA500 (oranje) en "20px" in de gewenste kleur en lettergrootte.
Kleur van titels:
/*Producttitels op de productpagina*/
.ec-size .ec-store .product-details .product-details__product-title {
color: #FFA500;
}Kleur en grootte van lettertype van prijzen:
/*Productprijs op de productpagina*/
.ec-size .ec-store .ec-price-item {
color: #FFA500;
}
.ec-size .ec-store .ec-price-item {
font-size: 20px;
}Kleur van SKU:
/*SKU van product op de productpagina*/
.ec-size .ec-store .product-details__product-sku {
color: #FFA500;
}
Kleur van hoeveelheid:
/*Label voor hoeveelheid op de productpagina*/
.ec-size .ec-store .details-product-purchase__place {
color: #FFA500;
} Kleur en grootte van lettertype voor prijs per eenheid:
/*Velden voor prijs per eenheid op de productpagina*/
.ec-size .ec-store .product-details__price-per-unit-block {
font-size: 20px;
color: #FFA500;
}Kleur van label 'Uitverkoop' wijzigen
Wijzig de kleur van het etiket UITVERKOOP. Verander de kleur voor de achtergrond en rand van RED in de gewenste kleur:
/* wijzigen in kleur uitverkoop-label */
.ec-size .ec-store .label--notice {
background-color: RED;
}
.ec-size .ec-store .label--notice::after,
.ec-size .ec-store .label--notice::before {
color: RED;
}Galerijafbeeldingen op volledige grootte weergeven op mobiele apparaten
Voeg de volgende selector en eigenschap toe:
.ec-size:not(.ec-size--s) .ec-store .product-details .product-details__gallery {
width: 100vw;
margin-left: calc(env(safe-area-inset-left) - var(--global-tile-padding) * 1px);
}
Naam onder gedetailleerde afbeelding in galerij verwijderen
Verwijder de tekst onder de gedetailleerde afbeelding:
div.pswp__caption__center {
display:none;
} Sectie 'Meer weergeven' openen op productpagina's
Met de optie Meer weergeven behoudt u een compacte weergave van de productpagina als een product een lange beschrijving heeft. Gebruik onderstaande code om een volledige gedetailleerde beschrijving van het product te tonen:
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed {
max-height: none;
}
.ec-size.ec-size--s .ec-store .product-details__product-description::after {
display: none;
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed~.product-details-module__btn-more {
display: none;
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed::after {
content: none;
}
#productDescription img {
display: inline;
}'Gerelateerde producten' bovenaan een pagina weergeven
De gerelateerde producten worden standaard onderaan de productpagina's weergegeven. U kunt ze naar boven verplaatsen met de volgende code:
.ec-size .ec-store__content-wrapper {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__content-wrapper .ec-related-products {
order: -1;
}Prijs voor specifieke producten verbergen
Verberg de prijs op de specifieke productpagina. Wijzig "123456" in de unieke interne product-ID voor het product: (ID voor een product ophalen)
.ec-store__product-page--123456 .product-details__product-price {
display: none;
}Prijzen verbergen voor klanten die niet zijn ingelogd
U kunt prijzen verbergen voor bezoekers die niet zijn ingelogd. Uw catalogus is beschikbaar voor alle bezoekers, maar alleen aangemelde klanten zien de prijzen en de winkel. Dit is met name nuttig als u groothandelsprijzen niet openbaar wilt maken.
Hieronder staat een CSS-code voor het verbergen van prijzen en de knoppen In winkelwagen en Nu kopen. Alleen aangemelde klanten kunnen dan bestellingen plaatsen. Niet ingelogde klanten kunnen alleen de catalogus bekijken.
/*Prijs verbergen op cataloguspagina*/
body.ecwid-customer-loggedOut .grid-product__price {
display: none;
}
/*Knoppen Nu koppen verbergen op de cataloguspagina*/
body.ecwid-customer-loggedOut .grid-product__button.grid-product__buy-now {
display: none;
}
/*Prijs verbergen op de pagina met productgegevens*/
body.ecwid-customer-loggedOut .details-product-price__value,
body.ecwid-customer-loggedOut .details-product-price-compare__container {
display: none;
}
/*Knop In winkelwagen verbergen op de pagina met productgegevens*/
body.ecwid-customer-loggedOut .details-product-purchase__add-buttons {
display: none;
}
Als u gevestigd bent in een land waar naast de productprijs de mededeling Prijs incl. belasting wordt weergegeven, moet u ook de volgende CSS-code toevoegen om deze tekst in de winkeletalage te verbergen:
body.ecwid-customer-loggedOut .product-details__product-price-taxes { display: none; }
Winkelwagen
Stijl van knop 'Product verwijderen' wijzigen
Uw klanten kunnen een product uit de winkelwagen verwijderen met het pictogram Verwijderen (X). Dit staat rechts van het product in de winkelwagen.
U kunt de hoogte en breedte van het teken, de lijndikte en de ronding van de hoeken aanpassen en de kleur van het teken wijzigen om het beter zichtbaar te maken.
Dit is de code die u moet toevoegen aan uw winkel:
.ec-size .ec-store .ec-cart-item__control-inner svg {
opacity: 1.5;
color: red;
width: 30px;
height: 30px;
border-radius: 10px;
}
.ec-size .ec-store .ec-cart-item__control-inner svg g {
stroke-width: 2px;
}
Op de regel “color” typt u de kleur die u het teken wilt geven.
Hoe groter de breedte en hoogte, des te groter het teken zal zijn.
Veld voor hoeveelheid verwijderen
Aantal verbergen op de winkelwagenpagina:
.ec-size .ec-store .ec-cart-item__count {
display: none;
}Veld van kortingscoupon uitvouwen
U kunt het vak voor de kortingscoupon (en cadeaubon) in de winkelwagen uitvouwen:
.ec-size .ec-store .ec-cart-coupon__wrap { visibility: visible }
.ec-size .ec-store .ec-cart-coupon:not(.ec-cart-coupon--applied) .ec-cart-coupon__button--apply {
display: block;
}
.ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__wrap {
display: flex;
align-items: center;
height: auto;
}
.ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__text {
display: none;
}Lege winkelwagen weergeven op Instant Site (originele versie)
Standaard wordt het winkelwagenpictogram op Instant Site weergegeven als de winkelwagen een product bevat. Desgewenst kunt u het winkelwagenpictogram ook tonen als de winkelwagen leeg is:
.float-icons__icon--cart.off:not(.off2) {
opacity: 1;
height: 48px;
padding-top: 12px;
transform: translateX(-8px);
pointer-events: auto;
}
@media (min-width: 414px) {
.float-icons__icon--cart.off:not(.off2) {
height: 68px;
padding-top: 16px;
transform: translateX(-16px);
}
}
@media (min-width: 768px) {
.float-icons__icon--cart.off:not(.off2) {
padding-top: 24px;
transform: translateX(-24px);
}
}
Zoekveld
Een zoekwidget helpt uw klanten bij het zoeken naar producten in uw winkel. U kunt het uiterlijk van het zoekvak wijzigen of het vak verplaatsen.
Ontwerp van zoekwidget wijzigen
Voeg de volgende selector en eigenschappen toe of pas ze aan. Wijzig de grootte en vervang de kleurcodes zoals #000000 door de kleurcode die u wilt gebruiken.
/* Stijlen voor invoervak */
input.ecwid-search-widget__input[type="text"] {
width: 100px; /* change width as needed*/
height: 20px; /* change height as needed*/
border: solid 1px red; /* change border color */
background-color: #000000; /* change background colour */
font-size: 12px; /* change font size in search field */
color: #000000; /* change font color in search field */
}Stijlen van knop Zoeken wijzigen
Voeg de volgende selector en eigenschappen toe of pas ze aan. Vervang image/button_search.png door het absolute pad naar de achtergrondafbeelding. Bijvoorbeeld: "http://www.example.com/images/button_bg.png"
/* Stijlen voor knop 'Zoeken' */
button.ecwid-search-widget__btn {
width: 20px; /* change width as needed*/
height: 10px; /* change height as needed*/
border: solid 1px #ffffff; /*change border color */
background: transparent url(image/button_search.png) no-repeat bottom center !important; /*add background image*/
}Zoekvak verplaatsen
Afhankelijk van de gewenste positie van de zoekwidget voert u de overeenkomstige waarden voor de linkermarge en de bovenmarge in om de widget te verplaatsen.
/* zoekwidget verplaatsen*/
.ecwid-search-widget {
max-width: 170px; /* change width as needed*/
position:relative;
margin-left: 400px; /* change left margin as needed*/
margin-top: 10px; /* change top margin as needed*/
}Zoekvak op Instant Site (originele versie) wijzigen
Vervang #F3F6F9 door de kleurcode die u wilt weergeven.
.ec-minicart.ec-minicart--pill .ec-minicart.ec-minicart--rect {
border: 1px solid #e6e6e6;
}
.search-panel .text-field {
background-color: #F3F6F9;
border: 2px solid #DC230A;
}Afrekenen
Levertijd verwijderen bij namen van verzendmethoden
Sommige verzendbedrijven (zoals USPS, FedEx, enz) zetten een levertijd bij de namen van de verzendmethoden. Als u een online verzendbedrijf in uw Ecwid-winkel gebruikt, kunt u zien dat de verzendmethoden bij het afrekenen als volgt worden weergegeven: "USPS Priority Mail (1-3 dagen)". U kunt deze levertijd verbergen via CSS:
span.ecwid-shippingOption-days, span.ecwid-Invoice-ShippingDetails-transitTime {
display:none !important;
}Creditcardlogo's onder betaalopties bij afrekenen wijzigen
Met logo's onder betaalopties kunnen klanten direct zien welke opties ze hebben om te betalen. U kunt een CSS-code gebruiken om verschillende logo's weer te geven, bijvoorbeeld om explicieter te laten zien welke creditcards of debetkaarten klanten kunnen gebruiken.
Gebruik de volgende CSS-code:
/* Huidige logo's van de betaalmethode verbergen*/
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X)
div.ec-cart-accept__icons {
display: none;
}
/* Aangepast logo voor de betaalmethode toevoegen*/
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X)
.ec-radiogroup__info:after {
content: '';
background: url('https://example.com/your_image.jpg') no-repeat;
background-size: contain;
height: 40px;
width: 60px; /* The width should be adjusted depending on your logo */
display: block;
}
waarbij u https://example.com/your_image.jpg moet vervangen door een URL naar uw logo en X in :nth-child(X) door het nummer van de betaalmethode bij het afrekenen. Als er bijvoorbeeld drie betaalmethoden worden weergegeven bij het afrekenen en u onder de tweede methode een nieuw logo wilt weergeven, moet u "2" in de code zetten, op de volgende manier: :nth-child(2).
Creditcardlogo's weergeven in voettekst van winkel
Wanneer u wilt laten zien welke kaarten u in uw winkel accepteert, bijvoorbeeld om goedkeuring van Google te krijgen voor uw account voor Google Shopping, kunt u kaartlogo's aan de voettekst toevoegen met behulp van de volgende CSS-code:
waarbij u https://example.com/your_image.jpg moet vervangen door een URL naar de afbeelding met het logo.