Blog

Quick and Easy Design Edits in Magento Go – Part 2

image

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.

image

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

image

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.

image

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.

Meet the Latest Go-Pro Partner, OpenXcell

image

This week we are introducing new design partner, OpenXcell. Here is a quick introduction to the latest from Magento Go:

image  

OpenXcell Technolabs is a leading eCommerce development company based in India, Australia and the United States. With our core competencies in Magento eCommerce development, mobile app development and CRM solutions, we aim to provide the best eCommerce and mCommerce solutions which can help you get the most from your online business. Visit the Go-Pros page now to learn more.

photo

Alyssa joined Magento in 2011 as an Online Marketing Manager. She became passionate about Magento when researching new platform solutions at her previous job. When Alyssa is not working, she enjoys playing tennis, dancing and enjoying the Southern California sunshine with family and friends.

  • linkedin

Say Hello to HelloSonar Go

image

As part of our continued efforts to bring you the very best in design and functionality, we are proud to present new themes for you to use with your Magento Go stores as they become available. Here is an introduction to the newest theme from Go Pro partner, Hello Themes:


image  

Perfect for any type of store, HelloSonar Go is distinguished by its elegance and simplicity. This versatile theme focuses on your products and allows customers to share your items with friends via social networks. To get this theme, click here.

 

photo

Alyssa joined Magento in 2011 as an Online Marketing Manager. She became passionate about Magento when researching new platform solutions at her previous job. When Alyssa is not working, she enjoys playing tennis, dancing and enjoying the Southern California sunshine with family and friends.

  • linkedin

New Video Tutorial: Create a Banner Rotator

If you are new to Magento Go or are considering Go for your online store, we have helpful video tutorials to get you started off right. Magento Go is a powerful tool with great flexibility; get the most out of your store with these quick and easy to follow tutorials.

You have great products, now you just need to focus on marketing them correctly. Doing promotions with discounts is one way to catch the attention of your customers. A less expensive alternative is to keep the content on your site fresh and updated. To do this effectively, you can use a banner rotator which will allow you to show a different banner every time you refresh the page. To learn how to set this up, watch this video tutorial.

For more tips, check out our entire list of video tutorials at go.magento.com/video-tutorials.

photo

Alyssa joined Magento in 2011 as an Online Marketing Manager. She became passionate about Magento when researching new platform solutions at her previous job. When Alyssa is not working, she enjoys playing tennis, dancing and enjoying the Southern California sunshine with family and friends.

  • linkedin

What You Should Know About Catalog Images

image

Good looking product catalogs are the result of high definition photos that have consistency in resolution and size. In order to maintain this consistency we’ve developed three knowledge base articles. Maintaining image aspect ratio explains how the default container size that holds any image is square. This helps to preserve the correct proportion or ratio when an image is later resized.  The article, catalog image examples demonstrates how rectangular products will often have margins. It is up to you whether you want to keep this unused space white or transparent. Finally, in resizing catalog images we introduce the catalog images tool which allows you to override the default size and proportion of any image in your catalog. Enjoy the articles!

photo

Alyssa joined Magento in 2011 as an Online Marketing Manager. She became passionate about Magento when researching new platform solutions at her previous job. When Alyssa is not working, she enjoys playing tennis, dancing and enjoying the Southern California sunshine with family and friends.

  • linkedin
Page 1 of 9