Designing for Magento – How to create a design theme

Creating a new theme 

How to create a design theme

Warning: DO NOT DUPLICATE AN EXISTING THEME. Yes, this would make it slightly easier to create your new theme, but it will also make your new theme horribly incompatible with Magento updates. Many designers (including some major Magento design companies) did this for a long time, and left the Magento world in a bit of a mess when 1.4 was released. Instead, use the “least impact” approach, outlined in this article to maximize compatibility with updates.

The first step will be creating the folders for the new theme. We’ll call your new design new_theme. Create the following folders:

New folders:

1./app/design/frontend/default/new_theme/ – our new theme
2./app/design/frontend/default/new_theme/layout
3./app/design/frontend/default/new_theme/templates
4./skin/frontend/default/new_theme/ – our new skins folder
5./skin/frontend/default/new_theme/css/
6./skin/frontend/default/new_theme/images/Also, create the following new files:

New files:

1./app/design/frontend/default/new_theme/layout/local.xml
2./skin/frontend/default/new_theme/css/local.cssFinally, add some boiler plate to local.xml, so that local.css will get included:

local.xml:

1.<?xml version=”1.0″ encoding=”UTF-8″?>
2.
3.<layout>
4.    <default>
5.
6.        <!– Remove callouts and rarely used stuff –>
7.        <remove name=”right.poll”/>
8.        <remove name=”right.permanent.callout”/>
9.        <remove name=”left.permanent.callout”/>
10.
11.        <!– add the local stylesheet –>
12.        <reference name=”head”>
13.            <action method=”addCss”><stylesheet>css/local.css</stylesheet></action>
14.        </reference>
15.
16.    </default>
17.</layout>A well coded theme should have the following traits:

1.A single layout file, named local.xml, where all layout updates are placed.
2.no layout files with the same name as any layout file in the base theme
3.no css files with the same name as any css file in the default skin
4.no .phtml template files, except for those that were modified to support the new theme. (Usually this number will be very small.)
How to setup a new theme in administration area

After creating the folders we need to switch the theme from the administration area.

Step 1. Go to System > Configuration > Design via the top navigation bar Step 2. Under “Themes” and in the “Default” text field, type: new_theme Step 3. Press the “Save config” button in the upper right corner

Adding custom stylesheets and js libraries (part I)

Any additional external stylesheet files (css) or javascript/ajax libraries (js) that we want to include in our new project must be also copied to the proper folders.

Stylesheets Copy the files to /skin/frontend/default/new_theme/css/ folder. To link these files in, you can either modify local.xml to add the new file, or add an import in local.css, like this:

1.@import url(’my_new.css’);Javascript / AJAX libraries Create a new folder under /js/ named new_theme and copy your files to it. If you are using javascript libraries then this is also a good place to put the library files.

The Javascript files can be added to your theme by adding the following to local.xml:

1.<?xml version=”1.0″ encoding=”UTF-8″?>
2.
3.<layout>
4.    …
5.    <default>
6.    …
7.        <reference name=”head”>
8.            …
9.            <action method=”addJs”><script>varien/js.js</script></action>
10.            …
11.        </reference>
12.    …
13.    </default>
14.    …
15.</layout>Using XML to change layout 

With the use of XML we can change almost every aspect of our new_template. For example we can set an alternate column layout for particular pages, change META information, page encoding, block types used on each page etc. To accomplish this, you will simply add various sections to your local.xml file. A good place to look at to understand this is:

1.app/design/frontend/base/default/layout/page.xmlIn 1.3.x and earlier, this is located at::

1.app/design/frontend/default/default/layout/page.xmlChanging META section

(Isn’t this section horribly obsolete?) The main file used to control values for META tags and other miscelaneous details is config.xml which is located in the /app/design/frontend/new_template/default/etc/ folder.

Below is a short description of every META tag and possible values:

1.<title>Magento Commerce</title>This is the name of our ecommerce site. This text will appear in the browser’s title bar or the browser tab for the site. This text is also highly important for search engine keyword optimization.

1.<media_type>text/html</media_type>This is default page header encoding so we should leave this as is.

1.<charset>utf8</charset>UTF8 is a variable-length character encoding for Unicode. It is able to represent any character in the Unicode standard, yet the initial encoding of byte codes and character assignments for UTF-8 is backwards compatible with the ASCII table. For these reasons, it is steadily becoming the preferred encoding for e-mail, web pages, and other places where characters are stored or streamed.

Of course we can change it to any other encoding (ex. ISO-8859-1 or ISO-8859-2) but there is no need as long as we’re saving our files with proper UTF8 encoding.

More information about UTF8 is in the Wiki: http://en.wikipedia.org/wiki/UTF-8

1.<description>Default Description</description>The description tag controls the description meta tag and allows us to enter a short description about our site. It’s often a way to get a nice description of your page to show up in the search results if your page does rank highly in a search engine. Your best bet is to write a succinct sentence or two that uses the keyword phrases that sum up the page content.

1.<keywords>Magento, Varien, E-commerce</keywords>The keywords tag controls the keyword meta tag and is the place to put the most important words that refer to the site content. Best practices suggest to enter no more than 500 characters in no more than 20 words for best results.

1.<robots>*</robots>The robots tag controls the robots meta directive and is a simple mechanism to indicate to visiting web bots and search engine spiders if a page should be indexed, or links on the page should be followed. The content of the Robots meta tag contains directives separated by commas. The currently defined directives are index, noindex, follow and nofollow. The two index directives specify if an indexing robot should index the page or not. The two follow directives specify if a robot is to follow links on the page or not. The defaults are index and follow. The values all and none set all directives on or off: all=index,follow and none=noindex,nofollow We can simply override Magento’s default directive by placing one of the four following lines here, however it’s not recommended. The options are:

■index,follow
■noindex,follow
■index,nofollow
■noindex,nofollow
The file config.xml also contains two additional tags, not connected with any meta tags but used as a default settings for every page in our shop.

1.<logo_src>images/logo.gif</logo_src>The logo_src tag sets up a reference to the logo file we wish to use on our site. The image logo.gif is located in the folder /skin/frontend/new_template/default/images/ so if we want to change it we must copy a new logo file to that folder. We can also create a new folder inside the images folder (ex. new_images) and put all our new files used by new template into it and change this tag appropriately. The easiest way to customize the logo it to simply overwrite the default logo.gif file with a new logo.gif file.

1.<logo_alt>Magento Commerce</logo_alt>The logo_alt tag defines the alt attribute for our logo image and is mostly used by screen readers or browsers with images disabled. If one of our customers uses a screen reader or has images disabled he will see the alt text instead of image.

Understanding layout XML files 

Introduction

Using xml instead of other methods (JSON, .ini files, include / require functions) allows us to change many aspects on our page without manually changing the .phtml files. This chapter refers to our default theme so after changing the theme (as we have done above) the paths will also change.

Layout / page structure

The core Layout is defined by page.xml which is located in /app/design/frontend/base/default/layout/page.xml.

There are two large tasks layout carries out.

First it defines the visual layout for your store. By default Magento uses a 3-column layout, so it defines use of 3columns.phtml (Located in your template/page/ folder):

1.<block type=”page/html” name=”root” output=”toHtml” template=”page/3columns.phtml”>If you wanted to change your store a 2-column layout, for instance, you would reference this section in local.xml, and use an action to change to the .phtml you’d like to use (in this case, 2columns-left.phtml or 2columns-right.phtml).

1.<reference name=”root”>
2.    <action method=”setTemplate”><template>page/2columns-right.phtml</template>
3.    <!– Mark root page block that template is applied –>
4.    <action method=”setIsHandle”><applied>1</applied></action>
5.</action>You could also add a new custom layout:

1.    <new_layout translate=”label”>
2.        <label>New Layout</label>
3.        <reference name=”root”>
4.            <action method=”setTemplate”><template>page/new-layout.phtml</template></action>
5.            <!– Mark root page block that template is applied –>
6.            <action method=”setIsHandle”><applied>1</applied></action>
7.        </reference>
8.    </new_layout>More information about the action tag and associated methods is located in section d of this chapter.

Secondly it creates “block containers” filled with application data for output to your .phtml template files. First, if take a look at your standard 3column.phtml file you’ll see it calls the method (function) getChildHtml() a number of times:

(excerpt from 3columns.phtml – Starting at line 56):

1.<?=$this->getChildHtml(’header’)?>
2./div><!– [end] header –><!– [start] middle –><div>
3.<div id=”main”>
4.<?=$this->getChildHtml(’breadcrumbs’)?>
5.<!– [start] left –>
6.<div>
7.<?=$this->getChildHtml(’store’)?>
8.<?=$this->getChildHtml(’left’)?>
9.</div>
10.<!– [end] left –>Each of these references point towards the “block containers” defined in your page.xml and subsequent Module .xml files. You’ll notice a container for the “left” column, for the “right”, for “content”, and other standard areas. It serves up output for your .phtml template files to use. Take a look at it:

/app/design/frontend/default/default/layout/page.xml

1.<block type=”page/html_breadcrumbs” name=”breadcrumbs” as=”breadcrumbs”/>
2.<block type=”core/text_list” name=”left” as=”left”/>
3.<block type=”core/messages” name=”global_messages” as=”global_messages”/>
4.<block type=”core/messages” name=”messages” as=”messages”/>
5.<block type=”core/text_list” name=”content” as=”content”/>
6.<block type=”core/text_list” name=”right” as=”right”>So basically page.xml creates Data Blocks, your .phtml Outputs that data where you want it. Hence, the names for left, right and so forth in your .phtml.

To add, remove, or modify blocks in your theme, use your local.xml file, not a copy of page.xml. The reference tag allows you to define what part of the theme you are working with, then you can declare additional blocks, or use actions to modify or remove blocks.

You’re aware now that page.xml contains a handle called “<default>”. The XML commands nested within the <default> layout sets up the default layout for the whole site. The subsequent handles(as listed in the top of page.xml), simply updates the default layout with the according layout for the page.

1.<layoutUpdate>
2.<reference name=”top.menu”>
3.<block type=”catalog/navigation” name=”catalog.topnav”>
4.<action method=”setTemplate”><template>catalog/navigation/top.phtml</template></action>
5.</block>
6.</reference>
7.<reference name=”right”>
8.<block type=”catalog/product_compare_sidebar” name=”catalog.compare.sidebar”>
9.<action method=”setTemplate”><template>catalog/product/compare/sidebar.phtml</template></action>
10.</block>
11.</reference>If you read the code and think about whats going on it makes sense. <layoutUpdate> is UPDATING your code with new blocks. How does it know where to put the new blocks? Well remember in your default you defined “block containers” for left, right, etc. So when it says

1.<reference name = “right”>it’s telling Magento to insert the following block into the RIGHT column when you get into “Catalog” view. (Remember, its located at layout/catalog/) so it appears once you’ve entered the catalog section of the shop. It also defines a TEMPLATE for the new block to use, so for the example above the compare box has its own template located at catalog/product/compare/sidebar.phtml (in your template folder).

These same handles can be used in local.xml to restrict the scope of a particular update.

For instance, let’s say you want a wishlist everywhere in your store, but you don’t want it in the customer account pages. You would look for the handle used on account pages (it is in customer.xml) and add that handle to local.xml. Then remove the wishlist so it does not load in the account pages.

The example below removes “Login” and adds “Register” instead, but only if the customer is not already logged in:

1.    <customer_logged_out>
2.        <reference name=”top.links”>
3.            <action method=”removeLinkByUrl” module=”catalog”><url helper=”customer/getLoginUrl” /></action>
4.            <action method=”addLink” translate=”label title” module=”customer”><label>Register</label><url helper=”customer/getRegisterUrl”/><title>Register</title><prepare/><urlParams/><position>100</position></action>
5.        </reference>
6.    </customer_logged_out>Reference name values/attributes:

As we’ve seen, the references can use different attributes for displaying blocks on our page. Possible values are:

■root – we will change it mostly to set up another .phtml file as a root template ex. (1column.phtml , 2columns-left.phtml ,2columns-right.phtml etc.)
■head – as this reffers to our <HEAD> section on page, we will use this reference name to reflect our changes in this section
■top.menu – defines our content for top menu section
■left – defines our content for left column
■right – as above but for right column
■content – defines blocks placed in main content of our page
■before_body_end – is used to add a block before end of our page so before </BODY>
There are more reference names that we could use but they are more page-specific than for global use for example:

■customer_account_navigation
■customer_account_dashboard
are used on our clients account page

product.info.additional – sets up additional block for placing related items, shipping estimator etc.

Action methods:

Action methods allow us to change many theme settings without appending manual changes to our .phtml files. The method listed in the method attribute refers to a method in the Model that is associated with the particular block in question. The most important methods are described below.

setTemplate

Action method setTemplate allows us to change the default .phtml file used in particular block. For example by navigating to app/design/frontend/default/default/layout/catalog/product/view.xml we can see the reference:

1.<reference name=”root”>
2.<action method=”setTemplate”><template>page/2columns-right.phtml</template></action>
3.</reference>and by using another <template> value we are allowed to change default .phtml file used on our products page. Possible values are:

1column.phtml 2columns-left.phtml 2columns-right.phtml 3columns.phtml one-column.phtml dashboard.phtml

As we see in app/design/frontend/default/default/layout/checkout/cart.xml , there also additional 2 values for empty and non-empty cart

1.<action method=”setCartTemplate”><value>checkout/cart.phtml</value></action>
2.<action method=”setEmptyTemplate”><value>checkout/cart/noItems.phtml</value></action>
3.<action method=”chooseTemplate”/>The method chooseTemplate is used to set a template (setCartTemplate / setEmptyTemplate) depending on quantity of items in our cart. If we have more than 0 than the

1.<action method=”setCartTemplate”><value>checkout/cart.phtml</value></action>is used. If we have no items in cart then the following will be used.

1.<action method=”setEmptyTemplate”><value>checkout/cart/noItems.phtml</value></action>The function provided by the Model is shown below:

1.public function chooseTemplate()
2.    {
3.        if ($this->getQuote()->hasItems()) {
4.            $this->setTemplate($this->getCartTemplate());
5.        } else {
6.            $this->setTemplate($this->getEmptyTemplate());
7.        }
8.    }That should clarify how we can use this particular switch. Depending on our needs we can write custom functions in our blocks and than assign a template depending on parameters returned by a function.

addCss

This method allows us to add an additional CSS file to our page on per-page basis or globally for our template. If we use a reference name “head” and action method addCss by using

1.<reference name=”head”>
2.<action method=”addCss”><link>style.css</link></action>
3.</reference>then our page will have an additional line of code to attach the CSS file, for example:

1.<link rel=”stylesheet” type=”text/css” media=”all” href=”http://www.ourstore.com/skin/frontend/default/default/css/style.css” ></link>As we can see, the <link> path refers to the /skin/frontend/default/default/css/ folder.

addCssIe

