Blog

Sorry for such the long time in between this and the last tutorial. This is another requested tutorial that I am sure that a lot of others would love to have on their store’s as well! This tutorial will allow you to have a clear and more presentable front page with featured item in your images sliding. If I was to put a scale of difficultly on this tutorial it would be 3 out of 5. It’s really not that hard just a lot of this to click on. Let get started with the fun stuff now.

This tutorial is only for the Yahoo! Store Editor V3, and You also must know how to edit RTML for this tutorial.

[alert_green]View Demo[/alert_green]

This first thing you are going to want to do is download this css and javascript files and upload them to your store hosting. [alert_green]Download Files Here[/alert_green]

Store Modules Page >> Web Hosting Control Panel >> Create & Update >> File Manager

Once you are see the folders listed on the page you will need to create a new subdirectory and call it “frontpage” with out the quotes. Once you create the new folder find it in the list and open it by clicking on it!

Once you have opened the “frontpage” folder create two more and call one “css” and the other “js” with in that folder. Once they are in there click on the “css” folder and upload the content with in the css folder you have just downloaded and then the same with the “js” files.

If you have a ftp program that is hooked up to your store this would be a look easier. Just create a folder with in the main directory and just upload the “css” and “js” folders into it!

After you have the files uploaded to your Yahoo store hosting account. We can started on the RTML of the tutorial! We will need to go to the template list of your store.

Store Manager >> Store Editor >> Templates

Lets create a new template and give it a name “Top-frontpage” without the quotes. Copy the RTML into your template to look like the one below!

Okay, now that the RTML for the image and slider are in there we can go ahead and place the Call: for the template in the right template. You will need to go back to the list of the store template and find the template named “home” and open it by clicking on it.

Well in the home template page click the new button on top and then click the first blue link which should be “FOR-EACH”. Then the replace button on top should light up… press it and then press the paste after button. This will but the CALL on top of the whole page. Now click on the call extension and then click on the edit button! Now inside the text field we are going to call the template that we just made their. Type the following in there without the quotes “:top-frontpage”. If you see a red box next to the template call name than it will connected correctly than. It should look like the image below.

Now that the templates are in place we need to add some customer properties to the page. This is where you would upload and update any of the images.

Let go the your home page and click the edit button. Now we will click on the “New Property” button on top and create the following. If you add them in the order that is listed below, it would be easier for you to update them at a later date.

Name – Type
—————————–
Frontpage-image1 – image
Frontpage-id1 – text
Frontpage-image2 – image
Frontpage-id2 – text
Frontpage-image3 – image
Frontpage-id3 – text
Frontpage-image4 – image
Frontpage-id4 – test

Frontpage-image-bannertop – image
Frontpage-id-bannertop – text
Frontpage-image-bannermiddle – image
Frontpage-id-bannermiddle – text
Frontpage-id-bannerbottom – image
Frontpage-image-bannerbottom – text

It should look like the following image below!

The css in the file is set to a certain size image, but feel free to change the size of the image and css specs if you need to.

*Default Image Requirements
—————————
Image Slider – 515×261
Side Ad Image – 256×87

Now you will need the turn the override on for the head-tags. On the home “index” page click the edit button. Click the “Override Variable” button on the top. Select “Head-Tags” and click update. Now under the Custom Properties section you will find the big-text box. Copy and paste the script from below and paste it into the Head-Tags field. Remember to change the your to your own or it will not work right.

This is how this is set up! There are four of the image sliders where you can upload the images and there are id right below them. To link them to a page on your store. You will need to grab the id of the page by going to the item and click the edit button… on the top there is a field that has the item id. Or you could visit your website outside of the store editor and click on the page you want the link to visit and copy the text between the “.com/” and the “.html”. For example your URL is http://www.caligrafx.com/sdfwe897.html you would only grab the bolded font in the url and paste it into the id field.

Once you have all of the images and id in place be sure to check the home page out before publishing your store!

I hope you found this tutorial easy enough to follow. If you have any questions or comments please use the “comment” form below and I would be happy to reply to you!