Garbini Responsive Magento Theme Documentation

Overview

Garbini responsive Magento theme has almost everything that you need for a shopping website. Its responsive layout built with all-in-one powerful features, such as Mega menu, Brand logo and slider, Featured products, Image zooming effects... will surely satisfy your demands for a custom store..

Version: 1.7+
Author: Magesolution.
Design: GarbiniThemes.

Install Magento

If you haven't got a Magento website yet, you will have to install a copy of Magento Community Edition open source e-commerce web application before using Garbini Responsive Magento theme.

If you already have installed Magento you can skip this section

To install Magento, follow these steps:

Check if your server is compatible with Magento. Find detailed instructions here - http://www.magentocommerce.com/knowledge-base/entry/how-do-i-know-if-my-server-is-compatible-with-magento
Check if your server meets Magento's System Requirements - http://www.magentocommerce.com/system-requirements/
If you want to install sample data, use this document - http://www.magentocommerce.com/knowledge-base/entry/magento-installation-cheat-sheet
Go to link "More information: Installing the Sample Data for Magento"
If you want to better understand Magento configuration, use this document - http://www.magentocommerce.com/knowledge-base/entry/magento-installation-guide
When your Magento installation is completed successfully you can start theme installation procedure.

Install Theme

Disable compiler

Go to System -> Tools -> Compilation then disable compiler if it is already enabled, if not, you can skip this step.

Upload Pack

Using a FTP client to upload content of upload folder to the root folder on your Web Server (usually named public_html). Attention: when you copy content of upload folder to the root folder, it will overwrite some files. Please accept it.

In upload/step_1 folder we have source code for each version of Magento, please upload correct version of you Magento site. You can find version of your Magento site at the footer of admin panel.

You need to upload all content in folder upload/step_1/magento_version first, then upload content in folder upload/step_2

Refresh Cache

Go to System -> Cache management. Select all, choose refresh action and submit. After that you will see new menu item Mage Solutions. Now log out and login again to refresh access control system

Configuration

Configuration theme

To use Garbini Multipurlose Mangeto theme, you can go to System -> Configuration -> Design and choose Package is "mgstheme" and themes default is "garbini" as illustrated bellow.

Go to System -> Configuration -> Web and choose Default page/CMS Home page is Garbini Homepage 1 or Garbini Homepage 2 or Garbini Homepage 3 or Garbini Homepage 4

Setup Multi Languages

To setup multi languages, you can go to System -> Manage Stores

Click Create Store View button

Store: choose your Main store
Name: Language
Code: code for this language.

Press Save button

Go to System -> Configuration -> General

Choose a store view (language) you have created
Choose the Country of this store view (language)
Choose locale of this store view (language)

Press Save Config button

Now you should see languages dropdown on the top left corner.

Setup Currency

To setup currency, you can go to System -> Configuration, choose Currency Setup tab. Set Allowed Currencies are the currency you want on your store.

Go to System -> Mange Currency Rates, press import. Wait for the system to import currency exchange rate then press Save.

Go to System -> Cache Management and refresh the cache. Now you should see currency dropdown on the top left corner.

Install Blog

If you do not want blog on your store, you can skip this step.

To install blog extensions go to System -> Magento Connect -> Magento Connect Manager.
Log in with admin account of your store.
Enter key http://connect20.magentocommerce.com/community/AW_Blog then press Install

Press Proceed to start installing extension.
After installing successfully, return to admin

Go to System -> Cache Management and clear cache
Log out and log in again you will see menu Blog
Upload all content from upload/blog to the web root on your web server
Clear cache again

Theme Configuration

Go to System -> Magesolution -> Garbini Theme

General

Theme Color: Choose color of theme, 16 colors available for your selection.
Font: Choose font of theme, 23 fonts available for your selection.
Logo: Upload logo for your store
Bestsllers Product Attribute:Choose bestsllers product show or don't
Featured Product Attribute:Choose featured product show or don't
Brands Attribute:Choose brands show or don't
Sale product:Choose sale show or don't
New product:Choose new show or don't

