Help
Inloggen

Code-editor voor afgedrukte bonnen voor je Shopify POS

Je kunt je afgedrukte bonnen aanpassen met de code-editor in je Shopify-beheercentrum. De bestanden waaruit je bonnen bestaan, bevatten Liquid, de templatetaal van Shopify. Met de code-editor kun je geavanceerdere aanpassingen maken met HTML, CSS en Liquid dan met de visuele editor.

Je kunt de bontemplate en de sectietemplates die op je afgedrukte bonnen worden gebruikt, wijzigen. De templatebestanden van Bonnen zijn de soorten bonnen die je in je winkel kunt afdrukken. Secties zijn onderdelen van de bonnen, zoals de kop- of voettekst. Secties kunnen voor meerdere bonnen worden hergebruikt.

Op deze pagina

Overwegingen voor het gebruik van de code-editor voor bonnen

Neem de volgende overwegingen door voordat je de code-editor voor bonnen gebruikt:

Toegangsbeperkingen

  • Je kunt de code-editor alleen gebruiken vanuit je Shopify-beheercentrum op een desktop.
  • De code-editor is niet beschikbaar voor POS-locaties in Italië.

Waar wijzigingen van toepassing zijn

  • Codewijzigingen die je aanbrengt, zijn alleen van toepassing op de geselecteerde locatie.
  • Aanpassingen in de code-editor zijn alleen van toepassing op POS Pro-locaties. Als je de code-editor gebruikt en locaties hebt die geen POS Pro zijn, dan kun je voor die locaties de visuele editor gebruiken om de kop- en voettekst aan te passen.
  • Je kunt geprinte bonnen met een template in de code-editor aanpassen, zoals verkoopbonnen, aankoopbewijzen van cadeaus, cadeaubonbonnen en retour- en omruilbonnen.

Codetalen

  • De bestanden waaruit je bonnen bestaan, bevatten Liquid, de templatetaal van Shopify. Meer informatie over het gebruik van Liquid.
  • Om de templates in de bonnencode-editor te bewerken, moet je bekend zijn met HTML, CSS en Liquid. Shopify Thema-ondersteuning kan helpen met kleine aanpassingen binnen het bereik van het Shopify Designbeleid.

Aanpassingsbeperkingen

  • Vanuit de code-editor kun je geen voorbeeld bekijken van bonnen in verschillende printerformaten. Gebruik de visuele editor om een voorbeeld op printerformaat te bekijken.
  • Productbeschrijvingen zijn niet beschikbaar als variabele in bontemplates en kunnen niet worden toegevoegd aan afgedrukte bonnen.

Templateonderhoud

  • Als je een bon aanpast met de boncode-editor, ontbreken er mogelijk nieuwe eigenschappen in je bestaande template, zoals selling_plan_name. Om de nieuwste beschikbare eigenschappen aan je template toe te voegen, moet je je bontemplate opnieuw instellen op de standaardwaarden. Wanneer je bontemplates opnieuw instelt op de standaardwaarden, worden eventuele aanpassingen die je daaraan hebt doorgevoerd, verwijderd. Noteer je aangepaste code voordat je de template opnieuw instelt. Nadat je de template opnieuw hebt ingesteld, moet je je aanpassingen handmatig weer toepassen.

De code-editor openen

Je kunt je templates bewerken met de code-editor. Je moet eerst overschakelen naar de code-editor vanuit de standaard visuele editor, en je kunt op elk gewenst moment terugschakelen naar de visuele editor.

De stappen om te wisselen tussen de editors verschillen iets, afhankelijk van of al je POS-locaties in aanmerking komen voor de code-editor, of slechts een aantal, bijvoorbeeld als sommige van je POS-locaties POS Pro niet gebruiken of gevestigd zijn in Italië of Frankrijk.

Stappen:

Alle POS Pro-locaties

  1. Ga in je Shopify-beheercentrum naar Point of Sale > Instellingen.

  2. Klik in de sectie Aanpassingen op Afgedrukte bonnen om de POS-editor te openen.

  3. Klik op het pictogram Secties in de linkerzijbalk.

  4. Klik op Code bewerken.

  5. Bewerk in het dialoogvenster Code voor geprinte bonnen bewerken de code die je wilt wijzigen.

  6. Klik op Opslaan.

  7. Optioneel: ga terug in je browservenster om meer Shopify POS-pagina's te bewerken met de POS-editor.

