Styling Your Store with Magento Go’s CSS editor
In a recent post we discussed how to customize your site’s “Add to Cart” text links and buttons to compliment your store’s design. Today, we’re going to delve a bit deeper into customizing your theme using Magento Go’s built-in CSS editor for quick touch-ups and modifications. Remember, a well-designed, unique theme that speaks to your audience goes a long way to earning consumer buy-in, converting shop visitors into shop customers.
While many cloud-hosted shopping carts feature only a handful of themes and lack the ability to precisely tweak those themes to your desired look, Magento Go comes with dozens of free designer themes out of the box, and many more from our theme partners. Even better, Magento Go allows complex design changes via its built-in CSS editor and multiple options for implementing JavaScript, which we’ll discuss in detail below. Today we’re going to show you how to make some simple enhancements to your site using CSS, along with some good “rules of thumb” when making changes in Magento Go’s CSS editor.
This article will assume that you have a basic understanding of Cascading Style Sheets (CSS). If you don’t we encourage you to invest a few hours to learn about this technology. Once you understand how CSS works, you will be amazed at how powerful it is and how much you can truly customize your site. W3 Schools hosts an easy-to-follow tutorial that can quickly get you up to speed.
What You Need To Know To Begin
Before we start playing with Magento’s CSS code, there are some basic guidelines that should be acknowledged.
- 1. Always label your new changes with CSS comments. CSS comments are sections of notes in your CSS that you can use to add breakoff points between different sections of CSS code, so that if you need to find your work later, you can just search for your code rather than scanning hundreds of lines. We suggest commenting your start point and end point with something like “/* MY CSS SECTION START */ …. /* END OF MY CSS SECTION */”. W3 Schools page on CSS has some great examples and instructions on using comments.
- 2. Double check all of your tags. Leaving a tag open will cause myriad problems in the way your website displays, including breaking the design completely. The good news is, you can fix this very easily by finding the line of CSS changes that doesn’t have a closing tag, and adding the correct closing tag. W3 provides a great service for checking for problems in your code. Just copy your CSS code in their validator and it will tell you where your trouble is.
- 3. Keep a local copy of your changes. When making a lot of changes to your site, it’s very easy to make minor tweaks fairly quickly and forget what your code looked like when you started. In this situation, we recommend keeping a “clean” file of the CSS code as you found it before you started making changes. You might keep a copy of the original edits or the daily changes – it’s up to you. Use a lightweight editor like Notepad++ on Windows or TextWrangler on Mac. These editors are free and will highlight different code chunks in different colors, making it very easy to see which section of the code you can edit.
- 4. You can also upload a “custom.css” file with all of your CSS changes included. However, on Magento Go, this file will overwrite the code in the css inline editor window. We strongly advise that you simply use the inline editor to avoid accidentally overwriting any code.
Applying These New Techniques
Now that we’ve covered the basics of editing CSS on your Magento Go store, let’s apply this new knowledge to an actual store.
The easiest way to make CSS changes to Magento Go is to use your browser’s built-in Developer Tools. We’ll be working in Chrome where you can find the developer tools by right clicking on the store element you want to change and clicking on “Inspect Element”. In Chrome’s Developer Tools, you access the element you want to change (like the website background, or the font and color of a page title, or just about anything else), use “Inspect Element,” and the developer console will appear. The console will be divided into two panels: on the left side is the HTML for the item you clicked on, and on the right side is the CSS code you’ll need.
Let’s start with a very common change many store owners like to make: adding a custom background to your website.
Adding a Custom Background to Your Magento Go Store
To add a custom background to your website, click on the whitespace of your website and the developer tools will usually select the best HTML element (developers call it a ‘node’) for editing. In this example we’re going to use "div class=”wrapper” html tag, which Chrome’s tool auto-selected for us. To add a background, in Chrome’s developer tools, click on the white space just after “padding-top: 33px” in the right column.
A new box will appear below that line of code, and you can add your CSS code.
Type in “background:” (minus the quotes) and hit tab. In the new box, type in “url ()” (sans quotes) and type in the URL of your background image. In this case, we’ll use this wood texture to add a bit of rustic charm to our shop. To get the URL for it, right click on the picture and click on “Copy image URL”, then drop that into the parentheses in your developer console on your store’s tab, and then hit “tab” on your keyboard to see the changes reflected on the website.
Congratulations, you’ve just applied a nice, rustic wooden background to your website!
Now, we need to take the code and add it to our theme inside of Magento Go. Log into your Store Admin panel and go to Design > Themes Editor > CSS Editor. Remember to label your changes with CSS comments as we discussed in the opening of this article. Create a label for the changes using the CSS comment: /* Background change */. Then, hit return to start a new line and type “.wrapper {“ (minus the quotes). Hit return again, paste in the code that we added [background: url (http://source-url-here.com/image.jpg); ] without the brackets of course. Hit return once more for another line and add a “}”, without the quotes. Your CSS changes will look like the example below. Make sure to hit the “Save” button at the top, and your new background will be live on your site.
Now that you have learned how to play with the background, in our next post, we will cover adding custom fonts.
![]() | ![]() | ![]() |




Then, hover your mouse over the title you want to change, and a little book icon will appear. Click on this icon, and you can change the text of the title.
Now you can change the text of the title.