We have a version of header available

We have a version of footer available

Static block garbini_function
Static block garbini_shop
Static block garbini_info
Static block garbini_newsletter
Static block garbini_lets_get_connect
Static block garbini_accept_shipping

Featured Product Attributes: Choose attribute to set featured product, all products have this attribute will be shown on Home page.

Product Tabs

More product info can be added to the Tabs. You can show Description, Additional Information, Reviews, Product tags and other three custom tabs

Show Description: Show or hide product description
Show Additional Information: Show or hide product additional information
Show Reviews: Show or hide product reviews
Show Product Tags: Show or hide product tags
Custom tab 1: You can show extra information by custom tabs. It can be product attribute or a static block. If you want to show different content of the product on custom tab, you should choose it as an attribute. If you want to show the same information on all products, you can choose it as a Static Block.
Custom tab 1 title: Title of the custom tab to show on product tabs
Custom tab 1 value: If the custom tab is a product attribute, it will be attribute code. If it is a static block, it will be block identifier.
Custom tab 2, Custom tab 3: Repeat the steps on custom tab 1

Megamenu

Go to System -> Magesolution -> Megamenu -> Configuration

Is enable: Enabled or disabled mega menu
Add home page link: Show home page link on menu or not
Homepage Label: The tagline of home page link

Go to Mage Solutions -> Megamenu -> Manage Megamenu Items to add or edit items of main megamenu

Click Add Megamenu Item button to add item to megamenu

Label: Label displays on megamenu
Menu Type: 2 menu types available (Catalog Category and Static Content)
- Catalog Category: If you choose Catalog Category, you can check to choose Categories to display on megamenu
- Static Content: If you choose Static Content, you can add static menu to megamenu
Link: link of this menu item
Position: position of the item on megamenu
Columns:
- Normal Menu: standard menu (multi dropdown levels)
- Megamenu: Multi-columns menu
Store View: choose store view this menu item display, choose All store views to display for all store view.

One Step Checkout

To set up and config for one step checkout, you can see at: http://www.magesolution.com/magento-one-step-checkout.html

Advanced Reports

To set up and config for advanced reports, you can see at: http://www.magesolution.com/magento-advanced-reports.html

CMS Content

List Of CMS Pages

Title	Identifier
About us	garbini_about_us
Garbini Homepage 1	garbini_home1
Garbini Homepage 2	garbini_home2
Garbini Homepage 3	garbini_home3
Garbini Homepage 4	garbini_home4
Page with left sidebar	garbini_page_left
Page with right sidebar	garbini_page_right
Site map	garbini_sitemap

List Of CMS Static Block

Title	Identifier
Garbini Call Us Now	garbini_call_us_now
Garbini Function	garbini_function
Garbini Shop	garbini_shop
Garbini Info	garbini_info
Garbini Accept Shipping	garbini_accept_shipping
Garbini Newsletter	garbini_newsletter
Garbini Lets Get Connect	garbini_lets_get_connect
Garbini Ads	garbini_ads
Garbini contact info	garbini_contact_info
Garbini contact info 2	garbini_contact_2
Garbini Sale off	garbini_saleoff
Garbini Product Tab 1	garbini_product_tab1
Garbini Product Tab 2	garbini_product_tab2
Garbini Product Tab 3	garbini_product_tab3
Garbini features alt	garbini_featuresalt
Garbini features	garbini_features

Edit Cms Content

Important!

Never use WYSIWYG editor to add / edit HTML code. It may break your HTML code.

When you edit a static block having HTML code, click button Show/Hide Editor to switch to HTML edition mode

Garbini Call Us Now

Go to CMS -> Static Blocks, choose block garbini_call_us_now

Default code

Garbini Function

Go to CMS -> Static Blocks, choose block garbini_function

Default code

<h3 class="widget-title">Garbini</h3> <ul> <li><a href="{{store url="/"}}">Home</a></li> <li><a href="{{store url="garbini_about_us"}}">About Us</a></li> <li><a href="{{store url="customer/account/login/"}}">Log In / Sign Up</a></li> <li><a href="{{store url="checkout/onepage/"}}">Checkout</a></li> <li><a href="{{store url="wishlist/index/index/"}}">My Wishlist</a></li> <li><a href="{{store url="checkout/cart/"}}">My Cart</a></li> <li><a href="#">What’s New</a></li> </ul>

Garbini Shop

Go to CMS -> Static BlocksChoose block garbini_shop
Default code

<h3 class="widget-title">Shop</h3> <ul> <li><a href="{{store url="for-men.html/"}}">Cloting</a></li> <li><a href="{{store url="for-men.html/"}}">Feeding Bottles</a></li> <li><a href="{{store url="for-men.html/"}}">Diaper</a></li> <li><a href="{{store url="for-men.html/"}}">Infant Clothes</a></li> <li><a href="{{store url="for-men.html/"}}">Educational Baby Toys</a></li> <li><a href="{{store url="for-men.html/"}}">Strollers & Pams</a></li> <li><a href="{{store url="for-men.html/"}}">Creams & Ointments</a></li> </ul>

Garbini Info

Choose block garbini_info
Default code

<h3 class="widget-title">Info</h3> <ul> <li><a href="http://www.arrowhitech.com/">Company</a></li> <li><a href="#">Franchisee</a></li> <li><a href="#">Partners</a></li> <li><a href="{{store url="checkout/cart/"}}">Contact</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">Terms of Service</a></li> <li><a href="#">Privacy Policy</a></li> </ul>

Garbini Accept Shipping

Choose block garbini_accept_shipping
Default code

<h3 class="widget-title">We Accept</h3> <p><img src="{{media url="wysiwyg/payments.png"}}" alt="" /></p> <h3 class="widget-title">Free Shipping</h3> <p class="free-shipping"><em class="fa fa-plane fa-3x"> </em> <span>On orders over $50</span></p>

Garbini Newsletter

Choose block garbini_newsletter
Default code

<h3 class="widget-title">Newsletter</h3> <p>{{block type="newsletter/subscribe" name="footer.newsletter" template="newsletter/subscribe.phtml"}}</p>

Garbini Lets Get Connect

Choose block garbini_lets_get_connect
Default code

<h3 class="widget-title">Lets Get Connected</h3> <ul class="social-profiles"> <li><a title="Facebook" href="https://www.facebook.com/"> <span class="fa-stack fa-lg"> <em class="fa fa-circle fa-stack-2x"> </em> <em class="fa fa-facebook fa-stack-1x fa-inverse"> </em> </span> </a></li> <li><a title="Google+" href="https://plus.google.com/"> <span class="fa-stack fa-lg"> <em class="fa fa-circle fa-stack-2x"> </em> <em class="fa fa-google-plus fa-stack-1x fa-inverse"> </em> </span> </a></li> <li><a title="Twitter" href="https://twitter.com"> <span class="fa-stack fa-lg"> <em class="fa fa-circle fa-stack-2x"> </em> <em class="fa fa-twitter fa-stack-1x fa-inverse"> </em> </span> </a></li> <li><a title="Pinterest" href="https://www.pinterest.com/"> <span class="fa-stack fa-lg"> <em class="fa fa-circle fa-stack-2x"> </em> <em class="fa fa-pinterest fa-stack-1x fa-inverse"> </em> </span> </a></li> <li><a title="LinkedIn" href="https://www.linkedin.com"> <span class="fa-stack fa-lg"> <em class="fa fa-circle fa-stack-2x"> </em> <em class="fa fa-linkedin fa-stack-1x fa-inverse"> </em> </span> </a></li> </ul>

Garbini Ads

Go to CMS -> Static Blocks, choose block garbini_ads

Default code

Garbini contact info

Go to CMS -> Static Blocks, choose block garbini_contact_info

Default code

