Как добавить товар на сайт
С помощью виджета Товар вы можете представить свои товары и услуги на сайте онлайн-магазина, которые пользователи смогут добавлять в корзину и оплачивать. В карточке товара можно добавлять описание, характеристики, варианты, цену, а в настройках элемента — стилизовать карточку и кнопку добавления товара в корзину.
Рассмотрим, как добавить и настроить карточку товара.
Добавьте виджет
Перейдите в конструктор страницы, где вы будете добавлять карточки товара. В нужном месте страницы нажмите Добавить виджет (Add Widget) и выберите Товар (Product).
Добавьте товар
В панели виджета Товар, которая открылась, нажмите Добавить товар. Введите информацию о товаре:
| Название (Name) | Введите название товара до 250 символов, включая буквы и цифры.
Рекомендуем указывать название с учетом размера карточки товара, чтобы его можно было легко прочитать. |
| Краткое описание (Short description) | Введите основное описание продукта. Например, в описании вы можете указать основные свойства, особенности и сферу применения. |
| Полное описание (Full description) | Введите дополнительную информацию о товаре, отображаемом под галереей картинок. Например, вы можете указать условия использования и хранения. |
Разделяйте текст на короткие абзацы, добавляйте списки и выделяйте важные моменты – клиентам будет легче воспринимать информацию. Для форматирования текста описания выделите текст и выберите форматирование. Вы также можете добавить свои стили через исходный код.
Добавьте изображение товара
Для показа галереи картинок товара нажмите + Добавить изображения (+ Add images) и выберите изображение из менеджера файлов или загрузите новое.
Рекомендуем добавлять картинки с разных ракурсов, чтобы можно было подробно рассмотреть товар. Для правильного отображения следует загружать изображения одинаковых пропорций.
Добавьте характеристики товара
В блоке Характеристики (Properties) можно добавить нужные свойства товаров. Для каждого поля заполните информацию:
| Название группы атрибутов (Attribute set name) | Имя раздела с параметрами. Используйте для разделения характеристик различных типов или секций.
Чтобы добавить новый раздел с параметрами, нажмите + Добавить раздел (+ Add attribute set) |
| Атрибут (Attribute) | Название свойства. Например «Материал», «Цвет», «Размер» |
| Значение (Value) | Значение свойства. Например «Синий», «Зеленый» |
Для добавления нового свойства товара нажмите + Добавить атрибут (+ Add attribute).
Выберите тип продукта
К своему интернет-магазину вы можете добавить разные по типу товары:
| Физический товар (Physical product) | Товары, имеющие материальную форму и требующие доставки покупателю. Например, ювелирные украшения, техника, бумажные книги и т.д. |
| Цифровой товар (Digital product) | Нематериальные товары доступные в электронном виде. Например, ссылка на файл с электронной книгой, запись вебинара и т.д.
Укажите ссылку на продукт. После оплаты клиент получит письмо со ссылкой на товар на указанный email адрес. Для цифровых товаров количество не отображается. Пользователь сможет приобрести только один товар. |
Укажите артикул, остаток и стоимость
В поле Артикул (SKU) введите уникальный код продукта, помогающий отслеживать товар. В коде можно использовать цифры и буквы.
В поле Остаток (Stock) укажите количество товаров в наличии. После каждой покупки цифра будет уменьшаться. Если оставить поле пустым, количество товара будет неограниченным. Если поставить 0, то пользователь не сможет положить товар в корзину.
В поле Стоимость (Price) укажите цену за товар. В поле Старая стоимость (Old price) можно указать предварительную цену, если она была выше, чтобы продемонстрировать скидку. Если оставить поле пустым, то на сайте отображается только актуальная стоимость.
Валюту магазина выберите в Настройка сайта > Интернет-магазин, а метод оплаты - на странице настройки корзины.
Добавьте варианты товара
Также можно добавить варианты товара и настроить показ информации отдельно для каждого из них. Например, если ваши товары отличаются по цвету, размеру, материалу и т.п., посетитель сайта сможет выбрать нужный ему вариант из раскрывающегося списка.
В секции Варианты (Options) нажмите + Добавить атрибут (Add attribute). В первом поле введите название параметра, а в следующем перечислите все значения вариантов через запятую.
Если у вас несколько характеристик товаров с вариантами, то на каждую пару будет создана новая запись. Созданные варианты товаров можно просмотреть внизу окна.
Чтобы настроить каждый вариант, в соответствующей колонке добавьте артикул, загрузите превью товара и укажите стоимость и количество. Если не указывать отдельное значение, подставится общая информация из заполненных полей выше.
Чтобы скрыть или показать вариант товара, нажмите значок слева.
Когда вы заполните поля карточки товара, нажмите Сохранить (Save).
После добавления товара вам отобразятся настройки карточки. Чтобы изменить данные товара, нажмите на значок карандаша напротив карточки.
Настройте внешний вид карточки
В поле Тип карточки (Card type) выберите, как отображать товар:
| Страница (Page) | Отображается в виде карточки со всей информацией о товаре. |
| Попап (Pop-up) | Отображается в виде маленькой карточки с изображением, названием, кратким описанием и ценой товара.
После нажатия Показать больше откроется модальное окно, в котором посетитель сайта сможет увидеть всю информацию о товаре и добавить его в корзину. Вы также можете настроить стиль модального окна отдельно от стиля карточки на странице. Для этого нажмите кнопку Настройка под тип карточки. Этот тип отображения особенно подходит для случаев, когда нужно расположить несколько карточек в строке. |
Экспериментируйте с визуальными элементами и настройками карточки товара. Например, можете протестировать различные стили карточек и проанализировать, какой из них лучше конвертирует.
В секции Внешний вид карточки (Card style) выберите стиль размещения информации на карточке.
Чтобы перейти к подробным параметрам внешнего вида карточки на странице, нажмите Настроить (Customize) и измените настройки стилей:
| Общие | Относятся к стилю блока с карточкой. Выберите цвет фона, скругления, отступы. |
| Галерея | Относятся к стилю отображения картинок. Выберите пропорции, округления, показ изображения по нажатию.
Рекомендуем выбрать такие же пропорции, как у ваших картинок. |
| Типография | Относятся к стилю текста в карточке. Выберите размер, формат и цвет текста для названия, описания, стоимости и старой стоимости. |
| Счетчик количества товаров | Относятся к стилю счетчика, благодаря которому посетитель сайта может выбрать, сколько товаров положить в корзину. Выберите внешний вид поля, цвета, округления и размера. |
Чтобы настроить кнопку добавления товара в корзину, вернитесь к настройке товара и в секции Кнопка нажмите на карандаш. В поле Текст введите текст кнопки, а в поле Стиль выберите размер и стиль кнопки: Основной и Вторичный наследуются из общего стиля страниц, а для Настроенный вы можете выбрать цвет текста, фона, настроить контур и эффект при наведении.
После редактирования страницы с товарами нажмите Опубликовать (Publish).
Обновлено: 23.10.2024
или