Adding a Mobile Theme
The Magento Go Mobile theme is a “lite” version of your store with all the essentials, including the search box, product pages, CMS pages, shopping cart and customer account. The idea is to include only the information that is necessary to help shoppers find what they are looking for and complete the checkout process.
How Does It Work?
A mobile device is detected in the same way that your store detects different browsers. When someone visits your site from a mobile phone, your store detects the mobile browser and serves up the mobile theme, rather than your standard desktop theme. It all happens behind the scenes and is transparent to the user.
Setting Up Your Mobile Theme
The Magento Go Mobile theme is easy to set up. Before you begin, take a few moments to explore the sample mobile theme to become familiar with the layout. The next step is to brand the theme for your store by choosing your colors, and adding your logo, background image, and banner. Finally, the last step is to click a checkbox to go mobile. That’s all there is to it!
Mobile Theme Layout
This image provides only an example of the general style and layout of the mobile theme. To achieve the look you want, you may need to add custom images and update the CSS.
Step 1: Preview the Mobile Theme
- From the Admin panel, select Design > Themes Editor.
A thumbnail image of the mobile theme appears in the Current Themes panel on the left.
- Click Preview to open the theme in a new browser window.
Just as with a desktop theme, you can click each menu option, category, and product to become familiar with the layout.
Step 2: Customize the Mobile Theme for Your Store
- From the Themes Editor, in the Current Themes panel on the left, click the Customize button for the Mobile theme.
- In the Theme Information section, do the following:
- Enter the Theme Name for your reference.
- Enter the Theme Description for your reference.
- Later, when the theme design is complete, you can return here to upload the Theme Thumbnail.
Mobile Theme Information
- In the Theme Customization panel on the left, select Design Settings Editor. Then, do any of the following:
The values must begin with the # symbol, followed by the hexadecimal value of the color. For example, #B114FF is the hexadecimal code for violet.
- Enter the color for the Header background.
- Enter the color for the Footer background.
- Enter the color for the Category Title background.
Header Background Color
- Select the font color for the Category Title and Footer Links.
- Select the background color of the Subscribe button.
- Click to expand the Image section. Then, do the following:
Header Background Image
- If you want to use a background image, browse to find the image for the Header Background, and click Open to enter the path and filename. The recommended width of the background image depends on the size of the display. Here are a few examples:
Image Width by Device
|iPhone 4, 5||640 px
|Samsung Galaxy S3||720 px
|iPad mini||768 px
|iPad with Retina display||1536 px
- Browse to find your logo image, and click Open to enter the path and filename.
- The recommended size for the logo is 42 x 42 pixels.
- Click to expand the Banner section. Then, do the following:
- Browse to find the image that you want to use for the banner, and click Open to enter the path and filename. (See the previous examples of image width by device.)
- Enter the URL of the page that is linked to the banner.
- To create a relative reference a page in your store, you can use the “store url” markup tag as a shortcut.
Mobile Theme Banner
Step 3: Activate your Mobile Theme
In the Current Themes panel on the left, under the Mobile theme image, select the Enable Mobile theme checkbox.
Your mobile theme is now live!