Order Printer-templates aanpassen

Opmerking

De verouderde versie van de Order Printer-app wordt vervangen door de Shopify Order Printer-app, die dezelfde functies biedt maar beter presteert. De verouderde versie van de app blijft beschikbaar zodat je tijd hebt om te migreren.

Als je aangepaste templates hebt, kun je de bestaande templates in de nieuwe app importeren. Controleer de instructies voor veelgebruikte template-aanpassingen. Als je bij het migreren van templates op problemen stuit, neem je contact op met Shopify Support.

Eventuele feedback over de app kun je geven via de banner in de app zelf of via Shopify Support.

Je kunt tot 15 templates maken en aanpassen voor de Order Printer-app in je Shopify-beheercentrum. De Order Printer-app bevat standaard twee templates:

• Factuur: een basisfactuur die je naar een klant kunt versturen
• Pakbon: een afdruk van je winkeladres en het bezorgadres van je klant

Je bedrijf laten groeien

Facturen en pakbonnen zijn nog maar het begin. Het toevoegen van andere verpakkingsbijlagen aan je bestellingen, zoals productvoorbeelden en kortingsbonnen, is een geweldige manier om je klanten te benaderen.

Een nieuwe Order Printer-template maken

Voor het maken van een nieuwe Order Printer-template moet je bekend zijn met HTML, CSS en Liquid. Shopify Theme Support kan helpen met kleine aanpassingen binnen het kader van het ontwerpbeleid van Shopify.

Stappen:

1. Ga in het Shopify-beheercentrum naar Instellingen > Apps en verkoopkanalen.

2. Klik op Order Printer om de app te openen.

3. Klik op Templates beheren.

4. Klik op Template toevoegen.

5. Voer een naam in voor de nieuwe template in het veld Naam.

6. Voeg in het veld Code HTML-, CSS- of Liquid-code om de template te maken.

7. Klik op Opslaan wanneer je klaar bent.

Een Order Printer-template bewerken

Voor het bewerken van Order Printer-templates moet je bekend zijn met HTML, CSS en Liquid. Shopify Theme Support kan helpen met kleine aanpassingen binnen het kader van het ontwerpbeleid van Shopify.

Stappen:

1. Ga in het Shopify-beheercentrum naar Instellingen > Apps en verkoopkanalen.

2. Klik op Order Printer om de app te openen.

3. Klik op Templates beheren.

4. Klik op de naam van de template die je wilt bewerken.

5. Breng je wijzigingen in de template aan door HTML-, CSS- of Liquid-code toe te voegen of te bewerken in het veld Code. Raadpleeg Voorbeelden van templateaanpassingen om voorbeelden te bekijken.

6. Klik op Opslaan wanneer je klaar bent.

Voorbeelden van templateaanpassingen

In de volgende voorbeelden worden enkele veelvoorkomende manieren uitgelegd om Order Printer-templates aan te passen:

• Je logo toevoegen aan Order Printer-templates
• Tabelbreedten 100% maken
• Productminiaturen weergeven
• Bestelgegevens toevoegen

Voorbeeld: Je logo toevoegen aan Order Printer-templates

Opmerking

Voor de volgende aanpassing heb je basiskennis van HTML nodig.

Desktop

1. Ga vanuit het Shopify-beheercentrum naar Content > Bestanden.

2. Klik op Bestanden uploaden en selecteer het afbeeldingsbestand op je computer.

3. Zoek het geüploade bestand op de pagina Bestanden en klik op URL kopiëren.

4. Klik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.

5. Klik op Order Printer om de app te openen.

6. Klik op Templates beheren.

7. Klik op de naam van de template die je wilt bewerken.

8. Voer het volgende codefragment in de template in op de plek waar je je logo wilt weergeven: <img src="your-image-URL">.

9. Vervang your-image-URL door de afbeeldings-URL die je hebt gekopieerd. Afhankelijk van waar je het logo wilt weergeven, kan het nodig zijn de tag <br/> toe te voegen om een regeleinde vóór of na de afbeelding in te voegen.

