Home / Prestashop Module Tutorials / Ap Page Builder / How to Add Swipe Image Feature in Mobile version | Ap Pagebuilder module 2.2.7
how to add swipe image feature in mobile version
how to add swipe image feature in mobile version

How to Add Swipe Image Feature in Mobile version | Ap Pagebuilder module 2.2.7

In the previous blog, we introduced to you the newly updated features of the Ap Pagebuilder module version 2.2.7. These advanced features are to improve the website’s speed and enhance the user’s experience.

  • Support mobile theme and tablet theme
  • Apply lazy load for images of the whole website
  • Allow input image link and image data
  • Duplicate data for languages
  • Change cache to default and remove redundant queries
  • Fix error wrong image URL in multiple shops
  • Add Swipe Image  Feature in Mobile version

In today’s blog, we will go into the last feature and guide you on how to add the swipe image feature in the mobile version.  Now let’s get started.

I. Swipe Image Feature in Mobile version – Ap Pagebuilder version 2.2.7

There are 2 configurations added to the feature Swipe Image namely swipe image for product list and swipe image for product details.  This feature is only applied in the mobile version.

Normally, a product can have many images and these images will be displayed on the product page in the form of small thumb images.

add many images for a product
add many images for a product

 

display product as thumb images
display product as thumb images

 

These images are displayed perfectly on the desktop. However, on such small screens like mobile, these thumb images will be somehow glitzy and troublesome for viewers. For this reason, this feature is created.

II. Configure Swipe Image Feature in Product List and Product Details 

To configure for the swipe image feature, in the admin panel, you go to Ap Pagebuilder >> Ap Theme Configuration

configure swipe image feature in backend
configure swipe image feature in backend

 

  1. Configure swipe image for Product List

In the powerful back-end panel, there is an available button for you to enable the swipe image feature for the Product list. You can go to tab: Use Swipe image in Product List (Mobile) then click Yes:

Configure Swipe Image for Product List
Configure Swipe Image for Product List

 

Now you can save and go to Front-end then see the change.

before adding swipe image feature in product list
before adding swipe image feature in the product list in mobile

 

after adding swipe image feature in the product list in mobile
after adding swipe image feature in the product list in mobile

 

As you can see, on mobile, product images are displayed tidily by dots. You can click on these dots to see other images for the same product. At the same time, we remain the horizontal scroll feature of the product carousel so that you can view other products on the same product list.

 

2. Configure swipe image for product details

Similar to it in the product list, you can enable tab: Use Swipe image in Product Detail (Mobile)  to use swipe image feature in the product details page. 

 

configure swipe image feature in product details
configure swipe image feature in product details

 

Now you can see the change in the Frontend

before adding swipe image feature for product details in mobile
before adding swipe image feature for product details in mobile
 

after adding swipe image feature for product details in mobile
after adding swipe image feature for product details in mobile

 

 

Actually, it still looks good with product thumb images. However, it becomes inconvenient when displayed on mobile. The reason is that, on one hand, with a short and small screen like mobile, you will have to spend time scrolling down to see these thumb images. On the other hand, you also have to click on the 2 buttons Next and  Prev to swipe image, which is considered quite bothersome on mobile.

To put it in a nutshell, the Swipe image feature makes the product images displayed simpler and neater with one main image. You can use your finger to swipe from one to others on the same main product frame. We hope that you will enjoy this feature.

Please feel free to let us know in the comment box what you think about this improvement of the Ap Pagebuilder module or anything you can add to improve it. We appreciate that.

 

 

About Luu Ly

Check Also

error cms page empty ap page builder prestashop module

Fix Error CMS Page Empty || Ap Pagebuilder Prestashop Module

CMS is designed to help users create and manage their websites. With themes integrated with …

Leave a Reply

Your email address will not be published. Required fields are marked *