Hightech v1 Magento theme installation guide

Thank you for using this theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Initial installation

1. Copy files from the package theme/ dir to your Magento Directory (PSD/ dir in the package holds PSD source files).

2. Navigate to Backend->System->Configuration->Design->Package Tab-> Current Package Name Field and set this field to default value

3. Navigate to Backend->System->Configuration->Design->Themes Tab and set all fields to hightech value.

4. Navigate to Backend->System->Configuration->Content Management Tab and set "Enable WYSIWYG Editor" to Disable by Default value.

Now do the following actions from the admin side:

Categories

Create 3 categories as subcategories to your theme default category. They must be inactive to be hidden in the main navigation. These categories would be for "HomePageProducts_1", "HomePageProducts_2", "PopularProducts". Remember the IDs of these categories. See the image below.

Once categories are created it is good to add several products to them.

Create or Edit Static Block footer_links

Go to CMS->Static Block to add new static blocks.

Block Title*	footer_links
Identifier*	footer_links
Store View*	Select correct store view
Status	Enabled*
Content * (Click to Hide Editor first)	<div class="footer_menu"> <ul class="footer_menu_links"> <li><a title="home" href="#"><span>Home</span></a></li> <li><a title="About Us" href="#"><span>About Us</span></a></li> <li><a title="Testimonials" href="#"><span>Testimonials</span></a></li> <li><a title="Frequently Asked Questions" href="#"><span>FAQ</span></a></li> <li><a title="Support" href="#"><span>Support</span></a></li> <li><a title="Contact Us" href="#"><span>Contact Us</span></a></li> </ul> <ul class="footer_social"> <li class="social_in"><a title="LinkedIn" href="#"><span>LinkedIn</span></a></li> <li class="social_bl"><a title="Share It" href="#"><span>Share</span></a></li> <li class="social_fb"><a title="Facebook" href="#"><span>Facebook</span></a></li> <li class="social_tw"><a title="Twitter" href="#"><span>Twitter</span></a></li> </ul> </div> <div class="footer_links_container"> <div class="footer_block clearfix"> <div class="clearfix"><span class="title">Company Information</span> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Our Store Hours</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Legal Information</a></li> </ul> </div> <div><span class="title">Customer Service</span> <ul> <li><a href="#">Ordering Information</a></li> <li><a href="#">Delivery &amp; Rates</a></li> <li><a href="#">Cancellations &amp; Returns</a></li> <li><a href="#">School &amp; Government</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div class="last"><span class="title">Useful Tips and Information</span> <ul> <li><a href="#">Product Measurements</a></li> <li><a href="#">Customer Testimonials</a></li> <li><a href="#">Our Blog</a></li> <li><a href="#">Site Map</a></li> </ul> </div> </div> </div>

Create or Edit Static Block ccards_block

Go to CMS->Static Block to add new static blocks.

Block Title*	ccards_block
Identifier*	ccards_block
Store View*	Select correct store view
Status	Enabled*
Content * (Click to Hide Editor first)	<p><span class="footer_cc"><a class="cc_visa" href="#"><span>Visa</span></a> <a class="cc_maestro" href="#"><span>Maestro</span></a> <a class="cc_discover" href="#"><span>Discover</span></a> <a class="cc_amex" href="#"><span>Amex</span></a> <a class="cc_paypal" href="#"><span>PayPal</span></a></span></p>

Create or Edit Static Block home_page_header_block

Go to CMS->Static Block to add new static blocks.

Do not forget to replace "HomePageProducts_1" with actual category ID.

Block Title*	home_page_header_block
Identifier*	home_page_header_block
Store View*	Select correct store view
Status	Enabled*
Content * (Click to Hide Editor first)

Create or Edit Static Block header_info_block

Go to CMS->Static Block to add new static blocks.

Block Title*	header_info_block
Identifier*	header_info_block
Store View*	Select correct store view
Status	Enabled*
Content * (Click to Hide Editor first)	<ul class="header_info_block"> <li><a href="#">Free Shipping</a></li> <li class="last">on all orders over $50<strong></strong></li> </ul>

Create or Edit Static Block customer_service_block

Go to CMS->Static Block to add new static blocks.

Block Title*	customer_service_block
Identifier*	customer_service_block
Store View*	Select correct store view
Status	Enabled*
Content * (Click to Hide Editor first)	<!--customer service start--> <div class="customer_service"><strong><span>Customer Service Phone:</span></strong> <p class="phone">(+1)<strong>253.243.2001</strong></p> </div> <!--end customer service-->

Create Static Block left_info_block

Go to CMS->Static Block to add new static blocks.

Do not forget to replace "PopularProducts" with actual category ID.

Block Title*	left_info_block
Identifier*	left_info_block
Store View*	Select correct store view
Status	Enabled*
Content * (Click to Hide Editor first)

Edit home page

Go to CMS->Pages and Edit/Add home page

Page Title*	home
URL Key	home
Store View	Select correct store view
Status	Enabled*
Content Heading	Hightech Magento Template
Content * (Click to Hide Editor first) Do not forget to replace "HomePageProducts_2" with the ID of created category
Layout	2columns-left*
Layout Update XML

 

Custom Menu extension

If you need our custom menu layout, please load and install the extension custom menu extension

Shipping price calculator and One page checkout

Included in the package please check magento backend system->configuration->web-and-people section.
If you get 404 error when you try to access any extension, please relogin to the backend.

Congratulations! Your magento theme is ready!

We also recommend adding lightbox extension to your Magento

HTML & CSS Structure

This theme is built according to Magento standards, you might see the general structure of Magento themes.
HTML structure were kept as default in Magento. Changed template phtml files are located at:

 
YourMagentoDir/app/design/frontend/default/hightech/template

Theme also includes layout configuration xml files here:

 
YourMagentoDir/app/design/frontend/default/hightech/layout

If you would like to edit the color, font, or style of any elements in one of these columns, you would edit this css file:

 
YourMagentoDir/skin/frontend/default/hightech/css/skin.css

Files Structure

Theme uses standard css files plus custom skin.css which contains all custom styles.

Main directories: php, phtml, xml files

app/

banners and other media

media/

javascripts, css, images used by css

skin/

JavaScript

This theme imports several Javascript files.

1. jQuery
2. jQuery.jCarousel plugin (the product slider in the home_page_header_block static block)
3. jQuery.siteFeature plugin (main slider)
4. jQuery.dc-slider plugin (small sliders in the sidebars or categories)
5. slider.js file (contains main slider preferences like sizes, timings, effect types)
6. noconfilct js file

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.

PSD Files

please contact us in order to get the source files

Additional features

This theme has a built in css and html for a free

Quick contact magento extension

Easytabs would look nice with this theme

Online chat buttons are used from the free livezilla chat programm. You might find there all installation instructions

Free installation on the magento specialized hosting.

Go to contentsBack to previous page