Winkel inrichten
Voeg de knop Nu ontwerpen toe aan je productpagina's en schakel bewerken vanuit de winkelwagen in met app-blokken voor Shopify-thema's — zonder codewijzigingen.
Customezo wordt in je winkel geïnstalleerd als app-blokken voor thema’s. Er wordt niets in de code van je thema geïnjecteerd, er blijft niets achter als je de app verwijdert, en je kunt elk onderdeel aan- of uitzetten in de thema-editor van Shopify.
Er zijn twee onderdelen:
| Onderdeel | Waar het komt | Wat het doet |
|---|---|---|
| Knop ‘Nu ontwerpen’ | Productsjabloon, als blok | Opent de ontwerptool voor dat product. |
| Customezo winkelwagen-UX | App-embed (voor de hele winkel) | Voegt de links Ontwerp bewerken en Voorbeeld toe aan artikelen in de winkelwagen. |
De knop Nu ontwerpen toevoegen
- Ga in je Shopify-beheer naar Onlinewinkel → Thema’s en klik op Aanpassen bij je gepubliceerde thema.
- Zet de keuzelijst bovenaan op een sjabloon Producten → Standaardproduct (of op het specifieke sjabloon dat je gepersonaliseerde producten gebruiken).
- Klik in het linkerpaneel, onder de sectie met productinformatie, op Blok toevoegen en kies Knop ‘Nu ontwerpen’ uit de groep apps van Customezo.
- Sleep het blok op zijn plaats — direct boven of onder de knop Toevoegen aan winkelwagen werkt het best.
- Klik op Opslaan.
De knop verschijnt alleen bij producten waarvoor de ontwerptool in Customezo is ingeschakeld, dus je kunt hem zonder risico toevoegen aan een sjabloon dat alle producten delen.
Knopinstellingen
| Instelling | Wat het doet |
|---|---|
| Knoptekst | Het label dat kopers zien. Laat leeg om de standaardtekst te gebruiken, die automatisch wordt vertaald. |
| Knopstijl | Gevuld of Omlijnd. |
| Knopkleur / Tekstkleur | Overschrijf de kleuren zodat ze bij je thema passen. |
| Lettergrootte | 12–24 px. |
| Hoekafronding | 0–30 px. |
| Pictogram tonen | Toont een klein ontwerppictogram vóór het label. |
| Volledige breedte | Rekt de knop op tot de breedte van het productformulier. |
| Uitlijning | Links, midden of rechts als de knop niet de volledige breedte heeft. |
| Ontwerptool openen in | Open de ontwerptool in hetzelfde tabblad of in een nieuw tabblad. |
Stem af op je thema
Geef de knopkleur de kleur van de primaire knop van je thema en de hoekafronding dezelfde waarde als je knop Toevoegen aan winkelwagen. De ontwerptool zelf krijgt apart een stijl — zie Huisstijl van de ontwerptool.
Customezo winkelwagen-UX inschakelen
- Open, nog steeds in de thema-editor, het tabblad App-embeds in het linkerpaneel.
- Zet Customezo winkelwagen-UX aan.
- Klik op Opslaan.
Deze embed herkent gepersonaliseerde artikelen in je winkelwagen en voegt de links toe die je kopers nodig hebben.
Instellingen van de winkelwagen-UX
| Instelling | Wat het doet |
|---|---|
| Ontwerp bewerken | Toont een link Ontwerp bewerken bij gepersonaliseerde artikelen in de winkelwagen, zodat kopers de ontwerptool opnieuw kunnen openen. |
| Knoplabel | Eigen tekst voor die link. |
| Label vergrendeld-badge | De tekst die wordt getoond als het ontwerp niet meer kan worden bewerkt, bijvoorbeeld zodra de productie is begonnen. |
| Link naar ontwerpvoorbeeld | Toont een link die het voorbeeld op ware grootte van het ontwerp van de klant opent. |
| Label voorbeeldlink | Eigen tekst voor de voorbeeldlink. |
| Sectie-ID’s winkelwagen (geavanceerd) | Alleen nodig als je thema afwijkende namen voor winkelwagensecties gebruikt en de links niet verschijnen. |
| Analytics | Verstuurt anonieme interactie-events, zodat de statistieken op je dashboard kloppen. |
Controleren of alles live staat
Terug in Customezo toont het dashboard een kaart Themastatus:
- Thema — het gepubliceerde thema dat Customezo heeft gecontroleerd.
- Ontwerpknop — gedetecteerd of niet gedetecteerd.
- Winkelwagen-UX — gedetecteerd of niet gedetecteerd.
- Opnieuw controleren — voert de detectie opnieuw uit nadat je wijzigingen in je thema hebt opgeslagen.
Oudere Liquid-sjablonen
Gebruikt je productpagina een ouder Liquid-sjabloon in plaats van een JSON-sjabloon, dan geeft Shopify niet genoeg informatie vrij voor automatische detectie. Voeg het blok zoals gewoonlijk toe en markeer de installatiestap daarna met Ik heb het geïnstalleerd. Lukt de detectie later alsnog, dan vervangt die je handmatige bevestiging automatisch.
Testen
- Open in je winkel een product waarvoor de ontwerptool is ingeschakeld.
- De knop Nu ontwerpen hoort te verschijnen waar je hem hebt geplaatst.
- Ontwerp iets, voeg het toe aan de winkelwagen en controleer of de links Ontwerp bewerken en Voorbeeld bij de winkelwagenregel staan.
- Open het ontwerp opnieuw vanuit de winkelwagen, wijzig iets en werk de winkelwagen bij — het artikel en de prijs ervan horen te worden bijgewerkt.
Problemen oplossen
De knop verschijnt niet.
- Controleer of de ontwerptool voor dat product is ingeschakeld in Customezo (Producten → het product → Ontwerptool inschakelen).
- Controleer of de productstatus Actief is en of het product is gepubliceerd in het verkoopkanaal Onlinewinkel.
- Controleer of je het blok hebt toegevoegd aan het sjabloon dat dat product echt gebruikt.
- Klik op Opnieuw controleren op de kaart Themastatus van het dashboard.
De knop verschijnt bij producten die hem niet horen te hebben. Het blok verbergt zichzelf bij producten zonder configuratie voor de ontwerptool. Is hij toch zichtbaar, dan is de ontwerptool voor dat product waarschijnlijk ingeschakeld — schakel hem uit op de productpagina in Customezo.
De winkelwagenlinks verschijnen niet. Controleer of de app-embed aan staat en is opgeslagen. Toont je thema de winkelwagen met eigen sectienamen, vul die dan in bij de instelling Sectie-ID’s winkelwagen.
De opmaak klopt niet. Pas kleuren, hoekafronding en volledige breedte aan in de blokinstellingen in plaats van CSS toe te voegen. Overschrijft je thema knopstijlen overal, zet het blok dan op Omlijnd en stel de kleuren expliciet in.
Meer oplossingen: Problemen oplossen.