Adding more images to the Yahoo! Store
The Yahoo Store is a wonderful platform, easy to use as everything has its place: images, text, item info. With the basic setup it will please most customers and Yahoo does a great job with these things. Some store owners want more, such as an image light box, custom navigation bar or more images, for a few examples. This last one is what I will show you today, we will be adding more images! Right now the store has 2 images per item, the main image and an inset image. The inset image is placed in the product description area and text will wrap around the image. What I will show you today is how to add 4 images total and move them to just under the main image. With that you can also use the post on Light box to add even more flair to your store. Image on left is of Woven Art & beyond
I am going to start by saying this is an RTML edit and will require custom templates in your store, if you follow this blog and are familiar with and comfortable making changes to the templates in your store then you should be fine if not read my getting started with RTML. I am also working with a left navigation template and top navigation is different, so keep that in mind.
First lets take a look at the template called yhst-########-display-paras . that template holds the inset image so we need to cut it from the template:
DIV id id
WHEN OR
NONEMPTY @code
CALL :yhst-########-has-price
TAG id "itempage-captiontitle"
tag "h2"
TEXT @product-overview-text
WHEN NOT OR
NONEMPTY @code
CALL :yhst-########-has-price
CALL :yhst-########-image
area
image
h
w
align
headel
imgclass
WHEN AND
OR
NONEMPTY @code
CALL :yhst-########-has-price
@inset
WITH= variable inset-class
value IF test EQUALS value1 align
value2 :center
then "image-l"
else imgclass
WITH= variable inset-align
value IF test EQUALS value1 align
value2 :center
then :left
else align
CALL :yhst-########-image
area
@inset
@inset-height
@inset-width
inset-align
headel
inset-class
CALL :yhst-########-text
nil
content
Now, from that template we need to focus on this part:
WHEN AND
OR
NONEMPTY @code
CALL :yhst-########-has-price
@inset
WITH= variable inset-class
value IF test EQUALS value1 align
value2 :center
then "image-l"
else imgclass
WITH= variable inset-align
value IF test EQUALS value1 align
value2 :center
then :left
else align
CALL :yhst-########-image
area
@inset
@inset-height
@inset-width
inset-align
headel
inset-class
Click on the first WHEN operator, and hit the Cut button at the top. We now need to make a new template called “extra-images” (you can name it what ever you would like). To do that go to the “template” link at the top and click “new template.” Once we get the new template, we need to add the previously cut code to that page, so click on “BODY” and “paste after” then we can cut and delete the HEAD and BODY code on this page (not needed) so click and cut the items then click on “Clear” button on the bottom. so it should look just like this
WHEN AND
OR
NONEMPTY @code
CALL :yhst-########-has-price
@inset
WITH= variable inset-class
value IF test EQUALS value1 align
value2 :center
then "image-l"
else imgclass
WITH= variable inset-align
value IF test EQUALS value1 align
value2 :center
then :left
else align
CALL :yhst-########-image
area
@inset
@inset-height
@inset-width
inset-align
headel
inset-class
OK, here is where it will get a little harder: we are going to build a table to house the images. We need to start with clicking “new,” then scroll down and select TABLE. Once you have selected that, click on the WHEN button at the top of the page and click “Replace.” Then, once the page refreshes, click on “Paste Within” and now it should look like this:
TABLE border nil
align nil
cellspacing nil
cellpadding nil
units nil
width nil
class nil
id nil
style nil
title nil
WHEN AND
OR
NONEMPTY @code
CALL :yhst-########-has-price
@inset
WITH= variable inset-class
value IF test EQUALS value1 align
value2 :center
then "image-l"
else imgclass
WITH= variable inset-align
value IF test EQUALS value1 align
value2 :center
then :left
else align
CALL :yhst-########-image
area
@inset
@inset-height
@inset-width
inset-align
headel
inset-class
Now you can see the TABLE and all the options that it has, and you can hide all of that by clicking on TABLE and then the button called “Contract” and that will hide all the unnecessary options. Now we need to do the same step with TABLE-ROW, so click on “new” and select that operator and click “Create” and click on WHEN and replace and Paste within. So we have started the table and it will be 1 row and 3 cells, you can change this any way you would like. For the last part of the table we need to click on “New” find TABLE-CELL, then click “Create,” and then click on the “CALL :yhst-########-image” and hit replace then “paste within”, so we have the end of a basic table, the code should look like this
TABLE
TABLE-ROW
WHEN AND
OR
NONEMPTY @code
CALL :yhst-########-has-price
@inset
WITH= variable inset-class
value IF test EQUALS value1 align
value2 :center
then "image-l"
else imgclass
WITH= variable inset-align
value IF test EQUALS value1 align
value2 :center
then :left
else align
TABLE-CELL
CALL :yhst-########-image
area
@inset
@inset-height
@inset-width
inset-align
headel
inset-class
This is where it gets easy again! Click on the TABLE-CELL and hit the copy button twice, then click the “paste after” so it looks like this
TABLE
TABLE-ROW
WHEN AND
OR
NONEMPTY @code
CALL :yhst-########-has-price
@inset
WITH= variable inset-class
value IF test EQUALS value1 align
value2 :center
then "image-l"
else imgclass
WITH= variable inset-align
value IF test EQUALS value1 align
value2 :center
then :left
else align
TABLE-CELL
CALL :yhst-########-image
area
@inset
@inset-height
@inset-width
inset-align
headel
inset-class
TABLE-CELL
CALL :yhst-########-image
area
@inset
@inset-height
@inset-width
inset-align
headel
inset-class
TABLE-CELL
CALL :yhst-########-image
area
@inset
@inset-height
@inset-width
inset-align
headel
inset-class
This would now show the same image 3 times, but we will change that. For the two other @inset we will click on that then click “New” type @inset2 and create then replace the second inset, do the same thing for the 3rd image and call it @inset3 and we are done. Now we just need to call on this template, so we will head back to templates and click on yhst-########-display-item, with that template we will click on the WHEN itemimg and click “new” at the top, choose CALL from the options and click create. Now we are going to paste after the WHEN and then click edit from there, type in “:extra-images” with out the quotes, and you are almost done.
Lastly, we need to add the image options to the catalog manager, so go to your home page and click “Manager” then catalog manager. From there we need to go to Tables, then click on “Default-table” scroll down to the custom Fields and hit edit on the right hand side, from there you need to click on “Add Another Custom Field” and name it “inset2″ and one more named “inset3″ and choose the option for image to the right of the name, update and TEST to make sure it looks like. If you have any issues with any code, comment on this post and I will fix any problems or answer your questions. thank you!
Tags: extra images, more images, RTML, rtml programming, rtml templates, rtml tutorial, Yahoo store
RTML, web design, Yahoo store | E-comm | 28 May 2010 |
4 Comments
Other Links to this Post
-
Tweets that mention Adding more images to the Yahoo! Store | E-comm Solution -- Topsy.com — May 31, 2010 @ 7:47 pm
RSS feed for comments on this post.
Leave a comment
You must be logged in to post a comment.
By cruddydan
, April 7, 2011 @ 12:30 pm
Even though I am new to Yahoo! Store and RTML, I found your article to be very clear. However, when I went to implement these same changes in my store, I could not find the yhst-########-display-paras template (yes, I followed your “Getting Started with RTML” article, and have other yhst-########- templates, just not the -display-paras one). There doesn’t appear to be a Built-In template called display-paras, either.
How do I proceed?
Thank you.
By E-comm
, April 9, 2011 @ 2:57 pm
are you using editor v2.0 or 3.0, My main focus is on editor v3.0 and v2.0 does not have that template.
By cruddydan
, April 9, 2011 @ 5:08 pm
Hi,
In the Store Manager, selecting Advanced | Templates, it says “Store Editor version 3.0″ at the top of the page, so I assume it is the v3.0 editor.
Thanks