<h3>Contact Info</h3> <p>Garbini Store,<br /> 5798 West Coast Road,<br /> Opp to Pachakkarikkada,<br /> Sydney, AU - 20057</p> <p>Phone: (123) 456-7890<br /> Email: <a href="mailto:mail@mail.com">contact@garbini.com</a><br /> Web: <a href="#">www.garbini.com</a></p>

Garbini contact info 2

Go to CMS -> Static Blocks, choose block garbini_contact_2

Default code

<h3>We Are Hiring!</h3> <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p> <p>Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu.</p>

Garbini Sale off

Go to CMS -> Static Blocks, choose block garbini_saleoff

Default code

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="widget"> <h3 class="title">Sale Off</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit illo voluptas aperiam repudiandae impedit.</p> <p>Suscipit illo voluptas aperiam repudiandae impedit.</p> <a class="readmore" href="#">VIEW DETAILS</a></div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"><img class="img-responsive" src="{{media url="wysiwyg/ad-4.jpg"}}" alt="" /></div>

Garbini Product Tab 1

Go to CMS -> Static Blocks, choose block garbini_product_tab1

Default code

<p>This is description for product tab</p>

Garbini Product Tab 2

Go to CMS -> Static Blocks, choose block garbini_product_tab2

Default code

<p>This is description for product tab</p>

Garbini Product Tab 3

Go to CMS -> Static Blocks, choose block garbini_product_tab3

Default code

<p>This is description for product tab</p>

Garbini features alt

Go to CMS -> Static Blocks, choose block garbini_featuresalt

Default code

<div class="row thumbnails features-alt"> <div class="col-sm-3 feature"> <div class="thumbnail no-border no-padding"> <div class="media"> <div class="icon-inner"><em class="fa fa-gamepad"> </em></div> </div> <div class="caption"> <h3 class="caption-title">Unlimited Flexibility</h3> <div class="caption-text">Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque.</div> </div> </div> </div> <div class="col-sm-3 feature"> <div class="thumbnail no-border no-padding"> <div class="media"> <div class="icon-inner"><em class="fa fa-arrows-alt"> </em></div> </div> <div class="caption"> <h3 class="caption-title">Fully Responsive</h3> <div class="caption-text">Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque.</div> </div> </div> </div> <div class="col-sm-3 feature"> <div class="thumbnail no-border no-padding"> <div class="media"> <div class="icon-inner"><em class="fa fa-cogs"> </em></div> </div> <div class="caption"> <h3 class="caption-title">Easy to Customize</h3> <div class="caption-text">Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque.</div> </div> </div> </div> <div class="col-sm-3 feature"> <div class="thumbnail no-border no-padding"> <div class="media"> <div class="icon-inner"><em class="fa fa-comments"> </em></div> </div> <div class="caption"> <h3 class="caption-title">Top-Notch Design</h3> <div class="caption-text">Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque.</div> </div> </div> </div> </div>

Garbini features

Go to CMS -> Static Blocks, choose block garbini_features

Default code

<div class="row thumbnails features"> <div class="col-sm-4 feature"> <div class="thumbnail no-border no-padding"> <div class="media"> <div class="icon-inner"><em class="fa fa-android"> </em></div> </div> <div class="caption"> <h3 class="caption-title">Design & UX</h3> <div class="caption-text">Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque.</div> </div> </div> </div> <div class="col-sm-4 feature"> <div class="thumbnail no-border no-padding"> <div class="media"> <div class="icon-inner"><em class="fa fa-twitter"> </em></div> </div> <div class="caption"> <h3 class="caption-title">Social</h3> <div class="caption-text">Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque.</div> </div> </div> </div> <div class="col-sm-4 feature"> <div class="thumbnail no-border no-padding"> <div class="media"> <div class="icon-inner"><em class="fa fa-laptop"> </em></div> </div> <div class="caption"> <h3 class="caption-title">Web Building</h3> <div class="caption-text">Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque.</div> </div> </div> </div> </div>

Revolution Slider

