ShopSite Forums

I want to display more information Images vertically along the right side on the main image. Currently the thumb images are horizontal along the bottom. I have tried changing the CSS styles on my div's but to no success. Any suggestions?

What's the URL to your website? Are you using a custom template or a built in template? Some built in templates have the global cross sell feature on the side listing the products vertically.

Custom template

If it's custom it is up to how you want to display your own code. If you are looping the products (not cross sell products, but regular products), a basic table structure would be:

<table>
[-- LOOP PRODUCTS 1 --]
<td>[-- PRODUCT --]</td>
[-- END_LOOP PRODUCTS --]
</table>

This will create a table so that after every product it starts a new row, so they will be vertical. If you provide the URL to the page you are working on I could give a lot more help.

Lauren,

The product page that I am testing my new template on is http://www.bakersgas.com/safety/EDG-SDK.html

Thanks for the help!

I understand what you are describing now. I had thought you were talking about additional products like related products (cross sell or subproduct), but you were referring to the output by the template tag [-- MoreInfoImageRow --]. The main product image is in a div, and you can specify the dimensions of that div by going to Preferences > More Info Page. Then the smaller images are all in a div, then in a table within that div. You can specify the number of images per row by going to Preferences > More Info Page. For your page, you will want to go to Preferences > More Info Page, enter the dimensions for the main image to be just slightly larger than your largest image in that spot. That way, if any of your images have hspace or vspace, the image won't create scroll bars in that area, you give them a little room to have space if they happen to. Then, on that same screen you will want to specify that you want 1 image per row, this will stack your additional images vertically. The rest you would modify with CSS. Now I did notice that you have your main image div (Preferences > More Info) set to 230, and you also have that entire area for the image (part of your template) set to 230, but this does not leave any room for you to re-position the thumbnails to be next to the image. You will want your image area in your template to be around 280px, then your image div created by ShopSite can be 230, and your thumbnail image div can be between 45 and 50 pixels wide. To have the main image and the thumbnails next to each other you will want to float the main image div to the left with clear: none;. You can then either float the thumbnail image div right or left, and either way it will be next to your main image div.

Lauren,

What you say makes sense but I am still having difficulty. Here is the current block of code that controls the main image and thumb images:

<td id="prodimage-td">
[-- IF Product.MoreInformationGraphic --]
<p class="prodimage-main"><a href="/media/[-- IMAGE PRODUCT.MoreInformationGraphic --]">[-- MoreInfoImageRow --]</a></p>
[-- ELSE_IF PRODUCT.Field5 --]
<p class="prodimage-main"><a href="/media/products/[-- PRODUCT.Field5 --].jpg"><img src="/media/prod-main/[-- PRODUCT.Field5 --].jpg" title="[-- PRODUCT.Name --]" /></a></p>
[-- END_IF --]
</td>


When I changed the More Info Page settings to have 1 image per row it it did align the thumb images vertically but I can't get them to float right of the image. The main image is contained in that DIV setting so it only allows one image per row. You mentioned making custom divs; still unsuccessful. Maybe with the code above you could help me position the divs correctly and with the correct styles.

I would keep the code in your template as follows:

[-- IF PRODUCT.MoreInformationGraphic --]
<td id="prodimage-td">[-- MoreInfoImageRow --]</td>
[-- END_IF --]

Then, you can add CSS similar to the following:

<style type="text/css">
td.prodimage-td {width: 280px; white-space: nowrap;}
div.prod_img, div.row_img {height: 230px; float: left; overflow: hidden; padding: 0px; margin: 0px; text-align: center; clear: none;}
div.prod_img {width: 230px;}
div.row_img {width: 50px;}
div.row_img table {border-collapse: collapse; border-spacing: 0px;}
div.row_img table td {padding-bottom: 6px;}
</style>

Do I need to change any settings on the More Information Page settings?

Did you make up div.row_img, etc.. styles or are those shopsite styles?

And do I not put a . or # in front of each style entity? (example, #div.prod_img)

Those are ShopSite styles. No you don't put a pound in front. You only include a pound in front of elements with IDs. Elements themselves (such as DIV, TD, A) don't need anything in front of them. Elements with classes have periods. You can paste the code exactly how I displayed it.

Thanks Lauren. That fixed half the problem. Now the thumbnails are positioned to the right of the main image. But the thumbnails are still in a row. I need the thumbnails to align vertically along the main image.

While testing my page across browsers. The thumbnails only align to the right of the main image w/ Safari and Chrome. FireFox and IE still position the images under the main image in a row.

Could you provide a URL to the page you are working on?

Lauren thanks for all your help. We ended up going back to the original format of the thumbnails under the main image. Works better with our new template.