The mobile view of the shop is optimised to be as simple to use and load as fast as possible. Therefore the design is simplified and everything extra has been removed. Here are some tips on how to change the design in a similar way as the classical view.
Since the possibilities to change the design for the mobile view are slimmer than for the classical view it's important that the content fields in the administration is filled with actual information. For example the logo should be uploaded on the Settings > General settings page. (In the classical view you can for example add the logo as a picture). Also the ready information pages (terms and conditions, contact information, privacy policy etc.) are not necessary to use, you could for example use regular content pages for that information instead. In the mobile view though, those information pages are used as links in the footer and should therefore have actual information. Check and test all the navigation links in the mobile view before you launch your shop.
The mobile home page design
For the classical view you can choose which description text fields (1, 2, 3 & 4) should be visible on the home page by changing the setting on the Content/categories > Datasheet view > Layout page. For the mobile view there is no setting like this, all the description fields are shown there. This makes it possible to show content in the mobile view that is not shown in the classical view. For example, add text in the "Long description (3)" and choose to only show the text fields 1 and/or 2 in the layout settings.
Preview of the mobile view
All pages in the shop can be previewed by clicking the "display mobile view" button in the administration.
You can also check the mobile view on your computer by changing the .sf part of the address to .mobile. This makes it easier to change and test CSS and jQuery code by using the web developer tool in the browser.
Change the design with code
Same as for the classical view you can change the mobile view by using CSS and jQuery code. The code is added on the Settings > General settings > Advanced settings for mobile view page so that it's used in the html area for all mobile pages.
Bigger logo
<style type="text/css">
.Header { height: 100px; }
.Header img.Logo { height: 90px; margin: 5px; max-height: 90px; }
</style>
Bigger product pictures in the product lists
<style type="text/css">
.Products .ProductSmallImage { max-width: 200px; max-height: 200px; }
</style>
Bigger product pictures on the product pages
<style type="text/css">
.ProductImage { max-height: 300px; }
</style>
Show the products below each other on the home page
The products on the home page is by standard shown in a single row where you have to scroll sideways to see more products. If you instead would like the products to show below each other and you would have to scroll down to see more products, it's possible to do that by adding this jQuery code:
<script type="text/javascript">
jQuery(function() {
jQuery('#ProductsSlidebox').after('<div id="NotSlideBox"></div>');
jQuery('#ProductsSlidebox ul').appendTo('#NotSlideBox');
});
</script>
<style type="text/css">
.Homepage .slidee li { clear: both; width: 85%; margin-bottom: 30px; }
.Homepage img.ProductSmallImage { max-width: 200px; max-height: 200px; }
</style>
Show the description on the product pages
As a standard the description on the product pages is hidden and is shown by clicking the header. The description can instead be shown straight away as standard by adding this code:
<script type="text/javascript">
jQuery(function() {
jQuery('.Article .ShowMore').click();
});
</script>
Category list open as standard
As a standard the category list is closed and you have to click it to open. The category list can be set to be open as standard with this code:
<script type="text/javascript">
jQuery(function() {
if(jQuery('div.FrontPage').length){
jQuery('.DropdownTrigger').click();
}
});
</script>
If you need help with changing the design of the mobile view, please contact our support!