Zaloguj
Uruchom darmową wersję próbną

Tworzenie i dostosowywanie szablonów Shopify Order Printer

Możesz dostosowywać szablony na wiele sposobów oraz tworzyć własne. Aplikacja Shopify Order Printer obsługuje szablony wykonane za pomocą zmiennych HTML, CSS i Liquid. Przed dostosowaniem szablonów zapoznaj się z informacją o zmiennych i filtrach Liquid dla Shopify Order Printer na potrzeby wszystkich obsługiwanych dostosowań szablonów.

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

Na tej stronie

Możesz dodać swoje logo do szablonu.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji: Zawartość > Pliki.
  2. Kliknij opcję Prześlij pliki, a następnie wybierz plik obrazu, który chcesz przesłać.
  3. Aby skopiować adres URL obrazu logo, kliknij ikonę linku.
  4. Kliknij opcję Ustawienia > Aplikacje i kanały sprzedaży.
  5. Kliknij opcję Order Printer.
  6. Kliknij Szablony.
  7. Kliknij nazwę szablonu, który chcesz edytować.
  8. W edytorze kodów wklej następujący blok kodu:

liquid <div style="text-align: center;"> <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE"> </div>

  1. Zastąp 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:

Na poniższym przykładzie pokazano, jak powinien wyglądać kod HTML po dodaniu logo do szablonu:

Przykład, który wyświetla blok kodu dotyczący sposobu dodawania logo do szablonu

Dodaj obrazy do szablonu

Możesz dodać obrazy do szablonu.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji: Zawartość > Pliki.
  2. Kliknij opcję 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 opcję Ustawienia > Aplikacje i kanały sprzedaży.
  5. Kliknij opcję Order Printer.
  6. Kliknij Szablony.
  7. Kliknij nazwę szablonu, który chcesz edytować.
  8. W edytorze kodu wklej blok kodu <img src=”Image Source” />.
  9. Zastąp Image Source w kodzie adresem URL obrazu.
  10. Kliknij opcję Zapisz.

Ustaw szerokości tabeli na 100%

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

Kroki:

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

  3. Kliknij opcję Otwórz aplikację.

  4. Kliknij Szablony.

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

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

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

  8. 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 kliknij Ustawienia > Aplikacje i kanały sprzedaży.
  2. Kliknij Order Printer.

  3. Kliknij opcję Otwórz aplikację.

  4. Kliknij Szablony.

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

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

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

  8. Kliknij opcję Zapisz.

Dodawanie szczegółów zamówienia

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

Kroki:

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

  3. Kliknij opcję Otwórz aplikację.

  4. Kliknij Szablony.

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

  6. W edytorze kodów użyj zmiennych Liquid, aby dodać szczegóły zamówienia, i HTML, aby dodać formatowanie. Na przykład kod {{ line_item.price | money }} umożliwia wyświetlanie ceny pozycji.

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

  8. Kliknij opcję Zapisz.

Przykład:

Nina chce edytować szablon specyfikacji towarów, aby uwzględnić w nim listę wysyłanych pozycji. Dodaje poniższy kod na dole szablonu Specyfikacja towarów w aplikacji Shopify Order Printer: W wyniku tego specyfikacje towarów Niny zawierają teraz tabelę z listą zakupionych pozycji:

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

Dodaj kod kreskowy do szablonu

Możesz dodać kod kreskowy do szablonu

Kroki:

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

  3. Kliknij opcję Otwórz aplikację.

  4. Kliknij Szablony.

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

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

  7. Zastąp wartość `` wartością tekstową kodu kreskowego.

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

  9. Kliknij opcję Zapisz.

Dodaj kod QR do szablonu

Do szablonu możesz dodać kod QR.

Kroki:

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

  3. Kliknij opcję Otwórz aplikację.

  4. Kliknij Szablony.

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

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

  7. Zastąp wartość `` wartością tekstową kodu QR.

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

  9. Kliknij opcję Zapisz.

Użycie czcionki Google w szablonie

Aby użyć czcionki Google w szablonie, wklej do szablonu poniższy 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 szablonu poniższy kod, a następnie dostosuj liczbę 14, zwiększając lub zmniejszając jej wartość:

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

Aby zwiększyć rozmiar czcionki nagłówków w szablonie, wklej poniższy kod do szablonu, a następnie dostosuj wartości obok nagłówka:

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

Jeśli zaimportowano szablony ze starszej aplikacji Order Printer, możesz zwiększyć rozmiar czcionki za pomocą następującego bloku kodu:

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>
Nie możesz znaleźć odpowiedzi, których szukasz? Jesteśmy tutaj, aby Ci pomóc.