Homepage 1, homepage 3, homepage 4 use "Magento Responsive Slider Revolution Extension - AM Revolution Slider". You can find more information at: http://www.arexmage.com/am-revolution-slider.html

Config Homepage Slider

From admin, go to AM->AM Revolution Slider->Manage Slider to add new slider

After create new slider, go to CMS->Pages to add revolution-slider to homepages. Go to CMS->Pages, choose your homepage to edit.
Click "Design" tab

After press Save Page

Categories in Homepage version 2

Homepage 2 use Categories slider . You can create one by follows:

Create categories

From admin, go to Catalog->Manege Categories
Create category Accessories, Shoes and Bags is subcategories of default category after you go to CMS->Pages and choose cms page that you want to add categor slider.
You paste this code to content: <div id="slider"> <div id="mi-slider" class="mi-slider">{{block type="catalog/product_list" category_id="7" limit="4" template="catalog/product/list-category.phtml" }} {{block type="catalog/product_list" category_id="8" limit="4" template="catalog/product/list-category.phtml" }} {{block type="catalog/product_list" category_id="9" limit="4" template="catalog/product/list-category.phtml" }} <div class="nav"><a href="#">Shoes</a> <a href="#">Accessories</a><a href="#">Bags</a></div> </div> </div> <div>{{block type="catalog/product_list" template="catalog/product/home1.phtml"}} {{block type="core/template" template="theme/brands.phtml"}}</div>

You must change category_id in content by categories's id that you have created.

After press Save Page

How To

Change title of homepage

Go to CMS -> Pages
Choose Garbini Homepage 1, 2, 3 or 4
Edit Page Title field.
Press Save Page.

Change "Default welcome msg !"

Go to System -> Configuration -> Design
Go to group Header
Edit Welcome text field then press Save Config

Change Copyright

Go to System -> Configuration
Select tab Design -> Footer
Change content in Copyright field
Press Save Config

Add Featured Products

If you haven't got an attribute to set featured products, you need to create an attribute and add it to your attribute set, if you have one, please skip this step

Go to Catalog -> Attributes -> Manage Attributes
Click Add New Attribute button
- Attribute Code: Your featured products attribute code (eg. featured)
- Catalog Input Type for Store Owner: Choose Yes/No
Click tab Manage Label/Options
Fill out your attribute label (eg. Featured Product)
Click Save Attribute button
Go to Catalog -> Attribute ->Manage Attribute Sets
Click your attribute set (eg. Default)
Drag and drop the attribute to a group
Click Save Attribute Set button
Go to Catalog -> Manage Products
- Check products you want to show as featured ones on homepage
- Action: Choose Update Attributes
Click Submit button
Find Featured Product attribute and change value to yes as follows:
Click Save button
Go to Mage Solutions -> Garbini theme
On General Tab, Featured Product Attribute: choose your featured product attribute

Add Bestsllers Products

If you haven't got an attribute to set bestsllers products, you need to create an attribute and add it to your attribute set, if you have one, please skip this step

Go to Catalog -> Attributes -> Manage Attributes
Click Add New Attribute button
- Attribute Code: Your bestsllers products attribute code (eg. best_product)
- Catalog Input Type for Store Owner: Choose Yes/No
Click tab Manage Label/Options
Fill out your attribute label (eg. Bestsllers)
Click Save Attribute button
Go to Catalog -> Attribute ->Manage Attribute Sets
Click your attribute set (eg. Default)
Drag and drop the attribute to a group
Click Save Attribute Set button
Go to Catalog -> Manage Products
- Check products you want to show as bestsllers ones on homepage
- Action: Choose Update Attributes
Click Submit button
Find Bestsllers attribute and change value to yes as follows:
Click Save button
Go to Mage Solutions -> Garbini theme
On General Tab, Bestsllers Product Attribute: choose your bestsllers product attribute

Add New Products

If you haven't got an attribute to set new products, you need to create an attribute and add it to your attribute set, if you have one, please skip this step

