Images in main content area link to specific products?

**crashley1784** · 18 May 2008, 12:58 PM

I know this is most likely much more simple than I think, but I'm trying to set up a thing where a customer can click on an image on the front page and that will take them to a specific product (or product set).

On the front page of my site, every month we'll be doing a "feature" based on the season, or the holiday that month (whatever). There will probably be a discount of some kind shown on the image, and pretty pictures of the products, etc etc.
Now, under that (but still looking like part of the larger image), will be images of specific products, and I want the customers to be able to click those images and go to the product description page of that product. How would I do this? Would I just create a table in Dreamweaver, lay out my images the way I need them, and the set up the images as links, or hotspots? What would I use for the link url? Should I go to the product description page of the item and copy / paste the url?

Thank you to all the Zenners out there who patiently answer all of our newbish questions

**kuroi** · 18 May 2008, 03:06 PM

This sounds like exactly the situation for which Zen Cart's featured products listing box (the one that appears in the middle of the home page) is intended.

**crashley1784** · 18 May 2008, 04:36 PM

Yes, I'm familiar with the featured products box, but that's not what I'm wanting.
I basically want to do an image map. So, long question short, what would I use for the link url to make an image link to a specific product, or page?

**fairestcape** · 18 May 2008, 05:08 PM

You can create your main_page (that's the "opening page" in your Defined Pages) using customised HTML.

Either compile the page in ADMIN>>>TOOLS>>>DEFINE PAGES (then open "Define Main Page" and use HTMLArea to build your page)...

...or, using a HTML editor (any one will do - even MS FrontPage!

).

And then all you do is build the page using the HTML editor tools inherent in the HTML Editor you are using.

You can even use tables-based html to "position" things, even though the modern way is to use CSS to position the elements - the choice of format is up to you.

To create links to specific products, you have to remember that ZC will automatically insert a <base href....> into the header. This will be the URL to your store (eg: http://www.YOURWEBSITE.com).

Now, when you create hyperlinks from your main_page, all you need is the sub-path to your chosen products. One of the easiest ways of finding out what these links are is to call up a desired product and look at its URL in your browser address bar...

...You will see (for example) "http://www.MYWEBSITE.COM/index.php?main_page=product_info&cPath=24_28&products_id=240

So, you just need the "index.php?main_page=product_info&cPath=24_28&products_id=240" part, to put into your hyperlink.

This hyperlink can be an image, so just make sure the desired image is in a directory on your server, and the hyperlink you create is an <img src="..."> hyperlink.

To see this in action on a site I manage:-

http://www.karenscakes.co.uk/shop

If you use an external HTML editor, you will copy the SOURCE CODE ONLY, and it must be code that sits between the <body> and </body> tags of the page source.

Then, navigate to the define pages editor for main_page, toggle the HTMLArea edit pane to source code mode (the menu tag looks like this <>) and PASTE your html into the pane.

Remember... no header or footer html - just stuff that existed between the <body></body> tags of your editor.

**crashley1784** · 18 May 2008, 07:11 PM

*bows down before the awesomeness*
Thank you thank you!!

That's exactly what I needed to know! I use dreamweaver to do page layout / html editing, and it will be uber easy to implement that piece of coolness!

I checked out your site (gorgeous cakes by the way!!), and I was wondering if you could share how you added all the text boxes / areas on the product page? Are those attributes?
Thanks!