Blog

This would be the second tutorial I have writen for the Yahoo! store for the all the Yahoo! store owners. The first one was a big success and had a couple of people looking for the tutorial on the description tabs. Well, here it is! Again, I will do my best to keep it as easy as possible for everyone to follow.

This is only for the Yahoo! Store Editor V3.

You also must know how to edit RTML for this tutorial.

Jquery/Javascript Download File – Click Here

Once you have downloaded the script from the above link you will need to create a directory called “tabs” and then upload the script files to the “tabs” directory.

Thie script will require you to put a couple of lines in the Head-tags text box so lets get that part done! You must keep in mind that you have have a website with a out side page than your website must be as followed “http://www.yoursiteurlhere.com” if you have your Yahoo! store set at your home page then your website links must be “http://site.yoursiteurlhere.com”.

Login into your store manager >> Store Editor >> Variables

Now scroll down the page until you find the “Head-tags” text box. Then paste the head tag script in text box.

Okay, now that we have the files downloaded and uploaded to your website server and the head scripts are in place we can now work on getting code in the store editor.

On the store editor tools is a red arrow on the right to open the “Advanced Editor”. Once the second line of options show up if not already click on the “templates” or “storetemplates” button.

If you clicked on “storetemplates” then we you get to the next page you will have to click on the “templates” button on the top of the page to show you all of your store templates.

Now we are looking for the “text template”.

We need to start the “tab” rtml code right under the DIV class “pageTextHeader”.

The RTML need in below;

Now that we have the “tab” RTML code in place, we need to add a couple of custom variable to the store table.

On the store editor tool bar click Store Manager >> Catalog Manager >> Manage Your Tables >> default-table

On the very bottom under the “custom fields” click on the edit button on the right hand side. On the botton of the page click on the “Add Another Custom Field.” we are going to need to add two with a Big-Text format.

Size-chart – Big Text
Specs – Big Text

Now we have the text areas in place for each item with need to go back the the store editor and add a couple of custom varaiables.

Store Manager >> Store Editor >> Varaiables

At the top of the page here is a button called Define New Variable click and added the following with the type next to them.

H2-description – Text

H2-Size – Text

H2-Specs

Tab-menu – Big Text

End-tab-menu – Text

After you have put the new variables in place we need some code in each one. Below are the new variables you just added with the code need for each one.

H2-description

H2-description

H2-Size

H2-Specs

Tab-menu

End-tab-menu

Ok that should be it! Now remember is you want change the names of the tabs then just go into

Store Edior >> Variables

If change the name(s) in the “Tab-menu” text field, but remember if you change the link name, to change the div name back in the RTML code.

If you would like to add each featured specs to its own line plus use the following code.

I hope you have successfully added this feature to your Yahoo! store. If you have any question please feel free to ask.