Magento Documentation

Introduction What can be found in this package and what it can be used for

Thank you for purchasing a Magento template. This documentation consists of several parts and shows the entire process of how to set up and administer a Magento store from scratch. We did our best to make this manual as clear and easy to follow as possible.

What is Magento Commerce?

Magento is a feature-rich eCommerce platform built with open-source technology. It provides flexibility and control over the look, content and functionality of the eCommerce store. Magento’s intuitive administration interface features powerful marketing, search engine optimization and catalog-management tools to give merchants the power to create sites that are tailored to their unique business needs. Designed to be completely scalable and backed by Varien's support network, Magento offers companies the ultimate eCommerce solution. More information

What is a Magento theme?

Magento theme is a complete design for your online store based on Magento engine. In other words, you can easily change your Magento shop appearance by installing a new theme in a few easy steps. With all of its simplicity a Magento theme is provided with all the necessary source files that you can edit or extend the way you need.

Files structure

The theme package you have downloaded consists of several folders. Let's see what each folder contains:

  • Documentation - contains documentation files.
    • documentation.html - a main documentation file you are reading at the moment.
  • screenshots - contains the theme screenshots. Not for production.
  • sources - contains the theme source files.
    • psd - contains the theme Adobe Photoshop source files (.psd).
    • demo - contains additional pages and custom blocks provided with the theme.
    • sample_data - contains Magento theme sample data files.
      • media - contains files and directories that should be uploaded to the root directory of your Magento installation.
      • dump.sql.gz - the database backup file. Contains the theme sample content.
  • theme### - contains Magento theme files and directories that should be uploaded to the root directory of your Magento installation.
  • fonts_info.txt - contains the links where the template custom fonts can be downloaded.
  • info.txt - contains instructions on how to extract source files.

Validation

Both HTML markup and CSS styles used in our templates are semantically correct and valid. However some W3C errors still can take place. Making code 100% W3C valid eliminates the usage of modern website technologies as CSS3 features and HTML5 markup. Our goal is to deliver rich user experience with high quality templates and sometimes we have to break some rules.

 

Complete installation

You can use this method if you do not have a Magento store and want to install it from scratch. You'll have Magento Commerce engine, Magento theme, sample data and all the required extensions installed.

 

Theme installation

You can use this method if you do have a Magento store and want to change its appearance by installing a new theme. You'll have a Magento theme and all the required extensions installed.

 

 

Preparations

Before you proceed to set up your Magento store, please make sure you are fully prepared. Please complete the following preparation steps:

Editing software

To feel comfortable working with Magento template, we recommend downloading all the applications required. You can see the list of required software on the template preview page.
The requirements may vary for different templates, for most templates they are the following:

  1. First, you need to use WinZip 9+ (Windows) and Stuffit Expander 10+ (Mac) to extract the password protected sources_#########.zip archive.
  2. You may also need the Adobe Photoshop application. It is used to edit .PSD source files, and it is necessary if you want to edit template design graphics and images.
  3. To edit template source code files, you need some code editor like Adobe Dreamweaver, Notepad++, Sublime Text, etc.
  4. To upload files to the hosting server you may need an FTP Manager like Total Commander, FileZilla, CuteFTP, etc.

Hosting

As Magento Commerce is a PHP/MySQL based application, you need to prepare a hosting environment to run Magento.

If you have live hosting, please make sure it matches Magento requirements and is ready to be used for Magento store.

Otherwise, you can run Magento locally on your computer using the local server. To create a local hosting server please use the localhost applications such as WAMP, AppServ, MAMP etc. Any of those can be easily installed as any other program and used to run Magento.

Please check the following tutorials on how to configure the local development environment:

Complete installation

The complete installation method can be used if you want to set up a Magento store using a sample content. We assume that you have completed all the preparation steps.

The installation process consists of 3 stages:

  1. Creating a database.
  2. Uploading all the required files to the server.
  3. Installing a Magento Commerce engine together with the template you have purchased.

Let's get started!

1. Creating a database

First, you need to prepare a new database for your Magento store. You can create the new database using the database management tool from your hosting control panel (usually PhpMyAdmin).

The following data will be received while creating a database: database name, database username, password and you server name. You need to save this data as you will need it for further Magento installation.

With the phpMyAdmin tool you will be able to create a new database in 3 simple steps(check the slides below):

  1. Click the Database button from the top navigation menu to access the database listing.
  2. Input the database name into the "Create new database" field.
  3. Click the Create button on the right side.

