5 steps to get a crossfade effect in Magento

The crossfade effect for images of products on category pages is all the rage in the field of the visual layer of e-commerce stores. In just a few simple steps, we will implement such a solution for a store based on the Magento platform. What’s more, we will not use a single JavaScript line for this purpose.

1. Attribute
In this tutorial, I assume that we can use attributes that Magento has added to each product by default. To display an additional photo on the category page, we will use the “Thumbnail” attribute. Let us edit our products, adding desired photos to products type and setting their type to Thumbnail:




2. Copy the category template file

When the attribute is ready to be used and the photos of all products are set – it is time to display them on the category page. To do this, if we have our own package with the template, check to see if the file named list.ptml exists in any of the following locations:

app/design/frontend/[package_name]/[template_name]/template/catalog/product/ app/design/frontend/[nazwa_paczki]/default/template/catalog/product/

If the file has been previously edited, we will probably find it there. In this case, proceed to step 3. If, however, we did not find the file in any of the above locations  –  copy and paste it to any of them. To do so, go to the base package:

app/design/frontend/base/default/template/catalog/product/ i kopiujemy plik list.phtml

Remember to preserve the structure of folders. In the end, we should have the following structure:




In the file, we will find the code that is responsible for the category view – both grids and lists.


3. Edit the template category

Open the copied file (list.phtml) in your favourite editor and find the part that displays the picture of our product. In Magento, in the base package for the list view, it starts from line 50 and looks as follows:


When the code is running, the next step is to edit its content to organize and add our new images just above the current ones in the view:


NOTE! The following code is an excerpt from the original template, the size of the images in the package may be different. Adjust the new excerpt to the size of your images.


4. A little bit of magic – CSS
I assume you know where to find the main CSS file that sets the appearance of the store. At this stage, we need to add just a few lines at the end of the file:

Now press ctrl+s, commit, push, deploy and we have reached the beautiful crossfade effect on the category page.


5. Grid view
The page in the list view works the way we want it to. All we need to do is to implement the same solution for the grid view. For the original template from the base package, the code is located in line 95. We change the following passage one more time:



Good luck!