Галереи товаров — отличный способ представить товары, которые вы предлагаете. Вы можете добавить галерею на любую страницу сайта, а затем решить, что в ней показывать: все товары или одну конкретную категорию.
Выберите галерею-сетку (галерею с несколькими рядами) или галерею-слайдер, которую клиенты могут прокручивать.
Настройка галереи-сетки
Настройте галереи-сетки, чтобы создать подходящий стиль для своего магазина.
Чтобы настроить галерею-сетку:
- Перейдите в редакторе на страницу с галереей, которую вы хотите настроить.
- Нажмите на сетку товаров.
- Нажмите Настройки или на иконку Настройки
. - Выберите параметры, которые вы хотите настроить:
Выберите товары для показа
Нажмите на вкладку Рубрика (блог), раздел (форум) , чтобы выбрать категорию товаров, которую вы хотите отобразить.
Совет: по умолчанию в каждой галерее отображается категория «Все товары».
Выберите элементы, которые вы хотите показать
Перейдите на вкладку Показать и установите или снимите флажки, чтобы показать или скрыть элементы галереи, такие как фильтры, ленточки или параметры товара.
Совет: при отображении параметров товара показываются только два из них. Например, если у товара есть параметры цвета, размера и формы, будут показаны только первые два из созданных вами.
Совет: после нажатия кнопки «В корзину» (если она включена) клиенты могут быть перенаправлены либо в окно быстрого просмотра, либо в выдвижную панель, где они могут выбрать все необходимые параметры. Подробнее о
настройке поведения кнопки «В корзину».
Нажмите на вкладку Настройки и настройте доступные параметры товара.
- Параметры товара: Выберите, какие параметры товара будут отображаться.
Совет: Это актуально, если вы включили параметры товара и если у некоторых товаров есть несколько параметров, таких как цвет, размер и форма. - Поведение при прокрутке:
- Выберите, что происходит, когда клиенты прокручивают страницу до конца. Подробнее
- Включите переключатель Закрепленная боковая панель, чтобы фильтры оставались видимыми при прокрутке. Если параметр включен, настройте расстояние боковой панели от верхнего края.
- Эффекты изображения товара: Выберите, что происходит, когда клиент наводит курсор на товар.
Перейдите на вкладку Макет и настройте галерею, используя следующие параметры:
Совет: параметры меняются в зависимости от включенных вами элементов.
- Общие: нажмите переключатель, чтобы растянуть галерею на всю ширину браузера. Если функция включена, установите размер полей (актуально только для редактора Wix, а не для редакторов Studio или Harmony).
Примечание: если функция включена, рекомендуется выбрать Адаптивный в разделе Поведение сетки. - Сетка товаров:
Совет: при настройке «Неизменный» для поведения сетки параметры остаются прежними независимо от размера экрана посетителя. При выборе «Адаптивный» количество строк и столбцов подстраивается под размер экрана, но эта настройка работает только тогда, когда галерея растянута на всю ширину. - Изображения товаров: выберите способ отображения изображений. Подробнее об отображении изображений
- Кнопка «В корзину»: выберите место размещения кнопки.
Примечание: если кнопка размещена на изображении, кнопка быстрого просмотра отображаться не будет. - Панель быстрого добавления: выровняйте и настройте интервалы панели быстрого добавления.
- Инфо о товаре: выберите вариант макета карточки товара и настройте его.
- Параметры товара: используйте переключатели, чтобы отображать только варианты цвета или ограничить варианты цвета и выбрать способ отображения текстовых вариантов.
- Количество: установите ширину селектора количества товара.
- Ленточки: выберите место появления ленточки и настройте отступы.
Перейдите на вкладку Дизайн и настройте галерею, используя следующие параметры:
Совет: параметры меняются в зависимости от включенных вами элементов.
- Общие: выберите фон, который отображается за карточками товаров.
- Фильтры и сортировка: если вы включили фильтры или сортировку, настройте фон и текст.
- Карточки товаров: добавьте фон карточки, границы и настройте радиус скругления углов изображения.
- Информация о товаре: настройте текст галереи.
- Параметры товара: настройте отображение параметров товара в виде цвета и текста.
- Количество: настройте дизайн селектора количества товара.
- Ленточки: выберите форму, цвет и шрифт ленточки.
- Разделитель названия и цены: настройте разделительную линию между названием товара и ценой.
- Кнопка быстрого просмотра: если функция быстрого просмотра включена, настройте дизайн кнопки.
Совет: чтобы настроить само окно быстрого просмотра, перейдите на вкладку быстрого просмотра. - Кнопка «Добавить в корзину»: выберите дизайн для каждого состояния — по умолчанию, при наведении и в неактивном состоянии (например, когда товара нет на складе).
- Панель быстрого добавления: настройте дизайн панели быстрого добавления.
- Кнопки «Показать еще» / «Назад» или пагинация: настройте дизайн кнопки «Показать еще» или пагинации.
Нажмите на вкладку Текст и настройте любой текст, который отображается в сетке товаров.
Настройка поведения кнопки «Добавить в корзину»
Если кнопка еще не включена, нажмите Показать «В корзину», чтобы отобразить ее в галерее.
Наконец, выберите, куда перенаправляются клиенты после нажатия кнопки:
- Показывать всплывающее окно об успехе: появляется всплывающее уведомление.
- Открыть боковую корзину: боковая корзина открывается сбоку экрана.
- Перейти на страницу корзины: клиенты переходят непосредственно на страницу корзины.
- Оставаться на текущей странице: клиенты остаются на той же странице. На кнопке появляется галочка, указывающая на то, что товар был успешно добавлен.
Включение и настройка «Быстрого просмотра»
Быстрый просмотр позволяет клиентам просматривать сведения о товаре во всплывающем окне, не покидая страницу магазина.
Примечания:
- Если вы разместили кнопку «Добавить в корзину» на изображении, кнопка быстрого просмотра не будет отображаться.
- Чтобы увидеть кнопку быстрого просмотра в действии, откройте превью сайта или перейдите на опубликованный сайт.
Чтобы включить или отключить быстрый просмотр:
- Нажмите на вкладку Отображение.
- Установите или снимите флажок рядом с пунктом Кнопка быстрого просмотра.
Дальнейшие шаги:
Настройка галереи-слайдера
Настройте слайдер товаров, чтобы добиться идеального вида. Вы можете персонализировать текст и дизайн галереи, выбрать элементы для отображения (например, кнопку «Добавить в корзину») и многое другое.
Чтобы настроить галерею-слайдер:
- Перейдите в редакторе на страницу с галереей, которую вы хотите настроить.
- Нажмите на слайдер товаров.
- Нажмите Настройки или на иконку Настройки .
- Выберите, что вы хотите сделать:
Выберите товары для показа
Эту галерею можно использовать тремя способами:
- Показ выбранных товаров:
Показывайте определенную категорию или категорию «Все товары».
Например, если вы хотите показать новинки, создайте категорию «Новинки» и добавьте в нее все новые товары. Затем выберите эту категорию из выпадающего списка. - Автоматический показ самых продаваемых товаров:
Выберите этот параметр товара, чтобы автоматически показывать самые популярные позиции. Обратите внимание: если у вас еще недостаточно продаж, чтобы рассчитать, какие товары являются бестселлерами, будут показаны похожие товары или категория «Все товары». - Показ похожих товаров:
Показывайте товары, которыми интересуются клиенты, на основе того, что они просматривают. Вы можете выбрать тип галереи похожих товаров для отображения.
- Из похожих категорий: лучше всего подходит для страницы товара, корзины или страницы благодарности.
- С этим товаром покупают: лучше всего подходит для страницы товара.
- С этим товаром часто смотрят: лучше всего подходит для страницы товара.
Выберите элементы для отображения
Перейдите на вкладку Показать и установите или снимите флажки, чтобы показать или скрыть элементы галереи.
Совет: при отображении параметров товара показываются только два из них. Например, если у товара есть параметры цвета, размера и формы, будут показаны только первые два из созданных вами.
Совет: после нажатия кнопки «В корзину» (если она включена) клиенты могут быть перенаправлены либо в окно быстрого просмотра, либо в выдвижную панель, где они могут выбрать все необходимые параметры. Подробнее о
настройке поведения кнопки «В корзину».
Перейдите на вкладку Настройки и настройте следующие параметры:
- Параметры товара: выберите, какие параметры товара будут отображаться.
Совет: это актуально, если вы включили параметры товара и если у некоторых товаров есть несколько вариантов, таких как цвет, размер и форма. - Поведение слайдера: включите зацикленный повтор, чтобы клиенты могли бесконечно прокручивать товары.
- Эффекты изображений товаров: настройте, что происходит, когда клиент наводит курсор на товар.
Перейдите на вкладку Макет и настройте галерею, используя следующие параметры:
- Общие: нажмите переключатель, чтобы растянуть галерею на всю ширину браузера. Если параметр включен, установите размер полей (актуально только для редактора Wix, а не для редакторов Studio или Harmony).
Примечание: если параметр включен, рекомендуется выбрать Адаптивный в разделе Поведение сетки. - Заголовок галереи: измените выравнивание заголовка
- Сетка товаров:
Совет: при настройке неизменного поведения сетки настройки остаются прежними независимо от размера экрана посетителя. В адаптивном режиме количество колонок подстраивается под размер экрана, но эта настройка работает только тогда, когда галерея растянута на всю ширину. - Изображения товаров: выберите способ отображения изображений. Подробнее об отображении изображений
- Кнопка «В корзину»: выберите место размещения кнопки.
Примечание: если кнопка размещена на изображении, кнопка быстрого просмотра не будет отображаться. - Панель быстрого добавления: выровняйте и настройте интервал панели быстрого добавления.
- Информация о товаре: выберите макет и выравнивание для информации о товаре.
- Параметры товара: нажмите переключатели, чтобы отображать только варианты цвета или ограничить варианты цвета и выбрать способ отображения текстовых вариантов.
- Количество: установите ширину селектора количества товара.
- Ленточки: выберите место появления ленточки и настройте отступы.
- Стрелки навигации: настройте расположение стрелок.
- Точки пагинации: выберите вариант выравнивания и настройте расстояние от галереи.
Перейдите на вкладку Дизайн и настройте галерею, используя следующие параметры:
Совет: параметры меняются в зависимости от функций, которые вы включили на вкладках Настройки и Быстрый просмотр.
- Общие: выберите цвет фона для галереи, шрифт и цвет заголовка.
- Карточки товаров: выберите цвет фона для товаров, добавьте рамку и настройте текст галереи.
- Инфо о товаре: настройте шрифты для отображаемой информации о товаре.
- Параметры товара: настройте отображение параметров цвета и текста.
- Количество: настройте дизайн селектора количества товара.
- Ленточки: выберите форму, цвет и шрифт ленточки.
- Стрелки навигации: настройте дизайн стрелок навигации.
- Точки пагинации: настройте цвет и прозрачность точек пагинации.
- Разделитель названия и цены: настройте линию разделителя между названием товара и ценой.
- Кнопка быстрого просмотра: если функция «Быстрый просмотр» включена, настройте дизайн кнопки.
Совет: чтобы настроить сам Быстрый просмотр, перейдите на вкладку Быстрый просмотр. - Кнопка «В корзину»: выберите дизайн для каждого состояния: по умолчанию, при наведении и в неактивном состоянии (например, когда товара нет на складе).
- Панель быстрого добавления: настройте дизайн панели быстрого добавления.
Нажмите на вкладку Текст и настройте любой текст, который отображается в слайдере товаров.
Настройка поведения кнопки «Добавить в корзину»
Если кнопка еще не включена, нажмите Показать «Добавить в корзину», чтобы она появилась в галерее.
Наконец, выберите, куда перейдет клиент после нажатия кнопки:
- Показать поп-ап об успехе: появляется всплывающее уведомление.
- Открыть боковую корзину: боковая корзина открывается сбоку экрана.
- Перейти на страницу корзины: клиенты переходят прямо на страницу корзины.
- Остаться на текущей странице: клиенты остаются на той же странице. На кнопке появляется галочка, указывающая на то, что товар был успешно добавлен.
Включение и настройка «Быстрого просмотра»
Быстрый просмотр позволяет клиентам просматривать информацию о товаре в поп-апе, не покидая страницу магазина.
Примечания:
- Если вы разместили кнопку «Добавить в корзину» на изображении, кнопка «Быстрый просмотр» не будет отображаться.
- Чтобы увидеть кнопку «Быстрый просмотр» в действии, перейдите в превью или на опубликованный сайт.
Чтобы включить или выключить быстрый просмотр:
- Нажмите на вкладку Показать.
- Установите или снимите флажок рядом с пунктом Кнопка «Быстрый просмотр».
Следующие шаги:
- Чтобы настроить кнопку «Быстрый просмотр», перейдите на вкладку Дизайн.
- Чтобы настроить поп-ап быстрого просмотра, перейдите на вкладку Быстрый просмотр. Подробнее.
Настройка галереи в смартфоне
Убедитесь, что ваши галереи отлично выглядят, когда клиенты просматривают их в смартфоне. Вы можете адаптировать дизайн под небольшие экраны и позволить клиентам быстро добавлять товары в корзину, не уходя из галереи.
- Перейдите в редактор.
- Нажмите на иконку «Перейти в мобильный редактор»
в верхней части редактора. - Перейдите на страницу с сеткой товаров или слайдером товаров, которые вы хотите настроить.
- Нажмите на галерею.
- Нажмите Настройки.
- Настройте галерею, используя доступные параметры.
