Modify Theme to Always Show Related Products

Hi Design Experts,

I have a question regarding which files I need to edit to achieve this look (see attached file).

I don't know where to begin on changing how my related products is currently being shown.  Right now it is nested in a menu that changes when you click them.  I want to pull out related products and have them always being shown at the bottom.

Here is the live version:  http://www.hawaiipacificparks.org/store/index.php/tracing-the-past-at-honaunau.html

Which css, xml, or PHTML files will i need to edit?  Is this a BIG job?
Example.gif
LVL 9
activematxAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HainKurtSr. System AnalystCommented:
how do you display those images under "you also might like..."
0
HainKurtSr. System AnalystCommented:
I cannot locate those images :)
0
activematxAuthor Commented:
The image i did above in Photoshop.

However in actual code it pulls the image from our website.  I am using Magento (E-Commerce platform).  Magento has a "related products" section and this theme chooses to nest them on the left.  I want to un-nest them and have them always displayed.   (It does not need to look like my photoshop-mock-up).  Something similar is fine.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

activematxAuthor Commented:
There  -- I just added that image to our related products section.  You need to click on the "related products link on the left"
0
HainKurtSr. System AnalystCommented:
look for class names here:

<div class="box-collateral box-description">
<div class="page-title">
<div class="description">
  <div class="std">...</div>
  < --- here you need to add some codes ---->
</div>
</div>
</div>

in your codes...
0
miked2004Commented:
It is trivial if you have programmed/themed magneto before.


You have a custom theme that is pulling in multiple data into tabs.

You need to look in your themes layout folder(contains all the layout xml files). Find the catalog.xml file.

Then find the node for the product view page. starts with the following.

<catalog_product_view translate="label">

Open in new window



Then nested in that node is the upsell block
<block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml">
                    <action method="setColumnCount"><columns>4</columns></action>
                    <action method="setItemLimit"><type>upsell</type><limit>4</limit></action>
                </block>

Open in new window


Then in you template file for the product view you need to change where this upsell block is called.
/app/design/frontend/YOURTHEME/YOURTHEME/template/catalog/product/view.phtml


Now just put the following code where you want the block to be.
<?php echo $this->getChildHtml('upsell_products') ?>

Open in new window




This will move the block. You will probably need to remove it from the tab interface that it is currently in. so it is notdisplayed in two places.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
activematxAuthor Commented:
Thanks Miked2004!!!!

Just one last question.

I now know how to move the block where I want the upsell code to go.  But where do I  modify the actualy html?

I am guessing here.  Is this the file i need to modify for the html?:  "catalog/product/list/upsell.phtml"
0
miked2004Commented:
Yes, You are correct. that is the file that controls the html.

You can tell by looking at the xml that sets up the block. See the template setting.

<block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml">

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.