User Guide for Prestashop Product Pictogram

Prestashop Product Pictogram: 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 multi-store feature.

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

• 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.

• 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.

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.

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.

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.

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.

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.

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.

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.

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.

Border width & border colour

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

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.

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.

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

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.

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.

For any kind of technical assistance or query, please raise a ticket or send us a mail at support@webkul.com

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