В мире электронной коммерции предоставление скидок и рекламных акций — это проверенная стратегия привлечения клиентов и увеличения продаж. Один из эффективных способов привлечь покупателей — это наглядно показать процент скидки и сумму, которую они могут сэкономить на своих покупках. В этой статье мы рассмотрим несколько методов демонстрации процентных скидок и экономии в вашем магазине Shopify. Мы предоставим примеры кода для каждого метода, чтобы помочь вам легко их реализовать.

Метод 1. Отображение скидки на странице со списком товаров
Пример кода:

{% if product.compare_at_price > product.price %}
  <span class="discount-percentage">
    {{ ((product.compare_at_price - product.price) / product.compare_at_price) * 100 | round: 0 }}% off
  </span>
{% endif %}

Объяснение:
В этом методе мы сравниваем первоначальную цену (compare_at_price) с ценой со скидкой (price) продукта. Если цена со скидкой ниже, мы рассчитываем процентную скидку, вычитая цену со скидкой из исходной цены, разделяя ее на исходную цену и умножая на 100. Фильтр roundгарантирует, что процент скидки будет равен отображается как целое число.

Метод 2: отображение скидки на странице товара
Пример кода:

{% if product.compare_at_price > product.price %}
  <p class="discount-amount">
    Save {{ product.compare_at_price | minus: product.price | money_without_currency }} ({{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | round: 0 }}%)
  </p>
{% endif %}

Объяснение:
В этом методе мы рассчитываем фактическую сэкономленную сумму путем вычитания цены со скидкой из исходной цены с помощью фильтра minus. Затем мы показываем эту сумму вместе с процентной скидкой. Фильтр money_without_currencyформатирует сохраненную сумму как денежную величину.

Метод 3: выделение скидки с помощью значка
Пример кода:

{% if product.compare_at_price > product.price %}
  <span class="discount-badge">
    {{ ((product.compare_at_price - product.price) / product.compare_at_price) * 100 | round: 0 }}% off
  </span>
{% endif %}

Объяснение.
Этот метод предполагает добавление визуально привлекательного значка, обозначающего скидку. Используя CSS, вы можете стилизовать значок, чтобы привлечь внимание покупателя. Приведенный выше код вычисляет процент скидки и отображает его в элементе <span>с именем класса «discount-badge». К этому классу можно применить стили CSS, чтобы настроить внешний вид значка.

Применяя эти методы, вы можете эффективно демонстрировать процентные скидки и экономию в своем магазине Shopify. Размещение скидок на видном месте в списках продуктов и на страницах, а также использование привлекающих внимание значков поможет привлечь клиентов и повысить конверсию. Поэкспериментируйте с этими приемами, чтобы найти наиболее визуально привлекательный и информативный способ подчеркнуть свои скидки.

Не забывайте регулярно тестировать и оптимизировать свои стратегии скидок, чтобы убедиться, что они соответствуют вашим бизнес-целям и находят отклик у вашей целевой аудитории.