How to add moving text/content in Prestashop

Today we want to show you how to create own text / content moving animation for absolutely free. With this tutorial you will create own moving texts, pictures or another content you want. How we can do that? Well, for the first we must say something about what exactly we will use.


In HTML language, the marquee is a something like bloc section of the browser window that displays text or content that rolls across the screen. You can check below what exactly wikipedia says about marquee effect:

The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. The tag was first introduced in early versions of Microsoft's Internet Explorer, and was compared to Netscape's blink element, as a proprietary non-standard extension to the HTML standard


How this effect exactly works? You can check below:

We use this code:

    This is an basic example of marquee effect

and the effect is:

This is an basic example of marquee effect




html block free prestashop module Which software you need?

Of course you can add many other effects to the animation, we will describe all important animation technique in this article. You must also know that to add animations to store we will use our  free solution html block for prestashop . With this module you can add to your shop "client side code" like html, javascript, css, etc. With this module you can create your own boxes with facebook, twitter, pinterest etc. plugins by adding code of them to any place in your shop based on PrestaShop engine.




How to create moving animation effect in own prestashop?

For the first you must download free html block module that we mentioned above. This module is absolutely free and you can use it in as many shops you want. So, download it and then you must install module in prestashop . We pasted link to the tutorial where you can read how to do it. Tutorial was written for prestashop 1.4.x but installation process looks the same for the newest prestashop versions. All example codes of animation effect you should insert into the hook that you selected in module configuration. It's very easy! don't you think? Ok, so let's make a animation  examples.



Creating own animation

We attached a simple animation above, now we want to extend animation for additional parameteres like speed control, direction etc. We pasted all animation parameters below with short info about each param:


  • WIDTH : how wide the marquee is
  • HEIGHT : how tall the marquee is
  • DIRECTION : which direction the marquee should scroll
  • BEHAVIOR : what type of scrolling
  • SCROLLDELAY : how long to delay between each jump
  • SCROLLAMOUNT : how far to jump
  • LOOP : how many times to loop
  • BGCOLOR : background color
  • HSPACE : horizontal space around the marquee
  • VSPACE : vertical space around the marquee


now we want to show you how to use each param. Remembet that you are able to combine many params in one marquee block. With this feature you will be able to create any move animation type you want. So, for the first we want to say something about basic  params: width and height.


Width and height

We want to create animation with defined width & height param, so in this case we must insert this params into the <marquee> html tag. What does it mean? it mean that all parameters we should insert <marquee here>. For example:


<marquee width="200" height="100">
    example with height and width params!

example with height and width para



Remember that you are able to add to animation any content you want. For example, you can add image:

<marquee width="200" height="100">
    <img src=""/>




Now we want to show example with direction paramter. Direction paramter indicates which direction the marque can use two values: left | right. Default value is left - and it indicates that the marquee starts at the right side of block and moves leftwards across the block. Another param value is right and it indicates that the marquee starts at the left side of block and mowes rightwards acros the block.


<marquee width="200" height="100" Direction="left">
    Direction Left Example
<marquee width="200" height="100" Direction="Right">
    Direction Right Example

Direction Left Example Direction Right Example




Next parameter of animation is behavior param. Behavior parameter indicates how the contents scroll. You can use three values: scroll | slide | alternate. First one - Scroll  which is the default, indicates that the content should scroll off the edge of the marquee area, then reappear on the other side:


<marquee width="200" height="100" behavior="scroll">
    scroll example

scroll example



Another behavior param value is slide  and this  is almost the same, except that it indicates that when the leading part content reaches the left edge it should stop without scrolling off. Notice in this example that the contents stop scrolling as soon as the "S" reaches the left side:


<marquee width="200" height="100" behavior="slide">
    slide example

slide example



 And the last behavior param value is alternate . This param  makes the content bounce back and forth, all of it remaining visible all the time (assuming of course that it all fits).

<marquee width="200" height="100" behavior="alternate">
    alternate example

alternate example



Next  parameter of animation technique for marquee html tag is scrolldelay. It is an integer value which sets the speed of scrolling. Marquee moves content by displaying the content, then delaying for some short period of time, then displaying content again in new position. This parameter sets the amout of delay in milliseconds. The default delay is 85.

<marquee width="200" height="100" scrolldelay="500">500</marquee>
<marquee width="200" height="100" scrolldelay="1000">1000</marquee>
<marquee width="200" height="100" scrolldelay="1500">1500</marquee>

500 1000 1500




Another parameter of animation related to scrolldelay is scrollamount apram, which indicates the speed of the scrolling. Scrollamount sets the size in pixels of each jump. Higher value of scrollamount makes the animation faster, lower value makes the animation slower. The default value of this param is 6.

<marquee width="200" height="100" scrollamount="1">1</marquee> 
<marquee width="200" height="100" scrolldelay="15">15</marquee>
<marquee width="200" height="100" scrolldelay="40">40</marquee>

1 15 40



Loop marquee animation block parameter sets how many times the marquee should loop. Default value of this parameter is infinite, which mean that the marquee loops endlessly. If you want to set up value of this param you should use integer value which indicates the number of loops.

<marquee width="200" height="100" loop="2">
 text which loops twice

text which loops twice


 As you can see, after second loop animation and content disappears. Do you remember behavior param which indicates the style of animation? You can use behavior="slide" - this will allow animation to stay visible after last loop. 



Last parameter for set up animation is bgcolor. This param indicates the background color of your animation. You can use hex values of colors and also colors names like yellow, black, blue etc. 

<marquee width="200" height="100" bgcolor="red" style="color:#FFF">
    text which loops twice

As you can see, we use also "style" param, where you can set up more css styles of your block like background image, font-size, colors etc. With this param you can personalize own animation as you want!

text which loops twice



Thats ok, but how i can use this animation in prestashop?

The answer for this question is easy. You can create animation with important informations, like links to the cms pages, like box with information about sales, voucher codes etc. You can also create product advertise. How? Check code below, you can paste it into html block module into home hook. Then your customers wills how nice animation with any product you want. Remember that you can paste there as many products as you want! :)


<marquee style="text-align:center;" width="400" height="300">
    <a href="">
        <img src="" />
        <span style="font-size:16px;">1381,27 €</span>

1381,27 €


So, thats all in this tutorial, now you can create own moving animations with any content you want. It's really easy in use. Remember that - if you have got any questions related to this topic and animations - feel free to use comments tool, we will reply ASAP :-)


author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim