SIMI MOBILE SITE
Transcript of SIMI MOBILE SITE
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
Phone: (+84) 4.8585.4587
SIMI MOBILE SITE
The simplest way to build mobile site for Magento
User Guide
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
Table of content
Table of content .................................................................................... 2
1. Introduction .................................................................................. 3
2. How to install ................................................................................ 4
3. How to configure and make it work ........................................... 5
4. How to Create CMS page for mobile site .................................. 7
4.1. Home page .................................................................................................................................... 7
4.2. Categories page............................................................................................................................. 8
4.3. Other pages ................................................................................................................................. 10
5. How to configure ........................................................................ 13
5.1. Manage Category ........................................................................................................................ 13
5.2. Manage Spot products ................................................................................................................ 15
5.3. Manage banner ........................................................................................................................... 17
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
1. Introduction
With the booming popularity of mobile users these days, the number of
customers visiting your website via mobile will increase day by day. There are three
popular ways for a website to go mobile, namely mobile app, mobile site and
responsive theme. Although mobile app has been proven to be the best solution
with all its mobile–optimized features, mobile site still is worth considering if you just
need a basic mobile solution.
Keeping this demand in mind, SimiCart has just released its first mobile site
template called Simi Mobile Site. This is a very easy-to-use template for you to
configure, customize freely to create the most beatiful and unique mobile site for
your store. Your mobile site, which is inspired by Metro theme of Windows 8, brings
out a modern and dynamic look to attract any of your mobile visitors. Better still, the
mobile site can run on all kinds of mobile devices, regardless of resolutions and
operating systems.
Outstanding features:
Provide source code.
Allow configuring categories omepage.
Allow configuring spot products in homepage.
Allow managing banners.
Support all kinds of mobile devices.
Easy to manage right in the existing Magento backend.
Not require customers to download or install
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
2. How to install
1. Once download Simi Mobile Site, you can get the package right away.
2. It is required to enable cache in the administration panel of your site. Go to
System/Cache Management. Choose all caches and take action “Enable” then
submit.
3. Use FTP client (such as Filezilla, WinSCP, cuteFtp) to upload or copy all folders in the
zip package to your Magento site root folder. This will not overwrite any existing
files, just add new files to the folder structure.
4. After uploading is done, log in your Magento administration panel to refresh cache.
Go to System/Cache Management. Select all caches and take action “Refresh” then
submit.
5. Navigate to System/Configuration/ Design and start configuring this theme
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
3. How to configure and make it work
1. Login to your Magento Backend.
2. Click System -> Configuration -> Design -> Themes Section -> Default Field
3. In Default Field, please click on to Add Exception
4. In Matched Expression field, please enter this phrase:
iPhone|iPod|BlackBerry|Palm|Googlebot-
Mobile|mobi|WindowsMobile|Android|OperaMini
This phrase will enable your mobile site theme on devices like iPhone, iPod,
BlackBerry, Palm, Windows Mobile, Android devices and mobile browsers such as
Opera mini. It also allows Google to recognize your mobile site and re-direct
Customers to this site when they search your store on mobile. You can remove one
of them or add more as you wish.
For example, if you want to show mobile site on Firefox, you can add this phrase:
iPhone|iPod|BlackBerry|Palm|Googlebot-
Mobile|mobi|WindowsMobile|Android|OperaMini|Firefox
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
5. In Value field, please fill in with the name of this theme: simimobilesite
6. Save all configurations and then enjoy your mobile site on any smart phones and
tablets.
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
4. How to create CMS page for mobile site
4.1. Home page
To create content in homepage, please go to CMS -> Pages ->Add New Page
Page Information tab:
- Page Title: is your page title
- URL Key: you must type: home-mobile
- Store View: choose your store view
- Status: Enable or Disable the banner
Content tab:
- Chose Show/hide Editor
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
- Paste content as content at here
- Choose Save page
<div class="banner-home">{{block type="simitheme/simitheme"
template="simitheme/banners.phtml"}}</div>
<div class="categories">
<div>{{block type="simitheme/simitheme"
template="simitheme/categories.phtml"}}</div>
</div>
<div class="spot">{{block type="simitheme/simitheme"
template="simitheme/spots.phtml"}}</div>
Design tab:
- Choose layout 1 column
- Choose Save page
4.2. Categories page
To create content in homepage, please go to CMS -> Pages ->Add New Page
Page Information tab:
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
- Page Title: is your page title
- URL Key: you must type: allcategory.html
- Store View: choose your store view
- Status: Enable or Disable the banner
Content tab:
- Chose Show/hide Editor
- Paste content as content at here
- Choose Save page
<div>{{block type="catalog/navigation"
template="catalog/navigation/top.phtml"}}</div>
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
Design tab:
- Choose layout 1 column
- Choose Save page
4.3. Other pages
You can configure all other pages on the mobile site, namely Bestseller page, Most
viewed page, Recently added product page, New update page, Feature page
*Note: Other page can be created the same way with that of Best seller page.
Bestseller page:
To create content in homepage, please go to CMS -> Pages ->Add New Page
Page Information tab:
- Page Title: is your page title
- URL Key: you must type as follow
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
Page URL Key
Bestseller bestseller.html
Most Viewed mostviewed.html
New Update newupdate.html
Recently added product recentlyadd.html
Feature product featureproduct.html
- Store View: choose your store view
- Status: Enable or Disable the banner
Content tab:
- Chose Show/hide Editor
- Paste content as content at here
- Choose Save page
Page Content
Bestseller <div>{{block type="simitheme/bestseller"
template="simitheme/list.phtml"}}</div>
Feature <div>{{block type="simitheme/featureproduct"
template="simitheme/list.phtml"}}</div>
Mostview <div>{{block type="simitheme/mostviewed"
template="simitheme/list.phtml"}}</div>
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
New update <div>{{block type="simitheme/newupdate"
template="simitheme/list.phtml"}}</div>
Recently
product
<div>{{block type="simitheme/recentlyadd"
template="simitheme/list.phtml"}}</div>
Design tab:
- Choose layout 1 column
- Choose Save page
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
5. How to configure
5.1. Manage Category
In this motheme, there will be 4 categories associated with 4 positions shown in the
homepage as below. The 4th will show all categories.
To configure categories in homepage, please go to SimiCart -> Simi Mobile Site ->
Manage Category
Position 1
Position 3
Position 3 Position 4
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
Click on the Position you want to edit. Below is Position 1
- Category: Choose the category you want to show on homepage at this position.
It’s taken from your existing categories.
- Position: 1 ( the postion is fixed. If you want to edit the position 2, go to position
2)
- Images: The images shown in this position. They will slide in turn.
- Base image: the first image shown at this position.
Remember to save all the changes
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
5.2. Manage Spot products
Spot products are the ones you want to highlight of other products in store. There are
up to 5 spot product groups shown on the homepage: Best seller, Most viewed, Newly
updated, Recently added and Featured Product.
These groups will slide as below
Spot product group 1
Spot product group 2
Spot product group 3
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
To configure, go to SimiCart Connector -> Simi Mobile Site - > Manage Spot Products.
Click onto the spot products you want to edit:
- Name: Name the spot products as you prefer. But items in this group are set
default by its name.
For example, in Best seller group, you can name it as “Highly recommended” or
whatever you want but the items will be taken from Best seller group, which is
set by default Magento.
- Position: The place you want this group to be shown on homepage
- Max product is loaded: total products to be loaded in this group when customers
tap on.
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
- Images for Phone/ Images for Tablet: As the image size is different, there will be
images for mobile Phone and for Tablet separately.
5.3. Manage banner
- Banner will be shown on the top of the homepage in the app. You can add as
many banners as you want. They will slide in turn.
To configure, go to SimiCart -> Simi Mobile Site -> Manage Banners
Banner
SimiCart plugin- Simi Mobile Site v1.0 Copyright (c) 2014 www.simicart.com
To add/ edit a banner, click on button Add a banner/ Edit
- Website: Is set default for All website
- Title: Name your banner
- Images: Image to show on banner.
- URL: Link URL customers are directed to when they tap on the banner
- Status: Enable or Disable the banner