Multiple More Info Images
This topic contains 0 replies, has 1 voice, and was last updated by Anonymous 14 years, 10 months ago.
-
AuthorPosts
-
February 18, 2010 at 9:25 pm #48723
With ShopSite’s version 10 SP1 release comes a new feature allowing the simple display of additional images on a product’s More Info page. Up to 20 images can be added and with a small change to a ShopSite tag in your template you can display a large image with thumbnails below it. When the mouse pointer is moved over the thumbnails the larger images updates to show the selected image.
Preliminary Settings
Before you begin, there are a few settings to review:
Under Preferences > Extra Fields > More Info Extra Image Fields, set the “Number of More Info extra Image Fields to display:” field to the number of extra images you want to allow for when editing a product. This number determines how many images can be selected for a product.
Under Preferences > More Info Pages, set the “Number of Images in a row” field to the number of thumbnails you want to have appear below your large images. The “Use Image box size” can be used to set the size of the area the larger image displays in, which is very useful if you have images of different widths. Setting this field allows you to force the page to stay a certain width instead of adjusting with each image. The “Image popup” can be used to change the size of the image that pops up if a user clicks on a thumbnail image.
TIP: If you use the “Use Image box size” or “Image popup” fields, be sure to set it larger then your largest image, otherwise scrollbars will appear where the image is shown.
Upload & Assign Images
Whether you use FTP or ShopSite’s Images feature to upload images, upload the additional images that you want to use for your product. Then select that product and under Edit Product Info you assign it’s extra images in the “Extra More Info Image Fields” section.
Also in this section is a field for “More Info Extra Image Size:”. This is the size of the thumbnail that appears below the main image – so in most cases you will want to set this drop-down to the smallest image size you have configured. (Image sizes are set under Images > Configure on the main Shopsite menu.)
TIP: Even though you are using the extra images make sure you still assign an image to the “More Info Page Image:” field in the More Info Pages section. This image will be the first image that appears and most templates check for this field before displaying the new mouse-over image system.
If you’re using a stock shopsite template, then you may now publish your site and check your product’s More Info page for the More Info image with the thumbnails of the extra images below it. ShopSite has added this feature to their newer stock templates, but it would need to be manually added for a store running a custom template for on the More Info page. Or, if you are using a template from before ShopSite version 6 a newer template would need to be selected or a custom template would need to be used. Please see the bottom of this tutorial for a list of stock templates fron before version 6 that would not include this feature automatically.
Template Changes
If you’re not using a template that already supports this feature then you will need a small change made. In your More Info template, look for code similar to this:
[-- IF PRODUCT.MoreInformationGraphic --] [-- PRODUCT.MoreInformationGraphic --] [-- END_IF --]
That codes checks to see if a More Info Graphic is assigned and if it is the image is displayed. To replace this with the new rollover system, you will change the code to:
[-- IF PRODUCT.MoreInformationGraphic --] [-- MoreInfoImageRow --] [-- END_IF --]
What This Does: This replaces the [-- PRODUCT.MoreInformationGraphic --] with the [-- MoreInfoImageRow --] tag which generates the new image system with thumbnail images.
TIP: ShopSite allows you to access each of the Extra More Info images individually in your template. For example, if you know you want to display the 5th image by itself in a certain section of your template, you could use the “[-- Product.MoreInfoImage# --]” tag and replace # with the number 5. This will load and display just the desired image.
Once you make the change above and publish your store, you will see your More Info Image with the product thumbnails below it. Move the mouse over each thumbnail to change the large image above them or click on a thumbnail image for popup window to appear with that image inside of it.
To see an example of a product using this feature, please see this item in our demo store:
http://shopsite-demo.lexiconn.com/multi_image_sample.html
Additional Reading & Reference
ShopSite Template Cookbook – Multiple Product Images and Thumbnails:
http://www.shopsite.com/templates/cookbook/product-multi-imgs.shtml
ShopSite Documentation – More Info Page Settings:
http://www.shopsite.com/help/10.1/en-US/sc/pro/more.info.html
ShopSite Documentation – Extra Fields:
http://www.shopsite.com/help/10.1/en-US/sc/pro/mapname.html
ShopSite Documentation – Edit Product Info:
http://www.shopsite.com/help/10.1/en-US/sc/pro/edit.product.info.html
Older Stock Template
Prior to version 6 of ShopSite the templates were compiled into the software and can not be edited. If you are using a product template on this list you will need to select one of the newer templates or create a custom template to add the mouse-over feature:
Default Product Template
Graphic Over Text
Compact
Compact Graphic Over Text
Inline
Inline Graphic Over Text
One line
-
AuthorPosts
You must be logged in to reply to this topic.