Last edited October 07, 2009

Featured products slideshow in reconfigured theme This post is outdated

Hello I am new to Shopify, but I must say its fun to work with it, even without any experience in Java script etc.

I am looking for help with two minor things on the frontpage of our site evergreenstore.myshopify.com

1. In the featured products box, I would like to have an automatic slideshow which scrolls to next image itself without manual clicks. I have no idea what code or script I should be using here.

Currently the code in index.theme is 


<div class="features-column">

<div id="slider1" class="csw">
		<div class="panelContainer">

		{% for product in collections.frontpage.products limit:10 %}

			<div class="panel" title="{{ forloop.index }}">
				<div class="wrapper">
					<div class="features-block">
							<img alt="" class="visual" src="{{ product.featured_image | product_img_url: 'medium' }}" />
							<div class="info-box">
								<h1> <a href="{{ product.url }}" title="{{ product.title }}">{{ forloop.index }}  {{product.title}}</a></h1>
								<p>{{ product.description | strip_html | truncatewords: 35 }}</p>


2. The second issue is with the featured products box as well, before the product title there is a number displaying corresponding to the slide, I would like to remove this. For example with slide 1, it shows as "1 Artificial Tulips in Water Illusion Vase" I would like to remove this "1" from there.


Thanks in advance

October 07, 2009

I've tried jcarousel but I did not like the delay I'd see before the page loaded fully.

I use Ultimate Slide show, an earlier version and it works great for me....

I've not implemented the new jquery version yet put plan to give it a shot soon:


Gifts for Life’s Celebrations http://www.presentbydesign.com/
October 07, 2009

I use the jquery cycle plugin and love it:


Unique Bath Gifts by Fortune Cookie Soap ~ http://www.FortuneCookieSoap.com ~ @fortunefreak
October 07, 2009

There is also a 'lite' version without some of the more fancy effects available: http://malsup.com/jquery/cycle/lite/ I've been using that one lately.

Take a look at our Apps: www.bookthatapp.com ♥ www.searchifyapp.com ♥ www.productsassistant.com
Jamie Chief Officer of Funness shopify.com/plus
October 07, 2009

I use the jquery cycle plugin and love it:



Not having textile is sucking the big one...

http://shopifyplus.com ::: http://twitter.com/bacchus
October 08, 2009

Thanks all for the inputs, I myself did figure out how to make it work with coda slider through this page http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

But I think I will  incorporate jquery plugin.

Thanks a ton 

October 23, 2009

mrinal, I am also new to this. I have the same theme as you and I still have yet to figure out how to add items to that featured items scrolling box. Any ideas?

tobyleeming Member
December 03, 2009

HI ,

I have tried both the jquery and also the s3slider that BBG uses on a site I saw of his. The jquery one conflicted with the javascript I am using to hide / show my cart. The s3slider works although I have had a nightmare with the css trying to remove other padding and margins. If anyone else has this issue with  I found I needed to add:

ul#s3sliderContent {padding; 0px;
margin: 0px;}

So I have looked into these shows and also followed anothe r post which covers the generation of randomproduct images.


I would really like to be able to give a client control over a slideshow on the frontpage so they can add images to the shopify system, (not product images) so they can have banners to promote stuff on the site and push certain stock. It would be good if they could somehow then link these images through to collections.


ANy suggestions how one would go about doing this, has anyone done something similar or anything close that they can suggest?


Thanks for your help