Hi Liesje,
bedankt voor je vraag! Ik ben Peter, van Shopify. Laten we samen even gaan kijken hoe we deze email aan kunnen passen!
Het is belangrijk aan te geven dat ik het wel makkelijk kan proberen te maken, maar dat we hierin wel HTML (en Liquid) tegen zullen komen. In principe hoef je geen kennis van deze programmeertalen te hebben, maar het is wel belangrijk om te begrijpen wat je wel en wat je niet aan gaat passen.
Tags
Wat we niet aan gaan passen zijn de zogenaamde "html tags", programmeer elementen die je kan herkennen aan de punthaakjes "<" en ">" (ook wel chevrons genoemd) . Dus om een voorbeeld te geven, als ik een woord vetgedrukt wil hebben doe ik dit:
Dit is een simpele voorbeeldzin.
Dit is een <b>ontzettend</b> simpele voorbeeldzin.
De haakjes geven aan dat "ontzettend" als vetgedrukt moet worden weergegeven door de browser (of je email programma, of welk programme je dan ook gebruikt om de programmeertaal te "vertalen" naar de juiste opmaak) . De browser zal de zin dus tonen als "Dit is een ontzettend simpele voorbeeldzin." Let op dat deze opdracht wordt geopend <b> en weer gesloten </b>. Als ik per ongeluk een haakje verwijder, of vergeet </b> toe te voegen, dan werkt de code niet meer.
Wijzigingen
Stel ik heb de bovenstaande zin met code, maar ik wil het woord "ontzettend" veranderen in "belachelijk". Dan kan ik heel makkelijk gewoon het woord "ontzettend" weghalen en "belachelijk" ervoor in de plaats zetten. Dan staat dat woord dus vetgedrukt.
Een andere optie is om bijvoorbeeld te zeggen, ik wil dat het woord "ontzettend" niet vet- maar schuingedrukt staat. Dan heb ik andere tags nodig, en zou ik er <i>ontzettend</i> van moeten maken.
Zoals je begrijpt heb je voor de eerste wijziging eigenlijk geen echte kennis van de programmeertaal nodig, behalve dat je weet dat je eigenlijk niet aan de tags moet komen. Bij het tweede type wijziging heb je uiteraard wel die kennis nodig. Je moet de <b> tag doet, en welke tag je moet gebruiken om tekst in plaats daarvan schuingedrukt te maken (<i> dus).
Een goede vergelijking is misschien het ophangen van foto's aan de muur. Bij de eerste soort wijziging hangen de haakjes er al, en is het puur een kwestie van een ander lijstje ophangen. Voor de tweede soort wijziging moet je met gereedschap aan de gang, en je net effe weten wat voor soort muur het is, waar je wel of niet het risico loopt een elektriciteitsleiding te raken, enz enz. Wanneer je het een paar keer gedaan hebt is het nog steeds niet super moeilijk of zo (je hoeft er geen professionele bouwvakker voor te zijn), maar er komt wel net even wat meer kennis en ervaring bij kijken, want je kan makkelijker dingen breken.
Om die reden raden wij beginners over het algemeen dus aan om de "haakjes" te laten hangen.
Praktijk
Laten we nu dus even gaan kijken naar een simpel voorbeeld. Ik heb een aantal testwinkels om dit soort demonstraties etc in te doen, waaronder eentje waarin ik aap-achtigen verkoop. Ik heb hierin de email voor Afgebroken Checkouts nog niet aangepast. Deze ziet er dus standaard zo uit:
Stel ik wil hier in plaats van "items" een ander woord hebben, "Apes" bijvoorbeeld. Zoals je ziet komt dit in deze mail drie keer voor.
Laten we nu gaan kijken naar de achterliggende code. Met behulp van de zoekfunctie van mijn browser (druk op CTRL + F, en typ het woord "item" in), kan ik snel zien waar in de code het woord item te vinden is:
Het eerste wat opvalt is dat de haakjes er anders uitzien, { in plaats van <. Maak je je geen zorgen, we komen later in de code de scherpe haakjes nog wel tegen. In dit gedeelte wordt even een andere programmeertaal gebruikt, om een zogenaamde if/else logica in te kunnen bouwen.
Als je in regel 2 kijkt zie je dat als er maar 1 item in het mandje zit, de browser de zin in regel 3 laat zien ("You left an item in your cart"). In regel 4 zie je als dat niet het geval is ("else") de browser de zin in regel 5 laat zien.
Ik leg dit even uit om iets meer aan te geven hoe het allemaal werkt, maar in principe kan je de bovenstaande uitleg gelijk weer vergeten. Het maakt namelijk niet uit wat voor soort haakjes het zijn. We gaan daar niet aankomen. Het enige dat wij willen is dat waar er nu in de email "item" staat, dat dit veranderd wordt in "ape". Wij willen "You left an ape in your cart".
Dus we kunnen gewoon alle "item"s veranderen in "ape", toch? Pas op! Zoals je ziet staat het woord "item" ook in regel 2, waarvan we weten dat het een coderegel is (een haakje). We moeten dus goed kijken waar we wel en waar we niet moeten wijzigen.
Om te oefenen zou je even kunnen kijken in de bovenstaande foto waar jij deze aanpassingen zou maken?
...
Nu niet spieken...
...
Gelukt?
Het goede antwoord is 3, 5, 11, 13, 17, en 19.
In regel 11 staat er namelijk wel "{{ billing_address.first_name }}" (wat betekent dat de code automatisch de voornaam uit de ingevulde adresgegevens trekt) maar de regel zelf is geen haakje. Dit soort plekken waar de code tekst invoegt uit de zogenaamde "back-end" zijn te herkennen aan de dubbele kronkelhaakjes (accolades). Ook dit is niet belangrijk om te onthouden. Wat belangrijk is, is als het tussen haakjes staat, komen we er niet aan.
Nou wil ik alleen nog het woord "Items" aanpassen in de groene knop. Hiervoor scrollen we iets naar beneden:
Hier zien we de punthaakjes terug. Ook zie je dat in het HTML gedeelte het nog makkelijker voor ons gemaakt wordt, omdat de code in kleur staat en de tekst in zwart (de oranje highlight komt door de zoekfunctie). Hoe lang de haakjes dus ook wordt (zoals in regel 96), we veranderen hier dus alleen de zwarte tekst.
Oefening baart kunst
Dit is de basis van wat je moet weten om met deze notificaties aan de slag te gaan. Lees zeker nog goed deze hulp-instructies in ons helpcentrum door, maar in principe kan je nu stapje voor stapje geen proberen wijzigingen te maken. Begin bijvoorbeeld eerst met een enkel woord. Kijk of het lukt, enzovoorts.
Belangrijk om te herinneren is dat je altijd de optie hebt om terug te gaan naar de originele melding door te klikken op "Weer instellen op standaard".
Liesje, ik hoop dat dit helpt met het aanpassen van je meldingen. Ik zou zeker adviseren je te verdiepen in HTML. Ik zelf ben echt geen expert (meer een klusser met een hamer en een boor, en niet veel meer), maar zelfs met een klein beetje HTML op zak kom je al heel veel verder in Shopify dan als je helemaal geen HTML kennis hebt (ook al heb je deze kennis absoluut niet nodig voor een succesvolle winkel).
Is het toch nog te veel van het goeie, of wil het niet lukken, dan zou ik aanraden te kijken op onze Shopify Expert Marketplace, om te zien of je een expert kunt vinden die wat meer bij dit proces kan helpen. Dit kunnen agencies zijn of individuele experts op een heel uitgebreid aantal vlakken. Je zal hier ook zeker mensen kunnen vinden die deze wijzigingen voor je kunnen maken.
Ik wens je natuurlijk nog heel veel succes en plezier, en mocht je nog verdere vragen hebben, dan horen wij het altijd graag!
Hi Liesje,
bedankt voor je vraag! Ik ben Peter, van Shopify. Laten we samen even gaan kijken hoe we deze email aan kunnen passen!
Het is belangrijk aan te geven dat ik het wel makkelijk kan proberen te maken, maar dat we hierin wel HTML (en Liquid) tegen zullen komen. In principe hoef je geen kennis van deze programmeertalen te hebben, maar het is wel belangrijk om te begrijpen wat je wel en wat je niet aan gaat passen.
Tags
Wat we niet aan gaan passen zijn de zogenaamde "html tags", programmeer elementen die je kan herkennen aan de punthaakjes "<" en ">" (ook wel chevrons genoemd) . Dus om een voorbeeld te geven, als ik een woord vetgedrukt wil hebben doe ik dit:
Dit is een simpele voorbeeldzin.
Dit is een <b>ontzettend</b> simpele voorbeeldzin.
De haakjes geven aan dat "ontzettend" als vetgedrukt moet worden weergegeven door de browser (of je email programma, of welk programme je dan ook gebruikt om de programmeertaal te "vertalen" naar de juiste opmaak) . De browser zal de zin dus tonen als "Dit is een ontzettend simpele voorbeeldzin." Let op dat deze opdracht wordt geopend <b> en weer gesloten </b>. Als ik per ongeluk een haakje verwijder, of vergeet </b> toe te voegen, dan werkt de code niet meer.
Wijzigingen
Stel ik heb de bovenstaande zin met code, maar ik wil het woord "ontzettend" veranderen in "belachelijk". Dan kan ik heel makkelijk gewoon het woord "ontzettend" weghalen en "belachelijk" ervoor in de plaats zetten. Dan staat dat woord dus vetgedrukt.
Een andere optie is om bijvoorbeeld te zeggen, ik wil dat het woord "ontzettend" niet vet- maar schuingedrukt staat. Dan heb ik andere tags nodig, en zou ik er <i>ontzettend</i> van moeten maken.
Zoals je begrijpt heb je voor de eerste wijziging eigenlijk geen echte kennis van de programmeertaal nodig, behalve dat je weet dat je eigenlijk niet aan de tags moet komen. Bij het tweede type wijziging heb je uiteraard wel die kennis nodig. Je moet de <b> tag doet, en welke tag je moet gebruiken om tekst in plaats daarvan schuingedrukt te maken (<i> dus).
Een goede vergelijking is misschien het ophangen van foto's aan de muur. Bij de eerste soort wijziging hangen de haakjes er al, en is het puur een kwestie van een ander lijstje ophangen. Voor de tweede soort wijziging moet je met gereedschap aan de gang, en je net effe weten wat voor soort muur het is, waar je wel of niet het risico loopt een elektriciteitsleiding te raken, enz enz. Wanneer je het een paar keer gedaan hebt is het nog steeds niet super moeilijk of zo (je hoeft er geen professionele bouwvakker voor te zijn), maar er komt wel net even wat meer kennis en ervaring bij kijken, want je kan makkelijker dingen breken.
Om die reden raden wij beginners over het algemeen dus aan om de "haakjes" te laten hangen.
Praktijk
Laten we nu dus even gaan kijken naar een simpel voorbeeld. Ik heb een aantal testwinkels om dit soort demonstraties etc in te doen, waaronder eentje waarin ik aap-achtigen verkoop. Ik heb hierin de email voor Afgebroken Checkouts nog niet aangepast. Deze ziet er dus standaard zo uit:
Stel ik wil hier in plaats van "items" een ander woord hebben, "Apes" bijvoorbeeld. Zoals je ziet komt dit in deze mail drie keer voor.
Laten we nu gaan kijken naar de achterliggende code. Met behulp van de zoekfunctie van mijn browser (druk op CTRL + F, en typ het woord "item" in), kan ik snel zien waar in de code het woord item te vinden is:
Het eerste wat opvalt is dat de haakjes er anders uitzien, { in plaats van <. Maak je je geen zorgen, we komen later in de code de scherpe haakjes nog wel tegen. In dit gedeelte wordt even een andere programmeertaal gebruikt, om een zogenaamde if/else logica in te kunnen bouwen.
Als je in regel 2 kijkt zie je dat als er maar 1 item in het mandje zit, de browser de zin in regel 3 laat zien ("You left an item in your cart"). In regel 4 zie je als dat niet het geval is ("else") de browser de zin in regel 5 laat zien.
Ik leg dit even uit om iets meer aan te geven hoe het allemaal werkt, maar in principe kan je de bovenstaande uitleg gelijk weer vergeten. Het maakt namelijk niet uit wat voor soort haakjes het zijn. We gaan daar niet aankomen. Het enige dat wij willen is dat waar er nu in de email "item" staat, dat dit veranderd wordt in "ape". Wij willen "You left an ape in your cart".
Dus we kunnen gewoon alle "item"s veranderen in "ape", toch? Pas op! Zoals je ziet staat het woord "item" ook in regel 2, waarvan we weten dat het een coderegel is (een haakje). We moeten dus goed kijken waar we wel en waar we niet moeten wijzigen.
Om te oefenen zou je even kunnen kijken in de bovenstaande foto waar jij deze aanpassingen zou maken?
...
Nu niet spieken...
...
Gelukt?
Het goede antwoord is 3, 5, 11, 13, 17, en 19.
In regel 11 staat er namelijk wel "{{ billing_address.first_name }}" (wat betekent dat de code automatisch de voornaam uit de ingevulde adresgegevens trekt) maar de regel zelf is geen haakje. Dit soort plekken waar de code tekst invoegt uit de zogenaamde "back-end" zijn te herkennen aan de dubbele kronkelhaakjes (accolades). Ook dit is niet belangrijk om te onthouden. Wat belangrijk is, is als het tussen haakjes staat, komen we er niet aan.
Nou wil ik alleen nog het woord "Items" aanpassen in de groene knop. Hiervoor scrollen we iets naar beneden:
Hier zien we de punthaakjes terug. Ook zie je dat in het HTML gedeelte het nog makkelijker voor ons gemaakt wordt, omdat de code in kleur staat en de tekst in zwart (de oranje highlight komt door de zoekfunctie). Hoe lang de haakjes dus ook wordt (zoals in regel 96), we veranderen hier dus alleen de zwarte tekst.
Oefening baart kunst
Dit is de basis van wat je moet weten om met deze notificaties aan de slag te gaan. Lees zeker nog goed deze hulp-instructies in ons helpcentrum door, maar in principe kan je nu stapje voor stapje geen proberen wijzigingen te maken. Begin bijvoorbeeld eerst met een enkel woord. Kijk of het lukt, enzovoorts.
Belangrijk om te herinneren is dat je altijd de optie hebt om terug te gaan naar de originele melding door te klikken op "Weer instellen op standaard".
Liesje, ik hoop dat dit helpt met het aanpassen van je meldingen. Ik zou zeker adviseren je te verdiepen in HTML. Ik zelf ben echt geen expert (meer een klusser met een hamer en een boor, en niet veel meer), maar zelfs met een klein beetje HTML op zak kom je al heel veel verder in Shopify dan als je helemaal geen HTML kennis hebt (ook al heb je deze kennis absoluut niet nodig voor een succesvolle winkel).
Is het toch nog te veel van het goeie, of wil het niet lukken, dan zou ik aanraden te kijken op onze Shopify Expert Marketplace, om te zien of je een expert kunt vinden die wat meer bij dit proces kan helpen. Dit kunnen agencies zijn of individuele experts op een heel uitgebreid aantal vlakken. Je zal hier ook zeker mensen kunnen vinden die deze wijzigingen voor je kunnen maken.
Ik wens je natuurlijk nog heel veel succes en plezier, en mocht je nog verdere vragen hebben, dan horen wij het altijd graag!
Community Blog artikels
Digitale marketeers en app-ontwikkelaars hebben jarenlang activiteiten in apps en websi...
By Arno Apr 12, 2024
Als je een ondernemer bent, ben je vast bekend met het fenomeen de afgebroken check-o...
By Lee Mar 27, 2024
Shopify ondersteunt de meest innovatieve merken en ondernemers ter wereld. Om individue...
By SarahF_Shopify Mar 23, 2024