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.

1

2

3

4

5

6

7

if(bodyWidth<=480){

$(".block h4").click(function(){

$(this).next('.block_content').toggle()

})

}

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.

Alex Zaymund is experienced in cross-browser front-end development. He is mostly working with LAMP platform and has a huge experience with all the versions of Magento platform.

Front-ends of Alex are all user-friendly and work properly on iPads, any desktop and mobile devises. So far he has mastered HTML, CSS, Javascript/jQuery. Alex took the 1st place in oDesk Magento test. He is one of the best developer of BelVG eCommerce Development company.

Prestashop Promo Blocks module will let you create and place additional product blocks to pages of your online store. The module allows placing unlimited number of blocks to the left and right sides of a page and assign any product you want for each of them. You can assign 1 product to 1 block – but make any number of block combinations to the page – essentially if you want 3 products advertised in the left column you create 3 product blocks in it.

Key features:

Create extra blocks to be displayed on your website pages;

Blocks are displayed on all pages, including home, product and category pages;