HelloVita

Theme Documentation

Need Help?

Getting Started

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

Setting Up your Theme

NOTE: If your theme package doesn't include the 'media' folder, don't worry, that's because you don't need to add it.

Hellotheme installation from Guillermo on Vimeo.

What you will need before you start

  • If your operating system doesnt already have it integrated, you will need a ZIP-tool to unzip your goods. We recommend WinRAR or WinZIP.
  • To transfer your template over to your Magento installation you'll need an FTP-tool (or SCP if you're too cool for FTP). We recommend FileZilla or SmartFTP.
  • And last, some basic computer knowledge is always good to have, although installing our templates is far from brain-science.

General Installation instructions

  • First, unzip your ZIP-file and then copy the whole app, skin and media folders on the main root of your local magento server (you will need to MERGE* these files), if this files are not merged, you will have installation issues then.
  • A message may popup and warn you that there are similar files already on your server. You will need to select overwrite to overwrite the same files. If not, don't worry, it will still work.
  • This may take up to 5-10 minutes depending on your connection.
  • Log in to your backend of your Magento Administration and go to System → Configuration → Design. Open the Themes tab, then write the identifier of the theme you are setting up (for example: hellocanvas) in the fields: Templates, Skin (Images / CSS), Layout, Default, and then click Save Config.
  • Disable the Cache in System → Cache Management).
  • Select all options. Then either refresh or disable your cache. Refresh means it will refresh your cache, Disable will disable your cache. We recommend disabling your cache when installing your theme and re-enabling it after you are done installing.
  • Ok, the template is active but your template includes more functionality which needs to be configured to make it work 100%. Please keep following our tutorial and set up your Homepage and the Static Blocks.
  • *For Mac/iOS users only: Copying a folder on top of another folder with the same name in the Mac OS X Finder will replace the entire contents of the target folder. Merging folders (with underlying folders) is not supported by Apple. To merge the folders on a Mac you can use the FileMerge application (is part of Xcode by Apple which you can download from the Mac App Store). But there are other tools out there or you can use a command line.
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.

Setting up the Homepage

To setup your homepage, you will need to go to (CMS → Manage Pages). Select “Home Page”, with the identifier as “home”. Scroll down and look for “Content”, inside that you will have to input your homepage code. Please copy and paste the code below:

Content:
<div class="content-slide">
<div id="slide">
<div class="placeholder">{{block type="cms/block" block_id="helloslide"}}</div>
</div>
</div>
<div class="header-home">{{block type="cms/block" block_id="headerHome"}}</div>
<div class="featured-products">
<h2><span>Hottest Products of the Week</span></h2>
<p>{{block type="catalog/product_list" category_id="13" template="catalog/product/featured_products.phtml"}}</p>
<h2><span class="main_products2">Our Latest Products</span></h2>
<p>{{block type="catalog/product_list" category_id="13" template="catalog/product/featured_products2.phtml"}}</p>
</div>

 

Last step, we have to make Magento show the custom Homepage! You must do this before you can display your homepage:
1) On the left-hand side menu of “Home Page” under “Content” select “Design”
2) Now on “Layout” select “Homepage”

Additional Instructions

To get your products to show on the homepage of your store you need to configure the “Homepage” content in CMS -> Pages, find and replace the “category_id” decimal number to the category ID number of your choice:

Content:
{{block type="catalog/product_list" category_id="3" . . .

 

If you can’t find your category ID number simply go to Catalog -> Manage Categories, select a category and you will see on the top “Your Category (ID:10)” for example. Use that number and replace it from category_id=”3″ to for example category_id=”10″. Like so:

Content:
{{block type="catalog/product_list" category_id="10" . . .

 

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.

Hello Slide

Block Title: Hello Slide
Identifier: helloslide
Satus: Enabled

Content:
<div class="panel"><a><img src="{{skin url=images/slider/01.jpg}}" alt="" /></a></div>
<div class="panel"><a><img src="{{skin url=images/slider/01.jpg}}" alt="" /></a></div>
<div class="panel"><a><img src="{{skin url=images/slider/01.jpg}}" alt="" /></a></div>

 

Twitter

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

Header Home

Block Title: Header Home
Identifier: headerHome
Satus: Enabled

Content:
<div id="topFeatures">
<div class="feature green">
<h3>Competitive prices →</h3>
<p>Our prices chop and change <strong>every week</strong>.</p>
<a class="feature btn" href="#">More Info →</a></div>
<div class="feature grey center">
<h3>Buy now, Pay later →</h3>
<p>To make life easier we have a <strong>BNPL option</strong>.</p>
<a class="feature btn" href="#">More Info →</a></div>
<div class="feature orange last">
<h3>Free Delivery →</h3>
<p>To make it extra special, we do  <strong>free delivery too!</strong>.</p>
<a class="feature btn" href="#">More Info →</a></div>
</div>

 

Top Link Social

Block Title: Top Link Social
Identifier: toplinksocial
Satus: Enabled

Content:
<a class="top-share" href="#"><img src="{{skin url=images/s-t.png}}" alt="Twitter" /></a> <a class="top-share" href="#"><img src="{{skin url=images/s-s.png}}" alt="Skype" /></a> <a class="top-share" href="#"><img src="{{skin url=images/s-f.png}}" alt="Facebook" /></a> <a class="top-share" href="#"><img src="{{skin url=images/s-r.png}}" alt="RSS" /></a>

 

Site Info

Block Title: Site Info
Identifier: siteinfo
Satus: Enabled

Content:
<h3>Site information</h3>
<ul class="sitemap">
<li><a href="/">Home</a></li>
<li><a href="{{store direct_url="about-magento-demo-store"}}">About Us</a></li>
<li><a href="{{store direct_url="customer-service"}}">Customer Service</a></li>
<li><a href="{{store direct_url="about-magento-demo-store"}}">Delivery Returns</a></li>
<li><a href="{{store direct_url="about-magento-demo-store"}}">Privacy Policy</a></li>
</ul>
<ul class="sitemap">
<li><a href="/">Home</a></li>
<li><a href="{{store direct_url="about-magento-demo-store"}}">About Us</a></li>
<li><a href="{{store direct_url="customer-service"}}">Customer Service</a></li>
<li><a href="{{store direct_url="about-magento-demo-store"}}">Delivery Returns</a></li>
<li><a href="{{store direct_url="about-magento-demo-store"}}">Privacy Policy</a></li>
</ul>
<p></p>

 

Footer Links

Block Title: Footer Links
Identifier: footerLinks
Satus: Enabled

Content:
<ul class="links">
<li><a href="{{store direct_url="customer-service"}}">Services</a></li>
<li><a href="{{store direct_url="customer-service"}}">Requirements</a></li>
<li><a href="{{store direct_url="about-magento-demo-store"}}">Security</a></li>
<li><a href="{{store direct_url="about-magento-demo-store"}}">Privacy Term</a></li>
<li><a href="{{store direct_url="about-magento-demo-store"}}">About Us</a></li>
<li><a href="{{store direct_url="contacts"}}">Contacts Us</a></li>
</ul>
<a class="afacebook" href="http://facebook.com/">Follow on Facebook</a> <a class="atwitter" href="http://twitter.com/">Follow on Twitter</a>