Met Lite- of Italiaanse locaties

  1. Ga in je Shopify-beheercentrum naar Point of Sale > Instellingen.

  2. Klik in de sectie Aanpassingen op Afgedrukte bonnen om de POS-editor te openen.

  3. Klik op de pagina Bonaanpassing op Code-editor.

Aangepaste bestanden gebruiken in je bonnentemplate

Je kunt bestanden, zoals afbeeldingsassets, die je uploadt naar je Shopify-beheercentrum, gebruiken om je geprinte bonnen aan te passen.

Een bestand moet naar je Shopify-beheercentrum worden geüpload voordat het kan worden gebruikt in een afgedrukte bon. Meer informatie over het uploaden van bestanden.

Stappen:

  1. Ga in je Shopify-beheercentrum naar Content > Bestanden.

  2. Klik naast het bestand dat je in de code van je geprinte bon wilt opnemen op Link kopiëren om de link te kopiëren.

  3. Naar de code-editor navigeren.

  4. Voeg de assetlink toe aan je template.

Je bonnentemplate terugzetten naar de standaardinstelling

Je kunt een bonnentemplate terugzetten naar de standaardversie met de code-editor.

Stappen:

Alle POS Pro-locaties

  1. Ga in je Shopify-beheercentrum naar Point of Sale > Instellingen.

  2. Klik in de sectie Aanpassingen op Afgedrukte bonnen om de POS-editor te openen.

  3. Klik op Je bonnen aanpassen.

  4. Klik op Code bewerken.

  5. Klik op het codebestand dat je wilt resetten.

  6. Klik op het pictogram Terugzetten naar standaard.

  7. Klik in het dialoogvenster Bestand terugzetten naar standaardinstelling op Resetten.

Met Lite- of Italiaanse locaties

  1. Ga in je Shopify-beheercentrum naar Point of Sale > Instellingen.

  2. Klik in de sectie Aanpassingen op Afgedrukte bonnen om de POS-editor te openen.

  3. Klik op de pagina Bonaanpassing op Code-editor.

  4. Klik op het codebestand dat je wilt resetten.

  5. Klik op het pictogram Terugzetten naar standaard.

  6. Klik in het dialoogvenster Bestand terugzetten naar standaardinstelling op Resetten.

Liquid-variabelen beschikbaar in de bonnencode-editor

Je kunt Liquid gebruiken om je afgedrukte bontemplate en bontypen aan te passen.

De volgende dataobjecten zijn beschikbaar voor de bonnencode-editor:

Bonobjecten

Beschrijving van dataobjecten voor bonnen
ObjectBeschrijving
shop
 Bevat de winkelinformatie, zoals de winkelnaam. 
location
 Bevat de informatie over de winkellocatie, zoals het adres en telefoonnummer. 
order
 Bevat de bestelgegevens, inclusief de orderregels, de kortingen, de belastingen en de transactie-informatie. 
return
 Alleen beschikbaar binnen de template return-and-exchange-receipt.liquid en de bijbehorende gedeeltelijke templates. Bevat retour- en omruilgegevens, inclusief de geretourneerde orderregels, de nieuwe orderregels, het nettototaal en de transactie-informatie. 
gift_card
 Alleen beschikbaar binnen de template gift-card.liquid. Bevat de cadeaubongegevens, inclusief het saldo, de alfanumerieke code en de content van een QR-code die kan worden gescand door de POS-app.

Bestelobject

Beschrijving van het bestelobject
EigenschapBeschrijving
id
 ID van de bestelling. 
created_at
 De datum en tijd in ISO 8601-indeling waarop de bestelling is gemaakt. 
source_identifier
 Een unieke bestel-ID van POS of een externe partij. 
change_due
 Wisselgeld voor de bestelling. 
balance_due
 Verschuldigd bedrag voor deze bestelling. 
