Dostosowywanie szablonów aplikacji Order Printer

Możesz utworzyć i dostosować maksymalnie 15 szablonów dla aplikacji Order Printer w panelu administracyjnym Shopify. Domyślnie aplikacja Order Printer zawiera dwa szablony:

• Faktura – faktura podstawowa, którą można wysłać do klienta
• Specyfikacja towarów – wydruk adresu sklepu i adresu wysyłki klienta

Rozwijaj swój biznes

Faktury i specyfikacje towarów to dopiero początek. Dodanie innych wkładek do opakowań do zamówień, takich jak próbki produktów i kupony, to świetny sposób na budowanie relacji z klientami.

Utwórz nowy szablon Order Printer

Utworzenie nowego szablonu Order Printer wymaga znajomości języka HTML, CSS i Liquid. Pomoc techniczna ds. szablonów Shopify może pomóc w niewielkich korektach mieszczących się w zakresie polityki Shopify w zakresie projektowania.

Kroki:

1. W panelu administracyjnym Shopify kliknij Ustawienia > Aplikacje i kanały sprzedaży.

2. Kliknij opcję Order Printer, aby otworzyć aplikację.

3. Kliknij opcję Zarządzaj szablonami.

4. Kliknij opcję Dodaj szablon.

5. Wprowadź nazwę nowego szablonu w polu Nazwa.

6. Dodaj kod HTML, CSS lub Liquid w polu Kod, aby utworzyć swój szablon.

7. Po zakończeniu kliknij Zapisz.

Edytuj szablon Order Printer

Edytowanie szablonów Order Printer wymaga znajomości języka HTML, CSS i Liquid. Pomoc techniczna ds. szablonów Shopify może pomóc w niewielkich korektach mieszczących się w zakresie polityki Shopify w zakresie projektowania.

Kroki:

1. W panelu administracyjnym Shopify kliknij Ustawienia > Aplikacje i kanały sprzedaży.

2. Kliknij opcję Order Printer, aby otworzyć aplikację.

3. Kliknij opcję Zarządzaj szablonami.

4. Kliknij nazwę szablonu, który chcesz edytować.

5. Wprowadź zmiany w szablonie, dodając lub edytując kod HTML, CSS lub Liquid w polu Kod. Aby wyświetlić podgląd przykładowych dostosowań szablonów, zapoznaj się z tematem Przykładowe dostosowania szablonów.

6. Po zakończeniu kliknij Zapisz.

Przykładowe dostosowania szablonów

Poniższe przykłady objaśniają niektóre typowe sposoby dostosowywania szablonów Order Printer:

• Dodaj swoje logo do szablonów Order Printer
• Ustaw szerokości tabeli na 100%
• Wyświetl miniatury produktów
• Dodaj szczegóły zamówienia

Przykład: Dodaj swoje logo do szablonów Order Printer

Uwaga

Poniższe dostosowanie wymaga podstawowej wiedzy na temat HTML.

Pulpit

1. W panelu administracyjnym Shopify przejdź do opcji: Zawartość > Pliki.
2. Kliknij opcję Prześlij pliki i wybierz plik obrazu na komputerze.
3. Na stronie Pliki znajdź przesłany plik i kliknij opcję Kopiuj adres URL.
4. W panelu administracyjnym Shopify kliknij Ustawienia > Aplikacje i kanały sprzedaży.
5. Kliknij opcję Order Printer, aby otworzyć aplikację.
6. Kliknij opcję Zarządzaj szablonami.
7. Kliknij nazwę szablonu, który chcesz edytować.
8. Wprowadź poniższy fragment kodu do szablonu, w którym ma pojawić się Twoje logo: <img src="your-image-URL">.
9. Zamień your-image-URL na skopiowany adres URL obrazu. W zależności od tego, gdzie ma być wyświetlane logo, może być konieczne dodanie tagu <br/> w celu dodania podziału wiersza przed lub za obrazem.

iPhone

1. W aplikacji Shopify naciśnij przycisk …, a następnie Ustawienia.
2. W sekcji Ustawienia sklepu naciśnij Pliki.
3. Kliknij opcję Prześlij pliki i wybierz plik obrazu na komputerze.
4. Na stronie Pliki znajdź przesłany plik i kliknij opcję Kopiuj adres URL.
5. W panelu administracyjnym Shopify kliknij Ustawienia > Aplikacje i kanały sprzedaży.
6. Kliknij opcję Order Printer, aby otworzyć aplikację.
7. Kliknij opcję Zarządzaj szablonami.
8. Kliknij nazwę szablonu, który chcesz edytować.
9. Wprowadź poniższy fragment kodu do szablonu, w którym ma pojawić się Twoje logo: <img src="your-image-URL">.
10. Zamień your-image-URL na skopiowany adres URL obrazu. W zależności od tego, gdzie ma się pojawić logo, może być konieczne dodanie tagu <br/> w celu dodania podziału wiersza przed lub za obrazem.

Android

1. W aplikacji Shopify naciśnij przycisk …, a następnie Ustawienia.
2. W sekcji Ustawienia sklepu naciśnij Pliki.
3. Kliknij opcję Prześlij pliki i wybierz plik obrazu na komputerze.
4. Na stronie Pliki znajdź przesłany plik i kliknij opcję Kopiuj adres URL.
5. W panelu administracyjnym Shopify kliknij Ustawienia > Aplikacje i kanały sprzedaży.
6. Kliknij opcję Order Printer, aby otworzyć aplikację.
7. Kliknij opcję Zarządzaj szablonami.
8. Kliknij nazwę szablonu, który chcesz edytować.
9. Wprowadź poniższy fragment kodu do szablonu, w którym ma pojawić się Twoje logo: <img src="your-image-URL">.
10. Zamień your-image-URL na skopiowany adres URL obrazu. W zależności od tego, gdzie ma się pojawić logo, może być konieczne dodanie tagu <br/> w celu dodania podziału wiersza przed lub za obrazem.

W HTML powinno to wyglądać następująco:

Przykład: Ustaw szerokości tabeli na 100%

Aby tabele miały obramowania i były rozciągane do szerokości 100%, dodaj klasę table-tabular do swojej tabeli:

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

Przykład: Wyświetl miniatury produktów

Aby dołączyć miniatury produktów, wstaw ten kod do szablonu:

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

Dodawanie szczegółów zamówienia

Uwaga

Poniższe dostosowanie wymaga znajomości HTML i Liquid.

Możesz dodać do swoich szablonów szczegóły zamówienia, takie jak nazwa, ilość i koszt zakupionych pozycji. Aby dodać szczegóły zamówienia do szablonu:

1. W panelu administracyjnym Shopify kliknij Ustawienia > Aplikacje i kanały sprzedaży.

2. Kliknij opcję Order Printer, aby otworzyć aplikację.

3. Kliknij opcję Zarządzaj szablonami.

4. Kliknij nazwę szablonu, który chcesz edytować.

5. Użyj zmiennych Liquid, aby dodać szczegóły zamówienia, i HTML, aby dodać formatowanie. Na przykład {{ line_item.price | money }} drukuje cenę pozycji.

6. Po zakończeniu kliknij Zapisz.

Przykładowo, Nyla chce edytować szablon specyfikacji towarów, aby uwzględnić w nim listę wysyłanych pozycji. Dodaje poniższy kod na dole szablonu Packing slip w aplikacji Order Printer:

<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>

W wyniku tego specyfikacje towarów Nyla zawierają teraz tabelę z listą zakupionych pozycji: