Uiteraard hoort er bij jouw Perfect Filter ook een pixel perfect design. Je kan het hier allemaal zelf instellen!
📖 Collectiepagina
Bepaal een aantal basis instellingen welke de look en feel van jouw collectiepagina beheren.
📖 Toon pagina titel:
Activeer om de titel (H1) van de collectiepagina te laten zien. Dit is de titel van de categorie.
📖 Toon categorie omschrijving:
Activeer om de categorie omschrijving te laten zien (korte omschrijving).
📖 Toon categorie content:
Activeer om de categorie content te laten zien, dit is de content die in de 'inhoud' staat bij de desbetreffende categorie in je Lightspeed backoffice.
📖 Toon categorie image:
Activeer om de categorie afbeelding te laten zien.
📖 Aantal producten per rij (Desktop):
Selecteer hier het aantal producten per rij.
📖 Witruimte boven de collectiepagina:
Stel de witruimte in voor boven de collectiepagina. Wij adviseren dit op 0px
te houden, tenzij het conflicten oplevert met bijvoorbeeld de header.
📖 Witruimte onderde collectiepagina:
Stel de witruimte in voor onder de collectiepagina. Wij adviseren dit op 0px
te houden, tenzij het conflicten oplevert met bijvoorbeeld de footer.
📖 Maximale breedte collectiepagina:
Stel de maximale breedte in voor onder de collectiepagina. Dit verschilt per thema.
📖 Standaard sorteren op:
Stel hier de standaard sortering van de producten in.
📖 Product card
Beheer het design van jouw product cards. De instellingen voor de product cards zijn gesynchroniseerd met de instellingen van The Perfect Search. Kleuren, fonts en overige algemene instellingen kun je hier bewerken.
Aan de rechterkant vind je de Product card Preview, hier kun je dus zien hoe je product card eruit komt te zien.
📖 Toon merknaam:
Activeer om het merk van het product te laten zien.
📖 Toon variant naam:
Activeer om de variantnaam van het product te laten zien.
📖 Toon productafbeeldingen:
Activeer om de productafbeeldingen te laten zien.
📖 Productafbeeldingen uitvullen:
Activeer deze optie om de productafbeeldingen altijd op volledige breedte te laten zien. Dit kan er voor zorgen dat je afbeelding 'afgekapt' word.
📖 Productafbeelding ratio:
Stel hier de afbeelding ratio in, dit kan zijn: Vierkant, liggend of staand.
📖 Toon voorraad:
Activeer om de voorraad status te laten weergeven op de product card.
📖 Toon voorraad aantal:
Activeer om de voorraad status + voorraad aantallen te laten weergeven.
📖 Toon varianten als losse producten:
Activeer deze optie om de varianten van producten als losse producten weer te geven. Zo hoeft de klant niet eerst naar de productpagina om de varianten te bekijken. Het filteren geeft ook direct het juiste resultaat weer.
📖 Toon goedkoopste variant:
Activeer om altijd de goedkoopste variant te laten weergeven in het overzicht. Wanneer deze setting inactief is zou hij de 'Standaard' variant tonen.
📖 Toon prijzen inclusief BTW:
Activeer om de prijzen van de producten inclusief BTW te laten weergeven.
📖 Toon korte omschrijving:
Activeer om de korte beschrijving van het product te laten zien.
📖 Tekst limiteren:
De korte omschrijving kan worden gelimiteerd op het aantal regels. Standaard worden er 2 regels getoond. Stel hier eventueel meerdere of 1 regel in.
📖 Toon review score:
Activeer om de review score te laten zien.
📖 Toon "add to cart" button:
Activeer om de in winkelwagen knop te laten zien.
📖 Toon aantal selectie veld:
Activeer deze optie om de aantal selectie te laten zien, zodat de klant meerdere aantallen van het product in het winkelwagentje kan leggen.
📖 Toon tweede afbeelding on hover:
Activeer om de tweede afbeelding van het product (wanneer aanwezig) te laten zien als de klant met de muis over het product gaat.
📖 Toon wishlist:
Activeer om het 'toevoegen aan verlanglijstje' knop/icoontje toe te voegen aan de productcard.
📖 Labels
📖 Toon "Sale" label:
Activeer om een sale label te laten zien als het product een 'oude' en 'nieuwe' prijs heeft.
📖 Custom HTML:
Ervaring met HTML en wil je je sale label customizen? Vul hier je custom HTML in!
📖 Toon kortingspercentage in label:
Activeer om de percentage van de korting te laten zien in een label.
📖 Toon "bestseller" label:
Activeer om de bestseller label te laten zien op de meest verkochte producten.
📖 Custom HTML:
Ervaring met HTML en wil je je bestseller label customizen? Vul hier je custom HTML in!
📖 Show label for top X bestsellers:
Selecteer hier op hoeveel producten de bestseller label mag worden getoond. Jij bepaald dus de hoeveelheid van de producten die aangeduid mogen worden als bestsellers.
Keuze uit: 10, 25, 50 of 100.
📖 Toon custom labels
Wil je custom labels toevoegen? Denk aan de labels in data01, icoontjes voor bijvoorbeeld Vegan, Milieu neutraal etc? Dan kan je dit hier doen!
📖Custom labels toevoegen
Wil je custom labels toevoegen? Dit kan heel simpel. Net als het instellen van de filters zelf kan je middels de 'Bevat, Gelijk is aan, groter is dan, etc' optie labels toevoegen.
In het voorbeeld gaan we een label toevoegen voor de 'Nieuwe collectie
', waarvan we de waarde in 'data_01
' hebben staan.
In het voorbeeld word de label voor nieuwe collectie
ingeladen, als de data01 gelijk is aan 'Nieuwe collectie'
.
Onder de Type custom label kan je kiezen of je gebruik wilt maken van een Tekst label, een afbeelding of custom HTML!
Binnen Lightspeed ziet de data01 er dus zo uit:
Het product is dus binnen The Perfect Filter dus zo zichtbaar, met een blauw label:
📖 Geavanceerd
Wil je je product cards toch wat meer stylen naar je eigen huisstijl, dan kan je hier de custom css & custom HTML toevoegen.