Your database can be seen in the database listing now. Click on its name to get access to the database:

 

  • 1. Open the "Database" tab, you will see the list of databases.

  • 2. Input your database name

    3. Click "Create" button

  • 4. Your database has appeared in the list. In order to enter the database, click on its name in the list.

 

You can also check the detailed video tutorial on How to create a database

If you have any issues with creating a database, please contact your hosting provider for help and assistance.

2. Sample data import

Magento template package contains the sample data file (dump.sql or dump.gz). This file is located under the /sources/sample_data folder of your template. It allows you to load sample data, so that your website looks exactly like our demo template.

Do not import dump.sql.gz if you already have the data on your site. By importing dump.sql.gz all the products will be erased from your store. If you do not want to install sample data, use clean database while installing Magento. Skip the sample data installation step.

In order to install the dump file, follow the steps below:

  1. Log into PhpMyAdmin and the select the database that you will use for Magento Commerce (It was created by you with the help of the steps provided earlier).
  2. Navigate to "Import" tab and click "Browse" button.
  3. Find the "/sources/sample_data" folder of your template and select the dump.sql.gz.file.
  4. Click. "GO". The import process can take a few minutes.

 

  • 1. Select the database that you will use for Magento Commerce.

    2. Select "IMPORT".

    3. Click "Browse" button.

  • 4. Navigate to the "/sources/sample_data" folder of your template package and select dump.sql.gz file.

  • 5. Click "GO".

 

3. Downloading the engine from the official website

In order to install Magento, you need to download the archive file from the official website www.magentocommerce.com/download.

Select the archive type from the drop-down menu and click Download. It is necessary to register the account on Magento website in order to download the engine.

Make sure to download the compatible with our template version of Magento engine. You can find all available Magento versions at the same page, in the Release Archives tab.

4. Extracting files

When you are done with the download, you'll need to extract the files from the Magento engine package.

This can be done with any archive manager like WinZip(PC), StuffitExpander(MAC), etc.

Please check the following tutorials on how to extract files from the archives with WinZip(PC) and StuffitExpander(MAC).

Please note: if your hosting control panel has the option to 'Extract' files, you can use it and extract the files directly on your server after the upload. It will speed up the process of files uploading.

6. Uploading theme files

The next step of the setup procedure is the template installation. The template should be installed in any case, whether you use sample data or not.

  1. First of all, open the template package and go to the theme###folder.
  2. Upload theme### folder contents to the Magento installation directory (upload "app", "skin" and other folders). These folders contain the theme files. They will not affect your existing files.
  3. If you have imported the dump.sql.gz file and are going to use the template sample data, you need to upload the product images. Upload the "media" folder from the template sources/sample_data directory to the Magento installation root directory.
  4. If you didn't install the dump.sql.gz file, there is no need to upload the "media" folder.

7. Magento engine installation

When you are done with uploading files, you can start with Magento engine installation. Open your browser and in the address bar type your 'domain name/path to your Magento directory'. You should see the welcome screen. Please follow the instructions below to install Magento.

Please note: the dump.sql.gz file should be imported into the clear database BEFORE you install Magento.
Step 1: Installation Assistant

Please read the license agreement and click the "I agree to the above terms and conditions" checkbox if you agree with the terms.

Step 2: Installation Assistant (Localization)

Select the Locale, Time Zone and default currency. The Locale option defines your Magento store backend language. If you want to change the frontend language, you need to download and install Magento frontend locales. All the options can be easily changed later using the Magento admin panel.

Step 3: Configuration

Here you need to input the store database details and some initial settings. Database Connection – input the database host name, user name, password and name. Contact your hosting provider if you don't have the necessary details.

Make sure you have a database created for the Magento installation. And also make sure it is clear, without any tables. Web access options and Session Storage Options – please leave the options without any changes if you are not sure. The default settings usually work fine.

If everything is correct, please click 'Continue' button.

Step 4: Create Admin Account

Here you need to input personal details for the store owner and administrator.

When you are done, click 'Continue' button.

Step 5: You are All Set

This is the final step of installation. Copy the generated encryption key and keep it safe. You can use the buttons in the bottom right corner to view the store front end and the admin panel.

Magento template installation

