Нажмите E-commerce в панели виджетов, чтобы добавить новый виджет. Вы увидите кнопку Cart («Корзина») и всплывающее окно с предложением подключиться к Stripe или Ecwid. Нажмите на нужный переключатель: если он загорелся голубым, значит, соединение успешно установлено. Выберите положение, в котором кнопка корзины должна отображаться в опубликованном проекте.
После этого нажмите на иконку + в атрибутах виджета и выберите товар, который вы хотели бы добавить. Появится кнопка Add to cart («Добавить в корзину»): если нажать на нее в опубликованном проекте, товар, привязанный в кнопке, появится в корзине. Протестировать этот сценарий вы можете в режиме Preview. Если у товара есть атрибуты (цвет, размер и т.д.), они отобразятся над кнопкой Add to cart («Добавить в корзину»).
Если к кнопке Add to cart не привязан ни один товар, она отобразится с двойной обводкой в редакторе и с надписью No product в режиме превью и после публикации.
Загрузите изображение для товара через виджеты Picture или Slideshow и добавьте цену при помощи виджета Text. Карточка товара готова.
Чтобы добавить новый товар, создайте новый виджет E-commerce. Соединение с Ecwid или Stripe будет установлено автоматически.
Изменение настроек корзины и кнопок
Нажмите на иконку Settings («Настройки») в атрибутах виджета, чтобы выбрать настройки цвета, границ, радиуса или шрифта для кнопок Cart и Add to cart. Эти настройки могут быть индивидуальными для каждого типа кнопки. Чтобы настроить внешний вид отдельной кнопки, нажмите на нее и после этого перейдите в Settings («Настройки»).
Если вы хотите, чтобы кнопки менялись при наведении на них курсора, перейдите из вкладки Default во вкладку Hover и выберите нужные вам настройки.
В разделе Icon («Иконка») атрибутов виджета, вы можете выбрать любую из тысяч иконок — она будет отображаться рядом с текстом на кнопке. Вы можете настроить размер иконки и выбрать, с какой стороны относительно текста она будет появляться.
Чтобы изменить дизайн корзины, перейдите в режим Preview («Предпросмотр») и нажмите на иконку шестеренки в правом верхнем углу. Здесь вы можете изменить цвет фона корзины и его прозрачность, настроить шрифт и выбрать, отображать ли корзину с тенью. Также, если вы активируете настройку Auto-open («Автоматическое открытие»), корзина будет открываться автоматически каждый раз, когда ваш покупатель добавляет в нее новый товар.
Если вы используете Ecwid, вы также можете изменить надписи Price («Цена») и Quantity («Количество») в корзине. Для этого перейдите в режиме превью, откройте корзину, кликните на надпись и введите вместо нее нужный текст.