introduction to theming in magento go...magento(go—intro(the(theming(webinar( 7/20/11...
Post on 16-Mar-2020
10 Views
Preview:
TRANSCRIPT
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."
Magento Go—Intro the Theming Webinar 7/20/11
© 2011, Magento, Inc. 2
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!"
Magento Go—Intro the Theming Webinar 7/20/11
© 2011, Magento, Inc. 3
A visit to the frontend. So far so good…"
But what you really want is yourgreat design"
Magento Go—Intro the Theming Webinar 7/20/11
© 2011, Magento, Inc. 4
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."
Magento Go—Intro the Theming Webinar 7/20/11
© 2011, Magento, Inc. 5
Our task today…"
What exactly is a Magento Go theme?"
Magento Go—Intro the Theming Webinar 7/20/11
© 2011, Magento, Inc. 6
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
Magento Go—Intro the Theming Webinar 7/20/11
© 2011, Magento, Inc. 7
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
Magento Go—Intro the Theming Webinar 7/20/11
© 2011, Magento, Inc. 8
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"
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"• 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
Magento Go—Intro the Theming Webinar 7/20/11
© 2011, Magento, Inc. 10
So, whatʼd we do today?"
Whatʼs next?"
top related