This method is very similar to the above but it will output a css file when a User-Agent (browser) is Internet Explorer or Maxthon. So using this method we can attach a specific css file for those browsers. This is very helpful if our page will requires changes in css dependant on a specific browser.

Usage:

1.<reference name=”head”>
2.<action method=”addCssIe”><link>style.css</link></action>
3.</reference>Output in page source:

1.<!–[if IE]>
2.<link rel=”stylesheet” type=”text/css” media=”all” href=”http://www.ourstore.com/skin/frontend/default/default/css/style.css” ></link>
3.<![endif]–>addJs

The below method allows us to attach a .js script in the same way as we attached a CSS file. The script path refers to the /js/test/ folder but you can specify any subdirectory of /js/

Usage:

1.<reference name=”head”>
2.<action method=”addJs”>test/script.js</action>
3.</reference>It will add a script to our page with src attribute of

1.<script src=”http://www.ourstore.com/js/test/script.js” />addJsIe – adding a .js file to head section of page and using it if User Agent (browser) is Internet Explorer.

If we can add different css files depending on User-Agent we can do the same with our .js files. Than we can use different scripts for our IE/Maxthone users and another for other browsers.

Usage:

1.<reference name=”head”>
2.<action method=”addJsIe”>our/script.js</action>
3.</reference>It will add a script to our page with src attribute of

1.<script src=”http://www.ourstore.com/js/our/script.js” />but also inside IE comments

1.<!–[if IE]><![endif]–>setContentType This method can override default headers sent by our page to the browser. So we can set a text/xml instead of text/html (or another as we wish).

Usage:

1.<reference name=”head”>
2.<action method=”setContentType”><content>text/xml</content></action>
3.</reference>setCharset allows us to override default page encoding on per-page basis or globally. As long as we are saving our files with proper encoding this will not be necessary.

Usage:

1.<reference name=”head”>
2.<action method=”setCharset”><charset>ISO-8859-2</charset></action>
3.</reference>So in this case our page will have Central European encoding instead of default UTF-8

addLink

addLink methods can be used to set a setting to which we can refer in our .phtml template files also without manually changing the .phtml files.

Example usage :

Warning, this example requires account.xml to be duplicated, which can break things after updates. Someone should rewrite this to use local.xml instead. By adding a block which was found in app/design/frontend/default/default/layout/customer/account.xml into our <reference name=”content”> in app/design/frontend/default/default/layout/checkout/cart.xml we can allow the customer to skip to the account information directly from the cart.

1.<block type=”customer/account_navigation” name=”customer_account_navigation” before=”-”>
2.<action method=”setTemplate”><template>customer/account/navigation.phtml</template></action>
3.<action method=”addLink” translate=”label”><name>account</name><path>customer/account/</path><label>Account Dashboard</label></action>
4.<action method=”addLink” translate=”label”><name>address_book</name><path>customer/address/</path><label>Address Book</label></action>
5.<action method=”addLink” translate=”label”><name>account_edit</name><path>customer/account/edit/</path><label>Account Information</label>
6.</block>The cart.xml file should look like below

1.<layoutUpdate>
2.<reference name=”root”>
3.<action method=”setTemplate”><template>page/1column.phtml</template></action>
4.</reference>
5.   
6.<reference name=”content”>
7.<block type=”customer/account_navigation” name=”customer_account_navigation” before=”-”>
8.<action method=”setTemplate”><template>customer/account/navigation.phtml</template></action>
9.<action method=”addLink” translate=”label”><name>account</name><path>customer/account/</path><label>Account Dashboard</label></action>
10.<action method=”addLink” translate=”label”><name>address_book</name><path>customer/address/</path><label>Address Book</label></action>
11.<action method=”addLink” translate=”label”><name>account_edit</name><path>customer/account/edit/</path><label>Account Information</label><base>{{baseSecureUrl}}</base></action>
12.</block>
13.<block type=”checkout/cart” name=”checkout.cart”>
14.<action method=”setCartTemplate”><value>checkout/cart.phtml</value></action>
15.<action method=”setEmptyTemplate”><value>checkout/cart/noItems.phtml</value></action>
16.<action method=”chooseTemplate”/>
17.
18.<block type=”checkout/cart_coupon” name=”checkout.cart.coupon” as=”coupon”>
19.<action method=”setTemplate”><template>checkout/cart/coupon.phtml</template></action>
20.</block>
21.<block type=”checkout/cart_shipping” name=”checkout.cart.shipping” as=”shipping”>
22.<action method=”setTemplate”><template>checkout/cart/shipping.phtml</template></action>
23.</block>
24.<block type=”checkout/cart_crosssell” name=”checkout.cart.crosssell” as=”crosssell”>
25.<action method=”setTemplate”><template>checkout/cart/crosssell.phtml</template></action>
26.</block>
27.</block>
28.</reference>
29.</layoutUpdate>Of course according to the previous references we can also change

1.<action method=”setTemplate”><template>page/1column.phtml</template></action>in the above code to suit our needs. I’ve used for example

1.<action method=”setTemplate”><template>page/one-column.phtml</template></action>to show only our cart without other blocks.

Layout blocks

As we’ve seen before, most of our xml files have a <block> tag. It defines a type of block, its name and alias “as” so we can refer to it on our page. Basic block structure looks like this:

1.<block type=”catalog/product_view_super_config” name=”product.info.config” as=”super_config”>
2.<action method=”setTemplate”><template>catalog/product/view/super/config.phtml</template></action>
3.</block>type=”catalog/product_view_super_config” – defines the type of our block on page. This example would refer to the file /app/code/core/Mage/Catalog/Block/Product/View/Super/Config.php which defines the class Mage_Catalog_Block_Product_View_Super_Config name=”product.info.config” – defines a name for our block and should be unique as=”super_config” – defines a shortname for our block which can we use with getChild function on particular page

Blocks used in our XML files can change or override most every aspect of our design. We can use them to simply change used phtml files on per-page basis, to add additional scripts, stylesheets to our page , to move particular sections of page without needing to change phtml files.

Understanding .phtml files 

Introduction

Phtml files are template files that handle the output to browser. They are nothing more than html files with nested php tags. We use them to style our page and the look of our site.

Changing .phtml files requires basic knowledge about XHTML, CSS and understanding how to use PHP functions on a page.

IMPORTANT: Before changing a .phtml file, it has to be copied from the base (or default) theme, into the new theme. When Magento finds one of these files in your new theme, it will ignore the .phtml file from the base theme, so it is important to ONLY copy over the files that you absolutely need to modify. This will minimize errors when updating Magento. The additional effort required to individually copy the 4-5 files you eventually modify will more than make up for itself the first time Magento needs to be updated.

Let’s have look at header.phtml placed in templates/page/html.

1.<div>
2.    <div>
3.        <h1 id=”logo”><a href=”<?=$this->getUrl(”)?>”><img src=”<?=$this->getLogoSrc()?>” alt=”<?=$this->getLogoAlt()?>”/></a></h1>
4.        <p><a href=”#main”><strong><?=__(’Skip to main content’)?> &raquo;</strong></a></p>
5.
6.
7.
8.
9.        <div>
10.            <div>
11.               <strong><?=$this->getWelcome()?></strong> <?=$this->getChildHtml(’topLeftLinks’)?>
12.            </div>
13.            <div>
14.                <?=$this->getChildHtml(’topRightLinks’)?>
15.            </div>
16.        </div>
17.
18.    </div>
19.</div>
20.<?=$this->getChildHtml(’topMenu’)?>In this file we see basic XHTML tags, usage of CSS classes but most important – Magento functions used to get layout XML blocks and render it in our phtml file.

Mostly in our template we’ll see <? ?> tags used for functions calls. Basing on above example: <?=$this→getUrl(’‘)?> – used without parameters will return base path of our store <?=$this→getLogoSrc()?> – will render a logo image based on path used in etc/config.xml <logo_src>images/logo.gif</logo_src>

If we’d like to change our logo we can do this in two ways. First possibility is to change <logo_src> path to anything else. Second possibility is to hardcode the path directly in phtml file so

1.<img src=”<?=$this->getLogoSrc()?>” alt=”<?=$this->getLogoAlt()?>”/>but this resolution isn’t recommended since we should use core functions and learn their usage.

<?=$this→getLogoAlt()?> – this function will allow us to change the alt tag for our logo so if it will be unavailable , the alt tag will appear. Any changes we can also append by changing <logo_alt>Magentso Commerce</logo_alt> or setting it direclty in phtml file up.

<?=__(Skip to main content)?> – all tags that look like this will be used to dynamically translate page content to other languages. We should understand it as <?=__(’English text to translate’)?>

<?=$this→getChildHtml(’topLeftLinks’)?> – The getChildHtml() function is the most important function used in our template. It calls particular block defined in XML file and renders it as HTML , then outputs it to the browser. We can call blocks from everywhere and from corresponding XML files.

To use getChildHtml(’topLeftLinks’) we must have defined first the child “as” so take a closer look at page.xml (layout/ folder). Here’s what you should see:

1.<block type=”page/html_toplinks” name=”top.left.links” as=”topLeftLinks”/>As we see, getChildHtml(’topLeftLinks’) uses its alias “as” and calls it from the XML. The getChildHtml() function only allows Magento to call a block if that block was defined in the corresponding XML file.

We can also override this mechanism by using another function call:

<?=$this→getLayout()→getBlock(’top.left.links’)→toHtml()?>

This structure will call the top.search block (based on its name, not its alias “as”) from anywhere in any of our templates so we do not need to define it everywhere in our XML files. Remember to use the “name” attribute instead of the “as” attribute with this workaround.

We must be aware that every phtml file and every function will always refer to the corresponding XML file or files. We can identify used phtml files simply by searching for the following:

1.<action method=”setTemplate”><template>wishlist/sidebar.phtml</template></action>which tells us which phtml file will be used.

Folder structure

Every View used in our application has separate folders and subfolders to store template files. Let’s have a look at the folder structure:

■callouts – folder where are files for our callouts and ads are placed
■catalog – folder to store files used on our category, layered navigation, product, comparision pages
■catalogsearch – here we find files that are used to skin our search engine and result pages
■checkout – all the pages utilised during checkout and shopping in our shop. Here we’ll also find the shopping cart templates and blocks for cross-selling and coupons.
■cms – folder for static pages templates.
■core – folder containing store-switching templates (not yet active)
■customer – all customer pages (ex. account dashboard, address forms, orders list and reviews)
■datafeed – folder to store our csv, txt, xml files, used for comparision engines and other external applications
■directory – here we find currency switcher for our shop
■email – here we’ll find all pages that require email transport so for example order, password recovery, newsletter signup
■install – template files for Magento’s installer
■newsletter – subscribe.phtml placed in this folder will allow us to change the look of newsletter signup box on our page
■page – the most important folder in which we’ll find all main files used to style our site. More about it will be described in following subchapter.
■payment – templates used to style our payment forms (ex. CC payment.)
■poll – 2 files to change the look of our poll depending on state (didn’t vote yet / show result)
■rating – rating block used on our products pages
■review – all files used to render the blocks used by reviews
■sales – pages for order details, invoices, recent orders
■searchlucene – result output for Zend_Lucene controller used in Magento
■tag – product tags templates are stored here
■wishlist – template files to handle the output of our wishlist actions.
Appending basic changes to our templates

Every file used to skin the basic look of our template is placed in template/page folder. Here we’ll see

1column.phtml 2columns-left.phtml 2columns-right.phtml 3columns.phtml one-column.phtml dashboard.phtml

These are essentially the HTML skeleton files for our pages. By changing those files we can set up a new look of the page structure.

There is also an html subfolder placed under template/page in which we can change footer, header and links blocks of our template.

Every one of them uses simple function calls (ex. getChildHtml() ) so we can also identify the block by searching in layout XML files .

For example when we’ll see

1.<reference name=”root”>
2.<action method=”setTemplate”><template>page/2columns-right.phtml</template></action>
3.</reference>this tells us that the page will use 2columns-right.phtml as a skeleton for our page.

Calling layout blocks using Magento functions

As it was described above, there are two ways of calling blocks .

1.<block type=”page/html_toplinks” name=”top.left.links” as=”topLeftLinks”/><?=$this→getChildHtml(’as’)?> – by using the block alias “as” from the XML file we can display a block on our page providing that it was defined already in the corresponding XML file

<?=$this→getLayout()→getBlock(’name’)→toHtml()?> – by using the block name from the XML file, we can call any block whether or not it was already defined in corresponding XML file

e. Adding custom CSS and JS files to a layout (part II)

There are 2 ways of adding custom js and css files to our template. The recommended way is by extending the head section in the default XML file. But you also have the ability to add the files directly in the particular root template file.

1.<script type=”text/javascript” src=”<?=$this->getJsUrl()?>varien/js.js” ></script>
1.<script type=”text/javascript” src=”<?=$this->getJsUrl()?>varien/form.js” ></script>
3.<script type=”text/javascript” src=”<?=$this->getJsUrl()?>varien/menu.js” ></script>As we see here , we can also use getJsUrl method which adds a scripts path to our src attribute. This should output http://yoursite.com/js/ so the source will look like the following:

1.<script type=”text/javascript” src=”http://yoursite.com/js/varien/js.js” ></script>
2.<script type=”text/javascript” src=”http://yoursite.com/js/varien/form.js” ></script>
3.<script type=”text/javascript” src=”http://yoursite.com/js/varien/menu.js” ></script>Adding a css file isn’t harder than adding a js file. We do this also by using a function that outputs a path to our skins folder.

1.<link rel=”stylesheet” href=”<?=$this->getSkinUrl(’css/styles.css’)?>” type=”text/css” media=”all”/>And the output will be

1.<link rel=”stylesheet” href=”http://yoursite.com/skin/frontend/default/default/css/styles.css” type=”text/css” media=”all”/>so getSkinUrl() sets actual path to our skins folder : http://yoursite.com/skin/frontend/default/default/

Opening .phtml files in Dreamweaver

By default, Dreamweaver cannot read PHTML files. You can add the file type to the “Open in Code View” section of the preferences if you wish to have fast access, however you cannot view the file in design view if you do that. So if you use Dreamweaver (versions 4, MX, MX2004, 8, or 9, aka CS3) to design your sites, and you wish to open Magento’s Template files (they have .phtml extensions) in Dreamweaver, you can follow these steps to add support for .phtml and make Dreamweaver render PHP code (with coloring, hinting, et al) as well as allow you to see the design in code view if desired. Below are three steps to follow.*

IMPORTANT NOTES: This guide is for Dreamweaver on Windows (XP or Vista) or Mac OS X. Note: I have excluded version numbers from the file locations shown, and if you are using a version older than Dreamweaver 9 (CS3) replace “Adobe” with “Macromedia” in the file locations shown. Some spaces have also been removed to keep the references on one line.

