Theme Customization

Magento Theme Architecture

First understand the basics for the theme architecture: website, stores, store views.

website: a collection of stores, the stores share the same customer information, order information and shopping cart.

store: a collection of store views; logical container

store view: store instances in Magento; example is to implement a store view in different language

Single and Multiple Stores

Single website, store and store view

For companies which has a single catalog and does not need to support multiple languages.

For companies which wants to sell several group of products for different kind of audience. The customer should create an account in a store and use it in the other stores (each store sells a kind of product) in order to buy products in the different stores. No need for additional languages. The solution will be: single website (for company), several stores (one for each kind of product) and one store view per store (because only one language is supported).

Multiple independent stores

For companies which wants to sell kind of products which have different prices and categories. No need to share customer and order information. Support for multiple languages. The solution will be: several websites (one per each kind of product), a store and multiple store views (one per each language support).

Design Packages and Themes

Design Package: Related themes are grouped together in design packages. Magento comes with a defaultdesign package; they are also called interfaces. It is the base package which can be extended to create more design package. It comes inside the default Magento installation.

Theme: Templating information (layout, template, etc) and skinning information (css, images, js, etc). A theme can only belong to a single design package. A package must contain at least one default theme. This default theme could have several variations (theme variants).

Theme and design package could be assigned to website level, store and/or store views.

Themes

Directory structure:

app/design/frontend/<designPackageName>/<themeName>

skin/frontend/<designPackageName>/<themeName>

layout: basic XML files defining a block for different pages as well as control meta information and page encoding.

template: PHTML files, markup, visual presentation. Some templates are page templates and some are block templates.

locale: simple CSV files per language containing translation strings (name value pairs) for interface elements and messages, non products and categories.

js: into skin directory it contains all JS files for that theme. Into <magento_dir>/js it contains all JS libraries shared across themes)

IMPORTANT The default theme must contain all the required layouts, templates and skins to render your store. For any required files that are not found in the default theme of a custom package, Magento will look last in the base package’s default theme.

Theme Variations

Situations in where theme variations should be used:

  • Some sections which require a less media-rich features.
  • Preview for next seasons without changing products yet
  • New season design applied for a short time
  • A branded website which use the almost the same design that the current website

Fallback hierarchy

When used effectively, this fallback mechanism allows you to edit and maintain only the files you need to change as a custom theme and all of the other functionality is provided by either the custom package default theme or the base package.

Blocks and Layouts

Blocks are a way by which Magento distinguishes the array of functionalities in the system and creates a modular way to manage it from both visual and functional standpoint.

Structural blocks: visual structure (header, left column, footer, etc)

Content blocks: produce the actual content inside each structural block; employs template files to generate HTML content: category list, mini cart, product tags, product listings, etc. Magento gathers and arranges page content through blocks.

Layouts: These are the files that essentially map your content blocks to your structural blocks. Layouts in Magento have two functions, they define both the structural and content blocks and then they inform Magento how and where to connect them up.

Widgets

Widgets are frontend blocks with a predefined set of configuration options. Using them eliminates some of the theme-level customization that used to be required when setting up a Magento store. Business users with no technical knowledge to easily add dynamic content.

Possible use cases:

  • Dynamic product data in marketing campaign landing pages
  • Dynamic Information such as recently viewed items in content pages
  • Promotional images to position in different blocks, side columns and other locations throughout the storefront
  • Interactive elements and action blocks (external review systems, video chats, voting and subscription forms)
  • Alternative navigation elements (tag clouds, catalog image sliders)
  • Interactive and dynamic Flash elements easily configured and embedded within content pages for enhanced user experience

Widget types and Examples

Frontend Block: an element which creates the visual output either by assigning visual structure or by producing the actual content

Magento Widget: a frontend block that implements a special widget interface which allows for having different configuration options per each block instance, and the ability to have multiple independent block instances on pages

Magento Widget instance: a block on a single page or multiple pages which receives its configuration options as defined by a store owner in the backend. The same widget can be added to the frontend multiple times producing multiple instances of the same widget. Please note that a single widget instance can also be added to multiple pages (with the same configuration options values) and managed as a single entity.

Some examples included in Magento installation:

CMS Page Link – displays a link to a selected CMS Page, and allows specifying custom text and title. Two templates are available for this widget – inline link and block template

CMS Static Block – displays content of a selected static block.

Catalog Category Link – displays a link to a selected catalog category, and allows specifying custom text and title. Two templates (inline and block) are available.

Catalog Product Link – displays a link to a selected catalog product, and allows specifying custom text and title. Two templates (inline and block) are available.

Recently Compared Products - displays a block which contains recently compared products. This Widget allows for specifying the number of products to be displayed and has two templates available (product list or product grid view).

Recently Viewed Products - displays a block which contains recently viewed products. This Widget allows for specifying the number of products to be displayed and has two templates available (product list or product grid view).

results matching ""

    No results matching ""