Specifieke pagina's aanpassen met CSS

U kunt het ontwerp van afzonderlijke pagina's in uw Ecwid-winkel wijzigen, of het nu gaat om een bepaalde productgegevenspagina, een afrekenstappagina of een klantaccountpagina. Met CSS-klassen is het mogelijk om CSS-regels op te stellen die alleen van toepassing zijn op specifieke pagina's in uw Ecwid-winkeletalage.

Op basis van de pagina

Pagina met productgegevens

Een typische pagina met productgegevens heeft een productnaam, een afbeelding en een rechterpaneel dat bestaat uit de productprijs, het artikelnummer, toevoegen aan winkelwagen enz:

Een ontwerp toepassen op alle pagina's met productgegevens

Als u een stijl wilt toepassen op alle pagina's met productgegevens van uw Ecwid-winkel, moet u de volgende klasse in CSS gebruiken:

.ec-store__product-page

Een ontwerp toepassen op enkele pagina's met productgegevens

Als u de prijzen op de specifieke pagina met productgegevens wilt verbergen, moet u de volgende code in uw CSS-thema gebruiken:

.ec-store__product-page--123456 .product-details__product-price {
    display: none;
}

Waarbij "123456" de unieke interne product-ID voor het product is. Hoe krijg ik de product-ID?

Als u op meerdere pagina's met productgegevens stijlen wilt toepassen, maar niet op alle, kunt u de volgende code gebruiken:

.ec-store__product-page--123456 .product-details__product-price,
.ec-store__product-page--121221 .product-details__product-price,
.ec-store__product-page--123234 .product-details__product-price {
display: none;
}

Waarbij "123456", "121221" en "123234" de unieke interne product-ID's van het product zijn. Als gevolg daarvan worden de artikelnummers op drie pagina's met productgegevens verborgen.

Een ontwerp toepassen op alle pagina's met productgegevens in één categorie

Om in bulk stijlwijzigingen toe te passen op de pagina's met productgegevens van alle producten in een bepaalde categorie, kunt u deze CSS-klasse gebruiken:

.ec-store__product-page--c12345

waarbij u de noodzakelijke categorie-ID op de plaats van 12345 moet zetten.

U wilt bijvoorbeeld tijdelijk de knop Toevoegen aan winkelwagen verbergen op de pagina's met productgegevens in de categorie met ID 12345. Hier is een voorbeeld van CSS-code die u kunt gebruiken om dit te bereiken:

.ec-store__product-page--c12345 .details-product-purchase__controls {
display: none;
}

Categoriepagina

Een typische categoriepagina toont alle producten in die categorie in de rasterweergave:

CSS-wijzigingen voor categoriepagina's werken op een vergelijkbare manier als bij de pagina's met productgegevens.

Een ontwerp toepassen op alle categoriepagina's

Als u een stijl wilt toepassen op alle pagina's met categoriegegevens van uw Ecwid-winkel, moet u de volgende klasse in CSS gebruiken:

.ec-store__category-page

Als u bijvoorbeeld de kleur van uw prijs op categoriepagina's donkerblauw wilt maken, moet u de volgende code in uw CSS-thema gebruiken:

 .ec-store__category-page .grid-product .grid-product__price-amount {
color: darkblue;
}

Een ontwerp toepassen op enkele categoriepagina's

Als u de kleur van uw prijs wilt wijzigen op een specifieke categoriepagina, moet u de volgende code in uw CSS-thema gebruiken:

.ec-store__category-page--4002 .grid-product .grid-product__price-amount {
color: darkblue;
}

Waarbij "4002" de unieke interne categorie-ID voor de categorie is. Hoe krijg ik de categorie-ID? Als u op meerdere categoriepagina's stijlen wilt toepassen, maar niet op alle, kunt u de volgende code gebruiken:

.ec-store__category-page--4002 .grid-product .grid-product__price-amount,
.ec-store__category-page--4006 .grid-product .grid-product__price-amount,
.ec-store__category-page--4008 .grid-product .grid-product__price-amount {
color: darkblue;
}

Waarbij "4002", "4006" en "4008" de unieke interne ID's van de categorie zijn. Als gevolg daarvan wordt de kleur van de prijs op drie categoriepagina's veranderd in donkerblauw.

Andere pagina's

U kunt ook een ontwerp op maat toepassen op andere pagina's:

• winkelwagen- en afrekenpagina's
• pagina's met accountinstellingen

