Creating a Mobile PrestaShop Theme

September 14, 2012 Alex Zaymund Mobile, Prestashop
Creating a Mobile PrestaShop Theme

When I was making my first PrestaShop Theme, an idea crossed my mind (not a fresh one though): it would be great to create a mobile version of the theme besides a desktop one. At the very beginning I was in some difficulty: it was impossible to delimit desktop and mobile PrestaShop templates. However both our complete devotion and new possibilities of CSS 3 allow us to create unique things easily. We can improve internet sellers’ lives and display their products to customers, no matter what device they use to access the eShop.

As soon as the desktop template is ready, we create a new style sheet for small screen devices with the help of Media Queries. First, let’s set the “float: none” markup option in all the columns to destroy the habitual layout appearance. Next, let’s set the width by percent and enlarge the buttons size. After all we have a long single column. However the left column covers the content with products making it user-unfriendly.

To solve this problem, we use JavaScript. As of today, all smart devices are familiar with this scripting language. With the help of CSS for mobile devices we hide the content of all the blocks in sidebars and leave the title only. We define the width of the user’s browser window in the script to ensure that the small screen devise is being used and write a function that opens the hidden blocks in sidebars after pressing on the title.

To make it more convincing, we add arrows. Now users can access all the required information, hidden by our sidebars, easily.

 

 All we have to do is to test and perfect our new styles. Let imagination do the work or have a talk with a designer over coffee. After all, our template is ready: all new and shiny, it works impeccably. Width of the site adapts to the width of the device screen because we didn’t forget about the viewport. Finally, we test the site in Opera Mini, anticipating with exultation. But… we fail to pass the Opera test. The thing is that this browser processes all the styles mixed together, no matter how wide the screen is. What do we do now?  Our heavy artillery goes into battle. On PHP, we create a module that checks if a user uses Opera Mini. If he or she does, we use our mobile styles, if doesn’t – we display a desktop version. Now everything’s OK.

Here you can download the module.



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *