Change the Color of the Sidebox Headers

This step by step tutorial will show you how to customize the color of the sidebox headers in your zen cart.

This tutorial features the All Business free Zen Cart template by Picaflor Azul. If you like the template, you can download it for free here.

In your favorite plain text editor, open includes/templates/your-template-override-directory/css/stylesheet.css find these selectors:

h3.leftBoxHeading

and

h3.leftBoxHeading a

Change the value for the property color: to your hexidecimal color code. So for example, in the stylesheet you would find:

h3.leftBoxHeading {font-size: 1.3em;color: #1bbee7;text-transform:uppercase;}
h3.leftBoxHeading a{font-size: 1.0em;
color: #1bbee7;text-transform:uppercase;}

and change it to:

h3.leftBoxHeading {font-size: 1.3em;color: #your hexidecimal color code;text-transform:uppercase;}
h3.leftBoxHeading a{font-size: 1.0em;
color: #your hexidecimal color code;text-transform:uppercase;}

And save the file.

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

equation

Remove the Gift Certificate FAQ & Discount Coupons Links From the Information Sidebox

Would you like to remove the Gift Certificate FAQ and Discount Coupons links from the information sidebox? This step by step tutorial will show you how to do this easily from the zen cart admin.

This tutorial featured the Alysa Rounded free zen cart template by Picaflor Azul. You can download this template for free here.

Remove Discount Coupons Link

1. Log into your zen cart admin and go to Configuration -> Define Page Status:

2. Select “Define Discount Coupon” and click on the “edit” button.

3. To remove the link from the Information Sidebox, select option “2= Link OFF, Define Text ON” or “3= Link OFF, Define Text OFF”.

Remove Gift Certificate FAQ Link

1. Log into your zen cart admin and go to Module -> Order Total.

2. Select “Gift Certificates” and click on the “remove” button.

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

equation

Disable the category/inventory counts (the numbers beside the category links)



If you don’t like to see the numbers next to your categories in the category sidebox, this step by step tutorial will show you how to turn them off.

This tutorial features the Apparel Boutique free zen cart template by Picaflor Azul. You can download it for free here.

1. Log into your zen cart admin and go to Configuration -> My Store

2. Select “Show Category Counts” and click on the “edit” button.

3. Click on “false” and then click on the “update” button.

Go to your site and see the results.

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

equation

Change the Width of the Sideboxes


[tube]d9ETQVYbVCM[/tube]

This tutorial will show you step by step how to adjust the width of the zen cart sideboxes to fit your design and shop needs perfectly.

This tutorial will use our free zen cart template Alysa Rounded as an example. You can download this template for free here.

The left hand sideboxes are here:

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

2. Select Column Width – Left Boxes or Column Width – Right Boxes -whichever side you want to change and click on the “edit” button.

3. Add your new width and click on the “update” button. It can be expressed as a percentage of the total page width (20%) or as a relative size (190px). For example, if you want the sideboxes to shrink and grow depending on the window size you would set the left and right hand columns to 20% and the sideboxes to 100%.

4. If your new width is more than the Column Width – Left or Column Width – Right (if this is what you changed) then you will want to change this as well. Select the Column Width – Left, put in the new width (I prefer this to be wider than the sideboxes width) and click on the “update” button.

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

equation

Turn On the Header Search Box

Make good use of your zen cart store’s header by adding a search box. This functionality is native to zen cart and easy to implement when you follow this step by step tutorial.

Log into your zen cart admin and go to Admin -> Tools -> Layout Boxes Controller:

Find the sideboxes/search_header.php and click on the green “e”.

Set the “Single Column Sort Order:” to something other than 0 and click “On” for “Single Column Status:”, then click on “update”.

You have just turned on the header search box! If you are using the Aberdeen Neutral template, it will look like this:

You can download all of the free zen cart templates by Picaflor Azul by clicking here. All of our free zen cart templates feature the ability to turn the search header box on or off.

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

Change the Names of Page 2, Page 3, or Page 4 Links in More Information Sidebox

This is a part of a series of tutorials on customizing the More Information Sidebox. Other tutorials in this series are:

How to Customize the More Information Sidebox

How to Change the Page Titles of Page 2, Page 3, or Page 4 in More Information Sidebox

How to Change the Browser Bar and Breadcrumbs Titles of Page 2, Page 3, or Page 4 in More Information Sidebox

How to Change the More Information Sidebox Header

This tutorial will show you step by step how to change the names of the Page 2, Page 3, or Page 4 links in the More Information sidebox.

In your favorite plain text editor, open includes/languages/english.php. On or around line 147 find this code:

// information box text in sideboxes/more_information.php - were TUTORIAL_
define(
'BOX_INFORMATION_PAGE_2', 'Page 2');
define(
'BOX_INFORMATION_PAGE_3', 'Page 3');
define(
'BOX_INFORMATION_PAGE_4', 'Page 4');

Change the text in green to your new text.

// information box text in sideboxes/more_information.php - were TUTORIAL_
define(
'BOX_INFORMATION_PAGE_2', 'Your Page Name');
define(
'BOX_INFORMATION_PAGE_3', 'Your Page Name');
define(
'BOX_INFORMATION_PAGE_4', 'Your Page Name');

Save the file to your template override directory, in this case includes/languages/custom-template-directory/english.php

***This is a php file and MUST be edited in a plain text editor. If you try to edit this file in any type of wysiwyg editor, the code will be corrupted and when you insert the file back into your zen cart it will break your entire site.***

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

Change the More Information Sidebox Header

This is a part of a series of tutorials on customizing the More Information Sidebox. Other tutorials in this series are:

How to Customize the More Information Sidebox

How to Change the Page Titles of Page 2, Page 3, or Page 4 in More Information Sidebox

How to Change the Browser Bar and Breadcrumbs Titles of Page 2, Page 3, or Page 4 in More Information Sidebox

How to Change the Names of Page 2, Page 3, or Page 4 Links in More Information Sidebox

This tutorial will show you step by step how to change the title of the More Information Sidebox header.

In your favorite plain text editor, open includes/languages/english.php. On or around line 147 find this code:

// information box text in sideboxes/more_information.php - were TUTORIAL_
define(
'BOX_HEADING_MORE_INFORMATION','More Information');

Change the text in green to your new text.

// information box text in sideboxes/more_information.php - were TUTORIAL_
define(
'BOX_HEADING_MORE_INFORMATION','Your Sidebox Heading');

Save the file to your template override directory includes/languages/custom-template-directory/english.php

***This is a php file and MUST be edited in a plain text editor. If you try to edit this file in any type of wysiwyg editor, the code will be corrupted and when you insert the file back into your zen cart it will break your entire site.***

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

Change the Page Titles of Page 2, Page 3, or Page 4 in More Information Sidebox

This is a part of a series of tutorials on customizing the More Information Sidebox. Other tutorials in this series are:

How to Customize the More Information Sidebox

How to Change the Browser Bar and Breadcrumbs Titles of Page 2, Page 3, or Page 4 in More Information Sidebox

How to Change the More Information Sidebox Header

How to Change the Names of Page 2, Page 3, or Page 4 Links in More Information Sidebox

This tutorial will show you step by step how to change the page title of the pages in the More Information Sidebox.

Open includes/languages/english/page_2.php. Find this code:

define('HEADING_TITLE', 'Page 2');

Change the ‘Page 2’ to your page name.

define('HEADING_TITLE', 'Your page name');

Save the file to your template override directory includes/languages/english/custom-template-directory/page_2.php

***This is a php file and MUST be edited in a plain text editor. If you try to edit this file in any type of wysiwyg editor, the code will be corrupted and when you insert the file back into your zen cart it will break your entire site.***

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

Customize the More Information Sidebox

The More Information sidebox in zen cart is perfect for adding extra pages of content to your site. It is very useful because you can edit the content of the pages via the define pages editor in the zen cart admin. By default, it comes installed with generic page names, titles, etc. This tutorial will show you step by step how to customize this sidebox to use it for your custom content. This tutorial will use our free zen cart template Andover Modern as an example. You can download this template for free here.

Preparation

Go to your Admin -> Tools -> Layout Boxes Controller and activate the more_information.php sidebox.

Change the Name of the Sidebox and the Names of the Sidebox Links

In your favorite plain text editor, open includes/languages/english.php. On or around line 147 find this code:

// information box text in sideboxes/more_information.php - were TUTORIAL_
define(
'BOX_HEADING_MORE_INFORMATION','More Information');
define(
'BOX_INFORMATION_PAGE_2', 'Page 2');
define(
'BOX_INFORMATION_PAGE_3', 'Page 3');
define(
'BOX_INFORMATION_PAGE_4', 'Page 4');

Change the text in green to your new text.

// information box text in sideboxes/more_information.php - were TUTORIAL_
define(
'BOX_HEADING_MORE_INFORMATION','Your Sidebox Heading');
define(
'BOX_INFORMATION_PAGE_2', 'Your Page Name');
define(
'BOX_INFORMATION_PAGE_3', 'Your Page Name');
define(
'BOX_INFORMATION_PAGE_4', 'Your Page Name');

Save the file to your template override directory, in this case includes/languages/andover_modern/english.php

***This is a php file and MUST be edited in a plain text editor. If you try to edit this file in any type of wysiwyg editor, the code will be corrupted and when you insert the file back into your zen cart it will break your entire site.***

Change the Page Name and Browser Bar/Breadcrumb Title

Open includes/languages/english/page_2.php. Find this code:

define('NAVBAR_TITLE', 'Page 2'');
define(
'HEADING_TITLE', 'Page 2');

Change the ‘Page 2’ to your page name.

define('NAVBAR_TITLE', 'Your page name'');
define(
'HEADING_TITLE', 'Your page name');

Save the file to your template override directory, in this case it is includes/languages/english/andover_modern/page_2.php

Add Your Text to the Page

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

Select define_page_2.php from the pull down menu.

Enter your page content into the big box.

You are all finished!

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

Add a Facebook Like Box to Zen Cart

If you are not already aggressively marketing your business on Facebook you should be. According to Digitaltrends.com Facebook has over 25% of internet traffic in the U.S. and is the most downloaded app of all time. In this tutorial, I will show you step by step how to install your Facebook fan box into a sidebox on your zen cart. For demo purposes I will be adding the box to my Andover Modern free zen cart template which you can download here.

Preparation

Before making any changes to your zen cart, ALWAYS back up your site files and database. Read the beginning of this post for a really easy method, explained step by step for backing up your site’s files and database.

Install the Sidebox

1. Click Here to download the Editable Sidebox contribution from the zen cart web site.

Move the .zip file to a temp directory on your computer and unzip (extract the contents of the file).

Open Editable_Sidebox_1.0/includes/languages/english/extra_definitions/editable_sidebox_defines.php in your favorite plain text editor.

On or around line 15 you will see:

define('BOX_HEADING_EDITABLE_SIDEBOX', 'Your header in Here');

Replace the ‘Your header in Here” with your desired Side box header text:

define('BOX_HEADING_EDITABLE_SIDEBOX', 'Facebook');

***This is a php file and MUST be edited in a plain text editor. If you try to edit this file in any type of wysiwyg editor, the code will be corrupted and when you insert the file back into your zen cart it will break your entire site.***

Save the file to your zen cart template override directory. In this case it is Editable_Sidebox_1.0/includes/languages/english/extra_definitions/andover_modern

2. Copy the file Editable_Sidebox_1.0/includes/templates/template_default/sideboxes/tpl_editable_sidebox.php to your zen cart template override directory Editable_Sidebox_1.0/includes/templates/andover_modern/sideboxes/tpl_editable_sidebox.php

3. Upload the includes directory of the module package to your server.

A. Connect to your web host via ftp using Filezilla. Enter the address of the server, your username, password, and port if needed into the host field of the Quickconnect bar.

filezilla Zen Cart Tutorial:  How to Add a Facebook Page Fan Box to Zen Cart

B. Once you are connected find the directory on your local machine where you unzipped the module package in the right side of window and find your store root directory on your web host in the left side of the window .

filezilla 1 Zen Cart Tutorial:  How to Add a Facebook Page Fan Box to Zen Cart

C. Drag the includes directory and drop it in the folder above the includes folder of your store root directory.

filezilla 2 Zen Cart Tutorial:  How to Add a Facebook Page Fan Box to Zen Cart

You have successfully uploaded the module package files!

4. Log into your zen cart admin and go to Admin -> Tools -> Layout Boxes Controller.

If you have installed the sidebox package properly you will see this warning:

Find the sidebox in the list and click on the green “e”.

Click on Left/Right Column Status: “On”, Location: (Single Column ignores this setting) “Left”, enter your Left/Right Column Sort Order , and then click on “Update”.

Get the Facebook Code

1. Log into your Facebook account and go to your Facebook Fan Page. Click on “Edit”.

2. Click on “Marketing” in the left hand navigation. “Click on Add a Like Box to your Website”.

3. Enter the url for your Facebook Fan Page, the width of your sidebox, and then click “Get Code”.

4. In the pop up window, copy the iframe code (the top box) and click on “Okay”.

Back to Your Zen Cart Admin

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

Select the define_editable_sidebox_content.php from the pull down menu. Make sure that plain text is selected in the editor pull down.

Delete everything that is in the box and paste the code that you copied from the Facebook site, then click on “Save”.

All finished!

This is one in a series of planned tutorials about customizing the look of your zen cart store.

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

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