Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Images On Homepage With Links To Products. Help Please.

Images On Homepage With Links To Products. Help Please.

Locked

Views: 2,616

Results 1 to 13 of 13
This thread is locked. New replies are disabled.
8 Jul 2008, 1:22 PM
#1
dpm avatar

dpm

Zen Follower

Join Date:
Mar 2008
Posts:
262
Plugin Contributions:
0

Images On Homepage With Links To Products. Help Please.

Hello,

I've done a search but can't seem to find any answers as to if it's possible to add links to different images on my homepage where when you click on them they'll take you to a certain product page. Is this possible and if so could someone please tell me how as i seem to be getting no where with it.

https://www.dpmperformance.co.uk

I want it to be similar to this...

https://www.rimstyle.com

where you can click on different images direct from the homepage.

Thanks

8 Jul 2008, 1:40 PM
#2
fairestcape avatar

fairestcape

Totally Zenned

Join Date:
Mar 2008
Location:
Cape Town & London (depends on the season)
Posts:
2,957
Plugin Contributions:
0

Re: Images On Homepage With Links To Products. Help Please.

This is simple HTML, using the <a href="...."> tag.

When you add the text description to your main page, you are - in effect - inserting HTML code. Using HTMLArea (the default text editor with ZC) you can "toggle" to the source code by clicking the " <> " menu icon.

This will display the source code.

You can create your main page HTML in any good html editor (I use Dreamweaver).

