Levi

Thema Levi beschikt over drie verschillende presets: volledige breedte, afgekaderd en boxed. Elke preset heeft dezelfde elementen, maar per preset zijn deze elementen op een andere manier gepositioneerd of vormgegeven. Dit betekent dat je een preset kan kiezen die het beste bij jou past.

Preset 1: Volledige breedte 

Preset 2: Afgekaderd

Preset 3: Boxed 

Preset 1 – Volledige breedte

Deze preset bevat zowel elementen over de volledige breedte als boxed elementen. De elementen over de volledige breedte zijn wel afgekaderd tot een maximum breedte van 2000 pixels.

De volgende elementen worden over de volledige breedte weergegeven:

• Header achtergrond
• Slider
• Producten
• Sales blok
• Nieuwsbrief
• Footer achtergrond

Preset 2 - Afgekaderd

De elementen in deze preset vallen binnen een kader. Het design van deze preset is een veelgebruikt design binnen websites en webshops.

Preset 3 - Boxed

Het design van deze preset is afgekaderd, net als preset 2. Het verschil zit hem in de vormgeving van de elementen. Deze zijn als blokken vormgeven met een kleine schaduw, waardoor het element naar voren wordt gehaald.

Header invulling: 

Met het thema Levi is het mogelijk om de header zelf in te richten. Er zijn 3 balken te vinden in de instellingen van het thema:  Mijn Webshop >> Instellingen >> Webwinkel thema’s >> Thema Levi >> Instellingen aanpassen >> Tabblad “Header invulling”.

Bovenste webshop balk:  

In dit blok kun je de bovenste balk instellen. In de bovenste balk heb je de mogelijkheid om minimaal 0 en maximaal 3 elementen te plaatsen. Wanneer je ervoor kiest om in de bovenste balk geen elementen te plaatsen zal de bovenste balk niet worden weergegeven. De elementen die je erin kunt plaatsen zijn als volgt. 

• Pagina menu
• Webshop USP
• Taalkiezer en login
• Afbeelding
• Eigen HTML Header #1
• Eigen HTML Header #2
• Leeg (geen element)

Bovenste balk midden: 

• Pagina menu
• Webshop USP
• Taalkiezer en login
• Afbeelding
• Eigen HTML Header #1
• Eigen HTML Header #2
• Leeg (geen element)

Bovenste balk rechts: 

• Taalkiezer en login
• Afbeelding
• Eigen HTML Header #1
• Eigen HTML Header #2
• Leeg (geen element)

Middelste webshop balk: 

In dit blok kun je de middelste balk instellen. Ook in de middelste balk heb je de mogelijkheid om minimaal 0 en maximaal 3 elementen te plaatsen. Daarnaast kun je de achtergrondkleur en tekstkleur aanpassen.

Op deze positie heb je de keuze uit de volgende 5 opties:

• Webshop logo
• Zoek mogelijkheid
• Winkelwagen & wishlist
• Eigen HTML Header #1
• Leeg (geen element)

Middelste webshop balk midden

• Webshop logo
• Zoekmogelijkheid
• Winkelwagen & wishlist
• Alle categorieën tonen
• Eigen HTML Header #1
• Eigen HTML Header #2
• Leeg (geen element).

Middelste webshop balk rechts

• Zoekmogelijkheid
• Winkelwagen & wishlist
• Eigen HTML Header #1
• Eigen HTML Header #2
• Leeg (geen element).

Menubalk: 

In dit blok heb je de keuze uit 3 weergaven voor de menubalk. Ook kun je de achtergrondkleur en tekstkleur aanpassen.

Je hebt de keuze uit de volgende weergaven:

• Alle categorieën tonen;
• Alle categorieën in een dropdown en pagina’s rechts getoond;
• Alle pagina’s in een dropdown en categorieën rechts getoond.

Header invulling: 

In dit blok kun je invulling geven aan elementen. Deze elementen kun je weergeven door ze een positie te geven zoals hierboven beschreven. Op welke positie het element weergegeven kan worden wordt ook hierboven beschreven.

