How to create a successfull affiliate shop – step-by-step tutorial
You can visit sample website to see the final result or compare your code.Currently the Internet is an excellent place for earning money. Moreover you can make money out of almost everything, even if you don’t have your own product in the Internet. For instance, you can use an affiliate shop for this purpose. Thus, you will be able to sell someone’s product under your own brand simultaneously receiving your interest. You don’t need any special skills for creating an affiliate shop. I’ll try to give everything you need for creating an affiliate shop in this tutorial. I’ll describe how to create an affiliate shop using a free template as an example. Our future affiliate shop is designed for selling website templates as well.
Choosing a template design
So let’s begin with a site creation. Currently a template-based creation of a web site design is the most money-saving and effective. Browse our collection of affordable and quality web templates and pick a template to your liking. It would better if it is business (corporate) themed. Let’s select one in dark tones with readable texts. My choice is #22742. Here it is:
Among FTO templates I gave my preference to this template: http://www.freetemplatesonline.com/templates/Free-Business-Templates-39.html. Now, use this link and download it to your computer.
After purchase you will find HTML-version and source PSD file of the main page, fonts which are used in the template and some screenshots in the archive. Now, it’s time for the template customization.
Template customization
First, you should install necessary fonts(usually they are placed in “sources/fonts” folder- in this tutorial you’ll find more detailed description. After that open .psd file in Photoshop and make necessary customization. The template already has a left part with categories (in the future we’ll use it for templates categories navigation, but I’ll tell you about this a bit later). The same with “LATEST WORKS” at central part – we are going to make a show-window with templates with the help of generated JavaScript code. Remove “Search” form from header – we don’t need it. And change copyright at the bottom.
Our next stop – logo and slogan. This template has already had a logo. You can leave it, or you can purchase a unique one here, or download free logo here, or finally you can read tutorials and articles on creating logos in this section and create your own logo.
Also it is advisable to give names of template categories to navigational buttons in the upper part which you will use on your website. You can look through categories on our website templates here. I chose the following categories for a wider range: all templates, flash, swish templates, logos, icon sets and premium templates. You can find many tutorials devoted to buttons handling here. Also you can make use of TemplateTuning.com service. They can customize your template the way you want.
Let’s look at this milestone screenshot:
In most cases after correcting the design you don’t need to slice tutorial, save as separate images and code the page once more. This template has a complete HTML version, so all you need is to make some small changes in the specified parts and correct images (they are in images folder) using one of HTML editors. If you are not very good at HTML coding, then I recommend you to search the HTML & CSS Tutorials section at www.webdesign.org. I got this code. Again by using the TemplateTuning service you can describe necessary changes, and professional web designers and coders will help you to customize your web site.
Well, the main page is ready for template integration. Now you need to register an affiliate account at MyTemplateStorage.com (press the Sign Up button on the main page). Registration procedure is free.
Affiliate program registration&setup
On this web site you’ll find all the necessary tools for affiliates. There you will be able to generate the code for your affiliate shop, have a look at your financial statistics, ask questions on affiliate forum, update your affiliate information and do a lot of other things. Now we need to go to the Presets section in order to generate the code for adding templates on your web site. In this section you should navigate to the Presets Settings section and create preset for your web site. Type in a desired name and press Add Preset. You’ll be able to find it in Your current Presets table. Press the Edit button; there you can change the basic settings.
Layout Settings:
Allows you selecting skins for a template thumbnail out of premade skins, create a custom skin based on premade ones, or start from scratch. I selected skin from premade ones.
Samples Layout Settings: Here you can do the same for Samples.
Search Settings: Allows creating and customizing advanced search form. My affiliate shop assumes only keyword searching.
Price Settings:
Here you can choose currency which will be used for selling templates. You can also change template prices in this section.
Clipart Library Layout Settings: Here you can change some parameters for Clipart Library just the same way you did in Layout Settings.
Other Settings: Here you can change a preset name, enable displaying of Adult templates on your website and choose language.
Custom Color Settings: Here you can change color settings for any elements of a template preview page.
Delivery Page Settings: In this section you can add various menus with additional services, customer support for your Preset.
The most interesting part comes after creation and customization of a Preset – integration into a web site. You’ll find everything you need on the Preset Tools page.
Display templates:
Allows changing settings for template preview window. I’ll describe this menu in details because we’ll need it in the first place.
Choose the preset – Choose the created preset, which will serve as a basis for a page.
Choose the type of templates you wish to display
– choose template types to be displayed on a page, (in accordance with the chosen categories for main navigation) – Full, Flash, SWiSH, Logo, Icons)
Choose category of templates – Choose template categories to be displayed. If it is not a specialized web site then it is better to choose All Categories.
Choose number of columns (rows) – Sets the number of templates to be displayed on a page.
Background color – sets background color.
Space – Sets the distance between templates. 10 pixels will be the best value.
Frame Name, Frame Width, Frame Height – sets name and size for generated frame.
Templates shop integration
After you set all the parameters, press Generate, and HTML code will be generated automatically, together with preview so you can check if everything went properly. Also you can change parameters on the fly and generate the code again.
You should get the similar code:
<!– Templates list code start. –>
<script type=”text/javascript”
src=”http://www.templatehelp.com/codes/pr_interface.php?cols=3&rows=5&sadult=0&sp=20&bgcolor=000000&type=0&ih=1600&category=0&pr_code=Ven7S5o88A10H2Vzv4utgG757H49Cr”></script>
<!– Templates list code end. –>
Copy this HTML code and paste it into the main section of a template. Now it should look like this.
Display a particular template: Allows enabling or disabling displaying particular templates.
Display featured templates: You can generate Sample templates preview code for your visitors to find out what the template is and how it must be edited.
Display adult templates: Adult templates are of rare use on template web sites that’s why they are generated with the help of a separate code.
Display search form: You can generate Search Form code that will help your website visitors to find the desired template.
Free clipart library:
As an additional service TemplateMonster offers free clipart collection. By using this form you can generate the clipart code for your template.
Display order status form: Allows generating JavaScript code to display order status form on your site.
Promo codes generator: Allows generating and managing your promo codes.
Now the main menu – selection by categories. Unfortunately, MyTemplateStorage tools do not allow generating a separate code for the menu. But we can find the way out. You can follow this link: Ready-made affiliate shops, and generate the code for a ready-made affiliate shop, then paste this code into a template. Sometimes this procedure becomes complicated but I’ll tell you what you have to do hoping you don’t get confused.
First you should copy file common.js from the ready-made shop to your template directory and change parameter &pr_code=Ven7S5o88A10H2Vzv4utgG757H49Cr into your preset code and. After this add the following code to <HEAD> of your index HTML.
<SCRIPT type=”text/javascript” language=”JavaScript” src=”common.js”></SCRIPT>
<SCRIPT type=”text/javascript” language=”JavaScript”>
document.onreadystatechange = HideStatus;
IncludeAffInterface(‘categories&authors’,'pr_data.js’);
</SCRIPT>
Then put this file into to the same folder where index.html is.
Now let’s insert the following code where categories should be added:
<ul class=”list1″>
<SCRIPT language=”JavaScript” type=”text/javascript”>
var curCatName;
var bullet = “<li> “;
var target = “_self”;
var url = “search.html”;
var lnkParams = ‘onClick=”curCatName=this.innerHTML”‘;
IncludeAffInterface(”,’pr_categories2′);
</SCRIPT>
</ul>
You don’t have to add the code describing “list1″ class to style.css because it is already exists there.
The main page is finished, though it is not functional yet. Save the results and have a look at what we’ve done:
Now paste here the same code you used for index.html. Now find the old code, responsible for template displaying and replace it with the new one.
<SCRIPT language=”JavaScript”>
affInterfaceOptions += ‘&cols=2&rows=3&sp=10&iw=400&ih=800&bgcolor=%23FFFFFF&noscroll=yes’;
</SCRIPT>
<SCRIPT>
if(curCatName)
document.write(‘<H1 style=”text-transform:uppercase”><SPAN>’+top.curCatName+’</SPAN></H1>’);
</SCRIPT>
<div align=”center”>
<SCRIPT type=”text/javascript” language=”JavaScript”>
IncludeAffInterface(window.location.search.substring(1));
</SCRIPT></div>
Here we need to find this line:
&cols=2&rows=3&sp=10&iw=400&ih=800&bgcolor=%23FFFFFF&noscroll=yes
change parameters to fit best your purposes:
&cols – number of columns;
&rows – number of rows;
&sp – distance between displayed templates;
&iw – frame width;
&ih – frame height;
&bgcolor – background color;
&noscroll – specifies whether scrolling is enabled or not.
Create one more HTML file with the following name – search.html. You can remove blocks with featured products description to clean some space on the page and give more attention to the templates. Like here:
This is my final code (4 pages with the code are given down the text 4 – index.html, search.html, style.css, layout.css) not including maxheight.js and common.js. You can check your source code by comparing it to this example website!
Next you need to create 5 more pages for other categories: flash, swish templates, logos, icon sets and premium templates. Create copies of index.html and change their names like flash.html, swish.html etc. Paste the new code generated on Display templates on your site page to the part with displayed templates, using parameters according to the chosen category.
Also it is necessary to make links for each page in main menu code:
<ul id=”menu”>
<li><a href=”#”>all templates</a></li>
<li><a href=”#”>flash templates</a></li>
<li><a href=”#”>swish templates</a></li>
<li><a href=”#”>logo templates</a></li>
<li><a href=”#”>icon sets</a></li>
<li><a href=”#”><strong>premium templates</strong></a></li>
</ul>
a href=”#” change it to a href=”index.html”, change next to “flash.html”, and so on, depending on the names of your pages.
Add links for the lower navigation menu in the same way.
<ul id=”menu”>
<li><a href=”index.html”>all templates</a></li>
<li><a href=”flash.html”>flash templates</a></li>
<li><a href=”swish.html”>swish templates</a></li>
<li><a href=”logo.html”>logo templates</a></li>
<li><a href=”icons.html”>icon sets</a></li>
<li><a href=”premium.html”><strong>premium templates</strong></a></li>
</ul>
Or in WYSIWYG editor:
Domain name and hosting.
Code creation is finished. Now register a domain name. You can find related materials in the appropriate section of Webdesign.org. After registering a domain name you need to find a good hosting company and upload the affiliate shop files to the server. You will learn everything about hosting here.
If you experience any troubles with registering a domain name or hosting you can always contact TemplateTuning.com professionals.
That’s all – now it’s time for money making . To get maximum profit from your web site I recommend you to search the appropriate WDL section – Web Promotion. There you’ll find a lot of articles about web site promotion. Or you can order Website Promotion Services from Web Design Library to get professional promotional services from qualified specialists.
And of course you always have an opportunity to avoid any charges and use free template for this purpose, but as for me − quality is not competitive. Look yourself:
You can visit sample website to see the final result or compare your code.Good luck with your affiliate business!
This entry was posted on Friday, February 27th, 2009 at 9:40 AM and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Loading ...