* Dreamweaver 4 users: if you are using the archaic Dreamweaver 4, you only need to follow step one. However, it’s highly recommended that you just upgrade to version 8 or newer for superb CSS and Web Standards support.

Step One: Add .phtml to the extension.txt configuration file

Open the following extension configuration file in a notepad and change the lines as specified below:

XP, Vista: C:Program FilesAdobeDreamweaverConfigurationExtensions.txt

Mac OS X: Applications > Adobe Dreamweaver CS3 > configuration > Extensions.txt In the first line add PHTML like so:

HTM,HTML,SHTM,SHTML, … ,TXT,PHP,PHP3,PHP4,PHP5,PHTML,JSP,WML,TPL, … ,MASTER:All Documents

In the PHP Files line add PHTML like so:

PHP,PHP3,PHP4,PHP5,PHTML,TPL,PHTML:PHP Files

Step Two: Add .phtml to extension.txt in your Application Data

This file is pretty much exactly like the extensions.txt file located in Dreamweaver’s configuration folder, except it is in your users Application Data folder (AppData folder for Vista users). Just as in Step One, find the file and change the lines as specified below.

XP: C:Documents and Settings[user]Application DataAdobeDreamweaverConfigurationextensions.txt

Vista: C:Users[user]AppDataRoamingAdobeDreamweaverConfigurationExtensions.txt

Mac OS X: Users > Library > Application Support > Adobe > Dreamweaver 9 > Configuration > Extensions.txt

In the first line add PHTML like so:

HTM,HTML,SHTM,SHTML, … ,TXT,PHP,PHP3,PHP4,PHP5,PHTML,JSP,WML,TPL, … ,MASTER:All Documents

In the PHP Files line add PHTML like so:

PHP,PHP3,PHP4,PHP5,PHTML,TPL,PHTML:PHP Files

Step Three: Add PHTML to MMDocumentTypes.xml

This file is an XML file which should be located in:

C:Program FilesAdobeDreamweaverConfigurationDocumentTypesMMDocumentTypes.XML

Mac OS X: Applications > Adobe Dreamweaver CS3 > configuration > DocumentTypes > MMDocumentTypes.XML

Add PHTML to this line (approx. line 75) twice, like so:

1.<documenttype id=”PHP_MySQL” servermodel=”PHP MySQL” internaltype=”Dynamic” winfileextension=”php,php3,php4,php5,phtml” macfileextension=”php,php3,php4,php5,phtml” file=”Default.php” writebyteordermark=”false” />

Restart or Open Dreamweaver and you shouldn’t have any problems with PHTML files any longer.

Tutorial: Creating Products in magento commerece

It’s hard to run an eCommerce site without products.  If your store is missing this very important component, please read on:

Initial Setup

For the simplest of products, we’ll create a coffee cup.

1. In the Magento admin, navigate to “Catalog -> Manager Products”
2. In the top right, select “Add Product”
3. Select an attribute set.  Select “default” if you haven’t created any attribute sets.
   (Be sure to read the section about creating attribute sets.)
4. Select a product type.  For this example, select a “simple” product.
   (For the other types, checkout the Grouped and Configurable product tutorials.)
5. Press continue.

 

 

Data Entry

After setting up the product you’re brought to the product detail view.  All the product’s data is managed from this page.  Let’s go over the tabs:

General

• Name: The product name as it will appear in the front-end.
• Description: The description that appears in the center of the product page.
• Short Description: The description that appears at the top of the product page.
• SKU: The products SKU.  Magento uses SKU as a unique identifier for this product, across all stores and websites. SKU is global, meaning if you update the SKU for a product in one store, it will update in all other stores as well.
• Weight: The products weight – usually used for shipping calculations
• Set product as new from/to date: The date range in which this product can be promoted as a new product in various locations throughout your site.
• Status: “Enabled” displays in the front-end, and “Disabled” doesn’t display in the front-end.
• Tax Class: The product’s tax class.  Magento comes with one tax class by default, but you can add more in Sales > Tax > Product Tax Classes.
• URL key: The Search Engine Friendly URL Identifier is the name used of the product used in the URL for the product.  In our example, you’d be able to navigate to something like http://www.mymagentostore.com/cups/a-coffee-cup.html and see this product. You cannot use spaces in this field. If it is left blank, one will be automatically generated by Magento.
• Visibility: Determines if the product will display in the catalog pages and/or search results.
• Allow Gift Message: Determines whether custoemrs will be able to add gift messages to this particular product during checkout.

Price

Enter the price, cost, and special price information for this product here.  You can also add pricing tiers.  Read about tier pricing here.

Meta Information

SEO-related meta information is controlled from here:  Page Title, meta keywords and meta description can be entered for this product.  Page title will be the title of the product page.  Meta keywords and description will show in the tag of the products html source.

Images

Magento requires three images per product – a base image, a small image, and a thumbnail.  For each of these three image types, you can select which image to use to fulfill the requirement. If no image is uploaded, Magento will use the placeholder images that you can establish in System > Configuration. All images will also display under “More Images” on the product info page unless you select to Exclude it.  Clicking one causes it to open in a popup.  If you have multiple additional images, you can navigate through them using the popup.

Design

You can control the look of each product page individually in from the Design tab in the product page. It is very similar to the individual design options for categories. If your product page has a design separate from the category page to which it is associated, then the product level design will supercede the category level design. Select the design you want from the Custom Design drop-down. Magento comes with several different design options out of the box, but you can add you own. If you leave this drop-down blank, it will automatically use the Current package name design. This can be edited by navigating to System > Configuration and clicking the Design tab. Enter the name of the design you want in the Current package name field, and this design will apply to all products for which you do not specify a different design. With the Active From and Active To fields, you can select a time frame in which the category will automatically switch to a design, and then switch back to the blank option when the time frame ends. This is perfect for the holidays, so that you can create a holiday design for your pages, and then have your site automatically switch back to the normal design whenever you want, without having to remember to do it yourself. The Custom Layout Update is essentially a static block, with a few differences. Rather than HTML, the structure must be in XML format. The Update will display on the product page, below the product information, whereas a static block will only display on a category page. The Update will display on the page only during the dates specified in the Active date range.

Inventory

 

Qty: The qty you have in stock at the moment.

Qty Uses Decimals: If “yes”, this allows you to let customers enter decimal quantities for this product, as opposed to integers.  If you were selling a product by the weight, volume, or length you might allow customers to purchase a decimal qty.  For example: 2.35 pounds of concrete, or 3.75 feet of carpeting.

Stock Availability: If you select Out of Stock, your custoemrs will not be able to add the item to the cart (unless you enable backorders), but they will be able to view it and add it to the wishlist.

For all other fields, you can check the Use Config Settings checkbox in order to use the settings for this field in System > Configration > Inventory. To change any of these settings in order to make the settings unique for this product, uncheck the checkbox, which will unlock the field.

 

Websites

If you’re managing multiple Websites, you can select which websitesthis product belongs to by associating it to Websites from here.  Just check the Websites you want the product to be available from.

Categories

Select what categories this product will belong to.

Related Products, Up-sells, Cross-sells

Select which products are related, up-sells or cross-sells of the product being edited.  Read more about product relations here.

Product Reviews

You’ll see a list of all reviews that have been added to this product. This tab will only appear after the product has been saved.

Product Tags

Shows all tags that this product has been given by users, and the number of times each tag has been used. This tab will only appear after the product has been saved. Read more about product tags here.

Customers Tagged Product

A breakdown of individual customers who have tagged this product – the grid shows their first and last name, email, and tag used. This tab will only appear after the product has been saved. Read more about product tags here.

Saving the Product

