Geavanceerde aanpassingen voor product- en collectieweergave voor de Shopify-plug-in

Met deze geavanceerde instellingen kun je je webshop op WordPress aanpassen, je bedrijfsmerk personaliseren en de koopervaring van je klanten verbeteren.

Op deze pagina

Shopify-plug-in en Shopify-webshopcomponenten

De Shopify-plug-in is gebouwd met Shopify Storefront Web Components. De volgende componenten worden gebruikt als de bouwstenen van je Shopify-webshop:

Productkaartcomponent: Dit component geeft afzonderlijke productinformatie weer, meestal op productvermeldingen of collectiepagina's. Het bevat vaak elementen zoals de productafbeelding, titel, prijs en een knop Toevoegen aan winkelwagen.
Modaal component voor snelle productweergave: Dit component geeft een modaal venster weer over de bestaande content met productgegevens, een knop Toevoegen aan winkelwagen en een link om de volledige productgegevens te bekijken.
Component voor productgegevenspagina: Dit component geeft één product weer met volledige productgegevens. Elk component voor een productgegevenspagina heeft een unieke URL.
Collectiecomponent: Dit component geeft collecties van producten weer die je hebt aangemaakt.

Weergaveaanpassing van Shopify-producten en -collecties

De standaard Shopify-webshopcomponenten in je plug-in bevatten tools om een naadloze winkelervaring te creëren. Je hebt ook de flexibiliteit om de weergave van deze componenten aan te passen aan je specifieke merkidentiteit en ontwerpvereisten.

Om dergelijke aanpassingen uit te voeren, moet je toegang hebben om je WordPress-themabestanden en -directory's te wijzigen. Het proces omvat het aanmaken van een speciale map in de directory van je actieve WordPress-thema.

Stappen:

De map Shopify aanmaken: Begin met het aanmaken van een nieuwe map met de naam Shopify rechtstreeks in de directory van je actieve thema. Deze map dient als de centrale locatie voor je aangepaste component-overschrijvingen.
Afzonderlijke componenten overschrijven: Om een specifiek component te wijzigen, voeg je een PHP-bestand met een speciale naam toe aan de nieuw aangemaakte Shopify map. De naamgevingsconventie voor deze overschrijvingsbestanden is cruciaal, zodat de plug-in je aangepaste versies herkent en toepast:
- Om de Productkaartcomponent te overschrijven, maak je een PHP-bestand met de naam product-card.php aan in de map Shopify.
- Om het Modaal component voor snelle productweergave te overschrijven, maak je een PHP-bestand met de naam modal.php aan in de map Shopify.
- Maak een PHP-bestand met de naam pdp.php aan in de map Shopify om het component Productgegevenspagina te overschrijven.
- Maak een PHP-bestand met de naam component.php aan in de map Shopify om het component Collectie te overschrijven.

Nadat je aangepaste PHP-bestand is aangemaakt, negeert de plug-in het standaard componentbestand voor dat specifieke element. Je kunt in deze overschrijfbestanden elke code implementeren, van statische HTML-blokken tot complexe PHP-logica.

Hoewel het sterk wordt aanbevolen om de Shopify Storefront-webcomponenten te gebruiken (zoals in de standaard plug-instructuur) voor consistentie en toegang tot ingebouwde Shopify-functionaliteiten, ben je hier niet toe beperkt. Je kunt andere methoden integreren voor het ophalen en weergeven van product- en collectiegegevens, wat geavanceerde aanpassingen mogelijk maakt.

Raadpleeg de documentatie voor ontwikkelaars van WordPress-plug-ins voor meer informatie en best practices.

Herschrijvingen van Shopify-producten en -collecties

Wanneer je een product of collectie in Shopify publiceert, hebben elk product en elke collectie een unieke URL. Standaard worden deze URL's aangemaakt met je Shopify-domein. Met de herschrijffunctie kun je met je openbare WordPress-domein toegang krijgen tot die unieke URL's.

Stappen:

Ga in de Shopify-plug-in naar Instellingen.
Zorg er op het tabblad Geavanceerd voor dat de twee selectievakjes in de sectie Herschrijvingen van Shopify-links zijn geactiveerd.
Ga naar Permalink.
Klik op Opslaan om deze nieuwe regel toe te passen.
Ga naar je Shopify-beheercentrum en navigeer vervolgens naar de product- of collectiegegevenspagina waarvoor je een WordPress-link wilt aanmaken.
Op de kaart met de zoekmachinevermelding wordt een URL weergegeven die klanten rechtstreeks doorverwijst naar je product of collectie. Bijvoorbeeld: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
Voeg products/huskee-reusable-cup toe aan het einde van de URL van je WordPress-site. Bijvoorbeeld: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Het gedrag van de productkaart aanpassen

Met Shopify-webshopcomponenten zijn er twee typen productgegevenskaarten:

Snelle weergave: Wanneer de klant met de muis over de productkaart beweegt, krijgt deze de optie Quick Shop te zien. Als hierop wordt geklikt, worden de productgegevens weergegeven in een pop-up- of modale stijl over de bestaande content op de achtergrond.
Gedetailleerde productpagina: Wanneer een klant op de productkaart klikt, bijvoorbeeld op de afbeelding of de productnaam, worden de productgegevens in een paginagrote weergave weergegeven met een unieke URL.

Je kunt deze instelling wijzigen om alleen een snelle weergave, alleen een gedetailleerde productpagina of beide weer te geven.

Stappen:

Ga in de Shopify-plug-in in WordPress naar Instellingen.
Ga op het tabblad Geavanceerd naar de sectie Productweergave.
Kies de optie die het beste bij je winkel past.
Klik op Opslaan.