Product
Custom webshop module

Platform
Shopify

Werkzaamheden
Opzet van de module bijpassende/gerelateerde producten

Design elementen met Shopify WYSIWYG

Shopify Module

Dynamische bijpassende en/of gerelateerde producten +

Deze module heeft dezelfde insteek als zijn eerdere naamgenoot, maar gaat qua werking een stuk verder. Dat vereist wel extra data, maar als je die eenmaal goed hebt ingesteld met de hulp van een handige tool, kan ik dit systeem in een uitgebreide vorm naar wens bouwen.

Waar de eerdere module zijn data uit een collectie-naam of tag haalt, gaat deze versie een laag verder en kan die ook in de Metadata gaan zoeken. En het mooiste is dat die Metadata niet tevoren vastgelegd hoeft te zijn, want het script kan die zelf dynamisch invullen, zolang de kolom waar het in komt te staan maar gelijk is.

Hierbij is de hulp van een externe app welkom. Deze werkt zonder eigen bestanden te moeten laden en zal dan ook geen extra belasting veroorzaken (zoals we die in andere gevallen voorkomen met eigen modulen). Het gaat hier om apps die je de optie geven om Metadata toe te voegen. Er is zelfs een gratis versie waar je al een heel eind mee komt.

Met deze data ga je dus nog dieper in op de producteigenschappen. Het kan ook met TAGS en Varianten, maar dan wordt het al snel een warboel en loop je het risico om in de toekomst tegen fouten aan te lopen. In mijn diensten-tekst over modules gaf ik al een voorbeeld over een Nike schoen die aangeboden wordt en hoe je die met deze module met 4 kolommen kunt aanvullen:

  • Kolom 1 toont andere Nike schoenen met dezelfde maat, voor het geval de klant per se Nike wil, maar de kleur ook een andere mag zijn.
  • Kolom 2 toont een ander merk met dezelfde maat en dezelfde kleur. Dit voor het geval de klant geen probleem heeft om bijv. Adidas of Reeboks te kiezen, mits ook die blauw zijn.
  • Kolom 3 toont extra veters voor de gekozen schoenen, in complementaire kleuren.
  • Kolom 4 toont sokken in de juiste maat, met eventueel nog kleurkeuze.

Deze module is momenteel ingezet voor mijn klant Your Decoration, om hun enorme aanbod fotolijsten aan te vullen met alternatieve maten en kleuren. Het zijn er zoveel dat deze module de ideale oplossing biedt.

bijpassend of gerelateerde producten 1

Technieken

Liquid Code

Voor het instellen van de onderdelen die je kunt aanpassen

HTML5

Voor het opzetten van de schil en hoofdzakelijke onderdelen

CSS

Voor de positionering die ook met de liquid aangepast kan worden

CONCEPTING

Voor het opzetten van de juiste wireframes

Designs

Als voorbeelden van het resultaat