Adding multiple thumbnails for each item

RapidCart_Tips_and_Tricks_icon.png

Previous: Adding a "More Info..." button in Description Field

The most effective way to sell your product is through pictures. RapidCart can provide you an easy way to show different thumbnails of the same product.
Let's explain through a simple example: we're assuming we have a T-Shirt store and we're selling different colors of each item.
When we first add the product, it will look like this:

RapidCart_Tips_and_Tricks_Multiple_Picture_01.png

We want our customer to see also back side. We directly drag and drop the big picture from Finder to RapidWeaver resources menu.

RapidCart_Tips_and_Tricks_Multiple_thumbnails_01.png

Then we manually create a picture thumbnail with an external graphic tool such as Preview (as RapidCart won't resize them for us). We drag this thumbnail to the product description field and add an hyperlink.

RapidCart_TipandTricks_Multiple_thumbnails_03.png

RapidCart_Tips_and_Tricks_Multiple_Thumbnails02.png

Last we assign the zooming effect to the thumbnail by adding "rel" attribute to that link.

RapidCart_Tips_and_Tricks_Multiple_thumbnails_04.png

That's how it will look like at the end.

Multiple_images_result.png

  • NOTE: Resources won't show in RapidWeaver 5 Preview mode.

for RapidWeaver 4 users only

RapidWeaver 4 users have to use assets to upload and link external resources. Again, we're assuming we have a T-Shirt store and we're selling different colors of each item. We decide to show all available colors in description field, so we must upload big pictures using Page options>Header>Assets.
We upload files using "Add Files.." button.

T_shirt_example_adding_files.png

Then we create thumbnails of each picture, though RapidCart won't resize them for us! We created thumbnails using Preview resizing tool, but every external picture resizing tool would be perfect as well.
All we have to do now is just dragging thumbnails into "Description" field and add an hyperlink to each of them pointing to the big picture.

T_shirt_set_remooz_effect.png

"Description" field accepts HTML so we can add lines, text or else to customize items presentation. Previewing our T-Shirt Shop, it will look like this:

T_shirt_example_with_multiple_pictures.png

Clicking on thumbnails will open the related big picture.

Next: How to add the cart to non-RapidCart pages