Jump to content

How to add images to product description

Go to solution Solved by creedon,

Recommended Posts

See this similar thread where I posted a solution:

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 2 weeks later...
  • 2 weeks later...
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.

870110111_ScreenShot2021-04-03at6_16_41PM.png.ea7dcfc92f2b18b565b00903fd0a650c.png

 

219412674_ScreenShot2021-04-03at6_17_11PM.png.a307e3c6bdc40ed1c552e3780b013b22.png

 

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.

1391452853_ScreenShot2021-04-03at6_23_31PM.thumb.png.25637adda200aae46d6fc0953d458783.png

 

200257151_ScreenShot2021-04-03at6_24_07PM.png.435fb2507a482194f5ea1ba7cb254848.png

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

Link to comment

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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

1547681888_ScreenShot2021-04-08at11_16_58AM.png.620d71ccf3c672b5cc1786f4cb338ff8.png

100px

907282538_ScreenShot2021-04-08at11_17_22AM.png.43698d9fce73042344e2612b8cbc712d.png

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • Solution

@elizamoraes

I looked at a page with an icon on it on my ancient iPhone 5/iOS v10.x and the icon looked fine.

If you scan down your installed code and find the line...

width : 100px; /* width of images */

...and make it look like...

height : 100px; /* height of images */
width : 100px; /* width of images */

...that may take care of the issue.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.