UI elements: Shop de look

Shop de look zet een sfeerfoto tussen de producten in je zoekresultaten. Op de foto staan genummerde markers op de producten die erop te zien zijn; ernaast staan die producten met hun prijs en maten. Een bezoeker kiest per product een maat en zet de hele look in één keer in de winkelwagen, of één product vanuit de marker.

Je hebt de modules UI elements en Site search nodig. De look volgt de stijl van je zoekfunctie: het lettertype, de hoeken en de accentkleur.

Zo ziet hij eruit

Vorm	Desktop	Telefoon
Volle breedte	Een eigen rij tussen twee hele rijen. Links de foto (twee derde), rechts Shop de look: de titel, de producten met hun maten, het totaal en de knop Voeg de look toe.	De foto bovenaan, de producten eronder.
Blok van 2×2	Twee tegels breed en twee rijen hoog; de producten lopen eromheen. De foto vult het blok, onderin een balk met het aantal producten, het totaal en Kies je maten. Die knop opent de lijst met maten in het blok.	Volle breedte, met dezelfde balk.

• Marker: wijs je een marker aan, dan licht het product in de lijst op (en andersom). Klik je erop, dan opent een kaartje op de foto met het product, de prijs, Bekijk product en de maten. De knop zegt eerst Kies eerst je maat en daarna In winkelwagen · maat 33.
• Voeg de look toe telt mee: Voeg de look toe · 0/3 maten. Pas als elk product dat een maat nodig heeft er een heeft, wordt de knop Voeg de look toe · 3 items.
• Uitverkocht: een maat die op is, is doorgestreept en niet te kiezen. Een product dat helemaal op is, blijft zichtbaar met Uitverkocht — niet in de look en telt niet mee.
• Het totaal is wat er in de winkelwagen gaat: de gekozen maat telt met haar eigen prijs.

1Maak de look

Ga naar Toolbox → UI elements → Nieuw element, kies bij Soort de soort Embed content en de vorm Shop de look. Het doel is Doorklikken naar product of pagina. Zet bij Inhoud onder Afbeelding de sfeerfoto; een liggende foto werkt het best. Een aparte telefoonfoto mag, met dezelfde uitsnede: de markers staan op beide op dezelfde plek.

2Kies de producten

Zoek bij Producten op naam of SKU en klik op een product (tot zes). Per product:

• Maat: de optie die de bezoeker kiest. Nexym herkent die zelf (Automatisch herkend), bijvoorbeeld Maat of Size. Heeft een product meer opties en is het niet duidelijk, dan kies je zelf welke optie de maat is.
• Vast in deze look: de andere opties, zoals de kleur. Kies de kleur die op de foto staat; die gaat in de winkelwagen.
• Met de pijltjes of door te slepen zet je de producten in volgorde. Het nummer is de marker op de foto.

3Zet de markers

Onder Markers op de foto sleep je elk nummer naar zijn product. Met het toetsenbord: Tab naar een marker, de pijltjes verplaatsen hem 1%, met Shift 5%. De plek wordt bewaard als percentage van de foto, dus de marker blijft op het product, hoe groot de foto ook getoond wordt.

Instellingen

Instelling	Wat het doet	Standaard
Plek in de resultaten	Na welk product de look staat (1 tot 60). Volle breedte staat na de rij met het product vóór zijn plek.	3
Breedte	Volle breedte of Blok van 2×2.	Volle breedte
Kant	Voor het blok: Waar de tegel valt, Links of Rechts.	Waar de tegel valt
Label op de foto	Een klein label linksboven op de foto, per taal (NL, EN, DE).	Leeg
Bovenregel	De regel boven de titel, per taal. Leeg toont Shop de look in de taal van de pagina.	Leeg
Titel	De titel van de look, per taal.	Leeg
Zoekopdrachten	Bij welke zoekopdrachten hij verschijnt, met dezelfde voorwaarden als een zoekbanner.	Leeg

Status, start- en einddatum, Apparaten en Voor wie werken zoals bij elk element (zie Instellingen). Staat UI elements in testmodus, dan ziet alleen een browser die de debugger toelaat de look.

De winkelwagen

Voeg de look toe zet alle gekozen producten met hun maat in één keer in de winkelwagen van je shop, op dezelfde manier als de winkelwagenknop op de producttegels van Site search en in de chat. Het minicartje van je shop ververst zoals bij die knop.

Bij het toevoegen kijkt Nexym opnieuw naar de voorraad. Is een maat inmiddels op, dan gaat de rest wel in de winkelwagen en noemt de look welk product niet lukte: 2 van 3 toegevoegd — niet gelukt: …. Dat gebeurt ook als je shop zelf een product weigert. In een Nexym-demo staat de winkelwagen uit: de look zegt dan Demo: de winkelwagen is uitgeschakeld.

Een product kan in de winkelwagen als de hub weet welk id je shop ervoor gebruikt:

Shop	Wat de hub nodig heeft
Magento	Het id van het hoofdproduct en de id’s van de opties (maat, kleur). Die komen met de productimport van je koppeling.
Shopify	Het id van de variant.
Shopware	Het id van het product of de variant.

Zonder winkelkoppeling kan een product alleen in de winkelwagen als de import het id van je shop bewaarde: bij een catalogus die van je Shopify-winkel is gelezen de variant-id’s. Dat werkt op je Shopify-winkel zelf. Kan een product niet in de winkelwagen, dan zegt de editor Kan niet in de winkelwagen: dit product is niet gekoppeld aan je shop. Achter Waarom? staat wat er ontbreekt. Op je site linkt het product dan naar de productpagina en telt het niet mee in Voeg de look toe.

Wat je meet

Weergaven tellen zoals bij elk element. Daarnaast telt de look Markers geopend, Losse producten toegevoegd, Looks toegevoegd en de Waarde toegevoegd (tegen de prijzen in de hub). Je ziet ze onder Statistieken van de look. Een product dat vanuit de look in de winkelwagen gaat, telt als conversie en als hulp van UI elements in Impact.