Introduction to Theming in Magento Go...Magento(Go—Intro(the(Theming(Webinar( 7/20/11 ©(2011,(Magento,(Inc.( 9 Changing the text in your theme" • Changing the text in your theme"

Magento Go—Intro the Theming Webinar 7/20/11

© 2011, Magento, Inc. 1

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



Introducing Magento Go"

Launched February 2011"

Ready-to-use professionally designed themes"

CSS-based theming approach"

Inline and importable translations"

" Drag-and-drop layout editing"

Out-of-the-box payment gateway integrations"

Expand your store with Add-ons"

Professional web design services from partners"

Welcome to Magento Go!"



A visit to the frontend. So far so good…"

But what you really want is yourgreat design"



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



Our task today…"

What exactly is a Magento Go theme?"



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

–  Page layouts and blocks"•  Presence or absence of functional blocks •  Page layouts (esp. number of columns)

–  Text labels and translations"

Themes Editor: --WYSIWYG editor --Image upload --Font upload --CSS editor --Javascript editor

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)

•  3rd 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



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



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"

header

footer

left right main

header

footer

left main

header

footer

right main

header

footer

main main

3 columns" 2 columns with left bar" 2 columns with right bar"

1 column" Empty"



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



So, whatʼd we do today?"

Whatʼs next?"



Be sure to visit go.magento.com/support for tutorials, articles and videos to help you

get going with Magento Go!"

Documents

Introduction to Theming in Magento Go...Magento(Go—Intro(the(Theming(Webinar( 7/20/11 ©(2011,(Magento,(Inc.( 9 Changing the text in your theme" • Changing the text in your theme"