In our last article about the Magento Go API (Application Programming Interface) we explained what it is and talked about its power and its versatility. Many Magento Go merchants are finding that the API is an ideal way to integrate additional services that help them manage their business and build sales volumes.

You don’t actually need to be a developer or hire one to take advantage of the power of the API because more and more suppliers of online services are writing connectors to the Magento Go API.

Plugging In

When you sign up for a service that uses the Magento Go API, you will go through a process that is similar to how you set up users. The Service Provider will ask you to create a Web Services account for them. From your store administration, hover over System > Web Services > Users. You’ll then create a user account for the service providers and a role. When creating a role, it will default to access to all information in your store, but, you can restrict this if needed. Make sure to add the user to the role you create.

You’ll then give the Service Provider the user name and API key attached to the account you just set up. In some cases the Service Provider will specify the user name and API key to use in setting up the account. The important thing is that they match in both systems.

Once the connection is established, you usually don’t have to reset it. However, if something happens that breaks it, you can reset the API key as often as needed.

Examples of APIs

Shipping

Several providers of shipping services offer their services to Magento Go merchants. One of the biggest advantages of these types of services is that you can print actual ˜paid” labels by linking them to a postage account like Endicia or your account at FedEx, UPS or DHL. They also provide advanced tools for managing your pick-and-ship process. For example, you can print pick lists that identify the location of a product in your warehouse, or you can group orders by product or shipping company (USPS, Fedex, etc.). They also update tracking information automatically in Magento Go after a product has shipped.

One thing to note is that while some Service Providers offer real time shipping quotes or shipping options for orders on Magento Community or Magento Enterprise, it is not possible for them to provide real-time shipping quotes or shipping options for your Magento Go web store. You will need to do this by adding your shipping carrier accounts to your Magento Go configuration.

Some commonly used shipping services include:

ShipRush
This software installs on your computer and is great for small merchants who keep all of the inventory in one place.

ShipStation
This is a cloud service meaning you access it from your browser. Because it is in the cloud, you can have employees from various locations in your company (or not in your company) use it no matter where they are located geographically.

Shipwire
Shipwire actually provides an extension for Magento Go. Shipwire is also cloud-based; it offers you the option to ship your products to their warehouses where they handle fulfillment for you. Global shippers can keep multiple inventories at warehouses located around the world to optimize shipping costs.

ShipWorks
ShipWorks is a desktop product (not cloud) and is extremely popular with small merchants. It is important to note that they also provide an extension for Magento Go, but, you can also connect via the API.

Accounting

Magento Go is not designed to be an accounting system, so, most merchants use Quickbooks™ or a similar service. Accountants who require information not provided through the Magento Go export function can benefit from connecting their accounting software to the Magento Go API.

FreshBooks
FreshBooks, a popular small business cloud accounting system offers a connection to Magento Go via the API.

T-Hub
This service connects your Quickbooks software to Magento Go. It has the added advantage of connecting your shipping accounts to Magento Go, though, unlike the other solutions, it does not offer a single control panel for shipping.

Other Services

Go Data Feed
This service provider helps you manage product feeds to marketplaces and online comparison shopping engines.

Affiliate Go
This service provider allows you to tap into online affiliate programs and to offer and track sales commissions to bloggers or other content providers when they drive buyers to your web store.

Magento Go Pros

There are many services that use the API. You can often find them with a quick Google search. If you want to use a service that has its own API, but, doesn’t have a pre-packaged connector to Magento Go’s API, you may want to contact a Go Pro to set up a middleware solution. Often the connections are not expensive to set up and a Go Pro may have one already built for another client that they can offer to you at a reasonable price.

Be Smart

Use caution when selecting services, remember that the connection to your store allows the service provider to access information about your orders, customers and products. Be sure to check out their reputation and carefully review their privacy policy before giving them access to your store data via the API.

If you have a particular aspect of your business that you want to improve from shipping to payments to affiliate sales, there is probably a good solution available to you. Modern software like Magento Go is made to be open and to share information across the internet. Using these services with the Magento Go API can really help you take your business to the next level.

