Theme Documentation

Need Help?

Welcome to HelloThemes!

First and foremost, we’d like to thank you for choosing HelloThemes and welcome you to our wonderful community of ecommerce lovers! We’ve worked hard on our themes and their design, so you don’t have to. Our templates will save you time and money on the setup and configuration of your online Magento stores, making it easier and faster than ever.

In this document, you will find all the necessary instructions on how to install and manage your theme.

A few tips before you begin:

1. Add the domain where you will activate the theme in the following section of your account: Account Dashboard -> Licenses. If you don’t do this first, you won’t be able to activate the theme. 

2. Use your HelloThemes username when activating your theme (not your registered email address).

3. NOTE: The theme will overwrite your CMS home content once it’s activated. Save your content before proceeding.

Thank you!


1. Download the theme package and unzip it. You’ll be presented with a “helloloja” directory with the following folders:


2. Copy all of these folders and paste them in your Magento installation directory. Important: if your Magento install is under /magento directory, paste the theme folders over this directory, don’t paste them inside the directory. If your Magento install is within your server root directory, move back one directory, and then paste the theme folders over your /public_html folder. For example:


3. Once you’ve done this, navigate to -/System -/Cache Management. Select all cache items and refresh. If you don’t do this, you won’t see the HelloThemes navigation tab in your Admin panel.

4. You’ll see the HelloThemes tab in your Magento Admin panel navigation menu. Now click on the Theme Activation option:


5. Insert your HelloThemes username and password. Select the theme to be activated and click the Activate HelloFramework button.


6. A success message will be displayed after activation.  Now navigate again to -/System -/Cache Management and refresh all cache items. Also flush your Magento cache and cache storage as well.


7. You’re done! Now click the Theme Settings option within the HelloThemes navigation tab and start customizing your theme!


frame_settingsNote: There’s no need to add static-blocks for this theme. Once you activate it, the static-blocks are added automatically by the theme’s framework.


You can change most of the theme’s elements in Theme Settings. However, we’ll take a closer look on how you can edit some basic Magento elements within this theme.

You can change the theme’s logo by editing the HelloThemes Store Logo static-block content:

<img src=”{{media url=”hellothemes/hellothemes/logo.png”}}” alt=”Hellothemes Store” />

Change logo.png to your own logo’s image name. Be sure to add this image under media-/hellothemes -/hellothemes directory.

Slider images

To change the slider images on this theme, navigate to -/Hellothemes -/HelloSlide -/ManageSlides option within your Admin panel. You can add or remove images from this page.



Top Navigation Menu

With your HelloNikola, you can switch between the custom menu and the standard menu. To do this, navigate to -/Hellothemes -/ThemeSettings -/Menu tab.

To change from the custom menu to the standard menu, set the Custom Menu option to NO.


Store icon on smartphones

You can add your store’s icon to your smartphone display by following these steps:

1. Press the menu button, then click on Bookmarks.



2. Fill in the corresponding fields in the Bookmark options and press save.



3. Press the menu option again and then navigate to Bookmarks. You’ll see the store icon there.


4. Click on the icon and select Add to home screen to display it on your smartphone desktop.



Store icon on iPhone home screen

If you are an iPhone user, you can add your store’s icon to your iPhone home screen. Follow these steps:

1. Within your Magento Admin panel, navigate to -/HelloThemes -/Theme Settings and then find the Mobile App tab at the bottom.

2. Upload your store’s icon image and save.

3. Browse your store from your iPhone. Click the Share button at the bottom of the Safari screen.

4. Click the icon labeled Add to home screen.

5. Click the Add button in the upper right corner.

6. Launch your website from your home screen by clicking it’s icon.

6) Launch your website from your Home screen by tapping its icon.


Display "New" product label

If there’s a new product in your store, let your customers know by adding a “New” label on them. Select “set product as new from date” and “new to date” within your product settings in your Admin panel for these labels to appear.




2. A “New” label will display in your product lists and view pages.


Display "Sale" product label

You can also add a “Sale” label if there’s a special price for a specific product. When you mouse-over this label, the end date for the special price displays.








