ZenCart. How to edit products carousel

This tutorial will show you how to edit products carousel in ZenCart template.

1. Open catalog\includes\templates\theme###\common\tpl_main_page.php file
2. The carousel is developed using the unordered list layout:

<ul> 
  <li class="one"><a  href="index.php?main_page=product_info&cPath=5&products_id=40"><?php  echo zen_image(DIR_WS_TEMPLATE.'images/pic1.jpg'); ?></a> 
  <span  class="info"> 
  <div  class="desc"> 
  <h5>Model  Name:</h5> 
  <p>Virgin  Mobile - Samsung Intercept. Red.</p> 
  <h5>Description:</h5> 
  <p>Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor<br><br> Encididunt ut labore et dolore magna aliqua. Ut enim  ad minim veniamquis</p> 
  <span  class="price1">$570</span> 
  <a  class="btn1"  href="index.php?main_page=product_info&cPath=5&products_id=40"><?php  echo zen_image(DIR_WS_TEMPLATE.'buttons/english/button_goto_prod_details.png');  ?></a> 
  </div> 
  </span> 
  </li> 
  <li class="two"><a  href="index.php?main_page=product_info&cPath=2&products_id=5"><?php  echo zen_image(DIR_WS_TEMPLATE.'images/pic2.jpg'); ?></a> 
  <span  class="info"> 
  <div  class="desc"> 
  <h5>Model  Name:</h5> 
  <p>Virgin  Mobile - Samsung Intercept. Red.</p> 
  <h5>Description:</h5> 
  <p>Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor<br><br> Encididunt ut labore et dolore magna aliqua. Ut enim  ad minim veniamquis</p> 
  <span  class="price1">$500</span> 
  <a  class="btn1"  href="index.php?main_page=product_info&cPath=2&products_id=5"><?php  echo zen_image(DIR_WS_TEMPLATE.'buttons/english/button_goto_prod_details.png');  ?></a> 
  </div> 
  </span> 
  </li> 
  </ul>

Where each product is a list item:

<li  class="two"><a  href="index.php?main_page=product_info&cPath=2&products_id=5"><?php  echo zen_image(DIR_WS_TEMPLATE.'images/pic2.jpg'); ?></a> 
  <span  class="info"> 
  <div  class="desc"> 
  <h5>Model  Name:</h5> 
  <p>Virgin  Mobile - Samsung Intercept. Red.</p> 
  <h5>Description:</h5> 
  <p>Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor<br><br> Encididunt ut labore et dolore magna aliqua. Ut enim  ad minim veniamquis</p> 
  <span  class="price1">$500</span> 
  <a  class="btn1" href="index.php?main_page=product_info&cPath=2&products_id=5"><?php  echo zen_image(DIR_WS_TEMPLATE.'buttons/english/button_goto_prod_details.png');  ?></a> 
  </div> 
  </span> 
  </li>
 

Let’s see what each tag defines:

<a  href="index.php?main_page=product_info&cPath=2&products_id=5"><?php  echo zen_image(DIR_WS_TEMPLATE.'images/pic2.jpg'); ?></a>

Here you can change the carousel image and image link. To replace the carousel  images upload your product images to the catalog\includes\templates\theme###\images directory and change the image root ‘images/pic2.jpg’ in the code above.

To change the description edit:

<h5>Model  Name:</h5> 
<p>Virgin  Mobile - Samsung Intercept. Red.</p> 
<h5>Description:</h5> 
<p>Lorem ipsum dolor sit amet,  consectetur adipisicing elit, sed do eiusmod tempor<br><br>  Encididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniamquis</p> 
<span  class="price1">$500</span>