Now you’re ready to save the product and check the fruits of your labor in the front-end.  Click the image below to view the product.

Tutorial: Creating Attributes (custom fields) in magento

So you’re ready to add some custom data to your products?  Luckily, this isn’t complicated.  Today we’re going to create an attribute called “Hard Drive Size” for the external hard drives we’re about to sell in our store, and also an attribute called “Manufacturer” to use in our layered navigation.  Let’s start with the simpler one – Hard Drive Size.  In the front-end, this will appear on products like “Hard Drive Size:  {whatever options you create and select}” – For example: “Hard Drive Size: 100GB”.

Creating a simple attribute – Hard Drive Size

 

1. Log into the Magento admin panel
2. Navigate to “Manage Attributes” under Catalog -> Attributes -> Manage Attributes
3. In the top right, click on “Add New Attribute”
4. You’re now on the Attribute edit page and Properties tab.  It looks like this:

 

 

Properties Tab

• Attribute Identifier: This is the name of the attribute used by the system.  Spaces can not be used in this field. We’ll type hard_drive_size.
• Scope: This determines the store level at which this attribute will save for all products. If you choose Global, and edit “Hard Drive Size” for product 123 in store A to “50 GB”, product 123’s hard drive size in store B (and any other stores) will also update to “50 GB”.  For hard drive size, we’ll make it globally editable – we won’t sell the exact same hard drive in different stores with different sizes… that’s not possible.  An example where we might want globally editable: no is “Price.” We might want to sell the Hard drive for $20 more in Store A.
• Catalog Input Type: This describes what kind of data the attribute will store. What’s set here determines how data entry for this attribute will take place.  We’ll use Text Field since we want to enter the value for each product manually into a text field.
• Default Value: You can enter a value that will automatically populate for new products. We have many different hard drive sizes, so we will leave this blank.
• Unique Value: If “yes”, the data saved in this attribute has to be unique for each product. In this case, we’ll say “no”, because multiple hard drives can have the same hard drive size.
• Values Required: If “yes”, you will be required to enter data in this attribute field when saving a product that uses it.
• Input Validation: This decides whether the data entered by the store owner is validated when the product is saved.  If validation is set to “Digits”, we’ll only be able to enter 0-9 in this field.  An error will be thrown if we try to put letters in the field.  In the case of Hard Drive Size, we don’t need validation on this field.
• Apply To: This determines for which Product Types this attribute will display.  For example, price wouldn’t make sense in a grouped product, as each Simple Product associated to the Grouped Product will have its own price.  Therefore, you can set price to not apply to grouped product, and you won’t be scratching your head over what numbers to write in there.

Use in quick/advanced search: If “yes”, the data saved in this attribute will be searchable in the front-end in the quick search and advanced search, respectively (ie, if i type “100GB” it should return all products with this value saved in the Hard Drive Size field).

Comparable on Front-end: If “yes”, this attribute will be displayed in a product comparison, so long as at least one product in the Compare List contains a value for this attribute.

Use in Layered Navigation: If “filterable”, this data will be available as a filter in Magento’s layered navigation. Filterable (with results) means that only values that are associated to specific products in a given category page will list in the Layered Navigation menu. Filterable (no results) means that all existing values for an attribute will display in the menu, even if using this as a filter will produce no results. There’s one condition to use attributes in layered navigation – the Input Type has to be Dropdown, Multiple Select, or Price.

Position: This determines the position of this attribute in the Layered Nav menu.

Visible on Catalog Pages on Front-end: If “no”, this attribute will not be displayed in the product info page. The “visibility” only controls whether or not the attribute displays in the front-end. Keep in mind – if you set an attribute to “Visible: No”, and leave it as “Comparable: Yes”, this attribute will still show up in comparison charts.

 

 

Manage Label / Options

Under this tab, you can enter the label for the attribute in the front-end.  If you control stores in multiple languages, you can enter the label in each language under this tab.  If a store’s label is blank, this store will look to the default label and use this one.  Here we’ll enter “Hard Drive Size” under “Default”.

Frontend Properties

Click here to see how the attribute appears in the front-end.

Creating an attribute with controlled options – Manufacturer

The next attribute we’ll create is going to be “Manufacturer.” Let’s say you carry televisions by 4 manufacturers.  Rather than having to type the name of each manufacturer, why not just make it an attribute and assign four possible options to it:  Varien, Panasonic, JVC, and Sony.

Attribute Properties

For our “Manufacturer” attribute, we’ll use Catalog Input Type “Dropdown” since we want this attribute to have limited data.  Using “Dropdown” also enables us to show the attribute as a layered navigation filter.  Below is what the Properties tab looks like for “Manufacturer”:

Manage Label/Options

Since we select Dropdown as the input type, we have the ability to create the possible options for this attribute from this tab.  Under “Manage Labels” tab is “Manage Options”.  Press “Add Option” to add an option.  It functions similarly to labels – any blank fields will look to the “default”.  You can also set the positions of each value and select one of the values as the default. See below for how it looks after adding four manufacturers as options.

Applying to a product

Now, to apply this selectable attribute to a product, just add it to an attribute set and create a new product using this set.  Below is a simplified example of the General tab of creating a new product in the admin:

Front-end

Click here to see how the attribute appears in the front-end.

Mmm, nice.  Now you’ll never have to type these manufacturers again.  Also, data entry will be more consistent, since it is impossible to have a typo or spelling error if a drop-down is used.

Tutorial: Creating and Managing Categories in magento

Selecting a Store

The first thing to do is select the store where you would like to add the category from the Choose Store View dropdown menu. The default is for all stores managed by the admin panel, but you can elect to create the category in only one of the stores by selecting that store.

After that you will need to enter a name for the category which will appear on the sites selected. You can then select the location the category will be located in. The default is Root Catalog, meaning the category will be a top-level category. If you select an existing category the new category will be created as a sub-category of the one you selected.

You can then enter a description, upload an image and enter meta information for the category.

Display Options

After that it really gets interesting. If you would like customers to be taken to a landing page – instead of the standard product listing page – when they select the category, you can select Static Block Only from the Display Mode dropdown and then select a static block from the CMS Block dropdown. This list will contain all the Static Blocks created in the Magento CMS (Don’t have any static blocks? Why don’t you check out How do I create and edit static blocks?). An example would be to create a Nike static block and direct all customers to that page when they select the Nike category.  There are three options in the Display Mode dropdow:

Display products only

If you don’t need this category to look particularly fancy, select this mode.  It will display the products you associated, the description you enter, and the image you upload. (If you want an image or description – if not, just leave these fields blank.)

Display only Static Block

Have a bunch of specific content you want to show for a certain category?  The “Static Block only” display mode will not display products on the page – it will only display the static block you select, making this page appear as a landing page to your customers.  Editing Static Blocks is done under the CMS menu, and is covered by this article.  This is perfect if you want to get your customers excited about the category before showing them products.

Tip:  Make this page an anchor category and let your customers use layered navigation to find their products after viewing the landing page!

Display Static Block and products

So you have several category pages where you want the same content, but feature different products?  Easy – use this display mode: 

1. Create a static block for the content you want to use between categories.
2. Now go back to manage categories, and find your category
3. Select display mode “Static block and products”
4. Select the static block you created in step 1. The static block will appear above the list of products.

That’s it!  Repeat for any other categories where you want to show this content.

 

Is Active: Yes or No

You then select whether the category is active on the site. Selecting no will hide the category on the site.

Is Anchor: Yes or No

Finally you select whether the category page is an anchor. Anchors are used for the Layered Navigation in Magento.

