--- title: "Как добавить баннер с gif анимацией в Opencart2x?" id: "797" type: "post" slug: "kak-dobavit-banner-s-gif-animaciey-v-opencart2x" published_at: "2019-05-22T15:50:53+00:00" modified_at: "2019-05-22T15:36:03+00:00" url: "https://blog.prodelo.biz/kak-dobavit-banner-s-gif-animaciey-v-opencart2x/" markdown_url: "https://blog.prodelo.biz/kak-dobavit-banner-s-gif-animaciey-v-opencart2x.md" excerpt: "В одной из наших предыдущих статей, мы узнали с Вами как добавить метатэги для страницы Связаться с нами. В этой статье, я расскажу Вам как заставить работать gif анимацию в баннерах Opencart..." taxonomy_category: - "Opencart" - "Лайфхаки" taxonomy_post_tag: - "gif" - "ocstore" - "opencart" - "анимация" - "баннер" --- [Главная](https://blog.prodelo.biz) [Opencart](https://blog.prodelo.biz/category/opencart/) Как добавить баннер с gif анимацией в Opencart2x? ![Image](https://blog.prodelo.biz/wp-content/uploads/2019/05/banner-slider.png)Число просмотров:2 390 В одной из наших предыдущих статей, мы узнали с Вами [как добавить метатэги для страницы Связаться с нами.](https://blog.prodelo.biz/kak-dobavit-metategi-dlya-stranitsy-svyazatsya-s-nami/) В этой статье, я расскажу Вам как заставить работать gif анимацию в баннерах Opencart 2x. Многие начинающие пользователи, при работе с движком Opencart сталкиваются с однотипными проблемами, сегодня я хочу рассказать об одной из таких проблем с которой столкнулся лично. Речь пойдёт об использовании анимированных изображений в известном многим формате gif, в качестве баннеров. Казалось бы что тут сложного? Загрузил gif изображение в разделе **Дизайн-Баннеры** и всё должно работать… но не тут то было! Дело в том что после загрузки файла gif с анимацией, движок Opencart создаёт в своём кэше копию баннера, которую уже выводит на сайт, но эта копия уже не работает как анимация. **Как решить эту проблему? Сделать это довольно просто!** **1 Шаг.** Загружаем **gif изображение** как обычный баннер в разделе **Дизайн-Баннеры**, не забудьте указать Заголовок и ссылку для баннера. [https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_4-2.png](https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_4-2.png) **2 Шаг. Включаем модуль Баннеры** Для этого необходимо зайти в раздел **Дополнения-Дополнения-Модули** [https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_7-1.png](https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_7-1.png) И напротив модуля с нужным названием **Баннер**нажать **кнопку редактирования** [https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_9.png](https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_9.png) Далее необходимо настроить **модуль Баннер** и поставить статус Включено, размеры баннера в настройках должны совпадать с загруженным оригиналом. В поле Баннер вам нужно выбрать тот набор баннеров куда вы загрузили **новое gif изображение** в **разделе Дизайн-Баннеры**в моём случае это Продукция HP. **3 Шаг. Выводим модуль баннеры в Схемах** [https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_10.png](https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_10.png) Переходим в раздел **Дизайн-Схемы(Макеты)** и для нужной схемы, в моём случае это **страница Категории** добавляем вывод баннера в нужной части страницы, я сделал вывод в левой колонке. **4 Шаг. Подключаемся к нашему FTP серверу с [помощью программы FileZilla](https://filezilla.ru/get/) .** Данные для доступа к вашему FTP серверу уточняйте у Вашего хостинга. **Переходим в директорию /image/cache/catalog/banners** Ищем в папке **banners**файл с точно таким же именем как тот который мы загружали в первом шаге. После того как вы его нашли, **необходимо заменить** этот файл на **оригинальный** закачав оригинал через FTP менеджер и заменив уже созданный в кэше файл. В моём случае это файл с именем **adminvps-500×700.gif** [https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_1-2.png](https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_1-2.png) **Важно!!!**Затем необходимо запретить права на запись для этого файла, чтобы движок его в будущем не трогал. Для этого **жмём по нему правой кнопкой мыши** и **выбираем** нижний пункт**Права доступа к файлу** и затем **указываем** числовое значение **444** и жмём **Ок**. [https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_11.png](https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_11.png) [https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_12.png](https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_12.png) **5 Шаг. Чистим кэш в браузере и проверяем** Чтобы увидеть изменения в Вашем браузере обязательно почистите в нём кэш! Для этого нажмите **комбинацию клавиш CTRL+F5**на странице где выводится баннер. **Анимация должна заработать! На этом у меня всё!** [https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_3-2.png](https://blog.prodelo.biz/wp-content/uploads/2019/05/Screenshot_3-2.png) --- Понравилась статья? **Поставьте лайк**, и **напишите**Ваш**комментарий**! Так же **делитесь** **статьёй** со своими друзьями и знакомыми **в социальных сетях**! --- **Остались вопросы?** **Задайте их**в комментариях,**и я** обязательно **отвечу**. Хотите узнать **больше об OpenCart?** Подписывайтесь на мой [Youtube канал](https://www.youtube.com/channel/UCAuQtnYALp3pLRs-K9em-XQ) ![https://www.youtube.com/channel/UCAuQtnYALp3pLRs-K9em-XQ?sub_confirmation=1](https://www.youtube.com/channel/UCAuQtnYALp3pLRs-K9em-XQ?sub_confirmation=1) 00голоса Рейтинг статьи [https://vkontakte.ru/share.php?&url=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F](https://vkontakte.ru/share.php?&url=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F) [https://connect.ok.ru/dk?cmd=WidgetSharePreview&st.cmd=WidgetSharePreview&st.shareUrl=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F&st.client_id=-1](https://connect.ok.ru/dk?cmd=WidgetSharePreview&st.cmd=WidgetSharePreview&st.shareUrl=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F&st.client_id=-1) [https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F) [https://telegram.me/share/url?url=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F&text=%D0%9A%D0%B0%D0%BA%20%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C%20%D0%B1%D0%B0%D0%BD%D0%BD%D0%B5%D1%80%20%D1%81%20gif%20%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B5%D0%B9%20%D0%B2%20Opencart2x%3F](https://telegram.me/share/url?url=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F&text=%D0%9A%D0%B0%D0%BA%20%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C%20%D0%B1%D0%B0%D0%BD%D0%BD%D0%B5%D1%80%20%D1%81%20gif%20%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B5%D0%B9%20%D0%B2%20Opencart2x%3F) [https://api.whatsapp.com/send?text=%D0%9A%D0%B0%D0%BA%20%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C%20%D0%B1%D0%B0%D0%BD%D0%BD%D0%B5%D1%80%20%D1%81%20gif%20%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B5%D0%B9%20%D0%B2%20Opencart2x%3F%20https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F](https://api.whatsapp.com/send?text=%D0%9A%D0%B0%D0%BA%20%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C%20%D0%B1%D0%B0%D0%BD%D0%BD%D0%B5%D1%80%20%D1%81%20gif%20%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B5%D0%B9%20%D0%B2%20Opencart2x%3F%20https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F) [viber://forward?text=%D0%9A%D0%B0%D0%BA%20%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C%20%D0%B1%D0%B0%D0%BD%D0%BD%D0%B5%D1%80%20%D1%81%20gif%20%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B5%D0%B9%20%D0%B2%20Opencart2x%3F%20https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F](viber://forward?text=%D0%9A%D0%B0%D0%BA%20%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C%20%D0%B1%D0%B0%D0%BD%D0%BD%D0%B5%D1%80%20%D1%81%20gif%20%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B5%D0%B9%20%D0%B2%20Opencart2x%3F%20https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F) [https://web.skype.com/share?url=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F](https://web.skype.com/share?url=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F) [https://blog.prodelo.biz/kak-dobavit-banner-s-gif-animaciey-v-opencart2x/](https://blog.prodelo.biz/kak-dobavit-banner-s-gif-animaciey-v-opencart2x/) [gif](https://blog.prodelo.biz/tag/gif/) [ocstore](https://blog.prodelo.biz/tag/ocstore/) [opencart](https://blog.prodelo.biz/tag/opencart/) [анимация](https://blog.prodelo.biz/tag/animatsiya/) [баннер](https://blog.prodelo.biz/tag/banner/) [Tweet on Twitter](https://twitter.com/intent/tweet?text=%D0%9A%D0%B0%D0%BA+%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C+%D0%B1%D0%B0%D0%BD%D0%BD%D0%B5%D1%80+%D1%81+gif+%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B5%D0%B9+%D0%B2+Opencart2x%3F&url=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F) [Share on Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F) [Google+](https://plus.google.com/share?url=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F) [Pinterest](https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fblog.prodelo.biz%2Fkak-dobavit-banner-s-gif-animaciey-v-opencart2x%2F&media=https%3A%2F%2Fblog.prodelo.biz%2Fwp-content%2Fuploads%2F2019%2F05%2Fbanner-slider.png) ### Вам так же может понравиться [https://blog.prodelo.biz/ai-shorts-pod-klyuch-prokachayte-prodazhi-mgnovenno/](https://blog.prodelo.biz/ai-shorts-pod-klyuch-prokachayte-prodazhi-mgnovenno/) ## [AI-Shorts под ключ: прокачайте продажи мгновенно](https://blog.prodelo.biz/ai-shorts-pod-klyuch-prokachayte-prodazhi-mgnovenno/) [https://blog.prodelo.biz/foto-dlya-tovarov-s-variantami-tsvet-razmer-kak-sobirat-i-vygruzhat/](https://blog.prodelo.biz/foto-dlya-tovarov-s-variantami-tsvet-razmer-kak-sobirat-i-vygruzhat/) ## [Фото для товаров с вариантами (цвет, размер): как собирать и выгружать](https://blog.prodelo.biz/foto-dlya-tovarov-s-variantami-tsvet-razmer-kak-sobirat-i-vygruzhat/) [https://blog.prodelo.biz/avtomatizatsiya-prodazh-s-ii-agentami-uvelichte-konversiyu/](https://blog.prodelo.biz/avtomatizatsiya-prodazh-s-ii-agentami-uvelichte-konversiyu/) ## [Автоматизация продаж с ИИ-агентами: увеличьте конверсию](https://blog.prodelo.biz/avtomatizatsiya-prodazh-s-ii-agentami-uvelichte-konversiyu/) [https://blog.prodelo.biz/etika-retushi-chto-mozhno-skryvat-a-chto-pokazyvat-chestno/](https://blog.prodelo.biz/etika-retushi-chto-mozhno-skryvat-a-chto-pokazyvat-chestno/) ## [Этика ретуши: что можно скрывать, а что — показывать честно](https://blog.prodelo.biz/etika-retushi-chto-mozhno-skryvat-a-chto-pokazyvat-chestno/) [https://blog.prodelo.biz/avtomatiziruite-podderzhku-klientov-s-ii-agentami-dlya-opencart/](https://blog.prodelo.biz/avtomatiziruite-podderzhku-klientov-s-ii-agentami-dlya-opencart/) ## [Автоматизируйте поддержку клиентов с ИИ-агентами для Opencart](https://blog.prodelo.biz/avtomatiziruite-podderzhku-klientov-s-ii-agentami-dlya-opencart/) [https://blog.prodelo.biz/adaptatsiya-odnogo-nabora-foto-pod-trebovaniya-ozon-i-wildberries/](https://blog.prodelo.biz/adaptatsiya-odnogo-nabora-foto-pod-trebovaniya-ozon-i-wildberries/) ## [Адаптация одного набора фото под требования Ozon и Wildberries](https://blog.prodelo.biz/adaptatsiya-odnogo-nabora-foto-pod-trebovaniya-ozon-i-wildberries/) [https://blog.prodelo.biz/avtomatizirovannyi-konveyer-dlya-virusnogo-video-bez-khlopot/](https://blog.prodelo.biz/avtomatizirovannyi-konveyer-dlya-virusnogo-video-bez-khlopot/) ## [Автоматизированный конвейер для вирусного видео без хлопот](https://blog.prodelo.biz/avtomatizirovannyi-konveyer-dlya-virusnogo-video-bez-khlopot/) [https://blog.prodelo.biz/rabota-s-modelnymi-foto-postanovka-kadry-i-prava-ispolzovaniya/](https://blog.prodelo.biz/rabota-s-modelnymi-foto-postanovka-kadry-i-prava-ispolzovaniya/) ## [Работа с модельными фото: постановка, кадры и права использования](https://blog.prodelo.biz/rabota-s-modelnymi-foto-postanovka-kadry-i-prava-ispolzovaniya/) [https://blog.prodelo.biz/author/maksilo/](https://blog.prodelo.biz/author/maksilo/) #### Об авторе: [Admin](https://blog.prodelo.biz/author/maksilo/) Подписаться 0 комментариев СтарыеНовыеПопулярные Межтекстовые Отзывы Посмотреть все комментарии