iPhone

1. Tik in de Shopify-app op de knop … en daarna op Instellingen.
2. Tik in de sectie Winkelinstellingen op Bestanden.
3. Tik op Bestanden uploaden en selecteer het afbeeldingsbestand op je computer.
4. Zoek het geüploade bestand op de pagina Bestanden en tik op URL kopiëren.
5. Tik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.
6. Tik op Order Printer om de app te openen.
7. Tik op Templates beheren.
8. Klik op de naam van de template die je wil bewerken.
9. Voer het volgende codefragment in de template in op de plek waar je je logo wilt weergeven: <img src="your-image-URL">.
10. Vervang your-image-URL door de afbeeldings-URL die je hebt gekopieerd. Afhankelijk van waar je je logo wilt plaatsen, moet je mogelijk de tag <br/> toevoegen om een regeleinde vóór of na je afbeelding in te voegen.

Android

1. Tik in de Shopify-app op de knop … en daarna op Instellingen.
2. Tik in de sectie Winkelinstellingen op Bestanden.
3. Tik op Bestanden uploaden en selecteer het afbeeldingsbestand op je computer.
4. Zoek het geüploade bestand op de pagina Bestanden en tik op URL kopiëren.
5. Tik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.
6. Tik op Order Printer om de app te openen.
7. Tik op Templates beheren.
8. Klik op de naam van de template die je wil bewerken.
9. Voer het volgende codefragment in de template in op de plek waar je je logo wilt weergeven: <img src="your-image-URL">.
10. Vervang your-image-URL door de afbeeldings-URL die je hebt gekopieerd. Afhankelijk van waar je je logo wilt plaatsen, moet je mogelijk de tag <br/> toevoegen om een regeleinde vóór of na je afbeelding in te voegen.

Het ziet er als volgt uit in HTML:

Voorbeeld: Tabelbreedten 100% maken

Voeg de klasse table-tabular toe aan je tabel wanneer je randen aan je tabellen wilt toevoegen en een breedte van 100% wilt instellen:

<table class="table-tabular">
    ...
</table>

Voorbeeld: Productminiaturen weergeven

Plaats deze code in je template als je productminiaturen wilt opnemen:

{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}

Bestelgegevens toevoegen

Opmerking

Voor de volgende aanpassing is kennis van HTML en Liquid vereist.

Je kunt bestelgegevens aan je templates toevoegen, zoals de naam, het aantal en de kosten van gekochte artikelen. Bestelgegevens aan je template toevoegen:

1. Ga in het Shopify-beheercentrum naar Instellingen > Apps en verkoopkanalen.

2. Klik op Order Printer om de app te openen.

3. Klik op Templates beheren.

4. Klik op de naam van de template die je wilt bewerken.

5. Gebruik variabelen van Liquid om bestelgegevens toe te voegen en HTML voor opmaak. Voeg bijvoorbeeld {{ line_item.price | money }} toe om de prijs van het artikel weer te geven.

6. Klik op Opslaan wanneer je klaar bent.

Nyla wil bijvoorbeeld haar pakbontemplate bewerken om een lijst op te nemen van de artikelen die worden verzonden. Ze voegt de volgende code onderaan haar Packing slip-template toe in de Order Printer-app.

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      {% if tax_lines.size > 0 %}
      <th>Taxes</th>
      {% endif %}
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td>{{ line_item.quantity }} x</td>
        <td><b>{{ line_item.title }}</b></td>
        {% if line_item.tax_lines %}
          <td>
            {% for tax_line in line_item.tax_lines %}
              {{ tax_line.price | money }} {{ tax_line.title }}<br/>
            {% endfor %}
          </td>
        {% endif %}
        <td>{{ line_item.price | money }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

Daardoor bevatten de pakbonnen van Nyla nu een tabel met de gekochte artikelen.