Introduction to Theming in Magento Go" Webinar date: July 20, 2011 Presenters: Kara Heinrichs, Brillig House (twitter: @kkarahh) Mosses Akizian, Magento (twitter: @monocat) Agenda for todayʼs webinar" INTRODUCTION" About Magento and Magento Go PRESENTATION" Overview of theming and design Demonstration of basic theming and design QUESTIONS & ANSWERS" Yes, this webinar is being recorded." The recording and the slides will be available online within a day." 2011, Magento, Inc. 1
Magento Go Intro the Theming Webinar 7/20/11 Introducing Magento Go" Launched February 2011" " Drag-and-drop layout editing" Ready-to-use professionally designed themes" Out-of-the-box payment gateway integrations" CSS-based theming approach" Expand your store with Add-ons" Inline and importable translations" Professional web design services from partners" Welcome to Magento Go!" 2011, Magento, Inc. 2
Magento Go Intro the Theming Webinar 7/20/11 A visit to the frontend. So far so good " But what you really want is your great design" 2011, Magento, Inc. 3
A visit to the backend. OK, now what?" Todayʼs topics" Whatʼs a theme in Magento Go" Before you start" Some look and feel basics" Selecting a starting theme Changing the logo and favicon Some CMS basics" Changing the home page Removing static blocks Adding a frontend app Working with blocks" Adding or removing blocks in the left and right columns Adding or removing the left and right columns Changing the text in your theme " Changing the design" Adding a background image Working with CSS An introduction Yes, this webinar is being recorded." The recording and the slides will be available online within a day." 2011, Magento, Inc. 4
Magento Go Intro the Theming Webinar 7/20/11 Our task today " What exactly is a Magento Go theme?" 2011, Magento, Inc. 5
What are the parts of a Magento Go theme?" Themes in Magento allow you to change:" Look and feel" Colors Fonts Images (esp. logo and branding images) Position of many elements Some interactive (or active) elements Themes Editor: --WYSIWYG editor --Image upload --Font upload --CSS editor --Javascript editor Page layouts and blocks" Presence or absence of functional blocks Page layouts (esp. number of columns) Text labels and translations" Layout Editor:" --WYSIWYG editor --limited access to XML Theme Text Editor:" --WYSIWYG editor Before you start" Have a concept/design in mind" Set up at least some of your catalog" Create most of your categories and several products (with images) 3 rd party tools youʼll need" Image editing tool E.g., Photoshop, Picasa, GIMP, Acorn CSS/element inspection browser tool E.g., Firebug, Chrome inspector, IE WebDev/DebugBar Multiple browsers for testing Firefox, Chrome, IE Cross browser testing website 2011, Magento, Inc. 6
Setting up your theme" Selecting a starting theme" ADMIN: Design Themes Editor" Changing the logo" ADMIN: Design Themes Editor Design Settings Editor tab Header Settings panel Changing the favicon" ADMIN: System Configuration Design tab HTML Head panel!note: to change logo and favicon in one place you can also use the Start My Store wizard in the Admin Panel. Some CMS basics" Create a page & assign it as the home page" ADMIN: CMS Pages Manage content " To create a new page" ADMIN: System Configuration Web tab Default Pages panel To assign it as the home page" Turn off the free shipping message" ADMIN: CMS Static Blocks" Add a new products list/grid to the home page" ADMIN: CMS Frontend Apps 2011, Magento, Inc. 7
Working with blocks and page templates" Adding or removing blocks in the left and right columns" ADMIN: Design Layout Editor (to change them)" ADMIN: Catalog Search Indexing (to re-cache the page)" Adding or removing the left and right columns from pages" ADMIN: Catalog Manage Categories Custom Design tab ADMIN: Catalog Manage Products Design tab ADMIN: CMS Pages Manage Content Design tab Page layout options" 3 columns" 2 columns with left bar" 2 columns with right bar" header header header left main right left main main right footer footer footer 1 column" Empty" header main main footer 2011, Magento, Inc. 8
Changing the text in your theme" Changing the text in your theme" ADMIN: Design Theme Text Editor" Text changes use the same mechanism as do translations" All the text outlined in red can also be translated" Translations are outside of the scope of this webinar" ADMIN: System Translations" See knowledge base for more information" Tweaking your theme design" Change the background image" ADMIN: Design Themes Editor Design Settings Editor Body Settings panel Working with the CSS" ADMIN: Design Themes Editor CSS Editor" Firebug 2011, Magento, Inc. 9
Magento Go Intro the Theming Webinar 7/20/11 So, whatʼd we do today?" Whatʼs next?" 2011, Magento, Inc. 10
Be sure to visit go.magento.com/support for tutorials, articles and videos to help you get going with Magento Go!" 2011, Magento, Inc. 11