If you set the category to be an Anchor the layered navigation (see How Does Layered Navigation Work in Magento? for a look at the layered navigation) will display the sub-categories of this category in the layered navigation. The layered navigation then takes all the products underneath, including ones in the sub-categories, and displays all the filterable attributes of those products. If you do not set the category as an Anchor it will not display the filterable attributes in the layered navigation.

Here is a look at the layered navigation for the Apparel category which is set to be an anchor.

Adding products to the category

Now you can select products to populate the category from the Category Products tab and you have created a new category for your online store.  In the Category Products tab (accessible from the top of the category page), search for the products you want to associate and then click the checkboxes of these products.  After the products are checked you’ll be able to control their Position in the category listing.  Example in the screenshot below:

Adding customer design to the category page

You can customize the design of each category individually in the Custom Design tab. This controls the look of the category page, including the objects on the page and the structure of the page. Select the design you want from the Custom Design drop-down. Magento comes with several different design options out of the box, but you can add your own. If you leave this drop-down blank, it will automatically use the Current package name design. This can be edited by navigating to System > Configuration and clicking the Design tab. Enter the name of the design you want in the Current package name field, and this design will apply to all categories for which you do not specify a different design. Select your preference from the Apply To drop-down. This category only means that the design will only apply to this one category page. This category and its products means that the design will apply on this category page, and on the pages of all products associated to this category. If a product is associated to multiple categories, each with a different design, the design displayed on that product page will be determined by the design of the category page from which the user navigates to that product. This category and its child categories means that the design will apply on this category page, and on the pages of all sub-categories, sub-sub-categories, and so on. All mean thats the design will apply to this category, its child categories, and its products. With the Active From and Active To fields, you can select a time frame in which the category will automatically switch to a design, and then switch back to the blank option when the time frame ends. This is perfect for the holidays, so that you can create a holiday design for you pages, and then have your site automatically switch back to the normal design whenever you want, without having to remember to do it yourself. The Page Layout drop-down determines the structural aspects of the page. No layout updates uses the default settings that come with the Magento installation. Empty displays the category page without any objects, except for the content (products or static blocks only), category name, and view options (number to display per page, view as grid or list, and sort be options). 1 column displays the contents, category name and view options, as well as the header, footer, search field, and navigation bar. Column on the left adds the left column to the 1 column display, which by default includes the currency selection and layered navigation. Column on the right adds the right column to the 1 column display, which by default includes the shopping cart view, wishlist, compared products list, polls, and newsletter sign-up. 3 columns displays both the left and the right column. The Custom Layout Update is essentially a static block, with a few differences. Rather than HTML, the structure must be in XML format. The Update will display at the bottom of the page, below the products, whereas a static block will display above the products (if the static block is set to display with products). The Update will display on the page only during the dates specified in the Active date range.

Front-end

Finally navigate to the front-end and view the products.  Below is a screenshot with product images removed:

The products will adhere to the Position entered in the admin panel.

Tutorial: Creating a Grouped Product in magento

Tutorial: Creating a Configurable Product in magento

There are three kinds of products in Magento: Simple, Grouped, and Configurable.  If you want to make a simple product.

Advanced Products

Advanced products in Magento are a way to consolidate product variants onto a single product info page in the front-end.  The variants themselves have their own SKUs and stock management.  This is very powerful – it allows you to let customers search for the individual variants, but browse only to the consolidated product pages.  (If that’s the implementation you want – you could also let customers browse the individual SKUs.)

Configurable Products let your customers select the variant they desire by choosing options.  For example, you sell t-shirts in two colors and three sizes.  You’d create the six variants as invidivual products (with their own skus) and then add these six to a configurable product from where customers can choose size and color, then add to cart.  If desired you could also have customers search for “red medium t-shirt” and land on the specific page for this variant.

Creating a Configurable Product

There are a few steps involved:

1. Create the attributes that will be configurable by the user – for our example they will be Size and Color
2. Create the attribute set that will be assigned to the variant products – for our example, we’ll call it “T-shirt”
3. Create the invidivual variant products
4. Create the configurable product, and add the “T-shirt” attribute set
5. Add the individual variants to this configurable product

Creating Attributes

Below are screenshots of how the configurable attribute “Size” is set up.

Attribute Properties

Notice the “Catalog Input Type” is set to dropdown – this is required for the attribute to be compatible with configurable products.  The Scope is also set to Global. When both of these settings are cconfigured in this manner, the Use To Create Configurable Product dropdown will appear. This must be set to Yes. Required is also set to “Yes”.  In order for a Simple Product to be associated to a Configurable Product, it must have a value for all configurable attributes, so making it required ensures that you will remember to add a value for this attribute for all Simple Products.

Labels/Options

Note how the size options and their sort order have been entered above.

The attribute “Color” will be set up exactly the same, with only the Labels/Options page changed.  It will look as follows with these 4 colors:

Creating the attribute set

Now we’re ready to create an attribute set called “T-shirt” to start using for this product.  Go to “Catalog -> Attributes -> Manage Attribute Sets” and press “Add New Set”.

In our example, the name is “T-shirt” and we’re basing it on the default set:

Continue to the next page.  Drag the two attributes into a new group which I called “Selectable Options”:

If any of that’s confusing, be sure to read the section called ”How do I create an attribute set?”.

Creating the simple products

Now that we created the attribute set, we’re ready to start entering the data for the simple products that will be part of the configurable product.

1. Navigate to “Catalog -> Manage Products”.  Press “New Product”
2. Create a Simple Product based on the “T-shirt” attribute set



3. Fill in all the required information, and make sure to fill in options for the “Selectable Options” tab, as shown below:



4. After you’re done, press “Save Product”

Now, repeat these steps for every combination of options your super product will contain. Since this example had 3 sizes and 4 colors, you would create the 12 options individually. You can create duplicates of the first product you create to vastly speed up this process.
You should have a product list similar to this one when you’re done (of course, titles and SKUs can be whatever you choose, this example just uses the attributes in the title and sku):

 

After you’re done, you’re ready for the next and final step!

Creating the Configurable Product

 

1. After making all the variants, navigate to “Catalog -> Manage Products”
2. Press “New Product
3. Select ‘Configurable’ based on the T-shirt attribute set



4. The next screen lets you pick which attributes you want to associate.  It picks attributes from the set that are Input Type: Dropdown, Scope: Global, and Use To Create Configurable Product: Yes



5. Select both “Size” and “Color” and press “Continue”
6. The next page is the regular create product page, with the addition of the “Associated Products” tab at the bottom. The general tab used for the sample product looks like this:



7. Finally, let’s take a look at the “Associated Products” tab:  If you push “Reset Filter”, you’ll see all products associated to the T-shirt Attribute Set that have options for the Size and Color attributes.  If you check one (or all) you’ll see the “Associated Products Attributes Configuration” above the list.  This is where you decide the sort order of the selectable attributes (click and drag an attribute to change) and also any price adjustments that selecting a specific attribute will have on the configurable product.  For example:  If you wanted the Magento shirt to be $5.00 more, you just have to enter “5” in the text field.  Price adjustments can be either percentage based or a fixed amount.  For our example, the Large size is 10% more, and the Magento shirt is $5.00 more.

 

In the above image you’ll notice an option called Attribute Name.  This is the text that will display in the front-end for this product.  In the example, “Select Color” and “Select Size” are the desired text for the front-end.

Above this, you will see a button called Create Empty. This allows you to create a Simple Product in a pop-up window that will automatically be associated to this Configurable Product. It is very useful if you have forgotten to create all of your Simple Products prior to beginning the Configurable Product creation phase.