Winkelwagen- en afrekenpagina's

Gebruik de volgende CSS-klassen om het ontwerp toe te passen op de winkelwagen- en afrekenpagina:

.ec-size .ec-store .ec-cart

Pagina Bedankt voor uw bestelling

Gebruik de volgende CSS-klassen om het ontwerp alleen toe te passen op de pagina Bedankt voor uw bestelling:

.ec-size .ec-store .ec-confirmation

Profielpagina's van klanten

Om het ontwerp toe te passen op de profielpagina's van klanten (beschikbaar voor uw klanten nadat ze hebben ingelogd bij uw winkel), gebruikt u de volgende CSS-klassen:

Pagina met accountinstellingen:

.ecwid-productBrowser-AccountSettingsPage 

Pagina met bestellingen

.ecwid-productBrowser-OrdersPage 

Op basis van de klant

In sommige gevallen wilt u misschien prijzen of artikelnummers verbergen voor klanten die nog geen account hebben aangemaakt in uw winkel of wilt u misschien enkele van uw artikelen markeren voor klanten die tot een specifieke klantengroep behoren. Gelukkig is dit volledig mogelijk met behulp van CSS. We zullen u laten zien hoe u dit doet:

Niet ingelogd of heeft geen account

Wanneer een klant uw winkel voor het eerst bezoekt, heeft diegene geen account in uw winkel en is op zoek naar een product dat hij of zij nodig heeft. Voor dit type klanten wilt u misschien een aangepast ontwerp gebruiken. Hiervoor moet u de volgende klasse in uw CSS-thema gebruiken:

body.ecwid-customer-loggedOut

Als u bijvoorbeeld uw Ecwid-winkel wilt veranderen in een online catalogus voor klanten die uw winkel voor het eerst bezoeken of nog niet hebben ingelogd op hun account in uw winkel, kunt u dat eenvoudig doen door de volgende code aan uw CSS-thema toe te voegen:

/* Hide prices and add to bag buttons for logged out customers */
body.ecwid-customer-loggedOut .grid-product__price,
body.ecwid-customer-loggedOut .grid-product__button,
body.ecwid-customer-loggedOut .product-details__product-price,
body.ecwid-customer-loggedOut .details-product-purchase__controls {
	display: none;
}

Ingelogd

U wilt misschien een aangepast ontwerp toepassen voor klanten die hebben ingelogd op hun account in uw winkel en door uw online catalogus bladeren. Hiervoor moet u de volgende klasse in uw CSS-thema gebruiken:

body.ecwid-customer-loggedIn

U wilt bijvoorbeeld de prijzen voor dit type klanten in groen weergeven. In dat geval moet u de volgende code toepassen op uw CSS-thema:

body.ecwid-customer-loggedIn div.grid-product__price .grid-product__price-amount {
 color: green;
}

U kunt ook de toegang tot uw winkeletalage blokkeren, tenzij bezoekers inloggen op hun account. Meer informatie

Behoort tot een klantengroep

Wanneer een klant zich registreert in uw Ecwid-winkel, wordt hij of zij toegewezen aan een standaard klantengroep Algemeen met ID ‘0’. Als u een aangepast ontwerp wilt toepassen op alle klanten die aan die klantengroep zijn toegewezen, moet u de volgende klasse gebruiken:

body.ecwid-customer-group-0

Als u echter meerdere klantengroepen in uw winkel heeft en u heeft een groot klantenbestand met kortingen voor een specifieke klantengroep, wilt u misschien de voordelen van hun lidmaatschap in uw winkel benadrukken door voor dit type klanten een aangepast ontwerp te gebruiken. Dit doet u met behulp van de volgende code:

body.ecwid-customer-group-12345

Waarbij "12345" de unieke klantengroep-ID is. U kunt de ID krijgen door in te loggen op het account dat bij die klantengroep hoort of door een pagina in de tool "Element inspecteren" in uw browser te bekijken. Om voor alle klanten in een specifieke klantengroep de prijskleur op categoriepagina's te veranderen in groen, gebruikt u de volgende code:

body.ecwid-customer-group-12345 div.grid-product__price .grid-product__price-amount {
color: green;
}

We hebben u zojuist een glimp laten zien van wat u allemaal kunt doen met aangepaste CSS-thema's en diverse types pagina's en klanten, dus ga aan de slag en probeer het zelf!

Bekijk onze handleiding over het wijzigen van uw Ecwid-ontwerp.