Skip to content

Add Custom Attribute Icon Images Product Page

I am working with Argento and Made a Local Custom Theme. But this question can be answered for any theme including Luma

magento 2.4.3

What I want.

Place informative small icons images under the short description on product page.

These need to be done for over 30000 products so need to be done via csv import with the attribute columns for each icon image need to be filled with matching icon image name.

in csv columns are like

icon_image_1 –
icon_image_2
icon_image_3

The same icon image also has descriptive text which will be imported via csv again with separate columns for each image label

image_label_1
image_label_2
image_label_3

Some products may have icons some may not some may have 1 or more of these icons.
mockup

csv import

What I have tried:
Creating icon images as attribute type Media But this is showing the icon image inside images gallery.

Created Icon_image_labels as text attributes but these are only showing on product page in the More Information as image_label_1:

Followed several tutorials – none of them bring any results on the product page and I check it does not even call the phtml I created as part of the tutorial.

Only had some success with this tutorial
social media icons
It shows the 2 icons and url links however when I try to use the same principle with attribute names and paths to icon images – after adding values to products in admin – clear + flush caches and reindex – these are always blank and the file is not even called when checking with template path hints.

It shows the 2 icons and url links however when I try to use the same principle with attribute names and paths to icon images – after adding values to products in admin – clear + flush caches and reindex – these are always blank and the file is not even called when checking with template path hints.

From what I understand – I need to add in my local copy of catalog_product_view.xml /public_html/app/design/frontend/Local/my-theme/Magento_Catalog/layout

  1. code and reference of phtml file
  2. Where I want it to be displayed – beneath the short description

In my phtml file /public_html/app/design/frontend/Local/my-theme/Magento_Catalog/templates/product/view icons.phtml

Need to add code to check product and see if it has any values for icon_image_1 icon_image_2 icon_image3 and icon_image_label_1 icon_image_label_2 icon_image_label_3

If it does then display on product page.

I have spent several days and tried so many tutorials but cant seem to get it to show anything based on attributes and my custom phtml file.

Please can someone guide me through the full process and where the files should be placed.

I have uploaded the icon images in same location as they are showing for the tutorial (which do show for the tutrial because its not attribute based images) – and also created several other locations in my local and also under public_html var/import and pub_media directories.