First of all, please make sure your Magento installation version meets the template requirements. If you are using an outdated version of Magento, you need to upgrade it. Don't forget to back up the files and the database. Magento upgrade instructions are available at the Magento Wiki website.

If your Magento engine meets the template requirements, you can start the template installation.

  1. Open the template package and go to the theme### folder.
  2. Upload theme### folder contents to the Magento installation directory (upload "app", "skin" and other folders). These folders contain the theme files. They will not affect your existing files.

1. Template configuration

We are going to review template configuration options based on the example. It is configured the same way as our Live Demo template, without affecting products data.

Activate the new template
  1. Open Magento admin panel and navigate to System > Design in the top menu.
  2. Click the "Add Design Change" button.
  3. In the "Custom Design" field, select the theme name (for example, theme###).
  4. Click "Save" button to confirm the changes.

 

Reindex data
  1. Open the Magento admin panel and in the top menu select System > Index Management.
  2. Check the "Select All" box in the top left corner.
  3. In the "Actions" field select "Reindex Data".
  4. Click "Submit" button.
  5. Please be patient, this may take a while.

 

Disable cache

In order to make the changes appear on your website with no delay, you need to disable cache. It prevents additional cache clearing actions after every change you make. You can enable it when you are done with store editing.

  1. Open Magento admin panel and navigate to System > Cache Management in the top menu.
  2. In the top left corner click "Select All".
  3. On the right side, in the "Actions" field select "Disable".
  4. Click "Submit" button.

 

2. Logo configuration.

Please follow these steps when setting up logo image included into the theme package (you can view it on the Live Demo page).

  1. Open the Magento admin panel and select System > Configuration in the top menu .
  2. Select the "Design" tab.
  3. In the "Header" section, edit the "Logo Image Src" field value. Change it from "gif" to "png".
  4. Click "Save Config" button.

In order to install your company logo, you need to upload the logo image file into the /images folder of your Magento theme.

 

3. Pages configuration

In order to make your template look exactly like our Live Demo, you need to set up store pages in a specific way. We provide all the files with the pages source code. You need to add them into Magento admin panel as per the instructions below using the settings table. Settings table is located on the Technical details page on the template preview page. The documentation file contains the link to this page:

  • Documentation
    • documentation.html

The main template page will be affected the most. It usually contains the following elements: banners, slider, gallery, etc.

We recommend that you disable the WYSIWYG editor. To do this, from the admin top menu select System > Configuration. Open the "Content Management" section and in the WYSIWYG Options window set "Enable WYSIWYG Editor" option to "Disabled Completely".
In case you have already made the changes to your pages code and would like to add our code without affecting your changes, it is recommended to contact professional technicians or prepare a backup before making changes.
  1. From the top menu select CMS > Pages. Here you can find all the store pages. Home page, About Us and Customer Service should already be available, so you don't need to add them. You only need to update the pages HTML and XML content. Open any of them in order to get the access to the content.
  2. Open the page and select the Content tab. It contains the HTML code of the page. You can take the page HTML code from the appropriate source file. You can see the list of source files included in the "Template Settings" section on your templates preview page. Copy the code from the source file and paste it to the content area.
  3. When you are done with the HTML code, switch to "Design" tab. It contains the page XML code. XML code allows you to add Magento static blocks and widgets to the page. The XML code should be copied the same way as the HTML from the source file. Copy the XML code to the "Layout Update XML" area.
  4. Don't forget to select the valid "Layout" option.
  5. In case you need to add a new page, click the "Add New Page" button in the top right corner.

 

In case you have any difficulties, please check the detailed tutorial on How to configure pages manually.

4. Static blocks configuration

When you are done configuring the pages, you need to configure the static blocks. The procedure is similar: you need to copy the code from the source files and paste it to the corresponding fields in the Magento admin panel. You need to use a similar table but for the static blocks.

  1. From the top menu select CMS > Static Blocks.
  2. Click the "Add New block" button in the right corner to add a new block.
  3. Input the block name and identifier. You can get the block details from the table at the templates Live Demo page (check the Pages Configuration part).
  4. Open the block source file and copy the HTML code into the content area.

 

Please note: some of the templates do not contain any static blocks, so the table can be empty.
The source files with the static blocks code are stored in the "sources\demo\static_blocks\" directory of the template package.

When you are done configuring store pages and blocks, your store is ready to go.

Standard Extensions Settings

1. Currency module

  1. Open the Magento admin panel.
  2. From the top menu select System > Configuration.
  3. Then click General and select the Currency Setup tab.
  4. In the Currency Options, holding the CTRL key select the allowed currencies that can be used to display prices in your Magento store. When you are done, click the Save Config button to save your changes.
  5. Navigate to System > Manage Currency Rates in the top menu.
  6. Set the required currency rate values or use the Import Service. Click the Save Currency Rates button to save your changes.

2. Polls module

From the top menu select CMS > Polls.

TM Extensions Settings

1. Google Map

The given module allows you to embed the Google map to your Magento website. By default, module provides you with two maps: the map on contact page and the map in the footer of other pages.

Both maps can be configured via Magento Admin Panel in System > Configuration > Templatemonster > Google Map section.

  • Embed Map Settings block stands for the display of the map in the footer of all pages except the contact page.
    Contacts Map Settings block stands for the display of the map directly on the contact page.

  • Both sections have the same options for configuring the appearance of the map.

The module has the following options:

API key - Google Api Key is necessary for the correct work of the map. You can receive and activate it by following the link.
Coordinates - location data which will be shown in the centre of the displayed map. You can get this location data using Google Maps website or using this one.
Sensor - switching geolocation on and off.
Zoom - enlargement value (should not exceed 8).
Map Type - type of the displayed map (roadmap, satellite, hybrid, etc.).
Map width - width of the map.
Map height - height of the map.
Styles - display style of the map. In order to change the appearance of the map, use the styles provided on the website snazzymaps.
Disable UI - hides the elements which control the map.
Scrollwheel - disables the mouse scroll option.
Draggable - enables you to move the map using the left button of your mouse or using fingers for touch (sensor) devices.
Add marker - allows you to add the marker to the map.
Marker coordinates - sets the marker coordinates.
Marker title - text which will be displayed in the tool-tip while hovering over it.
Marker image - path to the marker image, if you want to replace the default one. The image is saved in the folder skin/frontend/default/themeXXX/images/ of your Magento installation.
Infowindow - additional information which will be displayed if you click the marker.

2. Facebook like box

The given module allows to display Facebook like box on your Magento store.

You can configure it via Magento Admin Panel in System > Configuration > Templatemonster > Facebook section.

The module has the following options:

App ID - the identifier of your Facebook account. In order to use Facebook Like box, you need to register your account. You can follow the link for further instructions.
Page URL - the URL of the Facebook Page.
Show Faces - allows you to hide or display the photo of the user who liked the page.
Hide cover - allows you to hide or display cover photo in the header.
Show Posts - allows you to enable/disable the recent posts on the page.
Height - the height of the module area.
Width - the width of the module area.

By default, the module is displayed in the left column. But there are three display options: left, right and footer.
In order to change the position of the block, you need to open tm_facebook.xml file located in app/design/frontend/default/themeXXX/layout folder of your installation.

This file includes three reference blocks with name="left" (name="right", name="footer") parameters.
<reference name="left">
	<block type="core/template" name="tm_facebook_like_left" as="tm_facebook_like_left" template="tm/facebook/facebook_like.phtml"/>
</reference>
<!-- <reference name="right">
	<block type="core/template" name="tm_facebook_like_right" as="tm_facebook_like_right" template="tm/facebook/facebook_like.phtml"/>
</reference> -->
<!-- <reference name="footer">
	<block type="core/template" name="tm_facebook_like_footer" as="tm_facebook_like_footer" template="tm/facebook/facebook_like.phtml"/>
</reference> -->

Two blocks are commented out in this file. And only one block with name="left" is not commented out. It displays the module in the left column.
If you need to display the module in footer, you need to follow these instructions:

  • 1. Uncomment lines of code for name="footer" block (the last one in the example of the code above) and comment out the block name="left" (the first one in the example of the code above).
  • 2. Open the file footer.phtmllocated in the app/design/frontend/default/themeXXX/template/page/html folder.
  • 3. Paste the following code to the needed place:
    <?php echo $this->getChildHtml('tm_facebook_like_footer') ?>

Now the Facebook block will be displayed in footer.

3. Instagram module

Instagram module allows you to display Instagram gallery on your store.
The given module allows to display two types of galleries: user gallery and tag gallery.

All configuration options are available in admin panel in System > Configuration > Templatemonster > Instagram section.

The module has the following options:

Client ID - Instagram app identifier. In order to receive the identifier, you need to register your app using following link.
Username - Instagram username which gallery you want to display.
Sample tag - tags used to display images.
Product tag - is used to find the similar images, where the beginning of the tag consists of the chosen parameters set. E. g.: #storetitleproductname, #productsku, #storetitleproductsku, etc.

4. Twitter module

Twitter module allows to display tweets feed on your store.

All configuration options are available in admin panel in System > Configuration > Templatemonster > Twitter section.

The module has the following options:

Widget ID - Twitter widget identifier. The identifier can be received after the registration of your widget account in settings.
Account name - Twitter account username whose feed you want to display.
Color Scheme - widget skin color. It can be light or dark.
Layout enhancements - allows to partially hide elements of widget formatting.
Tweet limit - amount of tweets displayed in the feed.
Link color - allows to change the links color in the feed.
Border color - allows to change the border color in feed.
Height - height of the widget window.
Width - the width of the widget window.

By default, the block is displayed in the left column. But there are three display options: left, right and footer.
In order to change the position of block, you need to open tm_twitter.xml file located in the /app/design/frontend/default/themeXXX/layout folder of your installation.

This file includes three reference blocks with name="left" (name="right", name="footer") parameters.
<reference name="left">
	<block type="core/template" name="tm_twitter_timeline" as="tm_twitter_timeline" template="tm/twitter/twitter_timeline.phtml"/>
</reference>
<!-- <reference name="footer">
	<block type="core/template" name="tm_twitter_timeline" as="tm_twitter_timeline" template="tm/twitter/twitter_timeline.phtml"/>
</reference>
<reference name="right">
	<block type="core/template" name="tm_twitter_timeline" as="tm_twitter_timeline" template="tm/twitter/twitter_timeline.phtml"/>
</reference> -->

Two blocks are commented out in this file. And only one block with name="left" is not commented out. It displays the block in the left column.
If you need to display the module in footer, you need to follow these instructions:

  • 1. Uncomment lines of code for name="footer" block (the last one in the example of the code above) and comment out the name="left" block (the first one in the example of code above).
  • 2. Open footer.phtml file located in the app/design/frontend/default/themeXXX/template/page/html folder.
  • 3. Paste the following code to the needed place:
    <?php echo $this->getChildHtml('tm_twitter_timeline') ?>

Now the Twitter block will be displayed in footer.

5. Newsletter popup

The given module allows to display a pop-up block with the newsletter subscription form.

You can enable/disable the module via Magento Admin Panel in System > Configuration > Templatemonster > NewsletterPopup section.

In order to edit the appearance of the window, you need to edit the style.css file of the theme. If you need to add several user elements to the pop-up block, you need to edit newsletterpopup.phtml file located in the app/design/frontend/default/themeXXX/template/tm/newsletterpopup folder.

6. Special price countdown

The given module allows to display the timer of discount expiration for special products.

You can enable/disable the module via Magento Admin Panel, in System > Configuration > Templatemonster > Special Price Countdown section.

In order to edit the appearance of the timer, you need to edit the flipclock.css (flipclock.less) file located in the skin/frontend/default/themeXXX/css/tm/specialpricecountdown folder.

Third-party Extensions Settings

1. Olark Live Chat

You need to register on official website in order to use on-line chat built in the template, fill in all the required information and receive the code Olark Site-ID.

You can get a free trial 6-month bronze package. In order to get it follow the link, fill in your registration data.
In order to configure the on-line chat, you need to perform following steps:
  • 1. Open Magento admin panel. Navigate to CMS menu item and click it, in drop-down menu navigate to the Widgets item.

  • 2. Once the new page has opened, click the Add new widget instance button.

  • 3. In the drop-down menu Type select the Olark Live Chat, in the menu Design Package/Theme select your store skin, which should display chat. Click the Continue button.

  • 4. Now you need to configure the display of the on-line chat. As a first step, in the field Widget Instance Title type in the name of the widget, which will be displayed in the admin panel. In the field Assign to Store Views you need to select the store view, which will display chat. In the block Layout Updates click the Add Layout Update button. In the field Display On you have to select All pages. For the field Block Reference select the Main Content Area.

  • 5. Follow the link Widget Options in the left sidebar. On the right you will see the field, which you have to fill in with Olark Site-ID. Once your Olark Site-ID was filled in, click the Save button.

  • 6. In the new window navigate to System -> Cache Management menu item.

  • 7. In the block Cache Storage Management check Layouts and Blocks HTML output items. Make sure, that in the field Actions the Refresh item is selected, and click Submit.

All done! Now you can visit your website and see the widget for the on-line chat.

You can also have a look at the following instructions:

2. Cloud Zoom

The Cloud Image Zoom settings allow to change the pop-up picture dimensions and to set the image original size.

3. Add This

The Sharing Tool settings allows you to choose how the icons are displayed. The recommended settings are shown in the picture.

4. Blog

There is an opportunity to add Blog to your website. Blog settings can be found in Blog > Settings, or System > Configuration > AHEADWORKS EXTENSIONS > Blog.
  • The first tab Blog > Settings, includes blog basic settings.

  • The rest of the tabs allow to configure: record type, date display, comments display, captcha and newsfeed enabling.

5. Mega menu

Given module substitutes standard menu for the menu which allows to configure the display of two level subcategories, add static blocks to dropdown menu, add labels, display products, etc.

MegaMenu is included into template by default, you can enable/disable it in System > Configuration > CMSMART MEGAMENU > Mega Menu.

1. Display of each dropdown menu can be configured on the category settings page, which is located in Catalog > Manage Categories.

2. In order to add static block to a dropdown menu, you need to add static block in CMS > Static Blocks and once it was created add it to menu.

3. Module allows to add label for any category.

You can do this in categories menu Catalog > Manage Categories.

4. In order to change amount of columns in subcategories you need to change Level column Count value in menu Catalog > Manage Categories.

6. Parallax

Parallax block can be set by adding the part of code to *.phtml files of your template.

In order to add parallax-effect for certain content block you need:

1. to add any class for parallax-effect block (e.g., parallax) and add attribute data-source-url="{{skin url='images/your_images.jpg'}}".

2. to add image into images folder skin\frontend\default\themeXXX\images\.

3. to add styles into the skin\frontend\default\themeXXX\css\style.css file:

.parallax {
	background-image: url(../images/parallax-img.jpg);
	background-position: 50% 0%;
	background-repeat: no-repeat;
	background-size: cover;
	width: 3500px;
	left: 50%;
	margin-left: -1750px;
}
				

4. Add into skin\frontend\default\themeXXX\js\scripts.js file following code:

jQuery(window).load(function(){
	var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEmobile|Windows Phone|WPDesktop/i.test(navigator.userAgent);
	if(!isMobile) {  
	    if(jQuery(".parallax").length){  jQuery(".parallax").cherryFixedParallax({  invert: true, 
	    		offset: 300 
	    }); 
	  }; 		
	};	
});
				

Variable invert: true chooses the direction of the parallax effect, and offset: 300 its density.

7. Background Video

In order to implement background video you need to use jquery.mb.YTPlayer plug-in, which allows to display YouTube video.

Video can be added by means of the static block, including the script file jquery.mb.YTPlayer.js and by adding corresponding attributes set for the element which will display the video.

Let’s emphasize basic parameters for the data-property attribute:
videoURL - is a link for the video you want to display as a background one.
quality - displayed video quality (‘default’ or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”).
containment - by default, “self” is used to indicate block, which will contain video, if it is initialized in script.
opacity - adjusts video transparence by values from 0 to 1.
loop - enables/disables video replay (true/false).
showControls - enables the controls display.
mute - is a sound cancellation.
startAt - determines the second from which the video will start.
stopAt - determines the second on which the video will stop.
autoplay - enables video autoplay.

Conclusion

Magento engine is a great solution for your online store. The default engine package contains all the modules necessary for successful sales. Open source allows you to offer really outstanding merchant possibilities for your customers. However, due to the quite complex engine structure advanced usage of Magento will require a lot of time and aspiration. You'll need much more than this manual.

The following resources will help you to become a true Magento professional:

Useful resources

Help and Support

Loading data from Google servers

Some countries have issues connecting to Google servers. This can cause issues loading Google Fonts from Google CDN. To resolve these issues please do the following:

Can't load Google Fonts:
  1. Open app\design\frontend\default\theme***\template\page\html\head.phtml
  2. Locate the line:
    <link href='//fonts.googleapis.com/css?family=[---your_web_font_name_here---]' rel='stylesheet' type='text/css' />
  3. Replace it with the following:
    <link href='//fonts.useso.com/css?family=[---your_web_font_name_here---]' rel='stylesheet' type='text/css' />