We've just released one of our biggest features to date - fully optimised mobile templates for your ecommerce website. This allows you to target mobile specific customers with a much more refined and easy to use mobile version of your website. Even if you already have a site with us, with just a flick of a switch and a couple of amendments, you can transform it into a fully functioning responsive website for both desktop and mobile devices and, in turn, increase your conversion.
Your current template
The first thing to do is to see how your current template looks using our mobile feature. To do this just follow these steps:
Depending on how bespoke your design is will depend on how the site will look on a mobile. It may look absolutely perfect, like our demo website, and therefore you won’t need to make any amendments. Your site is now mobile optimised!
However, it may not work at all, like one of our internal test sites, and you will either need to make a few small changes to the current template and current layouts or create a new mobile template.
Making changes to your current template
The test site above has just a few issues that are causing it to render badly using the mobile feature.
The smaller square banners are set as a fixed width of 316px each. What this means is that these images will only ever show as 316px wide, so three going across the page, plus the padding in-between will have a fixed with of 960px. This is too wide for a mobile and can be fixed by assigning a different block to the mobile layout for the homepage.
Having removed the square banners block and replaced it with the Selected Products block you can already see the site improving on mobile devices.
The navigation bar doesn’t render at all on the mobile site. This is because the desktop version uses the header background as the background image for the navigation bar. Also there is some bespoke CSS creating the drop-down arrows on each link. This will need to be tweaked on the template to create a more user friendly navigation for all devices.
Having done this, as well as removing the bespoke CSS for the down arrows, you can now see that the mobile site and desktop site render much better.
Lastly, the mobile version is currently using the Company Name set in Configuration > Company Options as the logo. To keep the two versions consistent you can assign the mobile version its own logo.
Having assigned a mobile header the site now looks much more consistent with the desktop site.
With a few minor changes to the current template the website is now optimised for mobile devices.
Creating a new template for mobile
You can, of course, create a completely separate template for mobile devices. This can be done either by making a copy of your current template or the Bluepark-glass template and making any changes.
Currently, we suggest using this method if you have code within the Product Detail Page field in the Custom HTML tab in your default template. This is because the custom code uses a two column layout for the product page which does not render correctly on a mobile.
If you wish to use custom code within your newly created mobile specific template you must make sure this is designed as a one column layout.
Changing content shown on mobile
There may be times when you want to show your customers different content on mobiles to what is shown on the desktop version. This could be something as specific as the example above where the content has a fixed width and therefore won’t display correctly on mobiles or it may be that you want to target certain content to your mobile users. Therefore, there are certain areas within the admin console where you can make changes to what content is shown on different devices.
Assign mobile specific layouts
You can assign different layouts for mobile devices, allowing you show different blocks.
On the Properties tab you can also set if that particular layout should have the Catalogue/Information menu maximised by default and if the Search block should automatically be displayed on mobile devices.
On the Catalogue tab you can also set the number of columns that particular layout should display of both categories and products.
Assign mobile specific page content
In the Page Editor add any mobile specific content to the Mobile Content field and it will override the Page Content field when viewed on a mobile.
In the Category Editor add any mobile specific content to the Mobile Content field and it will override the Page content (above list) only. Any content within the Page content (below list) will still show on mobiles.
In the Product Editor add any mobile specific content to the Mobile Content field and it will override the Page Content field when viewed on a mobile.
To access the Mobile Content field on any of these sections you will need to make sure Split Screen is un-ticked at the top of the page.
Let us know how you get on setting your website to mobile optimised and if you have any problems don't hesitate to email firstname.lastname@example.org