Go to Catalog -> Attributes -> Manage Attributes
Click Add New Attribute button
- Attribute Code: Your new products attribute code (eg. new_product)
- Catalog Input Type for Store Owner: Choose Yes/No
Click tab Manage Label/Options
Fill out your attribute label (eg. New product)
Click Save Attribute button
Go to Catalog -> Attribute ->Manage Attribute Sets
Click your attribute set (eg. Default)
Drag and drop the attribute to a group
Click Save Attribute Set button
Go to Catalog -> Manage Products
- Check products you want to show as new ones on homepage
- Action: Choose Update Attributes
Click Submit button
Find New Product attribute and change value to yes as follows:
Click Save button
Go to Mage Solutions -> Garbini theme
On General Tab, New Product Attribute: choose your new product attribute

Add Sale Products

If you haven't got an attribute to set sale products, you need to cr eate an attribute and add it to your attribute set, if you have one, please skip this step

Go to Catalog -> Attributes -> Manage Attributes
Click Add New Attribute button
- Attribute Code: Your sale products attribute code (eg. sale_product)
- Catalog Input Type for Store Owner: Choose Yes/No
Click tab Manage Label/Options
Fill out your attribute label (eg. Sale)
Click Save Attribute button
Go to Catalog -> Attribute ->Manage Attribute Sets
Click your attribute set (eg. Default)
Drag and drop the attribute to a group
Click Save Attribute Set button
Go to Catalog -> Manage Products
- Check products you want to show as sale ones on homepage
- Action: Choose Update Attributes
Click Submit button
Find Sale attribute and change value to yes as follows:
Click Save button
Go to Mage Solutions -> Garbini theme
On General Tab, Sale Product Attribute: choose your sale product attribute

Add Brands

If you haven't got an attribute to set brand for products, you need to create an attribute and add it to your attribute set, if you have one, please skip this step :

Go to Catalog -> Attributes -> Manage Attributes
Click Add New Attribute button
- Attribute Code: Your featured products attribute code (eg. brand_product)
- Catalog Input Type for Store Owner: Choose Dropdown
Click tab Manage Label/Options
Fill out the fields as follows:
Click Save Attribute button
Go to Catalog -> Attribute -> Manage Attribute Sets
Click your attribute set (eg. Default)
Drag and drop the attribute to a group
Click Save Attribute Set button
Go to Mage Solutions -> Garbini theme
On General Tab, Brand Attribute: choose your Brand attribute
Go to Mage Solutions -> Brands
Click Add Brand button
- Option Choose a brand
- File: Upload brand logo
- Link: URL to redirect when you click a brand on home page
- Status: Enabled
Click Save Item button

Change Category Layout

For each category on Catalog > Category Management you can change category layout to 1 column, 2 columns with left sidebar, 2 columns with right sidebar or 3 columns

Click the category you want to change
Click Custom Design tab
Choose the layout you want to change
Click Save Category button

Now you can see the change of the category

1 Column

2 columns with left sidebar

2 columns with right sidebar

Show Filter Navigation

You can display categories on Magento's Layered Navigation block ("Shop by" block) on the top of the left sidebar.

To display category on the Layered Navigation, go to Catalog > Manage Categories, click selected category and set Is Anchor field (in Display Settings tab) to Yes

Setup Product Label

You need create an attribute with attribute code is "new_product and sale_product", input type is "Yes/No"
To set product is "new" or "sale" go to Catalog -> Mange Products, choose appropriate product
On General choose value of the New Product or Sale is "Yes".

Add Up-Sell Products

Go to Admin panel -> Catalog -> Manage Products.
Choose appropriate product.
Go to Up-Sell Products tab.
Press Reset filter button.
Choose appropriate products
Press Save button

Enabled Translate Inline

Magento inline translation can be enabled on System -> Configuration -> Developer -> Translate Inline in Magento Backend:

Please also make sure to disable Translation and Blocks HTML output before hitting Submit on System > Cache Management:

After that you can open your Store in browser and translate inline all strings that need to be translated