The first screen of a shop sells as well as the products do, but usually only a coder can change it. This plugin hands banners over to you: upload an image, write a heading, set where the link goes — and the slider is ready. It is placed by name, so the same carousel can appear on the home page, on a product page or in the cart.

What it does

• Builds sets of slides: image, heading, description, button label and link target. Links can open in a new tab.
• Takes a separate image for phones: a wide banner on a narrow screen either gets cropped or shrinks to nothing. Leave it empty and the main image is used.
• Switches slides on and off by date: each slide has its own display period, so a promo banner appears and disappears on its own.
• Offers three ready looks — full-width banner, row of cards and row of logos — with settings for each: how many slides are visible on a phone, a tablet and a computer, the gap, the height, autoplay with a delay, looping, speed, arrows and dots.
• Translates all slide text into your shop languages: heading, description, button label and the image captions read by search engines and by blind customers.
• Limits a slider to particular storefronts or shows it on all of them.
• Slide order is set by dragging, and any slide can be switched off temporarily.
• The look of the carousel is edited in the design editor: markup and styles are placed into your theme, and plugin updates leave them alone.

What you need

• Place the slider in your design: the «Sliders» section shows a ready-to-paste line for every set.
• Nothing else: the plugin brings the carousel with it, and if your theme already has one it uses that instead of loading a second copy.

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

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

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

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 — вид и поведение.

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