How to add images to product description

Site URL: https://bagpipe-violet-h8z2.squarespace.com/config/pages/5ebd7b9b904f6177ca2deaef/categories/6040f3d8a6b85505ec2c2c5a

Hello,

I would like to add some icons/images to the product description such as the image attached. Do someone knows a custom code (css) to display them as images ?

Thanks

See this similar thread where I posted a solution:

@paul2009 Thank you!
I tried to put more than one, but when I entered the second one the first disappears. 

27 minutes ago, elizamoraes said:

I tried to put more than one, but when I entered the second one the first disappears. 

Hi Elizabeth

That's correct, that's what the CSS is designed to do. In the original post, a simple CSS solution was possible because Emily only required one image to be shown at a time. Each image included all three icons, with one icon highlighted and the others having less opacity. The CSS would select one of these to be shown at a time.

If you need to display different combinations of individual icons then you'll need a more complex JavaScript solution. To write the JavaScript, we'd need to know a few more details. For example, are the required icons, just the four you've shown in your screenshot?

• Équitable
• Fabriqué en Europe
• Naturelles
• Vegan

-Paul

@paul2009
Thank you for the explanation. 
No, there're more : https://www.caminoboutique.fr/nos-criteres

Actually there're more that can appear but it will depends on the product and the tags selected...It will never be the 12 together.. maybe 5 or 6 together..

On 3/6/2021 at 6:07 AM, elizamoraes said:

Actually there're more that can appear but it will depends on the product and the tags selected...It will never be the 12 together.. maybe 5 or 6 together..

Hi. Have you solved it yet?

@tuanphan @paul2009 hello, I'm still trying to add more images to the description. Do you know the JavaScript code for that ? Thank you.

@elizamoraes Did you solve it?

@tuanphan @paul2009 no! no answers..

I am looking for this solution as well @tuanphan @paul2009... I require multiple icons representing tagged ingredient allergens for a bakery. I have 8 possible icons which could be displayed. Any insight?

I am working in 7.0 - Foster template.

https://pineapple-cube-b4yy.squarespace.com/
pwrd: Jayce2.0

9 hours ago, Agentsie said:

I have 8 possible icons which could be displayed. Any insight?

I'm cooking up some code. Can we see your icons? You could throw them on a page in the not linked area and give the url for that page.

Or Upload files and paste the url for the uploaded file here. If you go this route be very careful that you don't mess up your custom CSS. I find adding couple of blank lines above or below the current CSS as a buffer helps. Be sure to remove the urls when you are done. Or, better yet use Cancel so no changes will be saved.

Actually the images can be anywhere as long as you can give me the urls.

In the following images you can see icons added to the product detail in the additional info area based on tags added.

Once I have the urls I can do some testing with your site to see how I need to tweak my prototype code.

@elizamoraes

I may be able to help you as well. First I have to get a working version out. My current code is for v7.0 but it should be adaptable to v7.1

If you could provide the URL for a product detail page on your site with some tags you've added that would help me down the road.

@creedon

Thank you, here's the link for a product detail page (not finished): https://www.caminoboutique.fr/homme/p/lily-9bjps
Tag names: coton, chanvre, lin, fibre ecologique, fibre recyclé, unisexe, vegan, upcycling, commerce equitable, fabriqué en bretagne, fabriqué en france, fabriqué en espagne, fabriqué en europe. 

And here's the page where you can find all the images I want to add according to the tags mentioned (there're 12, just one that is not there the "fabriqué en europe". 

https://www.caminoboutique.fr/nos-criteres

The product is not gonna have the 13 tags at once, it will depends on its characteristics. 
 

@elizamoraes

Please see Add Images to Product Detail Page Based on Tags Above Additional Info.

