How do I setup a mobile website?

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.

 

Step 1 – Create your mobile layouts

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.

1. To do this go to Configuration > Layouts and either copy an existing layout or create a new one.
2. Give the layout a name like ‘Category Page Mobile’ so you can easily identify it.
3. Ensure it’s a full width layout and then Save

1. In the Centre Panels tab, select the panels you want to display on that layout. It may be just the page content or you may want to select additional panels like the featured products panel.
2. Ignore the responsive tab for now.
3. Save the panel.

You’ll probably want to create the following mobile layouts:

• Home Mobile
• Account Mobile
• Blog Mobile
• Category Page Mobile
• Checkout Mobile
• Product Page Mobile

 

Step 2 – Assign the mobile layouts

We now need to assign the mobile layout, for this example, we’ll start with the Home layout.

1. Go to the standard Home layout and click on the responsive tab.
2. Click the New icon and in the fields type 480 in to the ‘screen width’ field and select the Home Mobile layout in the Layout drop down field.
3. Save.

Do this for all the other layouts.

 

Step 3 – Customise the mobile template

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.

1. Copy the template by clicking the blue copy icon in the right hand column.
2. Open up the template and make any changes you need or want to. You’ll need to upload your logo (Header > Logo)...you might also want to change the header, navigation and footer colours/graphics. As a rule, mobile sites tend to work best with simple flat colours and graphics.

Don’t forget to save any changes you make.

 

Step 4 – Set the default mobile template

Go to Configuration > Templates and open the default template.

1. In General > Responsive, click the New icon and in the fields type 480 in to the ‘screen width’ field and select the Cleanshop Mobile template (or your customised mobile template) in the Template drop down field.

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:

 

Tips:

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.