Customizing your store
Adding Extra thumbnails and zooms
The built in scripting language of RealCart is very powerful. You can create dynamic new templates using our proprietary RealCart data field tags. Here is one way to add additional thumbnail and zoom images to your product pages. Let’s say, for example, that you want to add three more ZOOM images to your product pages.
To do this you will need to edit the template called “product.html” in your current theme folder. If you want to add the additional zoom images to ALL of your product pages then just edit the “product.html” file directly. If not, just save the “product.html” file as another filename. Save it as “prod-extrazooms.html” and then later you can assign which products will use the new template (as described in the Section 7.1.)
Edit the Template
The first step would be to open your product.html file and either save it as another filename as described above or just go straight to the steps involved in adding additional zoom images to your product page template:
- Use a text editor like notepad.exe for best results.
- Locate this line of code in "product.html":
[Products_Features:feature.snp]
- Add the following lines of code below the line that reads [Products_Features:feature.snp] (You can put this code anywhere, but for this example we are placing them here.)
To view zoom images of this product
click one of the links below: <br><br>
<a href="[Products_ItemStockNumber|^:_~]Z1.html" target="_zoom1">ZOOM 1</a> ||
<a href="[Products_ItemStockNumber|^:_~]Z2.html" target="_zoom2">ZOOM 2</a> ||
<a href="[Products_ItemStockNumber|^:_~]Z3.html" target="_zoom3">ZOOM 3</a>
- This area in the "product.html" template should now resemble this:
<tr>
<td>
[Products_Features:feature.snp]
To view zoom images of this product <br>
click one of the links below: <br><br>
<a href="[Products_ItemStockNumber|^:_~]Z1.html" target="_zoom1">ZOOM 1</a> ||
<a href="[Products_ItemStockNumber|^:_~]Z2.html" target="_zoom2">ZOOM 2</a> ||
<a href="[Products_ItemStockNumber|^:_~]Z3.html" target="_zoom3">ZOOM 3</a>
</td>
</tr>
</table>
- Save the file then rebuild your store. When you are done you will see the following new links at the bottom (or where ever you added them) of your product page template.
To view zoom images of this product
click one of the links below:
ZOOM 1 ||
ZOOM 2 ||
ZOOM 3
- You will now need to create these “zoom windows” by simply creating a page that contains the image of the product that you are “zooming”. Name these pages as follows.
Example. Stock number: 12345a
Page created by RealCart is called: 12345a.html
Zoom pages you need to create: 12345aZ1.html, 12345aZ2.html and 12345aZ3.html.
In other words. Name the zoom files like this:
(Whatever the stock number is) + Z1.html
(Whatever the stock number is) + Z2.html
(Whatever the stock number is) + Z3.html
This will make 3 zoom windows that will be opened when clicking the links you added to “product.html”. Save these new “zoom pages” in your cart folder and then republish your store.
Be sure to create all of your new zoom pages before attempting to publish your store. If you don’t then your customers will get 404 File Not Found errors as they click these new zoom links.
|
Copyright © 1995-2006, RealCart.com®
Made possible by the Grace of God.
Do yourself a favor, LoveYourWife.com.
This page last modified on
|
|
