Bigcommerce Product Image Slider

Do you want to setup Slider on Product Main Images into your Bigcommerce store ? Here, we explained complete steps.

Steps to display slider for Product Main Image in product page:-

 Note: You need to update some files of your bigcommerce store admin.

  1. Panels/ProductDetails.html
  2. Snippets/ProductTinyImage.html
  3. Snippets/ProductThumbImage.html
  4. Panels/Footer.html
  5. Styles/style.css (To add some css)
Step-1:

In Panels/ProductDetails.html, Add span tag, before and after div having class ProductThumb. See the image given below:

p-slider-step-1

Step-2:

In Snippets/ProductTinyImage.html, Add class tiny-image-li-s in li tag. And make sure that li tag has id starts with TinyImageBox_  and also it has onmouseover event to show main image. See the image given below:

p-slider-step-2

Step-3:

In Snippets/ProductThumbImage.html, Add id mainImageWithSlider_0 to div tag. And make sure that div tag has class named as ProductThumbImage. See the image given below:

p-slider-step-3

Step-4:

In Panels/Footer.html, We need to add some script to call on page load. The script code is given below:

<script>
	$(document).ready(function(){
		var id_arr=[];
		$('li.tiny-image-li-s').each(function () {
			var  id=$(this).attr('id');    
			var count=id[id.length  -1];
			id_arr.push(count);
		});
		$.unique(id_arr).sort();
		$( "li.tiny-image-li-s" ).mouseover(function() {
			var id=$(this).attr('id');    
			var count=id[id.length -1];   
			$('div.ProductThumbImage').attr('id','mainImageWithSlider_'+count);
		});  
		$( "#main_prev" ).click(function() {
			var id=$('div.ProductThumbImage').attr('id');
			var count=id[id.length -1];
			var arr_last=id_arr[id_arr.length  -1]
			if(count==0){
				$('#TinyImageBox_'+arr_last).trigger('mouseover');
				$('div.ProductThumbImage').attr('id','mainImageWithSlider_'+arr_last);
			} else { 
				$('#TinyImageBox_'+(count-1)).trigger('mouseover'); 
				$('div.ProductThumbImage').attr('id','mainImageWithSlider_'+(count-1));
			}
		});
    	$( "#main_next" ).click(function() {
			var  id=$('div.ProductThumbImage').attr('id');
			var count=id[id.length -1];
			var arr_last=id_arr[id_arr.length  -1];
	
			if(count==arr_last){
				$('#TinyImageBox_0').trigger('mouseover');
				$('div.ProductThumbImage').attr('id','mainImageWithSlider_0');
			} else {
				$('#TinyImageBox_'+(parseInt(count)+1)).trigger('mouseover');
				$('div.ProductThumbImage').attr('id','mainImageWithSlider_'+(parseInt(count)+1));
			}
		});
	});
</script>

 

Step-5:

In Styles/style.css, We need to add some css to show it better. We can change or set css as per theme. The css code is given below:

	#main_prev, #main_next { display:block; text-indent:-999em; width:30px; height:30px; margin-top:-15px; opacity:0.3; background:url(../images/arrows.png) no-repeat 0 0;
		position:absolute; top:50%; z-index:99; cursor:pointer; }
	#main_prev { left:20px; }
	#main_next { right:20px; background-position:100% 0; }
	#main_prev:hover, #main_next:hover { opacity:0.7; }
Step-6:

Now in Front end, Product page main image looks like,

p-slider-sample

For Mobile view:

For mobile view, we just need to check whether any of above files is added in mobile template, then we need to update as we did earlier. If any file is not added then we just need to check about css code for responsive design in mobie view.

p-slider-sample-mobile

Please contact us to build world class bigcommerce store. We have expert bigcommerce designer and developer team.