Add image to sidebox or centerbox

Using a sidebox or centerbox to show product images

The exact method will depend upon whether you are creating a small image to be repeated, or a image that will either span the box or is intended to be centered within it.

Firstly, create your image and place it in the images directory of your template.

Then find the following blocks in your CSS:

For adding the image to the center boxes:

.centerBoxWrapper {
    border: 1px solid #9a9a9a;
    height: 1%;
    margin: 1.1em 0;
    }

For adding to the left and/or right sideboxes:

.leftBoxContainer, .rightBoxContainer {
    margin: 0em;
    border: 1px solid #9a9a9a;
    border-bottom: 5px solid #336633;
    margin-top: 1.5em;
    }

The above CSS is taken from the default template and may vary depending upon which template you are using and what modifications have been made to it.

Then add the following CSS to the appropriate block

   /* create free space at the bottom of the box in which to display the image */
    padding-bottom: 20px;
    /* add the image to the boxes background */
    background-image: url(../images/box_bg.jpg);
    /* position the image at the bottom and center of the box */
    background-position: bottom center;
    /* EITHER set the image to not repeat */
    background-repeat: no-repeat;
    /* OR set it to repeat horizontally */
    background-repeat: repeat-x;

You can use the same image for both center and sideboxes if you wish. Any excess width will fall outside the box and not be displayed.




Still have questions? Use the Search box in the upper right, or try the full list of FAQs. If you can't find it there, head over to the Zen Cart support forum and ask there in the appropriate subforum. In your post, please include your Zen Cart and PHP versions, and a link to your site.

Is there an error or omission on this page? Please post to General Questions on the support forum. Or, if you'd like to open a pull request, just review the guidelines and get started. You can even PR right here.
Last modified November 5, 2021 by Scott C Wilson (f680cfa9).