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

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

Опубликовано 3 февраля 2024 г.
3 мин. чтения
Как перенести описание товара в Shopify?

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

В этой статье мы перенесём описание под товар, конечный итог будет выглядеть вот так:

демонстрация переноса товара под карточку на странице продукта в Shopify

Как вы можете заметить, описание находится под товаром, что позволяет справа разместить больше контента, например, Upsell блок для отображения похожих товаров.

Что такое Upsell?

Upsell (продажа дополнительных товаров или услуг) – это маркетинговая стратегия, при которой продавец предлагает покупателю более дорогой продукт, улучшение или дополнение к тому, что уже выбрано или куплено клиентом. Цель этой стратегии – увеличить среднюю стоимость покупки, предлагая покупателям более высококлассные или дополнительные товары или услуги.

Удаляем блок с описанием

Для начала нужно удалить блок с описанием который у нас изначально есть в секцие с товаром. На скриншоте ниже я скрыл этот блок: удаляем или скрываем блок description из секции информации о товаре

Добавляем секцию Rich Text

Она нам понадобится чтобы динамически отображать текст формата:

[НАЗВАНИЕ ПРОДУКТА] - Description

Это позволит не создавать секцию под каждый товар. В данной секцие мы будем подставлять название продукта, а 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 }}

Заключение

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

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

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

0