How to Setup a Mobile Store in Magento

This article can serve as a quick reference guide on how to connect mobile themes. To begin using a mobile theme you need just to make several steps. Let’s take the Chаmeleоn theme and try to connect it to the desktop version of the store as an example.

1. Installing a theme – what to start with?

These are the main things you should pay attention to before staring the installation:

• Backup Magento files and the store database.

Important:

Please, make sure you backup your system before installing any themes or extensions on your Magento, especially if you are working on a live store.

• Disable compilation mode in System > Tools > Compilation.
• Disable Magento cache
  

Important:

When designing your Magento store you need to completely disable cache to be able to see the changes. Later, you can turn it on again after you finished configuring your store.

1. Upload chameleon.zip file to your Magento’s root directory via FTP
2. Unzip chameleon.zip file which contains four directories: app, js, media, skin and
   package.xml (Interaktingslider is the slider’s module), Magento also contains the same directories.

Note:

Your Magento core files will not get overwritten, this will only add a new theme to your Magento. If there is a message that such directories already exist on the server, you can confirm that you want to merge them.

2. How to enable the theme?

Set the correct permissions (777) to all theme files and folders that have been uploaded to the server.

Note:

Your theme files should have the same permissions as your Magento basic files. Otherwise Magento will not be able to use them. In case of any issues or doubts, please, contact your hosting provider.

In order to enable the template, go to System > Configuration > Design section. In the Current Package Name field enter the name of the mobile theme you’re configuring – “chameleon”.

Next, in the Default field of the Themes tab the name of our main template is entered. Let’s say, it’s named package: thema. In order to add the mobile template, click Add exceptions and enter the name of the mobile theme (“chameleon”). You should also enter the names of the mobile devices you want to support the mobile theme.

Here is the content of the “Matched Expression” field (you may add other mobile devices).

Android|Webos|iPhone|iPod|iPad|Blackberry|Mobile

Click Save Config button:

If you have more than one shop (by default, Mаgentо allows having only one store) but you want to apply the theme for the entire website, please, make sure that you select Default Config under Current Configuration Scope in the upper right corner in this section. Otherwise, set up the area in accordance with your needs.

3. Chameleon – color themes

The chameleon theme comes up with 8 default colors:

• Charcoal Black,
• Ivory White,
• Sunset Red,
• Emerald Green,
• Midnight Blue,
• Sky Blue,
• Magenta Pink
• Chocolate Brown.

By default it uses Charcoal Black.

To change the color you need to use the color changing module:

• Go to System > Configuration > Chameleon Color Changer  (BELVG  EXTENSIONS);

• In the Current Theme Color list select the color you would like to use;
• Click Save Config button.

4. Clearing cache in Mаgentо – What do we have?

Now we have installed the theme, connected it, selected the color but …“It shows nothing! What is the problem?” – this is one of the most frequently asked questions and issues, which users can encounter.

So, how can we make the newly installed theme visible for on the store?

First of all, if you want to see the changes, you need to disable cache:

• Go to System > Cache Management;
• Click Select All > in the Actions field select Disable > click Submit:

After cache is disabled, the cache management screen might look like this:

After disabling the cache you should clear it:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

• Go to System > Cache Management;
• Click the following buttons to completely clear the store cache:

1. Flush Magento Cache
2. Flush Cache Storage
3. Flush Catalog Images Cache
4. Flush JavaScript/CSS Cache

After you have configured your shop you can enable the caching of the system back again:

• Go to System > Cache Management;
• Click Select All link > select Enable in the Actions field > click Submit:

5.  Static blocks

In the Chameleon theme a built-slider – Interakting slider is used. To connect it you need to create a static block. Static blocks are managed in the admin panel under the CMS > Static Blocks section.

To create a static block, go to CMS > Static Blocks, click the Add New Block button and follow these steps:

1. Enter the identifier of one of the static blocks into the Identifier field. The characters should be in lowercase and separated by underscores;
2. Enter the title in Block Title;
3. Select the Store View to which this block will apply;
4. In the Status field choose Enabled. Disabled means that the block will not be displayed in the frontend;
5. Insert your Content (text or HTML) and click Save Block.

6. Interakting slider

Create a static block in the admin panel with identification: slider insert the following piece of code into the static block

To create a new slide, go to Interaktingslider > Add New Slide

To edit the slides go to  Interaktingslider > Manage Slides .

7. Language flag

If you have several stores, configure the language/country attribute, go to  System > Manage Stores.

Click the store view you want to configure. In the Code field, paste the code corresponding to the language/country of the store view. Copy the code from the “code” column of the following table (you may use any of the comma-separated abbreviations):

Some of the theme features don’t work or give errors.

If you encounter any problems after you have installed the theme and cleared the cache in Mаgentо, please, try to exit the admin panel and re-enter the system.  Double check each step and make sure that you do not miss any connection steps.

Troubleshooting: what may cause problems.

• Mаgentо cache has not been cleared after theme has been installed;
• The compilation mode under System > Tools > Compilation had not been disabled before the installation.
• Some of the theme files have not been uploaded.
• Check file permissions: perhaps you are not allowed to change/edit the theme files due to restricted access to the files on your server.  You need to set the same permissions for your theme files as for the other Magento files.
• You might have installed third-party modules/extensions which can change or damage theme files or cause incompatibility errors.
• Perhaps you tried to edit theme files and deleted or changed the files by mistake.