Как добавить слайдеры в свой магазин Shopify и максимально использовать их (+ советы владельцев бизнеса)

Больше больше . По крайней мере, когда речь идет о покупателях электронной коммерции.

Клиенты хотят читать обзоры, рассматривать товары со всех возможных ракурсов и узнавать о новых скидках и предложениях, прежде чем они даже подумают о том, чтобы нажать кнопку «Добавить в корзину».

Но если вы втиснете всю эту информацию на свой веб-сайт, вы рискуете перегрузить их. Вот почему ползунки так удобны — вы можете использовать триггеры конверсии, не создавая длинную страницу, утопающую в изображениях и копиях.

Что такое слайдеры на Shopify?

Слайдер — это, по сути, слайд-шоу в вашем магазине Shopify. Он может быть автоматизированным (он начинает воспроизводиться автоматически на основе набора правил) или ручным (перемещается только тогда, когда пользователи нажимают на него).

Вот некоторые из самых популярных видов слайдеров с примерами:

• Слайдер отзывов — карусель отзывов клиентов и изображений обеспечивает отличное социальное доказательство.

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

Laird Superfood также использует слайдер отзывов на главной странице, чтобы показать лучшие отзывы клиентов.

• Слайдер с логотипом . Для компаний B2B демонстрация компаний, с которыми они работают, посылает правильные сигналы потенциальным покупателям.

Beauty Solutions использует слайдер с логотипом вручную внизу своей домашней страницы, чтобы сообщать имена клиентов, которым они поставляют товары.

• Слайдер изображений продуктов — покажите свои продукты со всех сторон и напишите лучшие атрибуты продуктов в качестве подписей к этим изображениям.

На бордшортах CriticalSlide есть ползунок с изображением продукта, который можно вручную настроить на странице продукта. Стволы показаны спереди, сбоку и сзади. Также можно увидеть несколько фотографий материала и дизайна крупным планом, а также изображение модели, которая носит его.

• Слайдер популярных продуктов . Слишком большой выбор может ошеломить клиентов. Покажите им, что популярно среди других клиентов, и вам будет проще принять решение.

Proper демонстрирует свои самые популярные продукты в этой ручной карусели «Купите наши образы в Instagram». На каждом слайде представлен товар с информацией о цене и ссылкой на него на сайте.

eFashion Paris использует ручной слайдер для демонстрации новинок и бестселлеров и публикует ссылки на соответствующие категории.

• Ползунок баннеров — делитесь скидками, предложениями или новыми продуктами в этих баннерах.

49th Parallel использует этот слайдер баннеров с двумя слайдами на своей домашней странице, чтобы привлечь внимание к

• самые продаваемые фильтры для кофе и
• история фасоли, полученной из экологически чистых источников.

Ручной слайдер баннеров Beard & Blade содержит ссылки на самые продаваемые продукты и побуждает посетителей читать блог.

Как добавить слайдеры в ваш магазин Shopify

В зависимости от приложения Shopify, которое вы хотите установить, точные шаги по добавлению ползунков в ваш магазин могут отличаться, но вот краткое и базовое руководство:

Шаг 1: Дублируйте живую тему

Войдите в свой магазин Shopify. Перейдите в Интернет-магазин -> Темы.

Рядом с живой темой нажмите кнопку «Действия» и выберите «Дублировать». Это создаст резервную копию вашей темы Shopify на случай, если вы совершите ошибку, которая может негативно повлиять на ваш магазин.

Шаг 2: Добавьте пользовательский раздел слайдера в магазин Shopify.

Приложение Shopify Slider, которое вы устанавливаете, может потребовать вставки пользовательского кода на ваш сайт. Для этого рядом с Live Theme нажмите кнопку «Действия» и выберите «Редактировать код».

Далее разверните категорию «Разделы» и нажмите «Добавить новый раздел».

Дайте вашему слайдеру имя и нажмите «Создать раздел», и вы сможете вставить пользовательский код.

Шаг 3: Перейдите в файл theme.liquid.

Прокрутите вверх, чтобы нажать на theme.liquid. Возможно, вам придется вставить сюда дополнительный код.

Шаг 4: Настройте слайдеры

Вернитесь к темам и нажмите «Настроить» рядом с живой темой.

