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

In our article on how to use SEO to rank your Magento store post-Panda, we emphasized how important it is to build up a strong content base. We talked about writing richer, more detailed product descriptions and using other opportunities, like blogs, to build up a content base to be indexed by Google and Bing. Today, we’re going to teach you about another one of Magento Go’s powerful content management and ranking tools, which is built into the platform and requires no modification to get great results right out of the box.

This tool allows you to structure your content in a logical order for customers to follow, and its built in tools are on the bleeding edge of Google’s recommended guidelines. Even as you’re helping customers, your content is going to look better than ever to the search engines.

What is a Page Hierarchy?

A page hierarchy is simply a way to organize your CMS pages by topic, and it includes pagination, a side navigation panel for quick access to individual pages, and built in metadata tools to help the search engines index your content. A Page Hierarchy is a great way to publish big sets of related content, like buying guides, FAQs, product data sheets, and so forth.  For example, here is a Magento Go store that uses a set of hierarchical pages to create an event calendar. The same merchant uses another set of hierarchical CMS pages for its video how-to library.

Page Hierarchies aren’t replacements for blogs any more than blogs are replacements for page hierarchies. Instead, they serve separate and equally important functions and the two should both be considered integral pieces of your content marketing strategy.

Magento Go Page Hierarchies are divided up by “nodes”, or folders of related content. A node is simply the organizational folder you create in the back end of your store – it is not accessible to anyone on the front end of your site.

How does a node work? Nodes and hierarchies of content are like bullet point lists. On both the front end and the back end, your nodes will look like this:

• Outdoor Survival Gear 101
  • Outerwear
    • Types of Hats
    • Guide to Boots
    • Guide to Parkas and Other Cold Weather Apparel
    • Gloves and Accessories
  • Camping Gear Basics
    • Shelter (Tents and Huts)
    • Guide to Cookware and Portable Power
    • Field Electronics

As you can see, we have an unordered list of content that is related by topic. Our topmost node is “Outdoor Survival Gear 101” and we have two more nodes below it. Each of these nodes contains their respective pages.

Remember that on the front end, customers will see the name of the node, but the node itself cannot be accessed, because it has no content. Instead, when shoppers click on a node name on the website, they will be directed to that node’s first page. You can add individual pages to a node, or you can add a combination of individual pages and other nodes to a node, as demonstrated above.

Hierarchies of Pages are great for SEO purposes. First, if you’ve got enough content to warrant putting together an organized grouping of pages, you’re already ahead of most of your peers. Second, ordering related pages together and properly interlinking them follows an established “best practice SEO” guideline.

It’s well established that relevant content helps rank other related content, as opposed to unrelated content, so by structuring this related content together, you’re reducing Google’s workload in sorting it and are therefore making it easier to find.

Finally, Magento Go’s Page Hierarchies feature proper “rel=canonical” implementation, which many competing eCommerce platforms lack. If you configure the Page Hierarchies to specify the “Section” in the meta data, then a new canonical link will also appear, which tells the search engines which page is the first one in that node.

How To Set Up Your Own Hierarchy of Pages

Setting up your own page hierarchy is extremely quick and easy inside Magento Go. For step-by-step instructions, follow our excellent knowledge base article here.

To re-cap the best practices:

1. 1. Create the pages you want to add to the hierarchy. You create pages under CMS > Pages > Manage Content. Pages should be created to address a specific customer need or answer common questions. For instance, if you had an outdoor store like the one mentioned in the example above, you would want to determine which categories of your store customers seemed to need the most help with, such as brands and types of outdoor gear.
2. 2. Once you’ve created the content, it’s time to organize it in the page hierarchy. Go to CMS > Pages > Manage Hierarchy. Click on the “Add Node” button and fill in the fields with the requested info, such as your node’s name & URL key, which meta data you want to use, and then below that, selecting the pages that belong to that node/hierarchy. Most often, you’ll set the “Chapter/Section” to “Section”, enable pagination, and enable side navigation
3. 3. Include a link to your hierarchy/node on other sections of your site. You could use a static block to create an image link on your home page that says “Buyers Guide 2013” and link it to the first page of your node, or you could include a link in your footer that reads “Resources”.

And that’s it! As you can see, hierarchies of pages are another very powerful Magento Go tool. They benefit customers by providing relevant information in an easy-to-follow, understandable format; they help the search engine bots index your data quickly and more efficiently that other pages, and their design is built from the ground up to positively impact your site’s SEO performance.

Using Magento Go's built-in tools to customize your site for a more branded look!

Magento Go features some wonderful flexibility, giving you the power to adapt your store as you see fit, in a way that makes customization far easier than the competitors. Whether you're about to open a store, or already have an established store up and running, if you're looking to delve a little deeper into the customization options available to you, you're in luck — today we're going to examine how to change the on-page elements using Magento Go's built-in Layout Editors.

It's a well-known fact that those stores that feature a unique design that speak to their niche will do better in the market than stores utilizing a generic template. One recent study from a Magento merchant showed an improvement of 48% in conversion rate and a 32% increase in average order value. This is a very good return on investment that required no additional marketing expense! In addition to the immediate sales lift, their design overhaul yielded a 10.7 reduction in their bounce rate, and an average time on site improvement of 29%, which are both important factors in search engine optimization.

If you're like many Magento Go merchants, you've probably got your own designs in mind for the "perfect store" to sell your products on. Chances are, in your perfect design, there are some specific phrases or language that pepper your pages; little things that show your audience you're tuned into what they're looking for. Many fashion retailers, for instance, opt to change the default "Add to Cart" title to "Place in Bag", to mimic the actual experience of shopping in-store. When is the last time you saw a shopping cart at your favorite fashion outlet, anyway?

Did you know that you can also change the "New Products" widget title as well? If you've ever set up your best-selling products on the home page using the New Products widget, you've probably wondered how to change the title to better reflect your featured products. Wonder no more, we'll cover both of these customizations below.

How to Change Magento Go's "Add to Cart" button

Customizations of a deeper level like these are just one more way that Magento Go caters to merchants of all types. One of the most common changes is changing the "Shopping Cart" text to read "Shopping Bag" or "Basket". You can do this in three easy steps in Magento Go.

1. 1. Log into the backend of your store, and under the Design tab in the top navigation, select "Theme Text Editor" from the drop down menu. Below that, the store will display "Theme Text Editor" and an orange and white "Launch" button. Make sure that your browser is not set to disable pop-ups, and then click the button. A new tab or window will open with your store's frontend displayed.


2. 2. On the front end, navigate to the page you'd like to change the text on.
   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.
       
   

   Click the green checkmark when you're done to save your work (you may need to save and reload the page).
   



3. 3. To change your "Add to Cart" button, move your mouse over the "Add to Cart" button and the same little book icon will pop up. Complete the same actions as step two above, and click the green checkmark to save your work. Be sure to click "save" in the top toolbar to save all of the text changes you've made.
   
   

   




How to Change the New Products Widget Text

Now that we've changed the text of our "Add to Cart" buttons to something a little more boutique, let's look at changing our "New Products" widget title as well. Magento Go's New Products widget has two display options − it can either display products that have been recently added to the store, or featured products that you mark as "new". Whichever display method you choose, however, it still displays "New Products" in the widget's title.

You can dress that up with something a bit more descriptive, like "Latest Arrivals" or "Staff Favorites" using Magento GO's Layout Text Editor as described above, using the same basic steps:

1. 1) With the editor open, hover over the New Products title block.
   
2. 2) Click the little open book and change the text.
       
3. 3) Remember to save your changes.
   



What to do when text editor can't make the change

There are certain themes or certain fields that can't be changed directly with the Layout Text Editor. In many cases, you can make these changes with a tiny bit of Javascript.

For example, to make the change to 'Featured Products' copy the Javascript code below (removing the outer brackets) and paste it into your favorite text editor (on PC, the default text editor is Notepad). Where the script says "('<h2>Featured Products</h2>')" replace Featured Products with the title text of your choice. Then, save the file as "replace_text.js" (removing the quotation marks).

Upload this file to your Magento Go store under Design > Themes Editor > Java Script Editor.

If you are familiar with CSS but not Javascript, you can use the code to change other elements. Simply isolate its CSS path and html code and making the appropriate substitutions in the script.

Congratulations, your New Products widget will now show whatever title you gave it.

As you can see, Magento Go provides a lot of customizability to the store owner who wants complete control over the design of their store. By utilizing these simple design editing tips, you can bring your best designs to life! Remember to please post any questions in the comments below.

JavaScript code to change the New Products widget title:

[ window.onload = function() {
$$('.widget-new-products .widget-title h2').first().replace('<h2>Featured Products</h2>');
}; ]





---