name
 De unieke ID voor de bestelling die wordt weergegeven op de bestelpagina in het Shopify-beheercentrum en op de bestelstatuspagina. Bijvoorbeeld: ‘#1001’, ‘EN1001’ of ‘1001-A’. Deze waarde is niet uniek over meerdere winkels heen. 
note
 De inhoud van de opmerking bij de bestelling. 
line_items
 Een lijst met de orderregels van de bestelling. 
subtotal_price
 Het totaalbedrag van alle orderregels na kortingen en vóór retouren. Als taxesIncluded waar is, is de belasting ook bij het subtotaal inbegrepen. 
total_price
 De totaalprijs van de bestelling, vóór retouren. Dit is inclusief belastingen en kortingen. 
total_tip_received
 Het totaalbedrag van alle fooien voor de bestelling. 
discounts
 Het totale kortingsbedrag. 
transactions
 Een lijst met transacties die aan de bestelling zijn gekoppeld. 
taxes_included
 Geeft aan of belastingen zijn inbegrepen in de subtotaalprijs van de bestelling. 
tax_lines
 Een lijst van alle belastingregels die op orderregels in de bestelling zijn toegepast, vóór retouren. De prijzen van belastingregels vertegenwoordigen de totaalprijs voor alle belastingregels met hetzelfde tarief en dezelfde titel. 
customer
 De klant die de bestelling heeft geplaatst. 
shipping_address
 Het bezorgadres van de bestelling. 
shipping_groups
 De lijst met verzendgroepen van de bestelling. Elke groep bevat orderregels die samen worden afgehandeld.

Retourobject

Beschrijving van het retourobject
EigenschapBeschrijving
name
 De unieke ID voor de retour die wordt weergegeven op de bestelpagina in het Shopify-beheercentrum en op de bestelstatuspagina. Bijvoorbeeld: ‘#1000-R1’. Deze waarde is niet uniek over meerdere winkels heen. 
created_at
 De datum en tijd in ISO 8601-indeling waarop de retour is aangemaakt. 
is_unverified
 Een booleaanse waarde die aangeeft of de retour is aangemaakt als een Unverified Return. 
is_exchange
 Een booleaanse waarde die aangeeft of de retour een omruiling omvat. Dit is inclusief terugbetalingen op een cadeaubon. 
exchange_type
 Het type omruiling, als de retour een omruiling omvat. Mogelijke waarden zijn LIKE_FOR_LIKE, NET_REFUNDABLE en NET_PAYABLE. 
return_discount
 Het totale bedrag aan bestelkortingen dat is terugbetaald. 
return_subtotal
 Het totaalbedrag van alle geretourneerde orderregels vóór kortingen. Als taxesIncluded waar is, is de belasting ook bij het subtotaal inbegrepen. 
return_total
 Het totale mogelijke terugbetalingsbedrag. Dit is inclusief belastingen, kortingen, verzendkosten en fooien. Het is mogelijk niet het daadwerkelijk terugbetaalde bedrag. 
exchange_subtotal
 Het totaalbedrag van alle nieuwe orderregels in de omruiling vóór kortingen. Als taxesIncluded waar is, is de belasting ook bij het subtotaal inbegrepen. 
exchange_total
 Het totaalbedrag voor alle nieuwe orderregels in de omruiling. Dit is inclusief belastingen en kortingen. 
total_cash_rounding_adjustment
 De afrondingsaanpassing voor contant geld die op de retour of omruiling is toegepast. 
total_adjusted_amount
 Het totaalbedrag voor de retour of omruiling, aangepast met de afrondingsaanpassing voor contant geld. 
net_total
 Het daadwerkelijke totaalbedrag dat is betaald of terugbetaald voor de retour of omruiling, vóór contante afronding. 
return_line_items
 De geretourneerde orderregels. 
exchange_line_items
 De nieuwe orderregels in de ruil. 
return_tax_lines
 De belastingregels voor de geretourneerde orderregels. 
exchange_tax_lines
 De belastingregels voor de nieuwe orderregels in de omruiling. 
shipping_refund_amount
 De verzendkosten die zijn terugbetaald. 
