Отображение Shop Promise на странице товара
Значок Shop Promise отображается рядом с датами доставки и на страницах товаров для соответствующих заказов, которые предположительно будут доставлены по США в течение пяти или менее календарных дней. Этот значок позволяет клиентам понять, что их заказ будет доставлен быстро и надёжно.
После того как вы активируете Shop Promise, перейдите на страницу товара с помощью редактора тем, чтобы убедиться, что значок Shop Promise отображается правильно.
Если значок отображается некорректно, убедитесь, что в вашем магазине активированы кнопки ускоренного оформления заказа. У вас также есть несколько вариантов настройки отображения значка Shop Promise.
На этой странице
Ручное размещение модуля Shop Promise
Если вы умеете читать и редактировать код темы, то можете определить, где нужно внести изменения, и обновить страницу товара.
Определение места для внесения изменений
Код модуля Shop Promise должен быть включён в форму товара на странице товара, которая должна выглядеть примерно так: {%- form 'product', product -%}. В зависимости от темы модуль Shop Promise может находиться в разных местах. Ниже перечислены распространённые варианты:
main-product.liquidproduct-form.liquidproduct-template.liquidproduct.liquid
Обновление страницы товара
Инструкция:
Для компьютера
В панели администратора Shopify перейдите в раздел «Интернет-магазин» > «Темы».
Найдите нужную тему, нажмите на значок
, чтобы открыть меню действий, а затем нажмите «Редактировать код».Откройте соответствующий файл.
Найдите строку, которая содержит
{%- if block.settings.show_dynamic_checkout -%}или{{ form | payment_button }}.Создайте новую строку сразу под строкой
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}и вставьте в неё следующее:
<div class="delivery-promise__promise-container"></div>- Нажмите «Сохранить».
Результат должен выглядеть примерно так:
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>Для мобильных устройств
В приложении Shopify нажмите значок
.В разделе Каналы продаж нажмите Интернет-магазин > Управление всеми темами.
Найдите нужную тему, нажмите кнопку …, чтобы открыть меню действий, а затем нажмите «Редактировать код».
Откройте соответствующий файл.
Найдите строку, которая содержит
{%- if block.settings.show_dynamic_checkout -%}или{{ form | payment_button }}.Создайте новую строку сразу под строкой
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}и вставьте в неё следующее:
<div class="delivery-promise__promise-container"></div>- Нажмите «Сохранить» или ✓.
Результат должен выглядеть примерно так:
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>Ручное переопределение темы модуля Shop Promise
Модуль Shop Promise имеет тёмную и светлую темы. Модуль автоматически использует ту тему, которая имеет наибольший коэффициент контрастности по сравнению с цветом фона страницы товара.
Если вы умеете читать и редактировать код темы, вы можете переопределить выбранную тему модуля, добавив атрибут данных к якорному элементу, который используется для ручного размещения модуля Shop Promise.
Перед внесением любых изменений создайте дубликат темы и вносите изменения в него, чтобы их было проще отменить.
Инструкция:
Для компьютера
- Следуйте инструкциям, чтобы вручную разместить модуль Shop Promise на странице товара, а затем оставьте редактор тем открытым.
- Добавьте к созданному якорному элементу атрибут данных темы со значением dark или light.
- Нажмите «Сохранить».
Результат должен выглядеть примерно так:
<div class="delivery-promise__promise-container" data-theme="dark"></div>Или
<div class="delivery-promise__promise-container" data-theme="light"></div>Для мобильных устройств
- Следуйте инструкциям, чтобы вручную разместить модуль Shop Promise на странице товара, а затем оставьте редактор тем открытым.
- Добавьте к созданному якорному элементу атрибут данных темы со значением dark или light.
- Нажмите «Сохранить».
Результат должен выглядеть примерно так:
<div class="delivery-promise__promise-container" data-theme="dark"></div>Или
<div class="delivery-promise__promise-container" data-theme="light"></div>Добавление пользовательского HTML или кода Liquid для модуля Shop Promise
Если ваша тема поддерживает пользовательские блоки, вы можете использовать блок «Пользовательский Liquid», чтобы добавить модуль Shop Promise на страницу товара без редактирования кода темы.
Инструкция по добавлению модуля Shop Promise с помощью пользовательского блока Liquid:
Для компьютера
В панели администратора Shopify перейдите в раздел «Интернет-магазин» > «Темы».
Найдите нужную тему и нажмите «Редактировать тему».
Перейдите на страницу товара с помощью селектора шаблонов в верхней строке меню.
В боковом меню найдите раздел «Информация о товаре».
Нажмите «Добавить блок» и выберите в списке доступных блоков «Пользовательский Liquid».
В текстовое поле «Пользовательский Liquid» вставьте следующий код:
<div class="delivery-promise__promise-container"></div>- Разместите блок, перетащив его в нужное место — обычно под блоком кнопок покупки.
- Нажмите «Сохранить», чтобы применить изменения.
Если вы хотите указать предпочтительную тему (тёмную или светлую), используйте вместо этого один из следующих вариантов:
<div class="delivery-promise__promise-container" data-theme="dark"></div>Или
<div class="delivery-promise__promise-container" data-theme="light"></div>Для мобильных устройств
В приложении Shopify нажмите значок
.В разделе Каналы продаж нажмите Интернет-магазин > Управление всеми темами.
Найдите активную тему и нажмите «Редактировать тему».
Перейдите на страницу товара с помощью селектора шаблонов вверху.
Коснитесь раздела «Информация о товаре».
Нажмите «Добавить блок» и выберите Custom Liquid.
В текстовое поле «Пользовательский Liquid» вставьте следующий код:
<div class="delivery-promise__promise-container"></div>- Разместите блок, перетащив его в нужное место — обычно под блоком кнопок покупки.
- Нажмите «Сохранить», чтобы применить изменения.
Если вы хотите указать предпочтительную тему (тёмную или светлую), используйте вместо этого один из следующих вариантов:
<div class="delivery-promise__promise-container" data-theme="dark"></div>Или
<div class="delivery-promise__promise-container" data-theme="light"></div>Поддерживаемые языки для значка Shop Promise
В таблице ниже приведены языки, на которых может отображаться значок Shop Promise. Если язык вашего магазина не поддерживается, значок Shop Promise будет отображаться на английском языке.
| Китайский (упрощённый) | Китайский (традиционный) | Хорватский | Чешский |
| Датский | Нидерландский | Английский | Финский |
| Французский | Немецкий | Греческий | Хинди |
| Венгерский | Индонезийский | Итальянский | Японский |
| Корейский | Литовский | Малайский | Норвежский (букмол) |
| Польский | Португальский (Бразилия) | Португальский (Португалия) | Румынский |
| Русский | Словацкий | Словенский | Испанский |
| Шведский | Тайский | Турецкий | Вьетнамский |