Add Your Images to the Main Page Slider


[tube]nF7gDGHtv5E[/tube]

A slider or slide show on your zen cart store’s main page is a wonderful way to showcase promotions, sales, featured products, etc. All of the free zen cart templates by Picaflor Azul and all of the templates you see in our store come with home page sliders. This step by step tutorial will show you how to add your own images to the slider, customize the size of the slider, and customize the number of images shown in the slider.

This tutorial features the All Business free zen cart template by Picaflor Azul. If you want to use this template for your web site, you can download it for free here.

1. Create your images for the slider. See the install.txt file for the particular template to find out the default slider dimensions. All of your slider images should be the same height and width. The default number of images for all of the sliders are 5. Your images should be named:

slide1.jpg

slide2.jpg

slide3.jpg

slide4.jpg

slide5.jpg

2. Upload your images to includes/templates/your-template-override-directory/images.

3. If you have used the same image names, dimensions, and number of images, you are finished! If you have used different image names, a different number of images, or images of different dimensions then you need to continue on with the tutorial.

Using Images With Different Names


[tube]EIxAwEhm3MA[/tube]

A. Log into your zen cart admin and go to Tools -> Define Pages Editor.

B. Select define_main_page.php from the drop down menu. Make sure that the Text Editor drop down is set to “Plain Text”.

C. Find this code:

define(IMAGE1,'slide1.jpg');// default width 700px height 250px /
define(
IMAGE2,'slide2.jpg');
define(
IMAGE3,'slide3.jpg');
define(
IMAGE4,'slide4.jpg');
define(
IMAGE5,'slide5.jpg');

D. Replace slide1.jpg, etc. with the names of your images, making sure to keep the single quotes intact.

E. Click on the “save” button.

Go to your store url in the browser and refresh the page. You might have to clear your cache or even restart your browser to see the changes.

Using Images That Are Different Dimensions


[tube]ON9paBONQW8[/tube]

In your favorite plain text editor, open the file includes/templates/your-template-override-directory/css/stylesheet.css. Find this code (in our free and for purchase templates it will be toward the bottom):

#slider li, #slider2 li{/*define width and height of list item (slide) entire slider area will adjust according to the parameters provided here*/width:740px;height:440px;overflow:hidden;}

Change the width and height to the width and height of your images and save the file. Depending on the new dimensions you might also have to change the position of the slider navigation buttons.

In your favorite plain text editor, open the file includes/templates/your-template-override-directory/css/stylesheet.css. Find this code (in our free and for purchase templates it will be toward the bottom):

#control_div{width:200px;height:18px;position:relative;
left:500px;top:-50px;}

Change the values for left and top until the slider navigation shows where you want it to show.

Add Links to the Images


[tube]uVhEgtbBa-s[/tube]

Follow steps A. and B. from the “Using Images With Different Names” section of this tutorial.

Find this code:

define(URL1,'http://www.picaflor-azul.com');
define(
URL2,'http://www.picaflor-azul.com');
define(
URL3,'http://www.picaflor-azul.com');
define(
URL4,'http://www.picaflor-azul.com');
define(
URL5,'http://www.picaflor-azul.com');

Replace http://www.picaflor-azul.com with your link urls, making sure to keep the single quotes intact.

Using More or Less Than 5 Images in the Slider

Follow steps A. and B. from the “Using Images With Different Names” section of this tutorial.

Find this code:

<div id="slider">
<ul>
<li><a href="<?php echo URL1 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE1 ?>" alt="first slide image" /></a></li>
<li><a href="<?php echo URL2 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE2 ?>" alt="second slide image" /></a></li>
<li><a href="<?php echo URL3 ?>"><img src="<?php echo $template-<get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE3 ?>" alt="third slide image" /></a></li>
<li><a href="<?php echo URL4 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE4 ?>" alt="fourth slide image" /></a></li>
<li><a href="<?php echo URL5 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE5 ?>" alt="fifth slide image" /></a></li>
</ul>
</div>

To use less images, remove this block of code for each image:

<li><a href=”<?php echo URL5 ?>”><img src=”<?php echo $template->get_template_dir(”,DIR_WS_TEMPLATE, $current_page_base,’images’).’/’.IMAGE5 ?>” alt=”fifth slide image” /></a></li>

You are removing the <li> to </li>and all the code in between.


[tube]WzFuwKeuLbI[/tube]

To use more images, add this code using the next number in sequence, for example image 6 would be:


<li><a href="<?php echo URL6 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE6 ?>" alt="sixth slide image" /></a></li>

Then add these lines to define code above:

define(IMAGE6,'slide6.jpg');

and:

define(URL6,'http://www.picaflor-azul.com');

Follow this procedure for each image you want to add.

In your favorite plain text editor, open the file includes/templates/your-template-override-directory/css/stylesheet.css. Find this code (in our free and for purchase templates it will be toward the bottom):

#control_div{/code>width:200px;height:18px;position:relative;
left:500px;top:-50px;}

Adjust the width (make it larger) so that all of the slider navigation buttons show on one line.

If you need help customizing your zen cart web site, or would like a great custom design, please contact us for a quote.

equation

How Do I Show the Categories on the Main Page?



Adding your categories to your zen cart main page is a great way to provide your customers with a visual summary of your product line. This step by step tutorial will show you how to show your store categories on the main page of your zen cart.

This tutorial features the Pink Boutique free zen cart template by Picaflor Azul. If you want to use it for your zen cart, you can download it for free here.

1. Log into your zen cart admin and go to Configuration -> Layout Settings

2. Select “Categories – Always Show on Main Page” and click on the “edit” button.

3. Tick the “1” radio button and click on the “update” button.

Now your categories images and titles will be displayed on the main page. This tutorial will show you how to add images to your categories.

If you need help customizing your zen cart web site, please contact us for a quote.

equation

Add Featured Products to the Main Page

A great way to promote your Featured Product is by adding the Featured Product Center Box to the Main Page of your zen cart store. This step by step tutorial will show you how.

This tutorial shows the Apparel Boutique zen cart template by Picaflor Azul. If you like it you can download it for free here.

In your zen cart admin go to Configuration -> Index Listing

Select Show Featured Products on Main Page and click on the “Edit” button.

Click on the 1, 2, 3, or 4 to set the sort order of the box and click on “update”.

If you need help with your zen cart web site, please contact us for a quote.

big contact Zen Cart Tutorial: How to Add a Facebook Like Box to Zen Cart

equation Zen Cart Tutorial: How to Add a Facebook Like Box to Zen Cart