tip_refund_amount
 Het fooibedrag dat is terugbetaald. 
transactions
 De transacties die zijn gekoppeld aan de retour of omruiling.

Verzendgroepobject

Beschrijving van het verzendgroepobject
EigenschapBeschrijving
destination
 De bestemming van de producten die worden verzonden. 
products
 Een lijst met producten die worden verzonden.

Orderregelobject

Beschrijving van het orderregelobject
EigenschapBeschrijving
id
 De ID van de orderregel. 
name
 De titel van het product, optioneel aangevuld met de titel van de variant (indien van toepassing). 
variant_title
 De varianttitel op het moment dat de bestelling werd aangemaakt. 
price
 De eenheidsprijs van de orderregel toen de bestelling werd aangemaakt. Deze waarde is exclusief kortingen. 
is_gift_card
 Geeft aan of de orderregel de aankoop van een cadeaubon vertegenwoordigt. 
discount
 De totale korting die via kortingstoepassingen aan de orderregel is toegewezen, inclusief kortingen die zijn toegewezen aan terugbetaalde en verwijderde hoeveelheden. 
total_price
 Het totaalbedrag voor deze orderregel. 
selling_plan_name
 De naam van het abonnement dat aan de orderregel is toegewezen. 
tax_rates
 De belastingregels voor deze orderregel. 
custom_attributes
 Een lijst met attributen die aangepaste eigenschappen of speciale verzoeken vertegenwoordigen. 
variant_title
 De varianttitel. 
variant_id
 De ID van de variant. 
variant_metafields
 Een lijst met aangepaste velden die een merchant aan de variant heeft gekoppeld. 
staff_member_description
 Medewerker die aan de orderregel is gekoppeld. 
product_metafields
 Een lijst met aangepaste velden die een merchant aan het product heeft gekoppeld.

Retourorderregelobject

Bevat alles in het orderregelobject plus de volgende eigenschappen:

Beschrijving van het orderregelobject
EigenschapBeschrijving
return_reason
 De retourreden voor de orderregel. 
return_reason_note
 Een optionele opmerking bij de reden voor retour.

Liquid-filters beschikbaar in de code-editor voor bonnen

Je kunt Liquid-filters gebruiken om informatie in je bontemplates aan te passen. Je kunt bijvoorbeeld de opmaak van valuta of het hoofdlettergebruik van specifieke tekst, zoals een belastingtariefgroep, wijzigen.

Om een filter toe te passen, voeg je een pipe-teken | toe en vervolgens het filter binnen het Liquid-codeblok tussen dubbele accolades {{ }}. Filters kunnen alleen worden toegepast op Liquid-codeblokken.

In het volgende voorbeeld past het filter de belastingtariefgroep aan van kleine letters naar hoofdletters.

{{ tax_line.title | upcase }}

In het voorbeeldcodeblok is product het object, title de eigenschap ervan en upcase het toegepaste filter. Het upcase-filter verandert het hoofdlettergebruik van de waarde van tax_line.title in hoofdletters. Als tax_line.title bijvoorbeeld de waarde Hst heeft, verandert het upcase-filter de waarde in HST.

Raadpleeg de sectie Filters in de Shopify Themes Liquid-referentie voor meer informatie over het gebruik van Liquid-filters.

De volgende filters zijn beschikbaar in de code-editor voor bonnen:

Beschrijving van bonfilters
EigenschapBeschrijving
t
 Vertaalt vooraf gedefinieerde labels naar de taal die is toegewezen aan je locatie. 
money
 Maakt de prijs op in de valuta van je locatie. 
escape
 Escapet speciale tekens in HTML, zoals <>, ' en &, en zet de tekens om in escape-reeksen. 
barcode
 Genereert een 1D-barcode-SVG. 
qrcode
 Genereert een 2D-barcode-SVG.

Voorbeeld van een codeaanpassing van de template voor afgedrukte bonnen

Je kunt Liquid gebruiken om voorwaardelijke berichten toe te voegen. Deze functionaliteit is vergelijkbaar met opslaan op één locatie met de visuele editor. Je bedrijf is bijvoorbeeld begonnen met één locatie en je hebt nu meerdere nieuwe locaties. Je wilt je oorspronkelijke winkel markeren op je afgedrukte bonnen.

