Animated banner HTML5

Animated banner HTML5

Version:

€ 99.00 *
Source Available
11 Downloads
Responsive
This manufacturer responds very quickly to support requests
    vierp40573738180
  • 1.0.6
  • 26 Aug 2019
  • de_DE en_GB
  • from VIERPUNKT GmbH
  • 5.4.0 – 5.4.6
    5.5.0 – 5.5.10
    5.6.0 – 5.6.2
With the plugin „animated banner“ from VIERPUNKT GmbH you are able to add „Adobe Animate CC“,... more

Product information

With the plugin „animated banner“ from VIERPUNKT GmbH you are able to add „Adobe Animate CC“, Google Web Designer“ or other HTML5 banners or ads in your shopping worlds.


Create even more fascinating and diversified shopping experiences with animated banners. This plugin gives you the opportunity to use single HTML5 banners (as a custom shopping world element) as well as banner sliders (you can normal JPG slides and animated HTML banners in the same banner slider).


HTML5 animation tools, for example „Adobe Animate CC“ or „Google Web Designer“ provide you with all necessary data for an HTML5 banner. Most tools use zip-files to do so – if your animated banner is in a different file formate please create a zip-file manually. Make sure to include all images and the html-file in it. You can upload the zip-file in the shopping world element or in the banner slider – finished. Everything else is handled by the plugin.


Please note: its not possible to create animated banners with the Plugin „animated Banner HTML5“. The plugin integrates already made HTML5 banners in shopware shopping worlds.

Show full description
Read, write and discuss reviews... more

Customer reviews

Installation manual

Usage:

First you need a zip-file with an animated HTML5 banner. It is really important that the zip-file only contains one html-file as well as all used images. this is normally the case if you created your banner with, for example, „Adobe Animate CC“. We recommend creating a „responsive banner“ since otherwise you have to adjust your shopping world element accordingly, otherwise your banner might be cut of or have other visual issues.


As a next Step navigate to the shopping worlds and select the new element „animated banner „ or the „banner slider“ and place it as usual in your shopping world.


Single banner:

If you are creating a single animated banner, you can now upload a zip-file in the field. You also can place a link. There are different ways to create so called click tags for animated banners. Depending on which method you use you have to fill the link field. The link must be complete, means including the http/https. In most cases it will be enough to add the click tag in your html-file. We will provide you with one possible integration example on the end of the documentation.

Like other media you can replace the animated banner via the media manager.


Extension banner slider:

if you are creating a banner slider, you won’t see any changes to the backend. Nevertheless, a few functions changed. You are now able to not only upload .jpgs and .png but also .zip files. Like other images they will appear in the banner administration list and the position can be changed via drag and drop. The alt-tag and the title have no function for zip-files, but it is possible to use the link, if you adjust your html-file within the zip-file accordingly. The link is used for some methods to create a click tag. Depending on which software you use you might not need to fill the link field and it will be enough to add the click tag in your html-file. We will provide you with one possible integration example on the end of the documentation. The link must be complete, means including the http/https.

Like other media you can replace the animated banner via the media manager.

If you visit your frontend, you are now able to see the animated banner in your shopping world. Please notice: the animation starts as soon as the banner is loaded.


ATTENTION: If you deinstall the plugin and use a banner slider which uses the plugin it wont show any images afterwards until you reinstall the plugin or create the banner slider from scratch.


Click Tag:

If you want to use a link within your banner you can use a so called click tag. The integration differs depending on the tool you use to create your animated banner. Here an example for “Adobe Animate CC”:

In the head area of your HTML-file add:

<script type="text/javascript">var clickTag = "https://www.google.com";</script>

(replace https://www.google.com with your link)

afterwards search for your canvas – object and add: onclick="javascript:window.open(window.bannerURL)"so it looks like this: <canvas id="canvas" width="1920" height="480" onclick="javascript:window.open(window.bannerURL)"></canvas>afterwards save the file and create a new zip-file with all images and the new HTML-file.

Changelog

Version 1.0.6

Shopware 5.6 compatibility

Version 1.0.5

minor changes to path calling

Version 1.0.4

minor change in the root path

Version 1.0.3

change in the file structur

Version 1.0.2

changed behavior for google Web design banners slightly

Version 1.0.1

bugfix image display

Version 1.0.0

Plugin initial release

About the manufacturer

VIERPUNKT GmbH VIERPUNKT GmbH Shopware Business Partner Shopware Business Partner 3 Certifications Developer SW5 1 Developer Advanced SW5 1 Template Designer SW5 0 Template Developer SW5 1 Developer SW6 0 Template Designer SW6 0 21 Extensions
1 0 0
5 Ø Rating

Version:

€ 99.00 *

Recently viewed