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
  • Dowód dostawy – wydruk adresu sklepu i adresu wysyłki klienta

Utwórz nowy szablon Order Printer

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

Kroki:

  1. Z panelu administracyjnego Shopify przejdź do Aplikacji.

  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 HTML, CSS i Liquid. Pomoc techniczna ds. szablonów Shopify może pomóc w nieznacznych korektach mieszczących się w zakresie polityki Shopify w zakresie projektowania.

Kroki:

  1. Z panelu administracyjnego Shopify przejdź do Aplikacji.

  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 zobaczyć przykłady dostosowań szablonów, zapoznaj się z przykładowymi dostosowaniami szablonów.

  6. Po zakończeniu kliknij Zapisz.

Przykładowe dostosowania szablonów

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

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

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

Możesz dodać swoje logo do faktur dla zamówienia, dowodów dostawy i niestandardowych szablonów:

  1. Kliknij opcję Załaduj pliki i wybierz plik obrazu na komputerze.

  2. Na stronie Pliki kliknij adres URL obrazu, aby go wyróżnić, a następnie skopiuj tekst.

  3. Z panelu administracyjnego Shopify przejdź do Aplikacji.

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

  5. Kliknij opcję Zarządzaj szablonami.

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

  7. Wprowadź poniższy fragment kodu do szablonu, w którym ma pojawić się Twoje logo: <img src="your-image-URL">.

  8. 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 kodu HTML

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: Pokaż 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 }}

Dodaj szczegóły zamówienia

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. Z panelu administracyjnego Shopify przejdź do Aplikacji.

  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 dowodu dostawy, 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 show_line_item_taxes %}
      <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 dowody dostawy Nyli zawierają teraz tabelę z listą zakupionych pozycji:

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo