Reading list Switch to dark mode

    Prestashop Product Pictogram

    Updated 20 December 2023

    There is a very popular saying that a picture is worth a thousand words. In simple wording, an image can impart info so clearly that 1000 words might not. Hence, showing images instead of texts help you to convey the intended information clearly & allows you to catch the customer’s attention too. Generally, even we notice the images much earlier than the text on any poster/hoarding etc. It’s just that the human mind works that way. So, while keeping all the above points in mind, we are here with the Prestashop Product Pictogram module.

    But, before we go any further with the blog, let me just explain you what a pictogram is?

    A/c to Wikipedia, a Pictogram is a pictorial representation of the physical object. It aims to convey meaning through its resemblance to the real-life object.

    Now, let’s come back to the functionalities of this module. The module offers you to represent features of your product in the form of pictogram. While this module indeed enhances the shopping experience of the customer, it enhances the features of the product sheet as well. Some noteworthy features that this module brings with it are:

    • Pictorial representation of features.
    • Helps to easily convey the information to the customers with the help of pictures.
    • Grab the attention of customers as well as potential visitors.
    • It becomes easy to highlight the unique/important features of the product with pictograms.

    NOTE: Prestashop Product Pictogram module is compatible with PrestaShop version 8.x.x and multi-store feature.

    Searching for an experienced
    Prestashop Company ?
    Find out More

    For the overview of the plugin check the video mentioned-below –

    Features of the module

    • Show pictogram for various features of the product.
    • Add pictogram icon for all the feature values.
    • Choose to enable or disable the module.
    • Enable the image fill option to fit the image fully inside the circle.
    • Provide image enlarge option on hovering the cursor over it.
    • Select the border colour of the pictogram circle.
    • Set the border radius & width of the pictogram circle.

    How to install the Prestashop Product Pictogram module

    • Firstly, go to the module manager in the back office and click on ‘upload a module’.
    • After that, drag and drop the module file or select the file from the system.
    • In this way, the module installation will be successful.
    Click to upload Prestashop Product Pictogram module
    Drop or select Prestashop Product Pictogram module file
    Prestashop Product Pictogram module installed on prestashop

    How to configure the Prestashop Product Pictogram module

    After the successful installation of the module, admin needs to configure the module.

    But before we proceed any further, let me just explain each option of the configuration settings.

    • Enable Module: Choose to enable or disable the module as per your convenience.
    • Image Fill: Select whether you want to show filled image inside the pictogram circle or not. I’ll explain this in detail later in the blog.
    • Border Color: Select the colour for the border of the circle.
    • Image Hover Enlarge: Enable to enlarge the pictograms on hovering the cursor over them.
    • Border Radius: Set the radius of the border in percentage between 0 to 50. Lesser the value, less circular box will display.
    • Border Width: Set the width of the border in pixels.
    • Preview: Based on the set border color, radius, and width, you can see the preview of pictogram.
    1-6

    Add pictures to the feature values

    After configuring the module, you will need to add a picture to the feature values. To do so, go to the catalog->Attributes & Features->Features.

    Admin dashboard

    In the features section, you can add new features & their corresponding values. In order to add new feature value, click on any one feature from the list.

    Features

    As per the below screenshot, here we are adding the new feature value for “Composition“. Apart from adding the new feature value, you can also choose to edit the existing one.

    Add or edit a feature value

    After clicking in the “Add new feature value” button, you will land on the following page. Here, firstly select the feature & then enter the value in the available field.

    On this page, as you may notice that a new option to add pictogram is also available now. So, in order to add the pictogram to this feature value, firstly click on the “Add File” button. After that select the picture from your system that you wish to upload here.

    On uploading the picture, you’ll be able to preview the image alongside the Pictogram field. Apart from this, you can also view the size of the uploaded picture.

    Add pictogram to a feature value

    Add features to the product

    Here comes the part where you will add the previously defined/added features to the product.

    In order to add the features to the product, firstly go to the edit product page. Under ‘Basic Settings”, you will find “Add new feature” button. Click on that button & select the feature & its corresponding value. After that, you can either select the pre-defined value of feature or enter the customized value.

    Now, save it & go to the product page at front-end.

    Add features to the product

    Pictogram at the product page

    On the product page, you can now see the pictogram below social share buttons. The pictogram for every feature will display here for which picture is uploaded.

    Pictogram of feature on product page

    Enlarge on hover

    As you can see, the second pictogram is somewhat enlarged than the first one. If the admin enables this option, the pictogram is enlarged on hovering the mouse over it.

    Enlarged pictogram on hovering the cursor over it

    Border width & border colour

    You can also customise the colour of the border & set the suitable width of the border.

    Customise border colour & width of pictogram

    Image Fill

    We can only see the effect of this functionality by enabling & disabling this option. So let’s just proceed.

    Firstly, I’m enabling this option.

    2-3

    Now, as you can see that the picture is fully filled inside the circle. There is no void space around it. This means that if you enable the image fill, the image will fit suitably inside the circle.

    Filled image on pictogram

    In the second case, let’s see by disabling the image fill option.

    3-3

    In the image below, as you can notice, the picture is not fully filled inside the circle. There is a void space above & below the picture. Therefore, if you disable the image fill option then the image will not be fully filled inside the circle.

    Picture not fully filled inside the circle

    This was all about the Prestashop Product Pictogram Module. I hope this document will help you in checking the functionality of the module in a better way. Also, do let us know about your views in the comments.

    Support

    For any kind of technical assistance or query, please raise a ticket or send us a mail at [email protected]

    Also, please explore our Prestashop development services and a vast range of quality Prestashop addons.

    Current Product Version - 4.0.2

    Supported Framework Version - 8.x.x, 1.7.x.x

    . . .

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content