Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to add images to product description


elizamoraes

Question

Recommended Posts

  • 0

@elizamoraes

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

The poster has already done the follwing step. If you have not, add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Replace the previous code in Store Settings > Advanced > Page Header Code Injection with the following.

<!--

  begin add images to product detail page based on tags
  
  SS Versions     : 7.0, 7.1
  
  v7.0 Templates  : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                    Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt,
                    Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor,
                    Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro,
                    Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella, Thorne,
                    Vow, Wav, West )
                    
                    your template is not listed? then it is not currently
                    supported
                    
  Notes           : the code is comprised of several tags. all are needed for
                    the full effect to work
                    
                    the images are added at the top of the product details
                    area ( between title and price ) of the product detail page
                    
                    this effect is not active in SS Preview to test it use
                    private browsing < https://bit.ly/3f6lhq2 >.
                    
  -->
  
  <style>
  
    #tc-image-tags img {
    
      width : 100px; /* width of images */
      
      }
      
    </style>
    
  <script>
  
    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',
      
      };
      
    </script>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    #tc-image-tags {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      -ms-flex-wrap : wrap;
      flex-wrap : wrap;
      
      -webkit-box-pack : center;
      -ms-flex-pack : center;
      justify-content : center;
      
      margin-bottom : 25px;
      margin-top : 0;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( window.frameElement !== null ) return; // bail if in Preview
      
      if ( ! $( '.ProductItem' ).length ) return; // bail if not product detail
      
      const tags = $( '.ProductItem' )
      
        .attr ( 'class' )
        
        .split ( ' ' )
        
        .filter ( clss => clss.startsWith ( 'tag-' ) )
        
        .map ( ( tag ) => {
        
          return tag.slice ( 4 );
          
          } )
          
        .filter ( tag => tagImageUrlMap [ tag ] !== undefined );
        
      const $imageTags = $( '<div id="tc-image-tags">' );
      
      $.each ( tags, function ( i, tag ) {
      
        const url = tagImageUrlMap [ tag ];
        
        $( '<img>' )
        
          .attr ( 'src', url )
          
          .appendTo ( $imageTags );
          
        } );
        
      $imageTags.prependTo ( '.ProductItem-details-checkout' );
      
      } );
      
    </script>
    
  <!-- end add images to product detail page based on tags -->

This is for v7.0 using the Brine template family and v7.1.

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

@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
  • 0

See this similar thread where I posted a solution:

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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.

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

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

@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
  • 0

@elizamoraes

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.1d3/twcsl.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<!--

  begin add images to product detail page based on tags above additional info
  
  Version         : 0.1d1
  
  SS Versions     : 7.0, 7.1
  
  v7.0 Templates  : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed,
                    Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact,
                    Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta,
                    Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva,
                    Pedro, Pursuit, Rally, Rover, Royce, Sofia, Sonora,
                    Stella, Thorne, Vow, Wav, West )
                    
                    your template is not listed? then it is not currently
                    supported
                    
  Dependancies    : jQuery
                    
                    twcsl
                    
  Notes           : the code is comprised of a several tags. all are needed for
                    the full effect to work
                    
                    the images are added at the top of the Additional Info area
                    of the product detail page
                    
                    this effect is not active in SS Preview to test it use
                    private browsing < https://bit.ly/3f6lhq2 >.
                    
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <script>
  
    const columns = 4; // use one of the following values 1, 2, 3, 4, 6, 12
    
    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
        
        */
        
      // '[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',
      
      };
      
    </script>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    #twc-image-tags {
    
      margin-top : 5vw;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( window.frameElement !== null ) return; // bail if in Preview
      
      if ( ! twcsl.storePage.isDetail ) return; // bail if not product detail
      
      const tags = twcsl
      
        .storePage
        
          .tags
          
          .filter ( tag => tagImageUrlMap [ tag ] !== undefined );
          
      const rows = Math.ceil ( tags.length / columns );
      
      const span = 12 / columns;
      
      const $section = $( '<section id="twc-image-tags">' +
      
        '<div class="sqs-layout sqs-grid-12 columns-12">' +
        
          '</div> <!-- end grid -->' +
          
        '</section>' );
        
      const $grid = $( '.sqs-grid-12', $section );
      
      let count = 1;
      
      for ( r = 0; r < rows; r++ ) {
      
        let $row = $( '<div class="row sqs-row">' );
        
        for ( c = 0; c < columns; c++ ) {
        
          const tag = tags [ count - 1 ];
          
          const url = tagImageUrlMap [ tag ];
          
          $( '<div class="col sqs-col-' + span + ' span-' + span + '">' +
          
            '<img src="' + url + '" style="height : 100%; width : 100%;">' +
            
            '</div>' )
            
            .appendTo ( $row );
            
          if ( count == tags.length ) break;
          
          count++;
          
          }
          
        $row.appendTo ( $grid );
        
        }
        
      $section.insertBefore ( '.ProductItem-additional' );
      
      } );
      
    </script>
    
  <!--

    end add images to product detail page based on tags above additional info
    
    -->

This is for v7.0 using the Brine template family and v7.1.

Let us know how it goes.

Edited by creedon
version 0.1d1

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

Link to comment
  • 0

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

Link to comment
  • 0

@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
  • 0

Hi @creedon!

Thank you for sharing this code.

I am looking for a way to also display select tag information on a product description page. Very similar to what @elizamoraes was looking to accomplish except ours do not have to be images. it can just be plain text (but of course, text images can be easily done if that is the way to achieve it).  The portion we are trying to address is highlighted on screenshot below. we are now adding details for that section by copying and pasting the text from a master list which is not ideal.
I tried testing the code you provided by adding the tags on your code to one of our products but was not able to it make work. Settings > Advanced > Code Injection code is in place, and rest of the code is in header section of store page that contains the test product.

Here is the link to that product:

https://www.aria-atl.com/prodswinelist/wine-tyt-bgty-9gbx4-zty8p

Any advice is greatly appreciated!

Screen Shot 2021-06-28 at 11.30.50 AM.png

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