In our next post we’ll discuss working with a developer to connect your Magento Go store to other services or software that aren’t currently connected and using the API to create custom applications for your business.

Magento Go is so robust that it offers merchants more features and capabilities than most can effectively use. If you don’t believe it, watch the recording of our recent webinar about features that merchants should be using more often.

In the age of Big Data, many marketing, customer satisfaction and management tools need the ability to access and update your store’s customer, product and order data. This is why Magento Go offers an open Application Programming Interface (API - also referred to as ‘Web Services’). The API is like a private door to your Magento Go store’s data and enables you to use those tools, opening the door to many new possibilities.

Different Ways to Integrate Services with Your Web Store

JavaScript
JavaScript allows you to send bits of information from a web page to another application on the web.  You may already be using JavaScript and not know it.  An example is Google Analytics, which uses JavaScript to record visits. If you have ever copied and pasted the script from Google Analytics to enable tracking of a web site, then you are familiar with the Javascript integration approach.

If you have added forms to your site to subscribe customers to Mail Chimp or enable Olark for chat, you are familiar with this type of integration. However, this type of ‘integration’ is limited in nature because it can only see and communicate information that already exists either in the user’s browser (like cookie or form information), or, on the page itself. Think of it as information sitting on the surface of a web page and sending messages from there, but that cannot look beyond the page it is on.

Extensions are what we would call ‘deep integration’ because they actually change the way the Magento Go software operates, by adding capabilities to your Store Administration in some cases. Currently there are just over a dozen extensions available for Magento Go in Magento Connect and some are free.  A great example is M2E Pro, which allows you to push your store listings out to the eBay marketplace.

Between JavaScript and extensions sits the API. The API allows other programs and services on the internet to request information about your products, customers and orders from your Magento Go store. If you authorize them, your Magento Go store will respond with the appropriate information. These services can bring great efficiencies to your business by automating some of your functions, like shipping a product, and update information, like adding a tracking number, to an order in your store.

Magento Go’s API is based on the core Magento API and offers some outstanding features that most competitors simply cannot match.

1. • Open. Magento publishes documentation for free on the web about how to request and send data to Magento stores. It also uses accepted standards for communicating data over the internet that software developers are already familiar with. Developers who create new and exciting services for merchants use this information to create a communication channel between Magento Go stores and their applications. Many other eCommerce platforms use ‘closed’ APIs and require a lengthy qualification process before a developer is even allowed to request information from stores on their platforms. The closed approach stifles innovation.
2. • Secure. In order to connect an external service to your store, you have to create a Web Services account for it in your Magento Go Store Administration panel. You have complete control over the type of information you want to share and you can revoke sharing privileges at any time.
3. • Stable. While this seems obvious, it is surprising how many APIs in software-as-a-service platforms fail frequently. Magento Go’s has proven to be extremely reliable from the start.

A number of services already plug into Magento Go’s API and are easy to integrate because of it, including:

1. • Shipping solutions like ShipStation, ShipRush, ShipWire and other services actually allow you to print postage or delivery labels from couriers.
2. • T-hub, an accounting service that shares information between Magento Go and Quickbooks.
3. • GoDataFeed, a shopping comparison site feed manager.

This just scratches the surface. We will talk about these services and others in more detail over the next few posts, but we hope you can begin to see new possibilities you may not have considered.

In addition to existing services, you may have customized needs for reporting, order management, accounting, or other functions. Many of the Magento Go Pros can build cost-efficient solutions for you to streamline your operations or bring your marketing ideas to life by utilizing the power of the API.

And, once you discover the power of the Magento Go API, you may just find it addicting!

Summary

In this month’s webinar, Paul Byrne, President of Razoyo, shared some powerful features available to merchants on Magento Go.  He discussed benefits of the top 10 underused features that can help merchants increase their store’s profitability and showed some examples for each. Following are some of the features that are covered in the webinar. 

• Customizing buttons, page links and other on-page text with the layout text editor
• Using the CSS editor for quick touch-ups
• Using CMS page hierarchies to add navigable content



