Pomoc
Zaloguj

Tworzenie i dostosowywanie szablonów aplikacji Shopify Order Printer

Możesz dostosowywać szablony na wiele sposobów i tworzyć własne. Aplikacja Shopify Order Printer obsługuje szablony wykonane przy użyciu HTML, CSS i zmiennych Liquid. Zanim zaczniesz dostosowywać szablony, zapoznaj się z referencjami dotyczącymi zmiennych i filtrów Liquid dla aplikacji Shopify Order Printer, aby poznać wszystkie obsługiwane dostosowania szablonów.

Zapoznaj się z poniższymi przykładami, aby dowiedzieć się, jak można dostosowywać szablony aplikacji Shopify Order Printer.

Na tej stronie

Możesz dodać logo do szablonu.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Zawartość > Pliki.

  2. Kliknij Prześlij pliki, a następnie wybierz plik obrazu, który chcesz przesłać.

  3. Aby skopiować adres URL obrazu logo, kliknij ikonę Link.

  4. Kliknij kolejno opcje Ustawienia > Aplikacje.

  5. Kliknij opcję Order Printer.

  6. Kliknij opcję Szablony.

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

  8. W edytorze kodu wklej następujący blok kodu:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
  1. Zastąp fragment YOUR_IMAGE_URL_HERE w kodzie adresem URL obrazu.
  2. Opcjonalnie: Aby wyrównać logo, zmień wartość text-align na left, right lub center.
  3. Opcjonalnie: Aby dostosować szerokość logo, zmień wartość width na większą lub mniejszą, np. 8em lub 2em.
  4. Opcjonalnie: Aby wyświetlić podgląd szablonu, kliknij opcję Podgląd.
  5. Kliknij opcję Zapisz.

Przykład:

Zapoznaj się z poniższym przykładem, który pokazuje, jak powinien wyglądać kod HTML po dodaniu logo do szablonu:

Przykład przedstawiający blok kodu ilustrujący sposób dodawania logo do szablonu

Dodawanie obrazów do szablonu

Możesz dodawać obrazy do szablonu.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Zawartość > Pliki.

  2. Kliknij Prześlij pliki, a następnie wybierz plik obrazu, który chcesz przesłać.

  3. Aby skopiować adres URL obrazu, kliknij ikonę Link.

  4. Kliknij kolejno opcje Ustawienia > Aplikacje.

  5. Kliknij opcję Order Printer.

  6. Kliknij opcję Szablony.

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

  8. W edytorze kodu wklej blok kodu <img src=”Image Source” />.

  9. Zastąp fragment Image Source w kodzie adresem URL obrazu.

  10. Kliknij opcję Zapisz.

Ustawianie szerokości tabeli na 100%

Możesz dodać obramowania do tabeli i rozciągnąć ją na 100% szerokości. Musisz dodać klasę table-tabular do tabeli.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Aplikacje > Order Printer.

  2. Kliknij opcję Szablony.

  3. Kliknij szablon, który chcesz edytować.

  4. W edytorze kodu znajdź tabelę, którą chcesz edytować, a następnie dodaj do niej klasę table-tabular.

  5. Opcjonalnie: Aby wyświetlić podgląd szablonu, kliknij opcję Podgląd.

  6. Kliknij opcję Zapisz.

Przykład:

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

Wyświetlanie miniatur produktów

Możesz dodać miniatury produktów do szablonu zamówienia. Musisz wstawić niestandardowy blok kodu do szablonu.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Aplikacje > Order Printer.

  2. Kliknij opcję Szablony.

  3. Kliknij szablon, który chcesz edytować.

  4. Dodaj do szablonu blok kodu {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}.

  5. Opcjonalnie: Aby wyświetlić podgląd szablonu, kliknij opcję Podgląd.

  6. Kliknij opcję Zapisz.

Dodawanie szczegółów zamówienia

Możesz dodać do szablonu szczegóły zamówienia, takie jak nazwa, ilość i cena zakupionych pozycji.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Aplikacje > Order Printer.

  2. Kliknij opcję Szablony.

  3. Kliknij szablon, który chcesz edytować.

  4. W edytorze kodu użyj zmiennych Liquid, aby dodać szczegóły zamówienia, oraz kodu HTML, aby dodać formatowanie. Na przykład użycie zmiennej {{ line_item.price | money }} powoduje wyświetlenie ceny pozycji.

  5. Opcjonalnie: Aby wyświetlić podgląd szablonu, kliknij opcję Podgląd.

  6. Kliknij opcję Zapisz.

Przykład:

Nyla chce edytować swój szablon specyfikacji towarów, aby zawrzeć w nim listę wysyłanych pozycji. Dodaje następujący kod na dole swojego szablonu Specyfikacja towarów w aplikacji Shopify Order Printer. W rezultacie specyfikacje towarów Nyli zawierają teraz tabelę z listą zakupionych pozycji.

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th scope="col">Quantity</th>
      <th scope="col">Item</th>
      {% if tax_lines.size > 0 %}
      <th scope="col">Taxes</th>
      {% endif %}
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td scope="row">{{ 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>

Dodawanie kodu kreskowego do szablonu

Możesz dodać kod kreskowy do szablonu

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Aplikacje > Order Printer.

  2. Kliknij opcję Szablony.

  3. Kliknij szablon, który chcesz edytować.

  4. Dodaj do szablonu blok kodu <s-barcode value="a" />.

  5. Zastąp wartość value wartością tekstową kodu kreskowego.

  6. Opcjonalnie: Aby wyświetlić podgląd szablonu, kliknij opcję Podgląd.

  7. Kliknij opcję Zapisz.

Dodawanie kodu QR do szablonu

Możesz dodać kod QR do szablonu.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji Aplikacje > Order Printer.

  2. Kliknij opcję Szablony.

  3. Kliknij szablon, który chcesz edytować.

  4. Dodaj do szablonu blok kodu <s-barcode type="qrcode" value="" />.

  5. Zastąp wartość value wartością tekstową kodu QR.

  6. Opcjonalnie: Aby wyświetlić podgląd szablonu, kliknij opcję Podgląd.

  7. Kliknij opcję Zapisz.

Używanie czcionki Google w szablonie

Aby użyć czcionki Google w szablonie, wklej do niego następujący kod, a następnie zastąp zmienną FontName nazwą czcionki Google:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">
<style>
  body {
    font-family: FontName, serif;
  }
</style>

Zwiększanie rozmiaru czcionki

Aby zwiększyć rozmiar czcionki w szablonie, wklej do niego następujący kod, a następnie zmień liczbę 14 na większą lub mniejszą wartość:

<style>
  :root {
    --font-size: 14px;
  }
</style>

Aby zwiększyć rozmiar czcionki nagłówków w szablonie, wklej do niego następujący kod, a następnie dostosuj wartości obok nagłówka:

<style>
  :root {
    --h1-font-size: 18px;
    --h2-font-size: 16px;
    --h3-font-size: 14px;
  }
</style>

Po zaimportowaniu szablonów ze starszej aplikacji Order Printer możesz zwiększyć rozmiar czcionki, używając następującego bloku kodu:

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>