Blog

Magik Flower Store is one of our premium Magento theme which we have released for our blog readers and rest of the Magento community. Magik Flower store is basically built for stores selling flowers, floral arrangements, wedding flowers or any other floral accessories. Magik flower Store is really simple yet complicated Premium Magento theme at a low price of $99. Our goal is to design and offer stunning premium themes for the Magento store owners. You can purchase and download this awesome premium Magento theme from our site. This article will give you a brief of what does it have in terms of design elements and functional aspects. It’s one of our proudest work and I hope you like it.

Screenshots:

Magik Flower Magento Theme - Home Page

Magik Flower Magento Theme - Category Page

Magik Flower Magento Theme - Product Detail Page

Magik Flower Magento Theme - Search Result Page

Live Demo

Like what you see? Be sure to check out the live demo to see Magik flower Store in action.

Download

Once, you buy and download this premium Magento theme from our server you are free to modify, any part of the code and layout. Please visit our support forum for questions and answers.

After You Buy

Please download our After you Buy PDF containing installation and configuration instructions.

Cross Browser Compatibility

The theme is tested across all popular browsers, is designed to be SEO friendly and is built without altering the code Magento theme structure so you can make small customizations easily.

- Compatible with 1.3, 1.4.0 and customizable with 1.4.1
- Cross Browser tested
- SEO friendly
- Javascript ready
- Widget ready

Support

Support if provided via support forum. Please leave us a message and we will get back to you within 24 hours.

What do you think about this free theme please leave us a comment and let us know. Don’t forget to subscribe our RSS to receive latest updates delivered to your mailbox for free.

How to Install Free or Premium Magento Themes

Magento is becoming one of the best E-commerce store which is gaining popularity by leaps and bounds. With this rate of increasing popularity, many existing and new stores are bound to migrate or start with Magento pretty soon. Although, Magento is quite good but it requires proper knowledge before you indulge yourself into Magento customization. If you want to create a new Magento theme by yourself that’s a different story altogether but if want to leverage the functionality and layout provided by any premium or free Magento theme then you should know how to install the theme soon after successful download.

There are two ways to install a Magento theme

1. Install via Magento Connect
2. Install via placing appropriate theme template folders in your Magento Installation.

It entirely depends upon the theme availability and theme quality but if the theme is available in Magento Connect (it has a good collection of free & premium themes) then you can install it very easily without any technical knowledge. Following is a breakdown of how to install a Magento theme via Magento Connect and via inserting new theme template in your existing or new Magento installation.

How To Install a Magento Theme Via Magento Connect

To install a theme from Magento Connect you need to follow certain steps which are explained below (Advance users may skip few steps):

1. Select the theme by browsing the huge Magento theme archive. OR, If you know the direct URL of your favourite theme just open it’s Magento connect URL

2. Now, you will see a button right under the theme image called “Get Extension Key”. You need to click “Get Extension Key” and agree to extension license agreement.

3. After you select agree checkbox and click “Get Extension Key” you will see the Magento extension key right there itself (displayed in the box). You need to paste this extension key in your store’s Magento connect tab. Keep it safe.

4. Copy this Magento extension key. E.g. It will look like “magento-community/Magik_Autocomplete”

5. In order to install this theme into your Magento store you need to login to your store admin panel and go to System->Magento Connect->Magento Connect Manager. Magento connect manager will ask you to login again. You need to use your store admin login credentials to get past the login screen.

You need to paste the theme extension key copied from the Magentocommerce.com’s Magento connect here.

Magento connect checks for the extension key validity and downloads the theme on your system. Depending upon your internet connection speed (bandwidth) and theme size it will take time to install. These extension keys are specifically created with a unique combination so that there is no confusion over which extension to download. If you have correct extension key and there are no errors in theme or your internet bandwidth you will not see any error messages. In case there are any error messages try downloading and installing again. If you do not succed at all then you can contact the theme owner or ask questions in the theme documentation tab.

6. Soon after you see “Theme successfully installed” message go to System->Configuration->Design->Themes and provide the theme name in Default field (which will change your default theme to this new theme) and click “Save Config” button at the top right corner of your screen.

7. A Magento theme revolves around different columns in your theme layout. In case your store home page doesn’t load properly and shows weird design then go to CMS->Manage Pages. You will notice that there are two different layouts for the home page (may be more depending upon how many themes you have tried in the past). Based on your new theme layout disable all the other home page layouts. You can easily disable/enable the layouts by clicking “Enabled” or “Disabled” links provided in the status field.

