• Daily Deals
• Special Promotional Stuff
• Contact Link
• Login Box
• Help Box
• Shipping Quote Box
• Testimonial Box

Now its just up to you what your are going to do with it. This tutorial will give you that basics needed put it you would like something more than this… you will have to change a couple things in the text and the css files. The RTML will need to be changed a bit as well!

So… lets get started now!

Store Manager >> Store Editor

This first thing that you will want to do is think of how you will want to using and decide where you would like it. Once you figure out these two things out, find that template and place the RTML below in there some how!

Now that you have the RTML in place you will need to add the script! Please download the link below and upload them into a fold called “bounce-box” within your main directory.

After you have uploaded the script files to your main directory… we will need to paste the script links into your variables page of your store.

Store Manager >> Store Editor >> Variables

Now that your in the variables page you will be to create a new variable. Click the “Define New Variable” on the top of the page. Name it “script-text”, without the quote and give it a “big text” type! After clicking contiune scroll down the variables page until you see the empty text box for the “script-text” and paste the code below into it. Please remember to change the “siteurl” to your own url.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://site.siteurl.com/bounce-box/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://site.siteurl.com/bounce-box/jquery.bouncebox.1.0.js"></script>
<script type="text/javascript" src="http://site.siteurl.com/bounce-box/script.js"></script>

Now that we have the RTML in place, the script upload and the script into the your variables page… We will need to add a couple more new items to the variable page. Below are the two others that will need to be added.

box-bg – image
warning – image

Please download and upload these images below to the new variable items you have just made!

Now is’t time for the last thing… the css file!

Store Manager >> Store Editor >> Contents

This is the contents page where your should have most of your css files! We are going to click on the “new” button on top. Give it the id of “bounce-box” and a type of “css”… click continue and copy and paste the css code below into the css-text box!

/* The bouncing box */

#box{
	background:url($box-bg) repeat-x center top #fcfcfc;
	height:115px;
	padding:20px;
	margin-top:-10px;
	padding-top:30px;
	width:400px;
	border:1px solid #fcfcfc;
	color:#494848;
	text-shadow:1px 1px 0 white;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
}

#box p{
	font-size:25px;
	background:url($warning) no-repeat 10px center;
	padding-left:90px;
        margin-top:-20px;
}

#box p b{
	font-size:52px;
	display:block;
}

#box,
#main,
a.button{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

/* Styling the big button */

a.button,
a.button:visited,
a.button:active{
	color:white;
	letter-spacing:-2px;
	padding:20px;
	display:block;
	text-shadow:1px 1px 0 #145982;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	font-size:80px;
	font-weight:bold;
	text-align:center;
	width:350px;
	border:1px solid #60b4e5;

	margin:60px auto;

	/*
		CSS3 gradients for webkit and mozilla browsers,
		fallback color for the rest:
	*/

	background-color: #59aada;
	background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}

a.button:hover{
	text-decoration:none;
	background-color: #5eb2e2;
	background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
}

/* Only needed for the demonstration page */

#main{
	background-color:#073753;
	height:500px;
	margin:140px auto 50px;
	padding:90px 30px 0;
	position:relative;
	width:640px;
}

#main p{
	color:#ccc;
	font-size:19px;
	line-height:1.4;
	margin-bottom:20px;
	text-align:center;
}

#main p strong{
	color:white;
}