Найдите созданный вами раздел, и теперь вы можете настроить ползунки в своем магазине Shopify. Если вы установили приложение для слайдера изображений, все, что вам нужно сделать на этом этапе, — это выбрать коллекцию, которую вы хотите использовать.

Если вы предпочитаете видеоуроки, посмотрите это видео от EcomExperts, где они объясняют, как добавить слайдер избранного продукта в ваш магазин Shopify.

Лучшие приложения Shopify Slider в 2022 году: основные функции, отзывы пользователей

№1. Карусель слайдера изображений продукта от POWR.io

Цена : бесплатно — 89,99 долларов в месяц.

Рейтинг : 4.2/5 (243 отзыва)

Это приложение позволяет создавать слайдеры и карусели продуктов с подписями, текстом, кнопками, видео, рамками и защитой от копирования.

Ключевая особенность:

• Различные стили перехода слайдера на выбор
• Выберите между слайдером или каруселью
• Гибко настраиваемый дизайн
• Мобильный ответ на любом устройстве
• Поддерживает текст на всех языках

Положительный отзыв

Критический обзор

№ 2. Слайдер баннеров от Secomapp

Цена : бесплатно — 39,99 долларов в месяц.

Рейтинг : 4,5/5 (152 отзыва)

Хотя приложение называется слайдером баннеров, вы можете создавать различные типы настраиваемых слайдеров с помощью кода. Banner Slider прост в установке и настройке, а также предлагает удобное внутреннее управление.

Ключевая особенность:

• Создайте более 40 различных типов слайдеров
• Добавьте видео в слайдер
• Встроенный код для отображения слайдера в интерфейсе
• Предварительный просмотр слайдера перед публикацией
• Функция массовой загрузки
• Установите дату начала и окончания для баннера
• Поддерживает режим полной ширины

Положительный отзыв

Критический обзор

№3. Огромный слайдер изображений

Цена : бесплатно — 16,99 долларов в месяц.

Рейтинг : 4.9/5 (116 отзывов)

Это приложение позволяет создавать слайдеры баннеров, слайдеры изображений, карусели и логотипы с текстом и комментариями к вашим изображениям, а также добавлять ссылку на каждое изображение на слайдере.

Ключевая особенность:

• Мобильный отзывчивый
• Управляйте скоростью слайдера
• Загружайте сразу несколько фотографий
• Добавьте текст и ссылки

Положительный отзыв

Критический обзор

№ 4. Мастер-слайдер – слайдер изображений

Цены : Бесплатно

Рейтинг : 3,8/5 (73 отзыва)

Это бесплатное приложение позволяет создавать неограниченное количество настраиваемых слайдеров без каких-либо знаний в области программирования. Вы можете использовать один из 5 шаблонов или начать с нуля.

Ключевая особенность:

• Поддерживает альтернативный текст изображения
• Неограниченное количество слоев
• Адаптивный слайдер для любого устройства
• Добавьте кнопки наложения, пользовательский HTML и текст
• Запланируйте дату начала и окончания слайдера
• Выберите между слайдером или каруселью

Положительный отзыв

Критический обзор

№ 5. Слайд-шоу отзывов клиентов от POWR.io

Цена : бесплатно — 89,99 долларов в месяц.

Рейтинг : 2,7/5 (35 отзывов)

Это простое в использовании приложение позволяет демонстрировать отзывы клиентов, обзоры, фотографии, описания и видео.

Ключевая особенность:

• Автовоспроизведение видео-отзывов
• Выделите свои лучшие обзоры продуктов
• Управление циклом, переходом между слайдами, скоростью и автоматическим слайдом
• Гибко настраиваемый дизайн
• Мобильный ответ на любом устройстве
• Поддерживает текст на всех языках

Положительный отзыв

Критический обзор

№ 6. Ada IQ: Галерея слайдеров изображений

Цена : 2,99 рубля в месяц (10 дней бесплатного пробного периода)

Рейтинг : 5/5 (23 отзыва)

Это приложение для слайдера изображений Shopify без кода позволяет создавать неограниченное количество слайдеров и слайд-шоу для демонстрации ваших самых продаваемых продуктов.

Ключевая особенность:

• Простая настройка
• Добавьте одно и то же слайд-шоу на несколько целевых страниц
• Будущие обновления и новые функции
• Свяжите изображения с любой страницей в вашем магазине

Положительный отзыв

Критический обзор

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

№ 7. Многостраничный адаптивный слайдер

Цена : 4,99 рубля в месяц (бесплатная пробная версия на 7 дней).

Рейтинг : 4.2/5 (8 отзывов)

Это простое в использовании приложение позволяет создавать горизонтальные или вертикальные ползунки с различным дизайном и добавлять несколько слайдеров на одну страницу.

Ключевая особенность:

• Мобильный ответ на любом устройстве
• Автоматически генерирует шорткоды для вставки на любую страницу
• Удобный поиск и фильтрация категорий и элементов
• Создавайте слайдеры с кнопками, цифрами и миниатюрами

Положительный отзыв

Критический обзор

Критических отзывов о приложении пока нет.

№8. Слайдер Революция

Цена : 6,99–89 долларов в месяц (бесплатная пробная версия на 7 дней).

Рейтинг : 4.9/5 (44 отзыва)

Это приложение позволяет вам создавать все виды слайдеров и транслировать контент социальных сетей, полностью адаптивный и настраиваемый.

Ключевая особенность:

• Социальный контент Steam из Facebook, Twitter, Flickr и Instagram
• Загрузить видео с YouTube или Vimeo
• Полный контроль над стилями, переходами и анимацией
• Оптимизирован для всех устройств
• Полная ширина, полноэкранный режим, автоматически реагирующий размер слайдера
• WYSIWYG Редактор перетаскивания

Положительный отзыв

Критический обзор

Слайдеры и карусели: что нужно знать?

Слайдеры и карусели — это, по сути, одно и то же, за исключением одного отличия — карусели показывают много слайдов одновременно.

Вы можете использовать карусели, чтобы показывать клиентам логотипы, отзывы или самые продаваемые продукты.

Когда использовать карусели

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

Вот некоторые правила, о которых следует помнить:

Не

• Не используйте карусель в главном разделе главной страницы, потому что это может запутать посетителей.
• Не сообщайте пользователям информацию, которая не приносит им пользы, только компании.
• Не позволяйте ему стать местом для сброса контента. Если вы не можете оправдать его использование, не используйте его.

Что делать:

• Используйте карусель, когда люди ожидают этого. Например, чтобы показать отзывы клиентов, самые продаваемые товары или новые поступления.
• Используйте карусель, если она экономит время, усилия и количество кликов.
• Используйте его для сравнения двух разных продуктов.

Рекомендации по использованию каруселей

• Используйте ручную карусель, чтобы пользователи могли контролировать
• Используйте стрелки или точечную навигацию, чтобы пользователи могли перемещаться
• Текст в этих каруселях должен быть коротким и четким.
• Убедитесь, что карусель можно прокручивать таким же образом на мобильных устройствах.

Оптимизация слайдеров в вашем магазине Shopify: (+ плюсы, минусы и выводы от владельцев бизнеса)

Мы попросили нескольких владельцев бизнеса поделиться своим личным опытом использования слайдеров и узнать, полезны они или нет.

Слайдеры работают?

Давайте сначала рассмотрим слайдеры с двух точек зрения: производительность и убедительность.

• Производительность : могут ли боты сканировать слайдеры и понимать их? Действительно ли они замедляют работу сайтов?
  
  Да и нет. Боты могут сканировать слайдеры, поэтому важно, чтобы они были оптимизированы для SEO, и не все устанавливаемые вами приложения для слайдеров оказывают огромное влияние на скорость сайта.
• Убедительность: помогают ли слайдеры убедить людей совершить покупку?
  
  Лучший способ узнать наверняка, работают ли они на вас, — это провести их A/B-тестирование. Сначала протестируйте две версии — одну с ползунком и одну без него.

Замена ползунка статичным рекламным изображением самого продаваемого продукта и кнопок с состояниями наведения повысила конверсию на 30% (при статистической значимости 98%).

Этот тест сделал то, что я ожидал, но ключ здесь в том, чтобы получить более прямые доказательства, которые помогут увести этого клиента и других от слайдеров на их домашней странице. Я не единственный, у кого был такой опыт, и я читал множество тематических исследований с аналогичными результатами.