When you’re done with all this, associate the product with a store and front-end category, and you’ll be able to find it in the front-end.  You’re done!

Front-end

Here’s a section from the front-end for this configurable product, done and ready to use:
 

How does Layered Navigation work in magento ?

When a customer is browsing through your site they need to find the products that interest them as fast as possible or you won’t make the sale. And when confronted with a category containing 60 products spread across multiple pages most customers will simply throw in the towel. Give them the option to filter by what interests them though, whether it’s price, manufacturer or any other aspect of the products, and you can show your customers what they want and raise conversions.

Layered navigation constant filters

In Magento, two properties will appear as layered navigation filters without you having to do anything:  Price and Categories.  If you make a category an anchor category, its sub-categories will display as layered navigation options.  If you take a look at the image above, you’ll notice the first filter is Category and it features two options:  Shirts and Pants.  In this example, Shirts and Pants are subcategories of the category this layered navigation block was pulled from.

Price ranges are also logically picked to display as another filter.  The ranges themselves are determined by the prices of products contained within.  There will never be more than 10 price ranges displayed, and products will be distributed accordingly.

Additional layered navigation filters

The additional filters in the screenshots above are Color and Manufacturer.  These are product attributes that have been selected as filterable in the Use in Layered Navigation dropdown. There are two types of filterable attributes. Filterable (with results) means that links will only appear for values where the number of results (the number in parentheses next to each value) is greater than zero. Filterable (no results) means that links will appear for all values, whether the number of results is zero or greater. In order for an attribute to appear as a layered navigation filter, the Catalog Input Type for Store Owner must be Dropdown, Multiple Select, or Price.  This controls the number of possible filter options, and makes them consistent.

How do Product Comparisons work in Magento?

Product Comparisons

One property of Magento attributes are a flag called Comparable in Front-end.  If at least one attribute is Comparable, this product is eligible to be added to customers’ Product Compare Boxes.  If you wanted customers to compare televisions, you might have attributes like Manufacturer and Screen Size.  If you make these attributes Comparable on Front-end: Yes customers will be able to view the televisions side by side and make an educated shopping decision.

This is very powerful – if customers desire, they can compare a chair, a television, and a pair of running shoes.  The attributes these products have in common are most likely only things like SKU, Price, and Product Name.  Let’s say the chair has a comparable attribute called Material: Wood. For the other two products it will simply read Material: – .  On the other hand, the television might have a comparable attribute called Screen Size: 25”, which would show as Screen Size: – on the other two products.

In the example below, “Volume” is a comparable attribute that has been assigned to these two cups:

How do I control the data shown in product comparisons?

Each product attribute has a flag called Comparable in Front-end, which can be set to “yes” or “no”.  You’ve decided that the “Manufacturer” attribute is not something that customers really use when determining which product is best for them.  This is how you make it go away:

1. In the magento admin, navigate to Catalog -> Attributes -> Manage Attributes.
2. In the grid, find the attribute you want to edit.  Hint: Change the last column “Comparable” to “yes” to see all attributes that can appear in the product comparison chart.
3. Click the attribute to edit it.



4. Change the drop-down Comparable on Front-end to “No.”
5. Press “Save Attribute.”

There you go!  Now “Manufacturer” won’t show up on product comparison pages anymore.

How do I use Tier Pricing a promotional tool in magento

What is tier pricing?

Tier pricing is a promotional tool that lets you price items differently for higher quantities.  This is an effective way to move more merchandise.  For example: you sell office supplies and you want to create a promotion where customers who buy three boxes of printer paper save money compared to buying just one box.  In the front-end this will display like this:

Now when customers add 3 of the printer paper to their cart, they will see an item price of $14.49 each, as opposed to $16.99 for just one.

How do I set up tier pricing?

Here’s how you do it:

1. In the Magento admin, navigate to “Catalog -> Manage Products”
2. Find and click the product that you want to add tier pricing to (or create a new product).
3. Locate the “Prices” tab on the left and click on it.
4. Click the button that says “Add Tier.”
5. Enter the qty you wish to start the tier pricing at.
6. Enter the new price per item that will take effect at the quantity specified.
7. Press “Save” to save the changes and have tiers start displaying in the front-end

The Price tab for the product displayed above:

Voila – you just added a pricing tier.  To add more tiers, simply press the “Add Tier” button again.  If you don’t want one of the tiers, press “Delete Tier” next the tier you want to get rid of.

How do I set up Product Relations i.e Up-sells, Related Products, and Cross-sell Products?

There are three types of product relations in Magento: Up-sells, Related Products, and Cross-sell Products.  When viewing a product, Upsells for this product are items that your customers would ideally buy instead of the product they’re viewing.  They might be better quality, produce a higher profit margin, be more popular, etc. These appear on the product info page. Related products appear in the product info page as well, in the right column. Related products are meant to be purchased in addition to the item the customer is viewing. Finally, Cross-sell items appear in the shopping cart.  When a customer navigates to the shopping cart (this can happen automatically after adding a product, or not), the cross-sells block displays a selection of items marked as cross-sells to the items already in the cart.  They’re a bit like impulse buys – like magazines and candy at the cash registers in grocery stores.

Up-sells

To add Upsells to a product:

1. Log in to the Magento admin
2. Navigate to Catalog -> Manage Products
3. Find the product to which you want to add Up-sells
4. Select and edit this product
5. Select the Up-sells tab



6. From the products grid that appears, check any products you’d like to mark as Up-sells (press “Reset Filter” to see all products)
7. Once a product has been checked, the “Position” field opens up.  This determines the sort order of the Upsells in the main product’s page
8. Press “Save”
9. You’re done! Navigate to the front-end and check out your newly created Upsells block! (shown below)


In the above screenshot, you should assume your customers would rather buy a cup with coffee in it, making it a perfect Upsell.

Related Products

To add related items to a product:

1. Log in to the Magento admin
2. Navigate to Catalog -> Manage Products
3. Find the product you want to add related items to
4. Select this product to load it for editing
5. Select the Related Products tab
6. From the products grid that appears, check any products you’d like to mark as related (press “Reset Filter” to see all products)
7. Once a product has been checked, the “Position” field opens up.  This determines the sort order of the related products on the main product’s page
8. Press “Save”
9. You’re done! Navigate to the front-end and check out your newly created Related products block! (shown below)


In the above screenshot, a coffee cup (with coffee) is a related item.  Also, a Grouped item called “Aerial View” is marked as related. Note that “Aerial View” is missing the checkbox. This is because it is a Configurable Product, and cannot be added using the checkbox, because the configurable attributes must be selected first.

Cross-Sells

Cross-sells display after a product has already been added to the shopping cart.  In this design package, three products are randomly picked from the products that are marked as cross-sells of all the products in the shopping cart.  To add cross-sell items to a product:

1. Log in to the Magento admin
2. Navigate to Catalog -> Manage Products
3. Find the product you want to add cross-sells to
4. Select and edit this product
5. Select the Cross-sells tab
6. From the products grid that appears, check any products you’d like to mark as cross-sells (press “Reset Filter” to see all products)
7. Once a product has been checked, the “Position” field opens up.  This determines the sort order of the cross-sells in the shopping cart.  If you have multiple products in the cart they are randomly selected, so the sort order will not take effect.
8. Press “Save”
9. In the front-end, add the product you just edited to the shopping cart. 
10. In the shopping cart you should now be able to see the cross-sells in the cross-sell block as shown below:

Ask a doctor for your medical problems free

Next Page »