Setting up a mobile responsive version of your site is easy but does involve a few steps. This guide will help you through the process.
Firstly you need to decide at which size the mobile template will show. Most sites work well on tablets and iPads without any changes, so we’re going to base this guide on creating your mobile site specifically for mobile phones.
Mobile phones tend to be 480 pixels wide (or less) so we’ll use that size as our ‘adaptive’ point.
Most mobile sites work best with a single width layout. You may be using 2 or 3 columns on some of your pages, so you’ll need to create mobile versions for those pages.
You’ll probably want to create the following mobile layouts:
We now need to assign the mobile layout, for this example, we’ll start with the Home layout.
Do this for all the other layouts.
Go to Configuration > Templates and you’ll see that there’s a mobile version of our Cleanshop template, which is our most popular standard template. You can easily customise this template so it suits your website styling better.
Don’t forget to save any changes you make.
Go to Configuration > Templates and open the default template.
This will now mean that the mobile template is the one that is shown when someone views the site on a screen width of 480 pixels or less.
Now view your site on a mobile device. It should look something like this:
If the images in your product panels (featured products, latest products etc) are too small, you can copy those panels and change the number of products across. Typically mobile ecommerce sites work best showing 1 or 2 products across.
Use the panel name field to help identify that it’s a mobile panel. The panel title is the one that’s shown on the site.