1) For ShopFactory V11 SFX Templates

A. Link Image Group 1

The banner slideshow in ShopFactory 11 works differently compared to ShopFactory V10, so you need to add the custom code provided below to adjust the transition speed in SFX v11 template.

You need to add the code under the Custom Website Contents of your shop:

- Open shop in ShopFactory V11

- Click Central

- Click Custom Website Contents

- Click Add + button

- Add the code below:

<script>
$(function(){
    /* number of seconds * 1000 to delay between transitions */
    Flickity.data($('.Banner .gallery-box')[0]).options['autoPlay'] = 5000
});
</script>

The 5000 in the code can be changed to a different number, for the interval between slides, in milliseconds.

- Click OK

- Save and preview your shop in external browser

Note: Because the attached code will be executed after the Banner module is created, the first timeout period will be the one specified in the template. Subsequent periods will become the one specified in the attached code.

B. Adding auto-scroll for Link Image Group 2 with delay of 5000ms by default

Link Image Group 2 in ShopFactory 11 by default does not auto-scroll. If you want to put an auto-scroll timer, please follow the same steps as section A. but this time, use the custom code provided below:

You can either put the code into website-wide custom HTML code to affect "Link Image Group 2" on all pages. Or you can put the code into specific page using the Page-level custom HTML dialog to only affect those pages. The 5000 in the code can be changed to a different number, for the interval between slides, in milliseconds.

<script type="text/javascript">
// Auto-scroll 1 cell with delay of 5000ms
$(function(){
    /* LinkImageGroup2 */
    /* number of seconds * 1000 to delay between transitions */
    $('.PageLinkBoxWrapper .gallery-box').each(function(){
        Flickity.data(this).options['autoPlay'] = 5000;
        $(this).flickity('playPlayer');
    });
});
</script>

2) For ShopFactory V10 Templates

(Old V10 users will have to follow the steps outlined below)

Firstly, you need to add banner links in your shop pages by following the steps provided in our Knowledgbase article:

Adding Banner links in a page (slideshow banner links)

http://support.shopfactory.com/kayako/index.php?_m=knowledgebase&_a=viewarticle&kbarticleid=4176&nav=0,69

And then refer to the information provided below to edit the transition speed of the banner links.

This can be achieved using the HTML code field for either the specific page or for the whole website (Properties / Edit Website HTML).

Note: The HTML code has to be at the bottom of the page for it to work.

Refer to our KB article on how to add custom html:

How do I add custom HTML code to a page or to my entire website?

http://support.shopfactory.com/kayako/index.php?_m=knowledgebase&_a=viewarticle&kbarticleid=348

Now, to change the animation speed simply add this Javascript to the bottom location of the page;

 <script>

/* SFNOTE_BEGIN:prevent script execution when in editing mode */

/* SFNOTE_END:prevent script execution when in editing mode */

if(slider) {

  slider.at = 3000; /* number of seconds * 1000 to delay between transitions */

}

/* SFNOTE_BEGIN:prevent script execution when in editing mode */

/* SFNOTE_END:prevent script execution when in editing mode */

</script>

Where, the slider.at line is where you change the number, in this case to 3 seconds between transition. So if you want the transition speed to be every 5 seconds, change 3000 to 5000.