Purpose of This Webinar

To help merchants extract the most benefits from their core Magento Go features that drive business and improve customer satisfaction.

• Recording of Presentation – Watch the presentation now.
• Presentation Slides – Here is a copy of the PowerPoint presentation.


Razoyo is a Magento Go Pros partner. They help merchants set up their stores, manage their stores and solve business problems.  Razoyo accomplishes this through services performed, training, and consultation. Their services are designed and priced to meet the needs of Magento Go merchants and require neither contracts nor minimum commitments.

How To Use Google’s Free Web Fonts On Your Site

The right typography can really bring a design together. Google provides a repository of free fonts for use across the web. Why should you consider changing the stock fonts of your Magento Go theme? Using a bold, sans-serif font with smooth lines and curves is a very effective way to convey a high-tech design on a technology retail site like Apple’s. A font with a flowing formal, natural handwritten look is a great match for sites that retail makeup products, dolls, and girls’ toys, because it is something we identify with these items from other brands we encounter.  Would you like to use one of Google’s free fonts on your website?

Select the fonts you’d like to use by clicking on “Add to Collection”. At the bottom of your screen, you’ll see a bar that tallies the number of fonts you’ve selected; on the right side, click the “Use” tab. This takes you to the review page, which contains 4 steps necessary to install the fonts on your site. Skip to step three, “Add This Code To Your Website”, where you’ll see three tabs –copy the code there and paste it in your Magento Go store under System > Configuration > Design > HTML Head > Miscellaneous Scripts.

Using the developer tools from above, find the text you want to change, add a new line of code and type in “font-family:” (without the quotes) and hit the tab key; then, refer to step four of the Google Fonts page and copy the font name (with the single quotes) that comes after that and drop it into the box that pops up. Your code should look similar to the highlighted section in the image.

If you’ve made your changes correctly, your text (the Product Title in our example) should look like our sample image. Copy the code into your Magento theme according to the steps we laid out in our “Custom Background” section above, remembering to add a title to your new changes via CSS comments.

Rounding Your Corners with CSS for a Clean, Contemporary Look

If you’re looking for that last bit of extra “flair” to make your site stand out, nothing produces a touch of modern style quite as easily as adding a bit of rounding to your image or button

corners.  There is perhaps nothing quite so readily associated with modern web design as rounded gradient buttons. Rounded buttons are used extensively online, from PayPal’s iconic rounded yellow “Buy Now” button, to Apple’s smooth glossy rounded buttons.

Rounded buttons became popular as monitor resolutions and connection speeds increased, allowing higher fidelity graphics to become the standard of “Web 2.0” design. Rounded corner designs have become such a prominent design trend that the language has even translated over to real world products. Apple’s iconic mobile product lines have been using rounded corners since 2001, with the launch of the iPod, which stood in stark contrast to the bleak, hard-edged slabs that represented the MP3 player market at the time. This design language reached its peak with the introduction of the iPhone, which had no rivals in design at its launch, and the trend has spread since.

So, how can you add some Apple suave to your website? This process is very simple –using our developer console training, locate the button or image you want to add some rounding to. Mousing over the HTML codes in the left panel will highlight that element on the web page. Once you’re sure you’re on the right element, in the right panel of the developer tools, add the following code: “border-radius” and hit the “tab” key. In the new box, add “10px”, and you’ll see the corners of your buttons or images round.  Your code should look like the example.  If you’ve applied these CSS changes correctly, your elements should look like the example image below.

Make sure that you copy the code and add it into the theme in the design backend under Design > Themes Editor > CSS Editor. Remember to label your changes with CSS comments as we discussed in the opening of this article. Once you save your work, your changes will be live on your site. Congratulations!

We’ve covered a lot of ground in this post, and our hope is that you can put these tips to use improving your store, increasing your sales with a custom design that speaks to your audience. For more information on rounded corners, check out these excellent guides from Smashing Magazine and CSS Tricks. Stay tuned for more tips to improve your store through design and sales best practices.

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.