Перший екран магазину продає не гірше за товари, але зазвичай його правлять через верстку. Плагін віддає банери вам: завантажили картинку, написали заголовок, вказали, куди веде перехід, — і слайдер готовий. Ставиться він за ім’ям, тож ту саму карусель можна показати на головній, у картці товару чи в кошику.

Що робить

• Збирає набори слайдів: картинка, заголовок, опис, напис на кнопці й адреса переходу. Посилання можна відкривати в новій вкладці.
• Бере окрему картинку для телефона: широкий банер на вузькому екрані або обрізається по краях, або дрібнішає до нечитабельного. Не завантажите — покажеться основна.
• Гасить і вмикає слайди за строком: у кожного свої дати показу, тож банер акції з’являється та зникає сам, без вашої участі.
• Дає три готові види — банер на всю ширину, стрічка карток і стрічка логотипів — та налаштування до них: скільки слайдів видно на телефоні, планшеті й комп’ютері, проміжок, висота, автопрокручування із затримкою, показ по колу, швидкість, стрілки й крапки.
• Перекладає весь текст слайда мовами магазину: заголовок, опис, напис на кнопці та підписи до картинки, які читають пошукові системи й незрячі покупці.
• Обмежує слайдер окремими вітринами або показує його на всіх.
• Порядок слайдів задається перетягуванням, будь-який слайд можна тимчасово вимкнути.
• Вигляд каруселі правиться в редакторі оформлення: розмітка та стилі кладуться у вашу тему, оновлення плагіна їх не чіпає.

Що потрібно для роботи

• Поставити слайдер в оформлення: у розділі «Слайдери» для кожного набору показано готовий рядок для вставляння.
• Більше нічого: карусель плагін приносить із собою, а якщо вона вже є у вашій темі — бере її й не вантажить удруге.

Слайдеры и баннеры

Рекламные баннеры и карусели, которые вы собираете сами, без вёрстки: загрузили картинку, написали заголовок, указали, куда ведёт переход.

Как вывести слайдер в магазине

1. Откройте раздел «Слайдеры» и создайте набор. Кроме названия у него есть имя для вставки — короткая строка латиницей, например home-hero. Она подставляется сама из названия, но её можно поменять.

2. Там же, в поле «Как поставить в магазин», показана готовая строка:

   {slider id="home-hero"}
   

3. Скопируйте её и вставьте в оформлении магазина там, где слайдер должен появиться: «Дизайн» → редактор оформления, нужный шаблон. Чаще всего это главная страница (home.html), но подойдёт любое место — карточка товара, корзина, подвал.

4. Сохраните шаблон и обновите страницу магазина.

Один и тот же слайдер можно поставить в нескольких местах — он везде покажет одни и те же слайды.

Если нужна своя вёрстка

Второй способ отдаёт слайды данными, а разметку вы пишете сами:

{slider_data id="home-hero" assign=hero}

{foreach $hero.slides as $s}
    <a href="{$s.url}">
        <img src="{$s.image}" alt="{$s.alt}">
        <span>{$s.title}</span>
    </a>
{/foreach}

В каждом слайде есть: url, blank, title, description, button, image, image_mobile, alt, image_title. Готовая карусель в этом случае не подключается — оформление целиком за вами.

Что настраивается у слайдера

• Вид: баннер во всю ширину, лента карточек или лента логотипов.
• Сколько слайдов видно — отдельно на телефоне, планшете и компьютере. Дробное значение (например 1,5) оставляет следующий слайд выглядывать за край, и покупателю сразу понятно, что ленту можно листать.
• Промежуток между слайдами, высота, автопрокрутка с задержкой, показ по кругу, скорость, стрелки и точки.
• Витрины: слайдер можно ограничить отдельными витринами или показывать на всех.

Что настраивается у слайда

• Две картинки — для компьютера и для телефона. Широкий баннер на узком экране либо обрезается по краям, либо мельчает до нечитаемого, поэтому мобильная версия задаётся отдельно. Не загрузите — покажется основная.
• Заголовок, описание, надпись на кнопке и адрес перехода (можно открывать в новой вкладке).
• Описание картинки и подсказка при наведении — их читают поисковые системы и незрячие покупатели.
• Срок показа: «показывать с» и «показывать по». Баннер акции появится и погаснет сам, без вашего участия.
• Порядок слайдов задаётся перетаскиванием, любой слайд можно временно выключить.

Весь текст слайда переводится на языки магазина. Адрес перехода один на все языки — как и адреса страниц магазина.

Как поменять вид карусели

Разметка и оформление слайдера кладутся в вашу тему при первом показе:

• templates/plugins/sliders/slider.html — разметка;
• assets/plugins/sliders/sliders.css и sliders.js — вид и поведение.

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