Как перенести описание товара в Shopify?

Перенос описания товара может стать неплохим решением кастомизации вашего магазина. Например, если вы не хотите чтобы в правой колонке было много контента.
В этой статье мы перенесём описание под товар, конечный итог будет выглядеть вот так:
Как вы можете заметить, описание находится под товаром, что позволяет справа разместить больше контента, например, Upsell блок для отображения похожих товаров.
Что такое Upsell?
Upsell (продажа дополнительных товаров или услуг) – это маркетинговая стратегия, при которой продавец предлагает покупателю более дорогой продукт, улучшение или дополнение к тому, что уже выбрано или куплено клиентом. Цель этой стратегии – увеличить среднюю стоимость покупки, предлагая покупателям более высококлассные или дополнительные товары или услуги.
Удаляем блок с описанием
Для начала нужно удалить блок с описанием который у нас изначально есть в секцие с товаром. На скриншоте ниже я скрыл этот блок:
Добавляем секцию Rich Text
Она нам понадобится чтобы динамически отображать текст формата:
[НАЗВАНИЕ ПРОДУКТА] - Description
Это позволит не создавать секцию под каждый товар. В данной секцие мы будем подставлять название продукта, а Description будет статическим значением.
Выводить описание вместе с этой секцией необязательно. Если вы не желаете делать таким образом, то переходите дальше.
Добавляем секцию Custom Liquid
Следующий шаг – добавить новую секцию под названием Custom Liquid. Эта секция позволяет вставлять liquid код. Она нам нужна чтобы отобразить описание.
Что такое liquid?
Liquid – это шаблонизатор, который используется для создания динамических веб-страниц. Разработан компанией Shopify и в основном используется в их электронной коммерческой платформе.
Основная цель Liquid заключается в обеспечении гибкости и удобства для разработчиков при создании настраиваемых шаблонов, которые могут отображать различный контент в зависимости от контекста или данных пользователя.
Отображение описания товара
Для отображения товара мы будем использовать следующий кусок кода:
<div class="page-width">{{ product.description }}</div>
Так как в примере используете тема Dawn, блок описания оборачивается в контейнер с классом page-width.
Такой класс есть также у тем: Ride, Refresh, Sense, Origin, Craft, Taste, Studio, Crave, Publisher, Colorblock.
Это нужно для того чтобы описание не “прилепало” к границам устройства. Если вы используете другую тему, у вас класс, отвечающий за ограничение ширины блока, может быть иной.
Также, могут быть случаи, когда оборачивать описание в контейнер может быть необязательно, в таком случае отображение описания будет выглядеть вот так:
{{ product.description }}
Заключение
Теперь вы умеете отображать описание товара под товаром. В этой статье мы рассмотрели один из многих вариантов иного от шаблонного отображения описания.
Статья была полезна?
Если статья была полезна или вам понравилась - поделитесь с друзьями! На этом сайте нет рекламы и он ведётся на энтузиазме, любое упоминание повышает шанс на улыбку у автора.