Webshop styling: 

"Mijn webshop > Instellingen > Webwinkel thema’s > Thema Levi > Instellingen aanpassen >  Tabblad “Webshop styling”.

Lettertype & kleur: 

In dit blok kun je kiezen uit verschillende soorten lettertypes en kun je de kleuren aanpassen zodat het thema de uitstraling krijgt die past bij jouw webshop. Belangrijk om te weten is dat de primaire kleur ook gebruikt wordt voor het meest belangrijke element (call-to-action bijvoorbeeld) op een pagina. De secundaire kleur wordt gebruikt voor (iets) minder belangrijke elementen.

Eigen CSS: 

In dit blok kun je eigen CSS toevoegen zonder het thema te hoeven om te zetten naar een ProTOM thema. 

Let op: vul dit blok alleen in wanneer je over kennis van CSS beschikt. Bij verkeerd gebruik kan het thema niet meer naar behoren functioneren.

Content:

Voor het thema Levi zijn verschillende elementen ontworpen die het thema uniek maken. De elementen worden qua vormgeving aangepast aan de geselecteerde preset. De elementen zijn in te stellen in het tabblad Content via: "Mijn Webshop > Instellingen > Webwinkel thema’s > Thema Levi > Instellingen aanpassen > Tabblad “Content”). Hoe deze elementen kunnen worden weergegeven wordt hieronder uitgelegd per element.

Unique selling points

In dit blok kun je de USP’s van jouw webshop invullen. Je kunt er maximaal 3 invullen. Per USP kun je een tekst invullen en een icoon selecteren.

De USP's zijn op deze posities van het kader weer te geven: 

• Bovenste balk links;
• Bovenste balk midden.

Contact 

In dit blok kun je contactgegevens invullen, maar ook openingstijden bijvoorbeeld. Daarnaast is het mogelijk om Google Maps te tonen waar ook een eigen icoon en Google pin afbeelding aan toegevoegd kan worden. Wil je dit element niet tonen, zorg er dan voor dat de velden leeg zijn.

Dit element wordt op de homepage weergegeven.

Over ons 

In dit blok kun je een titel, tekst, afbeelding en een knop invullen. De titel, tekst en afbeelding spreken voor zich. Bij de knop heb je de ruimte om een tekst invullen die op de knop verschijnt en een URL. Wil je het element niet tonen dan laat of maak je alle velden leeg.

Dit element wordt op de homepage weergegeven.

Betaalmethodes

In dit blok heb je de mogelijkheid om maximaal 6 afbeeldingen toe te voegen. Deze worden dan op de homepage getoond. Wil je dit element niet tonen, zorg er dan voor dat deze velden leeg zijn.

Extra blok bij categorieën op de homepage. 

Met het thema Levi is het modulaire ‘Specifieke categorieën’ element op een modulaire pagina uniek vormgegeven. Dat ziet er bijvoorbeeld zo uit: 

Het extra blok in het midden kan via de thema instellingen getoond en aangepast worden.

Afbeeldingen bij de categorieën

De afbeeldingen die gebruikt worden zijn de afbeeldingen die zijn geüpload bij een categorie: "Mijn Producten > Categorieën beheren > Wijzig categorie > Tabblad Algemene gegevens > Foto’s. Voor het beste resultaat zal er een vierkant afbeelding gebruikt moeten worden met een minimale afmeting van 360x360 pixels.

Salesblok 

In dit blok kun je het salesblok aanpassen. Dit blok is bedoeld als een call-to-action blok. Je kunt een titel, tekstveld en knop toevoegen, maar ook de achtergrondkleur en tekstkleur aanpassen. Dit element wordt op de homepage getoond. Wil je dit element niet tonen, zorg er dan voor dat de velden leeg zijn.

Nieuwsbrief 

In dit blok kun je een titel en tekst toevoegen. Wanneer je dit invult wordt dit element getoond op de homepage. Wil je dit element niet tonen, zorg er dan voor dat de velden leeg zijn.