Je kunt een aangepast bericht toevoegen aan de header.liquid-template in de map Secties van de code-editor en Liquid gebruiken om het bericht alleen voor je hoofdlocatie weer te geven.

De volgende code controleert de naam van de locatie (in dit geval je oorspronkelijke locatie met de naam ‘Home’) en geeft het bericht ‘Welkom in onze oorspronkelijke winkel, geopend in 1972.’ weer als de locatie overeenkomt met de naam. Op bonnen die vanaf je andere locaties worden afgedrukt, wordt in plaats daarvan het bericht ‘Welkom in onze winkel.’ weergegeven.

{% if location.name == 'Home' %}
  Welcome to our original store, opened in 1972.
{% else %}
  Welcome to our store.
{% end %}

Voorbeeldweergave van je codewijzigingen in de code-editor

Je kunt in de POS-code-editor in het Shopify-beheercentrum een voorbeeld bekijken van de wijzigingen aan je afgedrukte bonnen.

Afhankelijk van welk Liquid-bestand is geselecteerd, markeert het voorbeeldvenster het ontwerp of de sectie van de bon die door het bestand wordt beïnvloed. Het voorbeeldvenster geeft standaard de content van je meest recente POS-bestelling weer. Je kunt een specifieke bestelling selecteren om als boncontent te gebruiken in het voorbeeldvenster voor alle Liquid-bestanden, behalve voor het gift-card.liquid-bestand, dat alleen de verschillende locaties weergeeft als selecteerbare voorbeeldopties.

Stappen:

Alle POS Pro-locaties

  1. Ga in je Shopify-beheercentrum naar Point of Sale > Instellingen.

  2. Klik in de sectie Aanpassingen op Afgedrukte bonnen om de POS-editor te openen.

  3. Klik op Je bonnen aanpassen.

  4. Klik op Code bewerken.

  5. Klik op het codebestand waarvan je een voorbeeld wilt bekijken. Je bon wordt weergegeven in het meest rechtse editorvenster.

  6. Optioneel: Voer de volgende acties uit om een specifieke bestelling te selecteren om te gebruiken als boncontent in het voorbeeldvenster:

    1. Klik op het pictogram Bekijken.
    2. Verkopen die zijn gedaan via het Point of Sale-kanaal vanaf alle locaties, worden weergegeven in het dialoogvenster Kies een bestelling voor de voorbeeldweergave. Selecteer een bestelling in de lijst of zoek naar specifieke bestellingen en locaties met behulp van de zoekbalk.
    3. Klik op Bevestigen.

  7. Optioneel: Als je een voorbeeld van het gift-card.liquid-bestand bekijkt, klik je op het pictogram Bekijken en selecteer je de locatie waarvoor je de template wilt bekijken.

Met Lite- of Italiaanse locaties

  1. Ga in je Shopify-beheercentrum naar Point of Sale > Instellingen.

  2. Klik in de sectie Aanpassingen op Afgedrukte bonnen om de POS-editor te openen.

  3. Klik op de pagina Bonaanpassing op Code-editor.

  4. Klik op het codebestand waarvan je een voorbeeld wilt bekijken. Je bon wordt weergegeven in het meest rechtse editorvenster.

  5. Optioneel: Voer de volgende acties uit om een specifieke bestelling te selecteren om te gebruiken als boncontent in het voorbeeldvenster:

    1. Klik op het pictogram Bekijken.
    2. Verkopen die zijn gedaan via het Point of Sale-kanaal vanaf alle locaties, worden weergegeven in het dialoogvenster Kies een bestelling voor de voorbeeldweergave. Selecteer een bestelling in de lijst of zoek naar specifieke bestellingen en locaties met behulp van de zoekbalk.
    3. Klik op Bevestigen.

  6. Optioneel: Als je een voorbeeld van het gift-card.liquid-bestand bekijkt, klik je op het pictogram Bekijken en selecteer je de locatie waarvoor je de template wilt bekijken.