Создание и настройка шаблонов Shopify Order Printer

Вы можете настраивать свои шаблоны разными способами и создавать собственные. Приложение Shopify Order Printer поддерживает шаблоны, созданные с помощью HTML, CSS и переменных Liquid. Прежде чем настраивать шаблоны, ознакомьтесь со справочником по переменным и фильтрам Liquid для Shopify Order Printer, чтобы узнать обо всех поддерживаемых настройках шаблонов.

Ознакомьтесь со следующими примерами, чтобы узнать, как можно настраивать шаблоны Shopify Order Printer.

На этой странице

Добавление логотипа в шаблон

Вы можете добавить в шаблон свой логотип.

Инструкция:

В панели администратора Shopify перейдите в раздел «Содержимое» > Файлы.
Нажмите «Загрузить файлы», а затем выберите файл изображения, который хотите загрузить.
Чтобы скопировать URL-адрес вашего логотипа, нажмите значок «Ссылка».
Нажмите «Настройки» > «Приложения».
Нажмите «Order Printer».
Нажмите «Шаблоны».
Нажмите на название шаблона, который хотите отредактировать.
В редакторе кода вставьте следующий блок кода:

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

В коде замените YOUR_IMAGE_URL_HERE на URL-адрес вашего изображения.
Необязательно: чтобы выровнять логотип, измените значение text-align на left, right или center.
Необязательно: чтобы настроить ширину логотипа, измените значение width на большее или меньшее, например 8em или 2em.
Необязательно: чтобы просмотреть шаблон, нажмите «Предпросмотр».
Нажмите «Сохранить».

Пример:

Рассмотрите следующий пример того, как будет отображаться ваш HTML-код после добавления логотипа в шаблон:

Добавление изображений в шаблон

Вы можете добавлять изображения в свой шаблон.

Инструкция:

В панели администратора Shopify перейдите в раздел «Содержимое» > Файлы.
Нажмите «Загрузить файлы», а затем выберите файл изображения, который хотите загрузить.
Чтобы скопировать URL-адрес вашего изображения, нажмите значок «Ссылка».
Нажмите «Настройки» > «Приложения».
Нажмите «Order Printer».
Нажмите «Шаблоны».
Нажмите на название шаблона, который хотите отредактировать.
В редакторе кода вставьте блок кода <img src=”Image Source” />.
В коде замените Image Source на URL-адрес вашего изображения.
Нажмите «Сохранить».

Настройка ширины таблицы на 100%

Вы можете добавить рамки к таблице и растянуть ее на 100% ширины. Для этого необходимо добавить к таблице класс table-tabular.

Инструкция:

В панели администратора Shopify перейдите в «Приложения» > Order Printer.
Нажмите «Шаблоны».
Нажмите на шаблон, который хотите отредактировать.
В редакторе кода найдите таблицу, которую вы хотите отредактировать, а затем добавьте к ней класс table-tabular.
Необязательно: чтобы просмотреть шаблон, нажмите «Предпросмотр».
Нажмите «Сохранить».

Пример:

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

Отображение миниатюр товаров

Вы можете добавлять миниатюры товаров в шаблон заказа. Для этого необходимо вставить в шаблон специальный блок кода.

Инструкция:

В панели администратора Shopify перейдите в «Приложения» > Order Printer.
Нажмите «Шаблоны».
Нажмите на шаблон, который хотите отредактировать.
Добавьте в шаблон блок кода {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}.
Необязательно: чтобы просмотреть шаблон, нажмите «Предпросмотр».
Нажмите «Сохранить».

Добавление данных о заказе

Вы можете добавлять в шаблон данные о заказе, например название, количество и цену купленных товаров.

Инструкция:

В панели администратора Shopify перейдите в «Приложения» > Order Printer.
Нажмите «Шаблоны».
Нажмите на шаблон, который хотите отредактировать.
В редакторе кода используйте переменные Liquid для добавления данных о заказе и HTML для форматирования. Например, код {{ line_item.price | money }} отображает цену товара.
Необязательно: чтобы просмотреть шаблон, нажмите «Предпросмотр».
Нажмите «Сохранить».

Пример:

Найла хочет отредактировать свой шаблон упаковочного листа, чтобы включить в него список отправляемых товаров. Она добавляет следующий код в конец своего шаблона «Упаковочный лист» в приложении Shopify Order Printer. В результате упаковочные листы Найлы теперь содержат таблицу со списком купленных товаров.

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

Добавление штрих-кода в шаблон

Вы можете добавить штрих-код в свой шаблон

Инструкция:

В панели администратора Shopify перейдите в «Приложения» > Order Printer.
Нажмите «Шаблоны».
Нажмите на шаблон, который хотите отредактировать.
Добавьте в шаблон блок кода <s-barcode value="a" />.
Замените значение `` на текстовое значение вашего штрих-кода.
Необязательно: чтобы просмотреть шаблон, нажмите «Предпросмотр».
Нажмите «Сохранить».

Добавление QR-кода в шаблон

Вы можете добавить QR-код в свой шаблон.

Инструкция:

В панели администратора Shopify перейдите в «Приложения» > Order Printer.
Нажмите «Шаблоны».
Нажмите на шаблон, который хотите отредактировать.
Добавьте в шаблон блок кода <s-barcode type="qrcode" value="" />.
Замените значение `` на текстовое значение вашего QR-кода.
Необязательно: чтобы просмотреть шаблон, нажмите «Предпросмотр».
Нажмите «Сохранить».

Использование шрифта Google в шаблоне

Чтобы использовать шрифт Google в шаблоне, вставьте в него следующий код, а затем замените переменную FontName на название вашего шрифта Google:

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

Увеличение размера шрифта

Чтобы увеличить размер шрифта в шаблоне, вставьте в него следующий код, а затем измените число 14 на большее или меньшее значение:

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

Чтобы увеличить размер шрифта заголовков в шаблоне, вставьте в него следующий код, а затем измените значения рядом с заголовком:

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

Если вы импортировали шаблоны из устаревшего приложения Order printer, то можете увеличить размер шрифта с помощью следующего блока кода:

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