Product lay-out 

In dit blok heb je twee opties die betrekking hebben op de lay-out van producten op een modulaire- of categoriepagina.

Toon voorraad 

Wanneer de optie ‘Toon voorraad’ op ‘Tonen’ staat, wordt er onderaan het blok van een product getoond of een product wel of niet op voorraad is.

Productafbeelding: 

Hier heb je twee opties: gevuld of vrijstaand. Bekijk de voorbeelden hieronder:

 

Voorbeeld van gevuld. 

Voorbeeld van vrijstaand. 

Aanbiedingsproduct 

In dit blok kun je het aanbiedingsproduct element wel of niet laten tonen op de homepage. Welke producten hier worden getoond is afhankelijk van de instelling “Toon product in de layout van de website indien Window "In de aanbieding" aanwezig is.”. Deze instelling is hier te vinden: "Mijn Producten > Producten beheren > Wijzig product > Tabblad Opties. Het is mogelijk om deze instelling bij meerdere producten aan te vinken. In dit geval worden de producten in een slider getoond en kan de gebruiker door de producten heen bladeren. Als deze instelling bij maximaal 25 producten is aangevinkt, dan worden de producten op volgorde getoond. Is deze instelling bij meer dan 25 producten aangevinkt, dan worden de producten in willekeurige volgorde getoond.

Blogs tonen op de homepage

In dit blok heb je de optie om de blogs wel of niet te tonen op de homepage. Hoe dat eruit kan zien is als volgt:

Inladen productafbeeldingen 

In dit blok heb je de optie om productafbeeldingen pas te laten inladen wanneer zij in beeld zijn. Dit bevordert de laadtijd van een pagina.

Voor het inladen 

Na het inladen

Slider instellingen 

Ook thema Levi beschikt over een aangepaste slider voor op de homepage. Je hebt de mogelijkheid om maximaal 6 slides toe te voegen. De vormgeving van de slider is afhankelijk van de geselecteerde preset.

Voor het beste resultaat gebruik je een afbeelding met een hoge resolutie. De maximale hoogte van een is 425 pixels.afbeelding

Slider bij preset volledige breedte

Voor het beste resultaat gebruik je een afbeelding met een hoge resolutie. De maximale hoogte van een afbeelding is 425 pixels.

Slider bij preset afgekaderd 

Bij deze preset worden de slides in vierkante blokken weergegeven. Voor het beste resultaat zal je dan ook voor de afbeeldingen een vierkant formaat aan moeten houden, bijvoorbeeld 400x400 pixels.

Slider bij preset Boxed. 

Footer 

In dit tabblad kun je de footer naar eigen wens aanpassen. Dit werkt in principe hetzelfde als bij de header, waarbij je elementen op een bepaalde positie kan plaatsen.

Footer 
In dit blok kun je de posities bepalen. Per positie heb je de volgende mogelijkheden:

• Geen inhoud
• Tekstgebied
• Webshop navigatie
• Webshopcategorieën
• Eigen HTML Footer 1
• Eigen HTML Footer 2
• Eigen HTML Footer 3
• Facebook feed 

Footer content: 

In dit blok kun je de footer qua styling aanpassen, maar ook een titel en tekstveld invullen die gebruikt wordt in het Tekstgebied element. Daarnaast heb je nog de mogelijkheid om de paginanaam van je Facebookpagina in te vullen, zodat je het Facebook feed element kunt gebruiken.

Onderste footer balk: 

In dit blok kun je de styling aanpassen voor de onderste footerbalk. Je kunt de achtergrondkleur en tekstkleur aanpassen.

Eigen HTML: 

In dit blok kun je eigen HTML gebruiken. Je hebt de mogelijkheid om maximaal 3 elementen in te vullen. Wil je dit weergeven dan kies je een positie voor ‘Eigen HTML Footer (1, 2 of 3)’ bij het Footer blok.

Productweergaves 

