Помощ
Влизане

Създаване и персонализиране на шаблони за Shopify Order Printer

Можете да персонализирате своите шаблони по много начини и да създавате свои собствени шаблони. Приложението Shopify Order Printer поддържа шаблони, създадени с HTML, CSS и променливи на Liquid. Преди да персонализирате своите шаблони, уверете се, че сте се запознали с справочника за променливи и филтри на Liquid за Shopify Order Printer за всички поддържани персонализации на шаблони.

Прегледайте следните примери, за да научите как можете да персонализирате шаблони за Shopify Order Printer.

На тази страница

Можете да добавите своето лого към Вашия шаблон.

Стъпки:

  1. От Вашия администраторски панел на Shopify отидете в Съдържание > Файлове.

  2. Кликнете върху Качване на файлове, след което изберете файла с изображение, който искате да качите.

  3. За да копирате URL адреса за изображението на логото си, натиснете иконата „Връзка“.

  4. Натиснете „Настройки“ > „Приложения“.

  5. Натиснете Order Printer.

  6. Натиснете „Шаблони“.

  7. Натиснете името на шаблона, който искате да редактирате.

  8. В редактора на код поставете следния кодов блок:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
  1. Заменете YOUR_IMAGE_URL_HERE в кода с URL адреса на Вашето изображение.
  2. По избор: За да подравните логото си, променете стойността на text-align на left, right или center.
  3. По избор: За да регулирате ширината на логото си, променете стойността на width на по-голяма или по-малка стойност, като например 8em или 2em.
  4. По избор: За да прегледате шаблона си, натиснете „Визуализация“.
  5. Натиснете „Запазване“.

Пример:

Прегледайте следния пример за това как трябва да се показва Вашият HTML, след като добавите логото си към шаблона:

Пример, който показва кодов блок за добавяне на лого към шаблон

Добавяне на изображения към шаблон

Можете да добавяте изображения към своя шаблон.

Стъпки:

  1. От Вашия администраторски панел на Shopify отидете в Съдържание > Файлове.

  2. Кликнете върху Качване на файлове, след което изберете файла с изображение, който искате да качите.

  3. За да копирате URL адреса за Вашето изображение, натиснете иконата „Връзка“.

  4. Натиснете „Настройки“ > „Приложения“.

  5. Натиснете Order Printer.

  6. Натиснете „Шаблони“.

  7. Натиснете името на шаблона, който искате да редактирате.

  8. В редактора на код поставете кодовия блок <img src=”Image Source” />.

  9. Заменете Image Source в кода с URL адреса на Вашето изображение.

  10. Натиснете „Запазване“.

Задаване на 100% ширина на таблиците

Можете да добавите рамки към таблицата си и да я разтегнете до 100% ширина. Трябва да добавите класа table-tabular към Вашата таблица.

Стъпки:

  1. От своя администраторски панел на Shopify отидете в „Приложения“ > Order Printer.

  2. Натиснете „Шаблони“.

  3. Натиснете шаблона, който искате да редактирате.

  4. В редактора на код намерете таблицата, която искате да редактирате, и след това добавете класа table-tabular към Вашата таблица.

  5. По избор: За да прегледате шаблона си, натиснете „Визуализация“.

  6. Натиснете „Запазване“.

Пример:

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

Показване на миниизображения на продукти

Можете да добавяте миниизображения на продукти към своя шаблон за поръчки. Трябва да въведете персонализиран кодов блок в своя шаблон.

Стъпки:

  1. От своя администраторски панел на Shopify отидете в „Приложения“ > Order Printer.

  2. Натиснете „Шаблони“.

  3. Натиснете шаблона, който искате да редактирате.

  4. Добавете кодовия блок {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} към своя шаблон.

  5. По избор: За да прегледате шаблона си, натиснете „Визуализация“.

  6. Натиснете „Запазване“.

Добавяне на подробности за поръчката

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

Стъпки:

  1. От своя администраторски панел на Shopify отидете в „Приложения“ > Order Printer.

  2. Натиснете „Шаблони“.

  3. Натиснете шаблона, който искате да редактирате.

  4. В редактора на код използвайте променливи на Liquid, за да добавите подробности за поръчката, и HTML за добавяне на форматиране. Например използването на {{ line_item.price | money }} показва цената на артикула.

  5. По избор: За да прегледате шаблона си, натиснете „Визуализация“.

  6. Натиснете „Запазване“.

Пример:

Найла иска да редактира своя шаблон за опаковъчен списък, за да включи списък на изпращаните артикули. Тя добавя следния код в долната част на своя шаблон „Опаковъчен списък“ в приложението 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>

Добавяне на баркод към шаблон

Можете да добавите баркод към своя шаблон.

Стъпки:

  1. От своя администраторски панел на Shopify отидете в „Приложения“ > Order Printer.

  2. Натиснете „Шаблони“.

  3. Натиснете шаблона, който искате да редактирате.

  4. Добавете кодовия блок <s-barcode value="a" /> към своя шаблон.

  5. Заменете стойността `` с текстовата стойност на Вашия баркод.

  6. По избор: За да прегледате шаблона си, натиснете „Визуализация“.

  7. Натиснете „Запазване“.

Добавяне на QR код към шаблон

Можете да добавите QR код към своя шаблон.

Стъпки:

  1. От своя администраторски панел на Shopify отидете в „Приложения“ > Order Printer.

  2. Натиснете „Шаблони“.

  3. Натиснете шаблона, който искате да редактирате.

  4. Добавете кодовия блок <s-barcode type="qrcode" value="" /> към своя шаблон.

  5. Заменете стойността `` с текстовата стойност на Вашия QR код.

  6. По избор: За да прегледате шаблона си, натиснете „Визуализация“.

  7. Натиснете „Запазване“.

Използване на шрифт от 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>