8. Check your home page if the store is looking just like your new theme, you are done. If you still see problems chances are that you haven’t disabled the correct home page layout. Repeat step 7 until you see a correct store home page (not required if you have only two home page layouts showing in your “Manage Pages” section.

This was the easiest and fastest way of installing a Magento theme using Magento Connect manager.

Many Magento theme sites don’t publish their theme template in Magento connect (sometimes their themes do not pass through Magento connect guidelines). These themes are provided directly by the theme owner sites. If you are interested in downloading a Magento theme from such sites then following are the steps required to install a Magento theme within your existing Magento installation.

How To Install A Downloaded Magento Theme

Unlike single template themes (WordPress) Magento themes are quite different as its layout depends on four elements i.e.

1. Layout – Present is (app/design/frontend/your_interface/new_theme/layout/)
2. Templates – Present in (app/design/frontend/your_interface/new_theme/template/)
3. Skins – Present in (skin/frontend/your_interface/new_theme/)
4. Locale – Present in (app/design/frontend/your_interface/new_theme/locale/)

In order to install and integrate a new theme you need to follow few steps more than what you are accustomed to follow in case of wordpress themes.

If you have already downloaded your preferred Magento theme then here is how you can install and integrate this new theme into your existing Magento installation.

1. Uncompress the zip file containing theme templates (you can use winrar or winzip to uncompress files on windows machine or use unzip zipfilename.zip to uncompress files on Linux server)
2. Copy entire app folder of your new theme under Your_Magento_Installation/app/design/frontend/default/ so it becomes like Your_Magento_Installation/app/design/frontend/default/new_theme
3. Copy entire skin folder of your new theme under Your_Magento_Installation /skin/frontend/default/ so it becomes like Your_Magento_Installation/ skin/frontend/default/ new_theme
4. Now, as you have added your newly downloaded theme in your Magento store you need to login to your Magento store admin to tell Magento which theme to use as layout.
5. Sometimes Magento Cache doesn’t let you see your changes instantly. In order to test your new theme it would be wise to disable cache for the time being. Go to System > Cache Management and select “Disable” then click “Save Cache”. Once you are done with all the steps Enable the cache again.
6. Now go to System -> Configuration and select the Design Tab
7. Type the name of your new theme which you have copied in your Magento installation in front of skin (Images/CSS) input box and click “Save Config”.
8. Optional – If you have downloaded a widget ready Magento template then you need to install the widget provided with the theme. In order to install Magento theme widget you have to go to CMS -> Static Blocks and click on “Add New Block”. Based on your widget installation instructions you have to add your new widget and activate that using this new widget block. Finally select “Enabled” and click “Save Block”. Go and select “Custom Design” Tab and in Layout select “Homepage” otherwise your widget won’t show on home page.
9. Optional – Home page of default Magento store is a CMS block so you have to provide custom code there in order to display something on home page. To do so you have to go to CMS- > Manage Pages and select “Home page” and in the content area type the home page content code which comes up with your new theme. You can change this area anytime you want.
10. All set. Open up a new page on your browser and type in your store name to see the new theme. Your new Magento theme is ready to be used.

I have installed a New Magento Theme but i can’t see any products showing up, why?
Well, It can only happen in case of a new store. You need to follow few steps to fix this problem

1. Go to Catalog -> Manage Categories
2. Select the category you want to show on your Homepage and look for its ID.
3. Go back to CMS -> Manage Pages and select Homepage
4. Paste the code for showing Products on home page with the selected category ID.

I hope this is quite comprehensive tutorial for installing Magento themes. I would love to hear your thoughts, views and experiences. Please leave me a comment and let me know.

We are proud to announce our new FREE Magento theme for our blog readers and rest of the Magento community. ElectroMagik is really a simple yet complicated Free Magento theme with no paid version means its entirely free. Our goal is to design and offer stunning free themes to the Magento community. You will also be able to download the theme from the Magento Connect. This article will give you a brief of what does it have in terms of design elements and few functional aspects. It’s one of our proudest work and I hope you like it.

Screenshots:

ElectroMagik Magento Theme - Home Page

ElectroMagik Magento Theme - Product List Page

ElectroMagik Magento Theme - Product Detail Page

Live Demo

Like what you see?  Be sure to check out the live demo to see ElectroMagik.

Download

Although, you can download this free theme from Magento Connect but if you are interested in playing with this theme before going live leave us a tweet @magentomagik. You can also download the Electromagik Theme from Magentomagik store.

Cross Browser Compatible

I’ve tried my full efforts to make ElectroMagik play nice with all the major browsers.  The following  browsers have been personally verified by us: Internet Explorer 6.0+, Firefox 2+, Opera 9+, Safari 3+ and Chrome 0.2+!

License

This is a free theme.  You may use, alter, tweak, tamper, modify and mangle it to your liking.  But please leave the footer links intact.  I know it sucks, if you still like to remove the links from footer then please signup with us for one time fee of $25.

Support

This theme is provide as is and we do not provide  free online support. Still, in order to order to obtain support please contact us.

What do you think about this free theme please leave us a comment and let us know. Don’t forget to subscribe our RSS to receive latest updates delivered to your mailbox for free.

We are proud to announce our FREE Magento theme for our blog readers and rest of the Magento community. Magik Soft Goods  is really a simple yet complicated Free Magento theme with no paid version means its entirely free. Our goal is to design and offer stunning free themes to the Magento community. You will also be able to download the theme from the Magento Connect. This article will give you a brief of what does it have in terms of design elements and few functional aspects. It’s one of our proudest work and I hope you like it.

Screenshots:

Magik soft Goods - Category View

Magik Soft Goods - Product Description Popup

Live Demo

Like what you see?  Be sure to check out the live demo to see Magik Soft Goods.

Download

Although, you can download this free theme from Magento Connect but if you are interested in playing with this theme before going live leave us a tweet @magentomagik. Send us a message in twitter and we will get back to you with the source code. You can also contact us by filling our form.

Cross Browser Compatible

I’ve tried my full efforts to make Magik Soft Goods play nice with all the major browsers.  The following  browsers have been personally verified by us: Internet Explorer 6.0+, Firefox 2+, Opera 9+, Safari 3+ and Chrome 0.2+!

License

This is a free theme.  You may use, alter, tweak, tamper, modify and mangle it to your liking.  But please leave the footer links in tact.  I know it sucks, if you still like to remove the links from footer then please signup with us for one time fee of $25.

Support

This theme is provide as is and we do not provide  free online support. Still, in order to order to obtain support please contact us.

What do you think about this free theme please leave us a comment and let us know.

Have you ever wondered how people are showing larger images for products on mouseover or mouse click using lightbox (very popular JavaScript library). Adding Lightbox to your magento theme is not difficult and by adding very little code to your theme you can get the Lightbox functionality easily. Lightbox will give the ability to highlight your products by showing lager image of the product along with brief description. Our approach will be based on default layout, you can change the theme name based on your selection.

Steps To Add Lightbox To Magento Theme (Prerequisites)

Following are the steps to add Lightbox to your Magento Theme

1. Download Lightbox from here
2. Make a directory called /lightbox under /skin/frontend/default/default/js/ and copy the entire lighbox code under that directory. Once done, your directory will look like /skin/frontend/default/default/js/lightbox (all code under this directory)
3. copy the lightbox.js under /magento/js/lightbox (create a folder under js directory and name it lightbox). If you installation is under root directory then copy it under /root/js/lightbox
4. Now, you should copy the lightbox.css to /skin/frontend/default/default/css directory.
5. Create a folder called lightbox under /skin/frontend/default/default/images. Your directories for images will finally look like /skin/frontend/default/default/images/lightbox. Copy all the images from source lightbox directory here.

Changing Lightbox default’s As Per Your Magento Theme

Lightbox is free open source JavaScript library to suit any kind of environment. In order to use Lightbox with Magento we have to change few default settings by assigning your theme’s original path. Following are few changes which you have to make in order to install Lightbox with your Magento theme installation.

How To Change Image Directory Location Of The Lightbox

Soon after you are done with the above pre-requisites change the following code by editing /skin/frontend/default/default/css/lightbox.css

find the following line of code

1

background: transparent url(../images/blank.gif) no-repeat;

and replace it with

1

background: transparent url(../images/lightbox/blank.gif) no-repeat;

Now find the following line of code

1

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

and replace it with

1

#prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }

Find the following line of code

1

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

and replace it with

1

#nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }

Now, lets make few changes in the lighbox.js file which will be found under /skin/frontend/default/default/js/lightbox/lightbox.js
Edit this JS file with your favorite editor and find the following line of code

1
2

fileLoadingImage: 'images/loading.gif',     
fileBottomNavCloseImage: 'images/closelabel.gif',

and replace these lines with this

1
2

fileLoadingImage: SKIN_URL + 'images/lightbox/loading.gif',     
fileBottomNavCloseImage: SKIN_URL + 'images/lightbox/closelabel.gif',

Now, change the head.phtml file which will be found under /app/design/frontend/default/default/template/page/html/head.phtml
Edit this file using your favorite editor and find the following line of code

1
2
3

<script type="text/javascript">var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
</script>

replace this code with the following line of code

1
2
3

<script type="text/javascript">var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>';</script>

Adding Stylesheet & JavaScript To Your Magento Installation

Open page.xml from /app/design/frontend/default/default/layout/page.xml using your favorite editor.

Under the following line of code

1
2
3

<block type="page/html_head" name="head" as="head">
         ....
</block>

Add this

1
2

<action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
<action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>

AFTER the prototype.js. It is recommended to add the two lines where the list of js and css files intersect so it will look something like this:

1
2
3
4
5
6

     ...
<action method="addJs"><script>mage/cookies.js</script></action>
<action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
<action method="addCss"><stylesheet>css/lightbox.css</stylesheet></action>
<action method="addCss"><stylesheet>css/reset.css</stylesheet></action
    ...

How To Add Lightbox To Magento Product Detail Page

Edit media.phtml from /app/design/frontend/default/default/template/catalog/product/view/media.phtml using your favorite editor

Find the following line of code

1
2
3
4
5

<?php foreach ($this->getGalleryImages() as $_image): ?>
<li><a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=200,height=200,resizable=yes');return false;">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68,68); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/></a>
</li>
<?php endforeach; ?>

and replace the above lines with this

1
2
3
4

<?php foreach ($this->getGalleryImages() as $_image): ?>
<li><a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/></a>
</li>
<?php endforeach; ?>

Now, you are all set. You will see the Lightbox opening up for your product images. Leave me a comment and let me know if you run into any difficulty.