You establish the link code to your products by:-

  1. Calling up the relevant product in your browser.
  2. Copying the PATH to that product (it's in your browser address bar) - for example:
http://www.yourwebsite.com/index.php?main_page=product_info&cPath=60_63&products_id=359
  1. Then, you create the image you want, and attach the above URL to it via a hyperlink:
<a href="http://www.yourwebsite.com/index.php?main_page=product_info&cPath=60_63&products_id=359"><img height="112" src="http://www.yourwebsite.com/images/imagename1.jpg" width="180" border="0" /></a>

See https://www.edutrade.co.uk for an example site where I've done this.

8 Jul 2008, 1:50 PM
#3
dpm avatar

dpm

Zen Follower

Join Date:
Mar 2008
Posts:
262
Plugin Contributions:
0

Re: Images On Homepage With Links To Products. Help Please.

I'm a total newbie to all this so sorry for the stupid questions but say for example my logo at the top of the homepage in the header, it appears in the backend as...

<img src="images/DPM-01207561606.png" alt="DPM Performance logo" height="119" width="908">

to get this to link to say for example my homepage...

http://www.dpmperformance.co.uk/

How would i go about doing this? Would it be...

<a href="http://www.dpmperformance.co.uk/"><img src="images/DPM-01207561606.png" alt="DPM Performance logo" height="119" width="908"></a>

?

8 Jul 2008, 2:00 PM
#4
fairestcape avatar

fairestcape

Totally Zenned

Join Date:
Mar 2008
Location:
Cape Town &amp; London (depends on the season)
Posts:
2,957
Plugin Contributions:
0

Re: Images On Homepage With Links To Products. Help Please.

Take a look at https://www.edutrade.co.uk

On the main page, I have a large number of images advertising certain products. I created these in Photoshop and gave them different names, then uploaded them to a sub-directory called "mainpage" in the "images" folder.

Look at the image on the right of my home page called CLASSIC TOYS.

The PATH to this image is:-

http://www.edutrade.co.uk/images/mainpage/watches.jpg

The URL to the part of my zenshop selling classic toys is:-

http://www.edutrade.co.uk/index.php?main_page=index&cPath=138

So the HYPERLINK attached to this image, enabling a click to take you to that category is:-

<a href="http://www.edutrade.co.uk/index.php?main_page=index&cPath=138"> <img src="http://www.edutrade.co.uk/images/mainpage/classictoys.jpg" border="0" width="180" height="242" /></a>

As I said, this is basic HTML - nothing special for Zencart - so if you don't know how to use HTML then it may be worth your while to do a couple of online tutorials. There are some good free ones at W3schools.

8 Jul 2008, 2:09 PM
#5
dpm avatar

dpm

Zen Follower

Join Date:
Mar 2008
Posts:
262
Plugin Contributions:
0

Re: Images On Homepage With Links To Products. Help Please.

Ahh, that's great! Thank you so much!

I've managed to do the logo at the top, now i just need to figure out how to split up at the images but keep them in the same position.

8 Jul 2008, 3:32 PM
#6
dpm avatar

dpm

Zen Follower

Join Date:
Mar 2008
Posts:
262
Plugin Contributions:
0

Re: Images On Homepage With Links To Products. Help Please.

Right, i know that if i just add the image source next to the image source that is already there, the new image will just go along side the exsisting image but what do i need to add before the image source to get it to put the image underneath the exsisting image?

I thought it was just <div but that doesn't seem to be the case.

Thanks in advance

8 Jul 2008, 5:14 PM
#7
fairestcape avatar

fairestcape

Totally Zenned

Join Date:
Mar 2008
Location:
Cape Town &amp; London (depends on the season)
Posts:
2,957
Plugin Contributions:
0

Re: Images On Homepage With Links To Products. Help Please.

I'm confused about what you are trying to do. There should be no need to edit any core code.

Where do you want these images to appear?

Product images that accompany product text in the normal course of ZC are automatically linked - either to the More Info (detailed product info) page, or (when you are in the detailed product page) to a larger (zoomed) image.

The RIMSTYLE website you refer to in your original post is probably using a feature similar to zencart's CATEGORY IMAGE feature - where you apply an image to a catgory.

To do this, go to your ADMIN PANEL>>>CATEGORIES/PRODUCTS and then click on a green "E" button next to a category name. This opens the category for editing. Here, you will see features that allow you to assign an image to that category.

Then, to get these images shown on your main page, go to ADMIN>>>LAYOUT SETTINGS>>>CATEGORIES - ALWAYS SHOW ON MAIN PAGE (set to 1)

8 Jul 2008, 5:20 PM
#8
dpm avatar

dpm

Zen Follower

Join Date:
Mar 2008
Posts:
262
Plugin Contributions:
0

Re: Images On Homepage With Links To Products. Help Please.

I don't think i explained it very well lol

What i want to do is put another seperate image under the image which is already on the homepage but when i try to all it does is put it to the side of the image. Does that make sense?

8 Jul 2008, 5:28 PM
#9
fairestcape avatar

fairestcape

Totally Zenned

Join Date:
Mar 2008
Location:
Cape Town &amp; London (depends on the season)
Posts:
2,957
Plugin Contributions:
0

Re: Images On Homepage With Links To Products. Help Please.

DPM:

What i want to do is put another seperate image under the image which is already on the homepage but when i try to all it does is put it to the side of the image. Does that make sense?

This "image which is already on the homepage" - do you mean your LOGO (header image)?

8 Jul 2008, 5:29 PM
#10
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Images On Homepage With Links To Products. Help Please.

Adding a <br /> between the two images should put you on a new line.

8 Jul 2008, 5:42 PM
#11
fairestcape avatar

fairestcape

Totally Zenned

Join Date:
Mar 2008
Location:
Cape Town &amp; London (depends on the season)
Posts:
2,957
Plugin Contributions:
0

Re: Images On Homepage With Links To Products. Help Please.

gjh42:

Adding a <br /> between the two images should put you on a new line.

Good one, Glenn... was just looking at the page source, and see that the existing image and the text underneath are house in a simple table.

The <br /> tag will give you a line break.

8 Jul 2008, 6:07 PM
#12
dpm avatar

dpm

Zen Follower

Join Date:
Mar 2008
Posts:
262
Plugin Contributions:
0

Re: Images On Homepage With Links To Products. Help Please.

No the group of pictures including the larger black one with the writing.

I'll try that, thanks.

8 Aug 2008, 7:29 PM
#13
kmk_enterprises avatar

kmk_enterprises

New Zenner

Join Date:
Mar 2007
Location:
USA
Posts:
9
Plugin Contributions:
0

Re: Images On Homepage With Links To Products. Help Please.

I have a question that follows somewhat along the lines of this thread, but so far I haven't been able to find the answer.

Inserting the images and links on the main page using simple HTML isn't a problem. But for this cart install, the customer is required to login to view pricing.

I'm using the sidebox login mod, so most returning customers will simply login using it directly on the main page. After logging in they remain on the home page, which is exactly what the store owner wants.

But, because the images and their links are inserted using the basic

<a href="http://www.SITENAME.com/store/index.php?main_page=index&cPath=8_9"><img src="URL_OF_IMAGE FILE"></a>

it isn't working out quite right. When they click through they have to login again before they can view pricing.

Obviously, in order to get it to work the way it should, I'm going to have to use some PHP come on some template file somewhere...and yep, you've got it, that's where I'm stuck. Can anyone give me a clue?

~KMK