Software Tutorials

Cate

How to: Add a Slideshow to Your Bluepark Online Shop

1 CommentThursday, 15 January 2015  | 

How to add a slideshow

Skill Level: Beginner

Every Bluepark site comes with a built in slideshow feature that can be used to create rotating banners on the homepage, as well as on a multitude of other pages. When you start to build your site you will see this feature being used on the homepage with a two image slideshow presented at the top of the main content.

Find out how to create your own slideshow to add to your homepage, as well as how to add unique slideshows to different areas of your online shop with our helpful guide.

Preparing Your Slideshow Images

The main thing to remember when preparing your images for the slideshow is that the area the slideshow sits in does not determine the size of it. To make this clearer, on your site you will have an area you want to add the slideshow to. This is normally at the top of the centre column as shown below.

Area for slideshow

Adding an image that is smaller than this area will not stretch to fill it. For instance, the area shown above is 760px wide and 200px high. An image that is smaller than this will be displayed on the website as shown below.

Area for slideshow with small image

Therefore banner images for this example slideshow need to be 760px wide and 200px high, if the space is to be completely filled.

Of course, you will need more than one image and these all need to be the same size for the slideshow to look uniform. By adding different sized images you will end up with something that looks unprofessional and, quite frankly, lazy, as shown below.

Therefore, for the original example, every single one of your banner images needs to be 760px wide and 200px high before uploading them to the slideshow. If you have one image that is smaller than the others don't just open it in PhotoShop and make it bigger as this will pixelate the image and make it look fuzzy. You will need to create a new image that is the correct size instead.

Adding the Slideshow to Your Homepage

The slideshow that comes built into every trial site can be found within Blocks > Block Manager and is simply called Slideshow. To add your own slideshow to the homepage all you will need to do is replace the images that are already assigned to this block.

Click into the Slideshow block to make your changes. There is no need to touch any of the settings on the Properties tab, however, on the Settings tab you can set the behaviour of how the images transition from one to another.

Slideshow settings tab

In the Transition Effect drop-down select how you want the images to change from one to another, i.e fade or scroll down. The Transition Speed field allows you to set how long it takes for the images to actually change, whereas the Transition Delay field allows you to set how long each image appears on the screen before changing to another.

Slideshow Images tab

On the Images tab remove the banners that are currently assigned to the slideshow block using the delete icon on the far right. Click on the Browse button and, in the new window that opens, click on Browse and Upload (single file). Navigate to the first image on your computer, click Open and let the file upload to your site.

You will see a green progress bar whilst the system uploads your image and an Assign button will appear once it is complete. When you are returned to the Images tab click on Assign Files. Repeat this for each image you want to appear on your slideshow.

In the blank Link field you can add the URL you want the relevant banner to be linked to for your customers to click on. This could be a page on your site as well as an external one.

Your slideshow should now appear on the homepage of your site. If it doesn't you will need to assign it to the Homepage layout. To do this go to the blue bar at the top of the website, whilst you are viewing the homepage, and click on Blocks: Centre. Find the Slideshow block in the drop-down under the Unassigned list and click on it the add it to the page. It will appear at the bottom of the page, so click on the yellow icon with the up and down arrow on it and drag it up to the required position.

Adding Different Slideshows to Different Pages

You may want to show a different slideshow on each category page above the product list. This can be done by making copies of the original slideshow and naming each one with the relevant category name at the end of the block title. You can then assign the corresponding images and links to each one.

Slideshow Properties tab

In the Properties tab of each slideshow you create there will be a variable at the bottom. This will include the unique number of that particular block. Highlight and copy this variable, without the colon at the end, and navigate to the relevant category in the Category Manager. In your category go to the Content tab and paste the variable into the Page content (above list) field.


Stephen Nichols
Sunday, 18 January 2015  |  11:54

Thanks Cate
Another Blog Post I have booked marked for future use