Can I Add More Images to my Product Image Carousel?

When adding product images in your Shift4Shop Online Store Manager, the images will be displayed on your product listing page within a small carousel located under the main product image. Visitors can then cycle through the images from the small carousel.

While you can upload as many images as you'd like for a particular product, the default action of the product listing template is to display the first 20 images within the product page carousel. If you would like to display more images in the carousel, you will need to make changes to the HTML coding of the product listing template to accommodate the additional images. This guide will show you the proper coding to use.

I'm willing to risk it! What do I need?

To make these changes you'll need the following:

• An HTML5 theme folder
  (Recommended for best results!)

• Access to and comprehension using your Shift4Shop store's FTP access

• Some level of basic HTML editing knowledge
  (Just basics like finding and replacing certain elements)

• A text or HTML editor of your choice
  (notepad, notepad++, DreamWeaver, etc)

• Patience and a penchant for trial and error
  (OPTIONAL: although highly recommended)

Retrieving the Listing Template

To begin, you will need to download/retrieve a copy of the default listing template. This can be done via FTP. You will also use FTP to upload your edited file to your store's theme folder after your changes are made.

1. Connect to your store's FTP.

2. Navigate to web/assets/templates/common-html5.

3. Locate and download the template named "listing_0.html."

After downloading the template, it might be a good idea to make a backup of the file in case you need it later.
(See patience/trial and error point above...)

For the purposes of this article, you will be editing this file and uploading the result to your store's specific theme folder. So make a note of your store's selected theme for reference later. You can find your installed theme by going into your Shift4Shop Online Store Manager and navigating to Settings > Design > Themes & Styles. The name of your installed theme folder will be shown at the top left of the page labeled "Selected Theme."

Making Your Changes

As mentioned, the default action of the template is to display up to 20 product images within the product image carousel. Typically, most merchants will not need more than 20 images to advertise and sell the product. However, if you'd like to add the ability to display more images, you will need to add the additional image slots into the template.

To do this, we'll be copying parts of the template that control these image slots, pasting them as often as needed to accommodate the extra images, and finally editing each code instance to reference the proper images.

1. With your listing_0.html template open, locate the portion of code that begins with <!--START: image20--&gt.

This portion of HTML controls the final image in the carousel. The block of code will begin with the above tag and end with <!--END: image20--&gt respectively. It will look like this:

<!--START: image20->
<li class="prod-thumb image20"><a href="[image20]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image20]&maxx=[image_medium_w]&maxy=0" onclick="javascript:image_click(20);return false;"><img src="thumbnail.asp?file=[image20]&maxx=50&maxy=0" width="50" alt="" name="pimage20" /></a></li>
<!--END: image20->

2. Select and copy (CTRL-C) this block of code.

Be sure to copy the entire block of code, including the START and END tags.

3. Next, paste (CTRL-V) the code immediately after the existing <!--END: image20--&gt tag.

The result will look like this:

<!--START: image20->
<li class="prod-thumb image20"><a href="[image20]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image20]&maxx=[image_medium_w]&maxy=0" onclick="javascript:image_click(20);return false;"><img src="thumbnail.asp?file=[image20]&maxx=50&maxy=0" width="50" alt="" name="pimage20" /></a></li>
<!--END: image20->
<!--START: image20->
<li class="prod-thumb image20"><a href="[image20]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image20]&maxx=[image_medium_w]&maxy=0" onclick="javascript:image_click(20);return false;"><img src="thumbnail.asp?file=[image20]&maxx=50&maxy=0" width="50" alt="" name="pimage20" /></a></li>
<!--END: image20->

4. Next, edit this newly pasted code so that each instance of "20" is "21."

There are eight instances of the number 20 altogether. After you're done, the code will look like this.

<!--START: image20->
<li class="prod-thumb image20"><a href="[image20]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image20]&maxx=[image_medium_w]&maxy=0" onclick="javascript:image_click(20);return false;"><img src="thumbnail.asp?file=[image20]&maxx=50&maxy=0" width="50" alt="" name="pimage20" /></a></li>
<!--END: image20->
<!--START: image21->
<li class="prod-thumb image21"><a href="[image21]" rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image21]&maxx=[image_medium_w]&maxy=0" onclick="javascript:image_click(21);return false;"><img src="thumbnail.asp?file=[image21]&maxx=50&maxy=0" width="50" alt="" name="pimage21" /></a></li>
<!--END: image21->

5. Finally, repeat these steps until you've added a slot for each additional image that you'd like to have on the listing page.

In other words, if you'd like to display 30 images altogether, then you would need to repeat this copy/paste/edit process for images 22, 23, 24, 25, and so on.

You're almost done! At this point, you've added the additional image slots to the listing template. In the next steps, you'll add image slots to the scripting that is used by the carousel.

As before, we'll be searching for a specific piece of coding, copying it, pasting it, and editing it to reflect the subsequent images. There are three pieces of coding remaining but they are all located close to each other on the file and are relatively easier to edit.

6. Search the file for the following piece of code:
It will be located near the bottom of the file

//Thumbnail script
var image1,image2,image3,image4,image5,image6,image7,image8,image9,image10,image11,image12,image13,image14,image15,image16,image17,image18,image19,image20,selectedimage;
var imagemaxwidth, imagemaxheight

7. Add the remaining extra image slots to this block between image20 and selectedimage; respectively.

For example:

//Thumbnail script
var image1,image2,image3,image4,image5,image6,image7,image8,image9,image10,image11,image12,image13,image14,image15,image16,image17,image18,image19,image20,image21,image22,image23,image24,image25,selectedimage;
var imagemaxwidth, imagemaxheight

8. Now look for the following code:

image20="[image20]";

9. Again, copy this code, and paste it immediately after the existing code so that it looks like this:

image20="[image20]"; image20="[image20]";

10. Then change it to add the subsequent image number to make it look like this:

image20="[image20]"; image21="[image21]";

11. Repeat until you've created a slot for your additional images.

12. Next, search for imagecaption20="[imagecaption20]";" and do the same copy/paste/edit action to it as well.

imagecaption20="[imagecaption20]";; imagecaption21="[imagecaption21]";

13. Repeat the copy/paste/edit for each instance of the extra image.

14. Save your file and you're all set!

After your changes are made, follow the next steps to upload your edited template file:

After your changes are made:

1. Connect to your store's FTP.

2. Navigate to web/assets/templates/[theme-folder].
   (Where "[theme-folder]" is your store's installed theme. For example, "web/assets/templates/justswell-html5")

3. Upload your edited file to this folder.

Your product pages will now display any additional images (over 20) that you have added to your product. Furthermore, the template will only display additional images if they are present on the product. In other words, if the product only has 5 images, only 5 will display in the carousel.