Проблема в том, что люди воспринимают слайдеры как рекламу, поэтому они не взаимодействуют с ними, особенно если нет способов удобной навигации по слайдеру или если навигация спрятана.

Вывод : удалите ползунки в ключевой области продвижения главной страницы и предложите клиентам использовать их, чтобы вместо этого рассказать свою историю или продвигать пользующиеся спросом продукты или ключевые услуги. Еще один важный вывод из этого опыта заключается в том, что A/B-тестирование чего-то гораздо более привлекательно для клиентов, чем обсуждение «лучшей практики» или поощрение идей, основанных на других вещах, которые я читал.

Тим Браун, 5 A/B-тестов, которые изменили мой подход к разработке веб-сайтов

Что владельцы бизнеса говорят о слайдерах?

Недавно я добавил слайдер изображений в свой магазин Shopify и очень доволен результатами. Слайдеры изображений — отличный способ продемонстрировать товары, выделить специальные предложения и добавить визуального интереса к вашему магазину.

  Люк Ли, соучредитель, everwallpaper.co.uk

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

Бурак Оздемир, основатель setalarmonline.com

Да, слайдеры изображений работают — в определенной степени. Слайдеры изображений работают лучше всего, когда есть большой каталог товаров, и вы показываете несколько вариантов одной и той же модели на странице.

Теола Тинни, соучредитель VinPit

На протяжении многих лет я тестировал различные типы слайдеров на своих клиентах Shopify. Мы обнаружили, что самые эффективные ползунки дают некий намек на то, что есть еще на что посмотреть. В частности, один клиент добился очень хороших результатов, поместив «Сделка № 1 из 3» в свой первый слайдер, а затем, конечно, слайд № 2 и слайдер № 3 с еще большим количеством сделок.

Джефф Мориарти, ниндзя цифрового маркетинга в JMoriarty Marketing

Могут ли слайдеры иметь неприятные последствия?

Да, ползунки могут иметь неприятные последствия, и вот что владельцы бизнеса хотят, чтобы вы знали:

Я не рекомендую использовать какие-либо слайдеры изображений или карусели в вашем магазине Shopify. Они вызывают путаницу и могут ошеломить посетителей, которые приходят в ваш магазин. К тому времени, как они зарегистрировали одно изображение, оно уже перешло к следующему. Кроме того, предоставление покупателям слишком большого количества вариантов может отвлечь их от основной причины, по которой они пришли в ваш магазин. Дайте своим посетителям прямой путь к цели, не отвлекаясь. Опционы обычно являются побочным продуктом плохой стратегии.

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

Эмили Амор, SEO-менеджер, Digital Darts

Пользователи, как правило, не взаимодействуют со скользящими изображениями и часто игнорируют их, считая их рекламой. Слайдеры, кажется, обещают возможность доставки нескольких сообщений на одной странице, но я почти всегда обнаруживал, что сосредоточение внимания на одном сообщении и призыве к действию (CTA) гораздо эффективнее.

Дин Каплан, https://www.kaplancollectionagency.com

Худшая проблема со слайдером, с которой я столкнулся у одного из моих клиентов, — это когда они не сжимали изображения и загружали слайдеры размером более 50 МБ каждый. Их почти никто не видел, потому что они не загружались к тому моменту, когда посетитель либо прокручивал вниз, либо переходил на другую веб-страницу. Фу!

Джефф Мориарти, ниндзя цифрового маркетинга в JMoriarty Marketing

Рекомендации по оптимизации слайдеров

Вот что вы должны знать при использовании слайдеров:

• Убедитесь, что ваш слайдер загружается быстро
  
  Высококачественные изображения также обычно представляют собой большие файлы, которые могут замедлить работу слайдера. Убедитесь, что вы выбрали правильный размер изображений в зависимости от размера слайдера.
  
  После определенного момента пользователи не смогут заметить разницу в качестве изображения, поэтому не бойтесь сжимать файлы. Вы также можете отложить загрузку слайдера и уменьшить количество стилей и шрифтов, чтобы это не замедляло время загрузки.
• Сначала покажите самый важный слайд
  
  Какова основная причина, по которой люди должны покупать у вас? Используйте свое УТП, чтобы привлечь посетителей к слайдеру, чтобы они были более склонны прокручивать содержимое.