Thema Levi beschikt over vier verschillende productweergaves. Twee blokweergaves en twee lijstweergaves. De blokweergaves geven meer focus op de afbeeldingen, wanneer de lijstweergaves de indruk leggen op de productomschrijving. Afhankelijk van je situatie kun je kijken welke weergave het best bij je webshop past. 

Blokweergave 1

Deze weergave legt de focus veel op de productafbeeldingen. Hiernaast heeft deze weergave er aan aantal nieuwe effecten bij om deze wat hipper te maken.

Effecten

Wanneer je met je muis over een product gaat krijgt deze een overlay met bepaalde opties. Afhankelijk van je instellingen komen er opties bij. Wanneer je meerdere productfoto’s toevoegt, verschijnt de optie “BEKIJK FOTO’S”.

Wanneer je op “BEKIJK FOTO’S” klikt draait het product om en kun je alle afbeeldingen bekijken door op de pijltjes te klikken. Door op het kruisje te klikken kun je weer terug naar de normale weergave. Daarnaast kun je door op het hartje te klikken, een product op je verlanglijstje zetten.

Wanneer je op “SNEL BEKIJKEN” klikt, opent er een pop-up met de bijbehorende informatie.  Hier kun je meer informatie vinden over het product.  De tekst die hier wordt getoond is de gewone productomschrijving. Daarnaast heb je de mogelijkheid om via hier naar de detailpagina te gaan van het product.

Tip: Wanneer een product attributen bevat, vervalt de “Bestellen” knop. Dit, omdat er bij producten met een attribuut nog een pop-up opent en dit dan niet erg handig is.

Blokweergave 2

Deze weergave bevat dezelfde elementen als blokweergave 1, alleen is deze anders vormgegeven. In plaats van een overlay kun je bij deze weergave direct de knoppen zien.

Lijstweergave 1

De lijstweergaves richten zich meer op het omschrijven van een product, in plaats van op de afbeeldingen. Hier heb je meer ruimte om een omschrijving toe te voegen voor het product.

Lijstweergave 2

Deze weergave bevat geen productafbeelding en is bedoeld voor enkel productinformatie. Als je producten verkoopt die geen afbeeldingen bevatten, dan zou deze weergave het beste bij jou passen.

Productweergave instellingen

Alle weergaves komen met een aantal instellingen, waaronder “voorraad tonen” en “productafbeelding”. Voorraad tonen spreekt voor zichzelf, hier kun je kiezen of je de tekst “op voorraad” wilt tonen op je productweergaves.

De instelling “Productafbeelding” bepaalt of je de afbeelding gevuld wilt hebben of vrijstaand.

Gevuld (Aanbevolen formaat 260x330)           
De instelling gevuld is meer voor afbeeldingen die gevuld zijn over het hele blok.­

Vrijstaand (Aanbevolen formaat 260x260)

De instelling vrijstaand geldt voor afbeeldingen die
een transparante achtergrond hebben.
Wanneer je kiest voor deze instelling, krijgen
de afbeeldingen wat ruimte aan de zijkanten.

Categorieweergaves 

Thema Levi beschikt over twee verschillende productweergaves. Een blokweergave en een lijstweergave.

Blokweergave

Deze weergave heeft een unieke vormgeving gekregen. Wanneer de instelling “Extra blok bij categorieën op de homepagina” (het zwarte blok dat hieronder wordt weergegeven) is ingevuld, worden de eerste 5 categorieën op onderstaande wijze getoond. Deze setting is te vinden in: "Mijn webshop > Instellingen > Webwinkel thema's > Thema Levi > Instellingen aanpassen > Tabblad content. 

Lijstweergave

Bij de lijstweergave worden de blokken naast elkaar geplaatst. De categorieën worden altijd verdeeld over de volle breedte. Wanneer je 4 of meer categorieën hebt wordt deze verdeeld over 4 blokken.

Wanneer je 3 categorieën hebt, worden de blokken groter, omdat ze wederom verdeeld worden over de volle breedte.

Ook bij één of twee categorieën worden de blokken verdeeld over de volle breedte.