Pomoc
Zaloguj

Dostosowywanie szablonów Order Printer

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

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

Na tej stronie

Utwórz nowy szablon Order Printer

Utworzenie nowego szablonu aplikacji Order Printer wymaga znajomości HTML, CSS i Liquid. Pomoc techniczna ds. szablonów Shopify może pomóc w drobnych modyfikacjach bezpłatnych szablonów Shopify w ramach Shopify Design Policy. Jeśli potrzebujesz bardziej złożonych zmian lub używasz szablonu, który nie został utworzony przez Shopify, rozważ zatrudnienie partnera Shopify.

Kroki:

  1. Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Order Printer (starsza wersja).

  2. Kliknij opcję Zarządzaj szablonami.

  3. Kliknij opcję Dodaj szablon.

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

  5. Dodaj kod HTML, CSS lub Liquid w polu Kod, aby utworzyć szablon.

  6. Gdy skończysz, kliknij opcję Zapisz.

Edytuj szablon Order Printer

Edycja szablonów aplikacji Order Printer wymaga znajomości HTML, CSS i Liquid. Pomoc techniczna ds. szablonów Shopify nie może wprowadzać dla Ciebie rozległych zmian w szablonach, ale może pomóc w drobnych modyfikacjach bezpłatnych szablonów Shopify w ramach Shopify Design Policy. W przypadku bardziej złożonych zmian rozważ zatrudnienie partnera Shopify.

Kroki:

  1. Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Order Printer (starsza wersja).

  2. Kliknij opcję Zarządzaj szablonami.

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

  4. 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ń szablonu, zapoznaj się z sekcją Przykładowe dostosowania szablonu.

  5. Gdy skończysz, kliknij opcję Zapisz.

Przykładowe dostosowania szablonu

Poniższe przykłady wyjaśniają kilka popularnych sposobów dostosowywania szablonów Order Printer:

Komputer stacjonarny

  1. Z panelu administracyjnego 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 kolejno opcje Ustawienia > Aplikacje.

  5. Kliknij Order Printer, aby otworzyć aplikację.

  6. Kliknij opcję Zarządzaj szablonami.

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

  8. Wprowadź następujący fragment kodu w szablonie, w miejscu, w którym ma się pojawić logo: <img src="your-image-URL">.

  9. Zastąp your-image-URL skopiowanym adresem URL obrazu. W zależności od tego, gdzie chcesz wyświetlić logo, może być konieczne dodanie tagu <br/> w celu dodania podziału wiersza przed obrazem lub po nim.

Urządzenia mobilne

  1. W Shopify app naciśnij ikonę Menu.

  2. W menu Zawartość naciśnij ikonę strzałka w dół, a następnie naciśnij Pliki.

  3. Naciśnij opcję Prześlij pliki i wybierz plik obrazu na komputerze.

  4. Na stronie Pliki znajdź przesłany plik i naciśnij opcję Kopiuj adres URL.

  5. W panelu administracyjnym Shopify naciśnij kolejno opcje Ustawienia > Aplikacje.

  6. Naciśnij Order Printer, aby otworzyć aplikację.

  7. Naciśnij opcję Zarządzaj szablonami.

  8. Naciśnij nazwę szablonu, który chcesz edytować.

  9. Wprowadź następujący fragment kodu w szablonie, w miejscu, w którym ma się pojawić logo: <img src="your-image-URL">.

  10. Zastąp your-image-URL skopiowanym adresem URL obrazu. W zależności od tego, gdzie chcesz wyświetlić logo, może być konieczne dodanie tagu <br/> w celu dodania podziału wiersza przed obrazem lub po nim.

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

Przykładowy kod HTML

Przykład: ustaw szerokość tabel na 100%

Aby tabele miały obramowanie i rozciągały się na 100% szerokości, dodaj do nich klasę table-tabular:

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

Dodaj szczegóły zamówienia

Możesz dodawać do 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 opcji Aplikacje > Order Printer (starsza wersja).

  2. Kliknij opcję Zarządzaj szablonami.

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

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

  5. Gdy skończysz, kliknij opcję Zapisz.

Na przykład Nyla chce edytować szablon specyfikacji towarów, aby dodać do niego listę wysyłanych pozycji. W tym celu dodaje następujący kod na dole szablonu Specyfikacja towarów 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 rezultacie specyfikacje towarów Nyli zawierają teraz tabelę z listą zakupionych pozycji.