CMS Expo Chicago

Transcription

1

2 Who is This Handsome Guy?

3 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

4 Elements & Terminologies of a Magento Site

5 Websites, Stores & Store Views Ability to manage multiple websites & stores from the same back-end Display the same products in different stores

6 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

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

8 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

9 One website with multiple stores Website Main Website Store Store One Store Two Store Three Store View Store View Store View Store View

10 Two websites with two store views each Website Main Website Sec Website Store Main Store Sec Store Store View English Spanish English Spanish

11 One website with one store and store view (most common) Website Main Website Store Main Store Store View Main Store View

12 Extensions One or more files 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

13 Modules Extend features and functionality of the core i.e. additional payment gateways, MailChimp

14 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

15 Themes Combination of layout, template and/or skin files that create the visual experience of your store Default and Non-default themes

16 Components of a Theme Layouts - Basic XML files that define the block structure for different pages Templates - PHTML files that contain XHTML markup and PHP for visual presentation Skins - Block specific JavaScript, CSS and images that compliment template files

17 Interface Theme One Theme Two Theme Three Layouts Templates Skins Collection of themes Combination of files that create the visual output as well as front-end functionality Defines block structure PHTML (XHTML and PHP) JavaScript, CSS and Images

18 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

19 Structural Blocks - Blocks created for the purpose of assigning structure to a page Header Left Column Content Footer

20 Content Blocks - Blocks that create content inside each structural block. i.e. mini cart, tags, category list Header Global Navigation Links Category List Left Compare Column Products Product Listing Content Promotions Related Products Footer Newsletter Links Callout

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

22 Core The core code is a collection of modules developed by the Magento core team. Editing core files is NOT recommended

23 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

24 Community Community contributed extensions Reside in the community directory again to make upgrades clean and easy

25 Setting Up Your Catalog

26 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

27 Catalog Configuration - System > Configuration Catalog

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

29 Creating Categories - Catalog > Manage Categories

30 Select the store view the new category will be displayed in

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

32 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

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

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

35 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 effect (good for holidays and specials) 4.Choose a page layout 5.Custom layout updates

36 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

37 CMS as a category landing page Standard category landing page

38 Creating Product Attributes Attributes are quantifiable or descriptive aspects of a product. i.e. color, size, manufacturer, SKU

39 There Are 2 Kinds of Attributes Simple Attributes System Attributes Created by the store owner and are specific for individual products. Required attributes that every product must have. These cannot be deleted. Color Size Megapixels Name Price SKU

40 New Attribute - Catalog > Attributes > Manage Attributes

41 Attribute Properties 1. Attribute identifier 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 configurable product

42 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

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

44 Managing Attribute Sets A collection of attributes, customized to fit certain product types.

45 Creating an Attribute Set - Catalog > Attributes > Manage Attribute Sets

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

47 Assigning Attribute Sets to Products - Catalog > Manage Products

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

49 Products

50 There Are 3 Types of Products 1. Simple 2. Configurable 3. Grouped

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

52 Configurable Configurable products offer much more customer interaction. Attributes are determined by the customer. i.e. color, size, style

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

54 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

55 Product Info: General

56 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 identifier 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 identifier Visibility - Where the product will display. Category, search, both or neither Allow Gift Message - Can allow customers to enter a gift message

57 Product Info: Prices

58 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

59 Product Info: Meta Data

60 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.

61 Product Info: Images

62 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 the order of the images

63 Product Info: Design

64 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

65 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

66 Product Info: Categories You can assign a product to as many categories as you like. Simply check the checkbox next to the category

67 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

68 Product Info: Alerts

69 For each subscriber, both alert lists show the Name The date they subscribed to this alert The time that the most recent notification was sent to them The number of times a notification 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. Alerts must be enabled in the system configuration

70 Getting Ready for Selling

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

72 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 different tax rates in different states Zip/Post Code - Specify if the country or state has different tax rates in different zip codes (you can specify a zip code even if you have not specified a state) Rate Once you ve defined which region a Tax Rate applies to you have the ability to define up to 5 different tax rates

73 Tax Classes Combined with Tax Rates, Tax Classes define Tax Rules.

74 There Are 2 Kinds Tax Classes Customer Tax Classes Associated to customers by assigning them to customer groups Sales > Customer Tax Classes Product Tax Classes Associated to products. This allows different types of products to have different tax rates Sales > Product Tax Classes

75 Tax Rules If you have different tax rates for your different combinations of Customer Tax Classes and Product Tax Classes, you can define a Tax rule for each scenario Sales > Tax > Manage Tax Rules

76 Shipping Options System > Configuration Shipping Settings

77 Origin Country, Region/State, Zip/Postal code and City from which the shipments will be sent i.e. the location of your company/warehouse

78 Options Allow shipping to multiple addresses. Shipping method can be different 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

79 Shipping Methods System > Configuration Shipping Methods

80 Flat Rate Enabled Title Method Name Type Price Calculate Handling Fee Displayed Error Message Ship to Applicable Countries Ship to Specific Countries Show Method if Not Applicable Sort Order

81 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 figured in conjunction with either weight, price, or number of items

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

83 Shipping Methods UPS USPS FedEx DHL Over 30 global shipping methods available from Magento Connect magentocommerce.com/magento-connect

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

85 Saved Credit Card Zero Subtotal Checkout Check/Money Order Authorize.net Payflow Amazon Simple Pay Checkout by Amazon Google Checkout (Under Google API tab)

86 Themes

87 Theme Terminologies Layouts - Basic XML files that define the block structure for different 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 files

88 Structural Blocks - Blocks created for the purpose of assigning structure to a page Header Left Column Content Footer

89 Content Blocks - Blocks that create content inside each structural block. i.e. mini cart, tags, category list Header Global Navigation Links Category List Left Compare Column Products Product Listing Content Promotions Related Products Footer Newsletter Links Callout

90 How Are Magento Themes Different from Other?

91 Maximum customization power Multiple themes active at the same time Uninterrupted workflow. All modules are immediately accessible via template tags from any template file

92 Creating a Theme Directory 1: app/design/frontend/default/default This directory contains the layout, translation (local) and template files Directory 2: skin/frontend/default/default This directory contains the images, CSS and block-specific JavaScript

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

94 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

95 Assigning Interface & themes to the store You need to assign your new theme to your website/store in order for it to take effect System > Configuration > Design tab

96

97 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

98 How you see the files 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

99 How Magento sees the files 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