Секция До и после накладывает два изображения друг на друга с разделителем. Покупатели перетаскивают разделитель, чтобы видеть больше одного или другого изображения. Используйте ее для результатов (до и после), двух цветов или двух вариантов отделки товара.
Добавьте секцию
- Откройте конструктор и перейдите на нужную страницу. Секция работает на главной странице и на страницах товара, лендинга, коллекции и коллекций, до 3 на страницу.
- На вкладке Секции нажмите Добавить новую секцию и выберите До и после в группе Контент.
- Нажмите на блок До и после внутри нее и выберите два изображения, затем нажмите Опубликовать.
Блок "До и после"
Этот блок содержит два изображения. Он всегда есть в секции, и его нельзя удалить.
- Изображение «до» и Изображение «после»: две картинки. Используйте фото, снятые с одного ракурса, чтобы они совпадали.
- Подпись «до» и Подпись «после»: короткая метка в углу каждого изображения, например "До" и "После" или "Черный" и "Белый". Оставьте пустым, чтобы скрыть метку.
- Направление: Горизонтальный использует разделитель, который покупатели двигают влево и вправо. Вертикальный использует разделитель, который двигают вверх и вниз.
- Пропорции: форма рамки. Авто следует изображению "до", или выберите Портретный, Квадрат или Альбомный. Оба изображения обрезаются под одну рамку.
- Положение разделителя: где разделитель стоит в начале, от 5% до 95%. При 50% покупатели видят половину каждого изображения.
- Показывать подсказку при появлении на экране: разделитель немного двигается сам, чтобы покупатели поняли, что его можно перетаскивать.
- Следовать за мышью на компьютере: на компьютерах разделитель следует за мышью без щелчка. На телефонах покупатели всегда перетаскивают.
- Использовать цветовую схему родителя: разделитель, ручка и метки используют цвета секции. Выключите, чтобы выбрать другую Цветовая схема.
Настройки секции и заголовок
Добавьте до 2 блоков Текст, 1 Разделитель и 1 Группа для заголовка и короткого текста.
- Направление: Вертикальный ставит заголовок над изображениями, Горизонтальный рядом с ними.
- Расположить вертикально на мобильном: включено по умолчанию, чтобы изображения занимали всю ширину телефона.
- Позиция и Выравнивание, Ширина секции, Цветовая схема, Отступы и вкладка Пользовательский CSS.
На странице товара
Такой же блок "До и после" можно поместить в секции информации о товаре и информации лендинга, а также в раскрывающиеся вкладки, чтобы сравнение было рядом с кнопкой покупки. См. Как добавить на страницу товара раскрывающиеся вкладки, даты доставки, таблицу размеров, значки или изображения "до и после"?
Полезно знать
- В работающем магазине сравнение показывается только после выбора обоих изображений. До этого конструктор показывает примеры изображений.
- Покупатели могут двигать разделитель и с клавиатуры.
- Покупатели, включившие на устройстве уменьшение движения, не видят движения подсказки.
- Изображения выглядят обрезанными? Выберите пропорции, ближайшие к вашим фото, или используйте фото одинаковой формы.
- Используйте только настоящие фото настоящих результатов.