Intro To Magento CMXExpo 09

Who is This
Handsome Guy?

CMS Expo 2009 - Chicago

Jonathan Lackey
Known in virtual social circles as zuno
•

Creative director at Zuno Studios
•

Based in Redondo Beach California
•

Over 10 years experience in design &
•

web


Elements &
Terminologies of
a Magento Site


Websites, Stores &
Store Views
Ability to manage multiple websites &
•

stores from the same back-end

Display the same products in dierent
•

stores


Websites
Made up of one or more stores that
share the same customer information

(i.e. Order information shopping cart)

resource: How multiple websites work
magentocommerce.com/knowledge-base/entry/overview-how-multiple-websites-stores-work


Stores
Can be set up a variety of ways,
but as long as they are part of a website
they share certain information.


Store Views
Mainly used for multiple languages

So if you wanted to display a store in
English and Spanish you create one store
and two store views


One website with multiple stores

Main Website
Website

Store One Store Two Store Three
Store

Store View Store View Store View
Store View


Two websites with two store views each

Main Website Sec Website
Website

Main Store Sec Store
Store

English Spanish English Spanish
Store View


One website with one store and store view
(most common)

Main Website
Website

Main Store
Store

Main Store View
Store View


Extensions
One or more ﬁles packaged together
•

to extend functionality

Do not modify core code
•

Installed through the admin panel or
•

Magento Connect

resource: Magento Connect
magentocommerce.com/magento-connect


Modules
Extend features and functionality of the
core

i.e. additional payment gateways,
MailChimp


Interface
Collection of themes that determine the
visual output and front-end functionality
of your store

Can be assigned on either the website,
store or website and store levels


Themes
Combination of layout, template and/or
skin ﬁles that create the visual
experience of your store

Default and Non-default themes


Components of a Theme
Layouts - Basic XML files that define
•

the block structure for dierent pages

Templates - PHTML files that contain
•

XHTML markup and PHP for visual
presentation

Skins - Block specific JavaScript, CSS
•

and images that compliment template
files

Interface Collection of themes

Theme One
Combination of ﬁles that
Theme Two create the visual output as
well as front-end functionality

Theme Three

Layouts Deﬁnes block structure

Templates PHTML (XHTML and PHP)

Skins JavaScript, CSS and Images


Blocks
Blocks are a way by which Magento
distinguishes the array of functionality in
the system and creates a modular way to
manage this array from both visual and
functional stand points.

There are 2 types of blocks


Structural Blocks - Blocks created for the
purpose
of assigning structure to a page
Header

Left
Content
Column

Footer


Content Blocks - Blocks that create content
inside each structural block. i.e. mini cart, tags,
category list
Links
Header
Global Navigation

Category
List
Product Listing
Left
Content
Compare
Column
Products

Related Products
Promotions

Footer
Newsletter Links Callout


File Structure
Set up to keep core, community and local
ﬁles separate for easy upgrading and
maintenance


Core
The core code is a collection of
modules developed by the
Magento core team.

Editing core ﬁles is
NOT recommended


Local
Customizations that only
reside
on a user’s local copy

Kept in the “local” directory so
they do not interfere with
upgrades to the core code


Community
Community contributed
extensions

Reside in the “community”
directory again to make
upgrades clean and easy


Setting Up
Your Catalog


The Heart of Your Site
The catalog is the most important part of
your Magento site and it includes...

Categories
•

•Products

•Attributes

•Tags

•Reviews ratings


Catalog Conﬁguration - System
Conﬁguration Catalog


Product Reviews
Front-end
Sitemap
Product Alerts
Product Image Placeholders
Recently Viewed
Catalog Search
Search Engine Optimizations
Downloadable Product Options
Date Time Custom Options

Creating Categories - Catalog Manage
Categories


Select the store view the
new category will be
displayed in


Select a parent category.
Choose “Root Catalog” if the
new category is not a sub-
category


1.Name
2.Choose a parent category
3.Description
4.Image
5.Meta data (page title, keywords,
description)
6.Display mode and CMS block
7.Is anchor
8.Is active
9.URL key

Assigning products
at the category level
Products can be added to a category
while the category is being created, or
anytime after.


Assigning designs
at the category level
You can customize the design of each
category individually in the “Custom
design” tab


1.Choose a custom design

2.Choose how the custom design is
applied to child elements

3.Set a timeframe for the custom design
to take eect (good for holidays and
specials)

4.Choose a page layout

5.Custom layout updates


Special landing pages
for categories
You can create custom landing pages for
categories. Instead of the standard
product listing page you can display a
static content block


CMS as a category
landing page

Standard category
landing page


Creating Product
Attributes
Attributes are quantiﬁable or descriptive
aspects of a product.

i.e. color, size, manufacturer, SKU


There Are 2 Kinds of Attributes

Simple Attributes System Attributes

Created by the Required
store owner and attributes that
are speciﬁc for every product
individual must have. These
products. cannot be
deleted.
Color
•
•Size Name
•
•Megapixels •Price
•

New Attribute - Catalog Attributes Manage
Attributes


