Как перенести описание товара в 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 }}

#Заключение

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

#Статья была полезна?

Если статья была полезна или вам понравилась - поделитесь с друзьями! На этом сайте нет рекламы и он ведётся на энтузиазме, любое упоминание повышает шанс на улыбку у автора.