Following is an example setting for tagImageUrlMap.

    const tagImageUrlMap = {
    
      /*
      
        the format of each line is a tag as appears in the SS Product page
        interface and an image URL
        
        copy and repeat the line below for each mapping, remove the "// " at the
        beginning of the line and enter the appropriate data. this has been done
        once initially
        
        */
        
      // '[enter tag here]' : '[enter image url here]',
      
      'chanvre'             : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267971684-1IF105OEI4B6XI0W1GDI/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+de+chanvre',
      'commerce-equitable'  : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268308127-YQP0SA25LL1AADHITEF0/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/commerce+equitable',
      'coton'               : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267886476-E5GICTULTY5MD5TYV4R4/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Coton+biologique',
      'fabriqu-en-bretagne' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268443787-B3T4GA6W5T3J42ZGRFU1/ke17ZwdGBToddI8pDm48kFBrwAqVMVe6YMvCRUfVHkV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UbX00RdHGEtHQ765vDpm33fR-nahLRdlIB57_C9H3YJiMW9u6oXQZQicHHG1WEE6fg/Fabrique+en+bretagne',
      'fabriqu-en-espagne'  : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1593073740143-Z91D2AHZCIS8LEZX08YJ/ke17ZwdGBToddI8pDm48kFBrwAqVMVe6YMvCRUfVHkV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UbX00RdHGEtHQ765vDpm33fR-nahLRdlIB57_C9H3YJiMW9u6oXQZQicHHG1WEE6fg/Fabrique+en+espagne',
      // 'fabriqu-en-europe' : '',
      'fabriqu-en-france'   : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268353403-E718QG323BR2BXDO9LV9/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/fabrique+en+france',
      'fibre-ecologique'    : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268001210-E6FPI5559JRED5WO9FCX/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+ecologique',
      'fibre-recycl'        : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1594238143847-J9EJA64CVP6SLXXY965B/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+recycl%C3%A9e',
      'lin'                 : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267922316-KC43DRIHFJX6NNVBIL3T/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+de+lin',
      'unisexe'             : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268157736-F20IPEFUQN7AZUAZ6MQA/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Unisexe',
      'upcycling'           : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268178661-YIQLD6FFLL4E5GA2Z15N/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Upcycling',
      
      };

Let us know how it goes.

@creedon Thank you. But unfortunately, nothing happened 😕 I can give you a temporary access to the website if you want to check it out. 
I had another code in the Settings > Advanced > Code Injection > HEADER. Maybe there's something going wrong there?

@elizamoraes

The code I provided has not been installed per my instructions. Some of it is installed in the wrong place and some of the code is missing.

Put ALL of the code per the instructions and the code will work.

@creedon

I checked all again and now the image is appearing, but under the product.

@elizamoraes

I tried to replicate what you had put on the page with the gallery.

In your original message you mentioned placing the images like the ones in the example image provided.

I think the images you have being made as small as the images in the example image will be problematic.

50px

100px

As far as the placement of the images on the page by the code that can be changed.

@creedon

Ah I wanted them to be placed on the top of the description (image attached).
I think 100px it will be fine. 

@elizamoraes

Replace my code in Store Settings > Advanced > Page Header Code Injection for the store page with the following.

Please see Store Product Detail Page Add Images Based on Tags.

For the tagImageUrlMap constant set it thusly.

    const tagImageUrlMap = {
    
      /*
      
        the format of each line is a tag as appears in the SS Product page
        interface and an image URL
        
        */
        
      // '[enter tag here]' : '[enter image url here]',
      
      'chanvre'             : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267971684-1IF105OEI4B6XI0W1GDI/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+de+chanvre',
      'commerce-equitable'  : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268308127-YQP0SA25LL1AADHITEF0/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/commerce+equitable',
      'coton'               : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267886476-E5GICTULTY5MD5TYV4R4/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Coton+biologique',
      'fabriqu-en-bretagne' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268443787-B3T4GA6W5T3J42ZGRFU1/ke17ZwdGBToddI8pDm48kFBrwAqVMVe6YMvCRUfVHkV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UbX00RdHGEtHQ765vDpm33fR-nahLRdlIB57_C9H3YJiMW9u6oXQZQicHHG1WEE6fg/Fabrique+en+bretagne',
      'fabriqu-en-espagne'  : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1593073740143-Z91D2AHZCIS8LEZX08YJ/ke17ZwdGBToddI8pDm48kFBrwAqVMVe6YMvCRUfVHkV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UbX00RdHGEtHQ765vDpm33fR-nahLRdlIB57_C9H3YJiMW9u6oXQZQicHHG1WEE6fg/Fabrique+en+espagne',
      // 'fabriqu-en-europe' : '',
      'fabriqu-en-france'   : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268353403-E718QG323BR2BXDO9LV9/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/fabrique+en+france',
      'fibre-ecologique'    : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268001210-E6FPI5559JRED5WO9FCX/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+ecologique',
      'fibre-recycl'        : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1594238143847-J9EJA64CVP6SLXXY965B/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+recycl%C3%A9e',
      'lin'                 : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267922316-KC43DRIHFJX6NNVBIL3T/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+de+lin',
      'unisexe'             : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268157736-F20IPEFUQN7AZUAZ6MQA/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Unisexe',
      'upcycling'           : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268178661-YIQLD6FFLL4E5GA2Z15N/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Upcycling',
      
      };

This code puts the images in a different place than the previous version. Also the layout is different, more suited to the product detail area.

Let us know how it goes.

@creedon

Thank you! It's all fine when we see it from the computer. 
But the mobile version has a little problem :/

I've just checked it on other mobile phones and apparently it's just on Iphones that it appears like that. 

@creedon
Yes! It's all fine now! Thank you so much