• Используйте привлекательный текст на всех слайдах
  
  Все ваши слайды — это возможность привлечь посетителей и использовать различные способы продажи для их конвертации. Добавьте заголовки с описанием преимуществ и недостатков, а также призывы к действию.
• Иметь менее 5 слайдов
  
  Но не переусердствуйте со слайдами. Вы не хотите перегружать посетителей слишком большим выбором и не совершать покупки из-за паралича анализа. Будьте преднамеренными со своим ползунком и четко объясните, ПОЧЕМУ вы включили его в первую очередь.
• Установите медленное время вращения
  
  Дайте потенциальным клиентам достаточно времени, чтобы переварить ваш контент. Слишком быстро, и они пропустят контент, и им придется ждать, пока слайд снова не появится. Слишком медленно, и они будут мучиться, ожидая появления следующего слайда. Rich Page предлагает установить время вращения 3 секунды.
• Автоповорот ваших слайдов
  
  Даже если вы используете автоматический слайдер, вы не можете быть уверены, что посетители будут терпеливо ждать, пока все слайд-шоу прокрутится. Дайте посетителям возможность перемещаться по слайдеру с помощью стрелок или точечной навигации.
• Используйте асимметричный макет для каруселей
  
  Если вы рассматриваете карусель, попробуйте использовать асимметричный макет для ваших изображений. Airbnb и Booking.com использовали A/B-тестирование и пришли к почти одинаковым макетам изображений — одно большое «характерное» изображение с меньшими изображениями (почти как миниатюры) вокруг них.

Как владельцы бизнеса оптимально используют слайдеры?

Во-первых, убедитесь, что изображения, которые вы используете, имеют высокое качество и правильный размер. Размытые или пиксельные изображения ухудшат профессиональный вид вашего магазина. Во-вторых, не используйте слишком много слайдов — обычно трех или четырех достаточно. Слишком большое количество слайдов может утомить посетителей и затруднить поиск нужной информации. Наконец, убедитесь, что ползунок находится в хорошо видимой области страницы — желательно вверху.

Люк Ли, соучредитель, everwallpaper.co.uk

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

Кроме того, вы должны убедиться, что ваш слайдер прост в навигации, с четкими кнопками «Далее» и «Назад», чтобы пользователи могли легко перемещаться по вашим предложениям. Наконец, может быть полезно включить соответствующий текст вместе с каждым изображением, чтобы помочь читателям понять, о чем каждое изображение.

Бурак Оздемир, основатель setalarmonline.com

Если используются ползунки, они должны быть статичными. Автоматические ползунки, которые меняют изображения каждые несколько секунд, часто перемещаются слишком быстро для одних пользователей и слишком медленно для других. Гораздо лучше иметь статические ползунки с понятными кнопками навигации, чтобы пользователь всегда контролировал ситуацию.

Дин Каплан, https://www.kaplancollectionagency.com

Клиенты предпочитают смотреть на изображения, а не читать тексты. Сделайте свой слайдер привлекательным для аудитории, предоставив им привлекательные изображения, а не длинные тексты.

Уилл Кэннон, основатель Signaturely

Скольжение на пути к победе: A/B-тестирование ваших ползунков

Слайдеры — спорная идея по уважительной причине. Слепое подражание лучшим практикам ваших конкурентов или отрасли может иметь противоположный эффект. Посетители могут раздражаться, уходить со страницы, а коэффициент конверсии может снизиться.

A/B-тестируйте свои ползунки, чтобы у вас были данные, подтверждающие ваши решения, и структура для тестирования новых изменений для повышения конверсии.

Рич Пейдж, эксперт по конверсии, делится несколькими идеями A/B, которые вы можете использовать:

• Протестируйте наличие одного изображения в сравнении с чередующимися слайдами
• Протестируйте с помощью объяснительного видео и слайдов
• Проверьте высоту и ширину слайдера
• Показывайте слайдеры нужной целевой аудитории
• Попробуйте добавить социальное доказательство разными способами.

Независимо от того, какие гипотезы вы хотите проверить, простая в использовании платформа для A/B-тестирования Convert поможет вам. Попробуйте бесплатно в течение 15 дней.