Het gebruik van Color Swatches in Magento 2 biedt een visueel aantrekkelijke ervaring voor je websitebezoekers. Hiermee kunnen bezoekers bij het kiezen van een kleur direct de corresponderende afbeelding zien voordat ze deze aan hun winkelwagentje toevoegen, wat de gebruikerservaring verbetert.

Naast kleurkeuze bieden de aanpasbare swatches ook opties voor maat, materiaal en textuur. In dit artikel gaan we specifiek in op het gebruik van de Color Swatch.

Instellen van Color Swatches in Magento 2
 

Stap 1: Instellingen van het kleurattribuut configureren

1. Ga naar de Admin-interface in jouw Magento 2 account:

   - Navigeer naar `Stores -> Attributes -> Product`.

- Klik op het attribute `color’.

2. Configureer de volgende instellingen:

   - Catalog Input Type for Store Owner: Selecteer `Visual Swatch`.

   - Values Required: Kies `No`.

   - Updated Product Preview Image: Stel deze in op `Yes` als je wilt dat de productafbeelding verandert op basis van de gekozen kleur.

   - Use Product Image for Swatch if Possible: Kies `No`.

   - Laat de Advanced Attribute Properties op `default` staan.

Stap 2: Nieuwe Color Swatch toevoegen
 

1. Voeg een nieuwe swatch toe:

   - Klik op de knop `Add Swatch`.

2. Kies een kleur:

   - Selecteer `Choose a color` uit de dropdown of upload een bestand.

   - Bij `Choose a color` kun je een kleur selecteren via de color picker of door de hexadecimale code in te voeren.

3. Geef de swatch een naam:

   - Nadat je een kleur hebt gekozen, geef je de swatch een naam in de Admin. Deze naam moet exact overeenkomen met de eigenschap in Tweakwise en is hoofdlettergevoelig.

4. Upload een bestand (optioneel):

   - Als je een bestand wilt uploaden, kies dan `Upload a file` en selecteer je bestand. Zorg ervoor dat het een vierkante afbeelding is.

   - Controleer of de nieuwe color swatch correct is.

5. Sla het attribuut op:

   - Vergeet niet om het attribuut op te slaan.

Stap 3: Producten updaten met de Color Swatch
 

1. Ga naar Catalog -> Products:

   - Selecteer de producten die je wilt voorzien van de nieuwe color swatch.

   - Klik op `Edit Configuration` of ‘Create Configuration’.

2. Pas attributen aan:

   - Voeg aanpassingen toe aan de productattributen.

   - Selecteer de attributen die je wilt activeren en klik op `Next`.

   - Kies de specifieke attributen voor het product en klik weer op `Next`. Elke unieke combinatie van attributen creëert een unieke product SKU.

3. Koppel afbeeldingen (optioneel):

   - Je kunt ervoor kiezen om een selectie van afbeeldingen aan alle SKU’s te koppelen.

Stap 4: Batch update van producten
 

1. Ga naar Admin -> Catalog -> Products:

   - Selecteer de producten waaraan je swatches wilt koppelen.

   - In de dropdown “actions control” selecteer je `Update Attributes`.

2. Wijzig kleur:

   - Scroll naar ‘color’, kies `change`, en selecteer de color swatch die je wilt toepassen.

   - Sla de wijzigingen op.

3. Leeg de cache:

   - Vergeet niet om de cache te legen via het `Cache Management` tabblad.

Door deze stappen te volgen, kun je eenvoudig Color Swatches instellen en beheren in Magento 2, wat bijdraagt aan een betere gebruikerservaring op je website.