Attribute Properties
1.Attribute identiﬁer
2.Scope
3.Catalog input type for store owner
4.Default value
5.Unique value
6.Values required
7.Input validation for store owner
8.Apply to
9.Use to create conﬁgurable CMS Expo 2009 - Chicago
product

Front-end Properties
1.Use in quick search
2.Use in advanced search
3.Comparable on front-end
4.Use in layered navigation
5.Position
6.Visible on catalog pages on front-end


Manage Label/Options
1.Manage Titles
2.Manage Options


Managing Attribute Sets
A collection of attributes, customized to
ﬁt certain product types.


Creating an Attribute Set - Catalog
Attributes Manage Attribute Sets


1.Edit set name
2.Groups (like folders that contain
attributes)
3.Unassigned attributes


Assigning Attribute Sets to Products -
Catalog Manage Products


Selecting the attribute set will load all of the
corresponding groups (tabs) and attributes into
the product creation/management page


Products


There Are 3 Types
of Products
1.Simple
2.Conﬁgurable
3.Grouped


Simple
Is the simplest type of product to sell on
your website; one individual product,
where the attributes are determined by
the store owner


Configurable
Conﬁgurable products oer much more
customer interaction. Attributes are
determined by the customer.

i.e. color, size, style


Other Places
Used to display multiple simple products
on one product page and allow the
customer
to purchase any combination


Creating a Simple Product
1.Catalog Manage Products Add
Product
2.Select an Attribute set
3.Select Simple Product
4.Press Continue
5.Enter all product information


Product Info: General


Name - Product name as it will appear on the front-end
•

Description - Displays on the main product page
•

Short Description - Displays on category list pages and
•

main product page
SKU - Unique identiﬁer for product across all stores and
•

websites
Weight - Product’s weight. Usually used for shipping
•

Set Product is New from/to Date - Date range the
•

product will be promoted as new
Status - Enabled/disabled. Enabled displays normally on
•

front-end
URL Key - The search engine friendly URL identiﬁer
•

Visibility - Where the product will display. Category,
•

search, both or neither
Allow Gift Message - Can allow customers to enter a
•

Product Info: Prices


Price - Price of the product as it will display on the
•

front-end
Special Price - Sale price for the product. On the front-
•

end this will appear under the original price which will be
crossed out
Special Price From/To Date - Date range for the special
•

price to be active. Automatically activates and deactivates
Cost - Amount you pay your supplier
•

Tax Class - The product tax class
•

Tier Price - Special pricing for higher quantities
•


Product Info: Meta Data


SEO-related Meta Information is controlled from
here. Page Title, Meta Keywords and Meta
Description can be entered for this product. The
Page Title will display in the browser’s title bar
when this product is being viewed. Meta
Keywords and Description will show in the tag of
the product’s HTML source.


Product Info: Images


Magento requires 3 image types: Thumbnails, Small and
•

Base

If you do not upload any images a Product Image
•

Placeholder will be used. (To configure these go to
System Configuration Catalog)

By default, all images uploaded for a product will be
•

listed under the main product image. Clicking any of the
additional images will open a pop-up with the ability to
view all the images

Images will automatically resize to fit the dimensions of
•

the
image type

The base image has the ability to be zoomed in and out
•

You can add a Sort Order to determine CMS Expo 2009 - Chicago
the order of the
•
•

images

Product Info: Design


Like categories, you can control the look
of an individual product page from the
design tab

If your product page has a separate
design than the category page, the
product level design will over-ride the
category design


Product Info: In Websites
If you are managing
multiple websites you
can choose which sites a
product is associated
with by checking the
checkbox next to the site


Product Info: Categories

You can assign a product
to as many categories as
you like. Simply check
the checkbox next to the
category


Related Products, Up-sells
Cross-sells
There are 3 types of product relations in
Magento:
Related Products - meant to be purchased in
addition to the current product

Up-sells - are items customers would buy
instead of the current product

Cross-sells - are impulse buys similar to candy
at the register in grocery stores

Product Info: Alerts


For each subscriber, both alert lists show the
• Name
• Email
• The date they subscribed to this alert
• The time that the most recent notiﬁcation

was sent
to them
• The number of times a notiﬁcation was sent

to them

For the Price Alert, there is also one additional
column. For each subscriber, it shows the
price that the product had at the time that
they subscribed. This includes Special Prices.

Getting Ready
for Selling


Tax Rates
Magento allows full control over your
store’s Tax Rates, from a single
statewide rate to rates per zip code


Country - Select the country associated to this shipping
•

rate. Magento locates the appropriate Tax Rate by
matching the customer’s shipping country to the Tax
Rate country

State - Specify if the country has dierent tax rates in
•

dierent states

Zip/Post Code - Specify if the country or state has
•

dierent tax rates in dierent zip codes (you can specify
a zip code even if you have not specified a state)

Rate 1-5 - Once you’ve defined which region a Tax Rate
•

applies to you have the ability to define up to 5 dierent
tax rates

•

Tax Classes
Combined with Tax Rates, Tax Classes
deﬁne Tax Rules.


There Are 2 Kinds Tax Classes

Customer Tax Classes Product Tax Classes

Associated to Associated to
customers by products. This
assigning them to allows dierent
customer groups types of products to
have dierent tax
Sales Customer Tax
rates
Classes
Sales Product Tax
Classes


Tax Rules
If you have dierent tax rates for your
dierent combinations of Customer Tax
Classes and Product Tax Classes, you can
deﬁne a Tax rule for each scenario

Sales Tax Manage Tax Rules


Shipping Options
System Conﬁguration Shipping Setting


Origin
Country, Region/State, Zip/Postal code
and City from which the shipments will
be sent

i.e. the location of your company/
warehouse


Options
Allow shipping to multiple addresses.
•

Shipping method can be dierent for each
address as well

Maximum qty allowed for shipping to
•

multiple addresses

When an order with multiple shipping
•

addresses is complete, it will split into
multiple orders

Shipping Methods
System Conﬁguration Shipping Metho


Flat Rate
Enabled
•
•Title
•Method Name
•Type
•Price
•Calculate Handling Fee
•Displayed Error Message
•Ship to Applicable Countries
•Ship to Speciﬁc Countries
•Show Method if Not Applicable
•Sort Order

Table Rates
Condition - Determines which aspect of
the order will be used to select proper
shipping price. Table rates are calculated
using destination, but destination can be
ﬁgured in conjunction with either weight,
price, or number of items


Free Shipping
Minimum order amount - You can
designate that free shipping is only
oered if the order is over a certain
amount


Shipping Methods
UPS Over 30 global shipping
•

methods available from
• USPS

Magento Connect
• FedEx

• DHL
magentocommerce.com/magento-
connect


Payment Methods
13 Default methods and over 130 3DP
methods on Magento Connect
magentoecommerce.com/magento-connect


Saved Credit Card
•

Zero Subtotal Checkout
•

Check/Money Order
•

Authorize.net
•

Payﬂow
•

Amazon Simple Pay
•

Checkout by Amazon
•

Google Checkout (Under Google API tab)
•

Themes


Theme Terminologies
Layouts - Basic XML files that define
•

the block structure for dierent pages

Templates - PHTML files that contain
•

XHTML markup and PHP for visual
presentation

Local - Simple text documents
•

organized on a per language basis that
contain translations for store copy

Skins - Block specific JavaScript, CSS
•
and images that compliment template

How Are Magento Themes
Different from Other?


Maximum customization power
•

Multiple themes active at the same time
•

Uninterrupted workﬂow. All modules
•

are immediately accessible via template
tags from any template ﬁle


Creating a Theme
Directory 1: app/design/frontend/
default/default
This directory contains the layout,
translation (local) and template ﬁles

Directory 2: skin/frontend/default/
default
This directory contains the images, CSS
and block-speciﬁc JavaScript

Why 2 Directories?
Separating the ﬁles that have to be web
accessible (images js) from those that
can be hidden makes for maximum
security


New Default Theme
Make a duplicate of an existing default
theme
Rename the new
directory.

The new name is the
name in which Magento
will recognize your
theme

Assigning Interface
themes to the store
You need to assign your new theme to
your website/store in order for it to take
eect

System Conﬁguration Design tab


Hierarchy of Themes
If the category listing page calls for a
template called “view.phtml” but
Magento cannot find the file in the theme
highest in the hierarchy it will look to the
next theme highest in the hierarchy.

This is method of building design is call
“fallbacks” because Magento falls back to
the next possible source of the required
files

How you see the ﬁles in each of the theme
directories
default my_theme_1 my_theme_2

all required files

templates/3-col-layout.phtml templates/3-col-layout.phtml

templates/header.phtml

images/logo.gif

css/base.css css/base.css

css/boxes.css


How Magento sees the ﬁles

default my_theme_1 my_theme_2

all required files

templates/3-col-layout.phtml templates/3-col-layout.phtml

templates/header.phtml

images/logo.gif

css/base.css css/base.css

css/boxes.css


Advanced
Themes


Resources


Magento Core
Magento User Guide
http://magentocommerce.com/support/
magento_user_guide
Magento Designer’s Guide
http://magentocommerce.com/design_guide
Magento Technical Docs
http://docs.magentocommerce.com
Magento API
http://magentocommerce.com/support/magento_core_api
Magento System Requirements
http://magentocommerce.com/system-requirements
Magento Connect
http://magentocommerce.com/magento-connect Chicago
CMS Expo 2009 -

Other Places
LinkedIn Magento Users Group
http://linkedin.com/groups?gid=146360

Magento on Twitter @magento
http://twitter.com/magento

Magento Facebook Group
http://www.facebook.com/group.php?
gid=19137087720


Me
Twitter @zuno
http://twitter.com/zuno
The ﬁles from this presentation
http://zunostudios.com/cmsxpo


Intro To Magento CMXExpo 09

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (15)

Similar a Intro To Magento CMXExpo 09

Similar a Intro To Magento CMXExpo 09 (20)

Último

Último (20)

Intro To Magento CMXExpo 09

Notas del editor