h1{
	padding:30px 0;
	text-align:center;
	text-shadow:0 1px 1px black;
	margin-bottom:30px;
	font-size:24px;
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

Now this should about do it! Remember you will need to change the css colors and what not if you would like to create your own idea for the bounce box! Please be sure to share with us what you have done with it… I would love to see it!

This is only for the Yahoo! Store Editor V3.

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

This first thing your going to have to do is log into your store editor and open your store variables!

Store Manager >> Store Editor >> Variables

Now that your are on your Variables page you will need to add a hand full of Variables. Each on of these are going to have an “image” “type”. Use the list below for help!

• Name: Social-blogger | Type: image
• Name: Social-delicious | Type: image
• Name: Social-digg | Type: image
• Name: Social-facebook | Type: image
• Name: Social-google | Type: image
• Name: Social-stumble | Type: image
• Name: Social-twitter | Type: image
• Name: Social-youtube | Type: image

Now that they are all set to upload image to them you will need to find some social media icons… here is a link to a great place to find some. Remember you might need to resize them if they are too big for what you need before you upload them in your Variables page!

After you have downloaded and resized the icons you would like to use go ahead a upload them icons you would like to uses for each social Variable and then hit update.

After updating the variables page you will be taken back to your home page where you will need to open up your templates.

Store Manager >> Store Editor >> Templates

It will be defaulted to the storetemplate… and then you will need to click on the “template” button again on the store tool bar!

Once you see the long list of template there will be a “new” button located on the tool bar, lets go ahead and click on that and give it a name of social-media!

Now that you have the new “social-media” template open it should have a default HEAD and BODY in there! Before you delete them click new and add a “DIV” Complex and replace the DIV with the HEAD! Then click on the body and cut it out then clear your list on the very bottom!

Now you will need to make the rest of the RTML look like the image below! Please remember to change the “www.yourstoreurl.com” to your own store url link!

Now that you have your “social-page” template all done… Now you will need to play around with it to see where you would like it!

Before we can go any further, you will need to create a free account with Google Analytics to get the script to paste into your store!

Ok, now that you have signed up we will want to login to your Yahoo! Store editor and add a variable!

Store Manager >> Store Editor >> Variables

Once you have made it to the “Variables” page you will want to click on the “Define New Variable” button located on the top of the page.

For the name “Google-analytics” without the quotes.
For the type “big-text”.

Ok, the Google Analytics big text field is set for use now. Let go ahead and hit that “update” button on the top left side of the page before the time-out occurs on you!

Now we should be back on the front page of your site in the Store Editor still! Let go ahead and add the RTML to the template that is needed to get the Google Analytics script to work.

Click on the template – or your default store template name link on the tool bar.

Now inside your default page template click on the first RTML word that shows up in blue. Now, click the new button up top on the tool bar and select “TEXT” in the long list of complexes there! Click create and than it will redirect you to template again. On the top tool bar you will want to click the “paste after” button, and than the edit button after the “paste after” button is no longer clickable. In the “TEXT” arg field you will need to type “@google-analytics” without the quotes again like the picture shows below! Now click the update button.

Now that we have the TEXT @google-analytics in place we will need to add the script into this text field in the variables! First we will need to grab your code from Google Analytics.

• Log in to Google Analytics at http://www.google.com/analytics
• From the Overview page, select the account that has the profile for the tracking code you’re looking for, as the code is profile-specific.
• Select the profile from the accounts Overview page.
• From that profile’s Actions column, click Edit
• At the top right of the ‘Main Website Profile Information’ box, click Check Status
• Your tracking code can be copied and pasted from the text box in the Instructions for adding tracking section

Now that you have your Google Analytics on your clip board ready to be pasted. Lets go to your Variables page again to paste it!

Store Manager >> Store Editor >> Variables

Now in the Variables page scroll down until you see the google-analytics big text field and copy and paste the script in the to text field!

Once, you have the script in the right place you will need to click the update button on the top left hand side of the page!

This should be it! Once you complete this it should take a couple of days before you will see any results , but be sure to look at all the features that Google Analytics has to offer on your account there!

Ok, lets start by added the page preferences!

Store Manager >> Account Preferences

Under the “Store Settings” block please select the option to “Use a custom Store Editor error page” and then in the text block below in the “Enter custom error page id:” let enter “404-errors” without the quotes. The click the change button in the bottom right hand corner!

Now, we need to add the custom page in the store editor!

Store Manager >> Store Editor

In the editor with the advanced editor store tool on, click the “Contents” button on the bottom row of the tools.

Inside of the contents page click on the “new” button up top. In the id field type “404-errors” without the quotes and the Type select “raw-html.” and click continue!

Now that you are on the 404-error.html page click the edit button on the store editor tool bar and lets give it some TLC!

Save my 404 error image on my page or create your own for your page and host it someone where you could please it in your caption of the page!

Under the object properties

Name: Page Not Found
Caption:

<center>

<img src="http://site.ourstoreurl.com/images/404.png">

We're sorry - The page you are looking for has either been moved or sold out.

Please use the search box below to find what your looking for.

If you are still having trouble, please let us know so we can help you locate what your are looking for!

</center>

Search-label: May I help you find something: (Or what ever you would like there!)
Search-button: Search (or what ever you would like there!)
Headline: Page Not Found

After you click update that should be it and it will direct you to the page where you could see the page look! Please feel free to adjust the look that your looking for!

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

This first thing you are going to want to do is download this css and javascript files and upload them to your store hosting.

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.

<!-- Frontpage Image Slider -->

<!-- // css / Stylesheets // --> 
<link href="http://site.yourwebsiteurl.com/frontpage/css/slider.css" rel="stylesheet" type="text/css" /> 


<!-- // js / Javascript // --> 
<script type="text/javascript" src="http://site.yourwebsiteurl.com/frontpage/js/jquery.min14.js"></script> 
<script type="text/javascript" src="http://site.yourwebsiteurl.com/frontpage/js/jquery.easing.1.2.js"></script> 
<script type="text/javascript" src="http://site.yourwebsiteurl.com/frontpage/js/jquery.anythingslider.js" charset="utf-8"></script> 
<script type="text/javascript" src="http://site.yourwebsiteurl.com/frontpage/js/anyslider.js"></script> 

<!-- Frontpage Image Slider -->

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!