CSS Edition

If you’re not familiarized with responsive CSS, you should watch this video-tutorial before you start editing the CSS files of your theme: http://vimeo.com/57012443

You can get a responsive CSS compiler here for free: http://wearekiss.com/simpless


In order to display different languages in your theme, follow these steps:

1. Download the language package from Magento at http://www.magentocommerce.com/magento-connect/.

2. Install it in your Admin panel: -/System -/Magento Connect -/Magento Connect Manager.

3. Once it’s installed, go to -/System -/Manage Stores -/Create Store View. Enter your data and save.

4. Go to -/Configuration -/Current Configuration Scope and select the store view from the drop-down menu. On the right side under -/Local Options choose the desired language. Save.

Note: Be sure to clear the cache before trying to use your new language.

To provide you with a more complete translation, we have added the phrases and words that were not translated in the Magento Connect package in the following file: app/design/frontend/default/hellonikola/locale/language_code/translate.csv.

For example, the portuguese language path would be: app/design/frontend/default/hellonikola/locale/pt_BR/translate.csv

So, if you want to edit or add phrases or words, you can do it from that file. We would appreciate if you could report which words or phrases are missing or should be revised. Thank you.


Our themes comes with a year of support from our specialized Support Team. Please send a Support Ticket if you have any issues and they will get back to you in 24-48 hours and help you with anything you may need.

Please keep in mind the following before submitting a ticket:

1. Each theme comes with it’s own Theme Documentation that includes instructions on how to correctly install and activate your theme. Please read this detailed document before asking how to install your theme. Note most of them include video-tutorials and step by step instructions to avoid any complications.

2. We do not provide support for Magento issues. We know it can be tricky but we only give our customers assistance with our themes. For problems related solely to Magento, we suggest you visit Magento’s official website where you will find a ton on info from Magento and it’s community.

3. We do not answer “How do I…?” customization questions. If you need help with customization and theme modifications, please visit the Magento Commerce Forum or our Community Forum where customers help each other. Please remember that if the reason for your issue is a customization or modification you have made, we won’t be able to help. We only fix issues that could be caused by our own theme development.

For more information, read our Support Policy.

Static Blocks are extra HTML or Plain Text that can be integrated to your store. We set these up so you can customize links, images or text included in our themes. We are now going to install our static blocks for this theme, within your Admin-panel go to CMS → Static Blocks → Add New Block.
Important!: Be sure to click in "Show/Hide Editor" in order to HIDE the HTML Editor (WYSIWYG Editor). If not, the code will be displayed wrong.


To display the Twitter timeline box, please follow these steps below:

1) Log in to your Twitter account, then access to: http://twitter.com/settings/widgets

2) Click in “Create new” button:create-widget

3) Change Height to 100px, then click in “Create widget”:widget-settings

4) Copy the html content given, then paste it in Twitter static-block content field within your Admin-panel.

Block Title: Twitter
Identifier: twitter
Satus: Enabled

Footer Links

Block Title: Footer Links
Identifier: footer_links
Satus: Enabled

<div class="span3">
<h3>Why shop with us</h3>
<span class="line-item"></span>
<li><a href="#">Free UK Delivery & Returns</a></li>
<li><a href="#">International Delivery </a></li>
<li><a href="#">Burton Account Card</a></li>
<li><a href="#">Gift Cards</a></li>
<li><a href="#">Student Discount</a></li>

<div class="span3">
<h3>Visit us</h3>
<span class="line-item"></span>
<li><a href="#">Store Locator</a></li>
<li><a href="www.facebook.com">Facebook</a></li>
<li><a href="www.twitter.com">Twitter</a></li>

<div class="span3">
<span class="line-item"></span>
<li><a href="#">Contacts Us</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Size Guide</a></li>
<li><a href="#">Jobs</a></li>

<div class="span3">
<h3>Useful information</h3>
<span class="line-item"></span>
<li><a href="#">Formal Suit Hire</a></li>
<li><a href="#">Responsibilities</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Site Security</a></li>
<li><a href="#">Site Map</a></li>
<li><a href="#">Affiliates</a></li>