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

How to add variant text below product image?


Go to solution Solved by creedon,

Recommended Posts

Site URL: https://cecilssheshed.squarespace.com/handcrafted-ring-dishes/p/valentines-collection

Hello! In a store page, for a product with variants, I see I can add a variant thumbnail image. When a customer views the product images (gallery), how do I add a title for that variant?


I want the customer to know what variant they are looking at when viewing the image vs having to select the drop downs to trigger the picture to change.
Example: See Red arrow 

Screen Shot 2021-02-12 at 1.36.29 PM.png

Link to comment
  • 2 weeks later...
  • Solution
Posted (edited)

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>

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

<!--

  begin add product item variant text to corresponding image as badge

  SS Version : 7.1
  
  the code is comprised of a style and script tag. both are needed for the full
  effect to work
  
  -->
  
  <style>
  
    .tc-ProductItem-variant-image-title {
    
      background-color : black;
      bottom : 2%;
      color : white;
      font-family : 'Amatic SC';
      font-size : 24px;
      font-weight : 600;
      left : 0; /* use to push the badge right */
      padding : 0 0.5em;
      position : absolute;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      const imageIdTileMappings = {
      
        }
        
      $.each ( Static.SQUARESPACE_CONTEXT.product.variants, function ( i, v ) {
      
        imageIdTileMappings [ v.mainImage.id ] = v.mainImage.title;
        
        } );
        
      $( '.ProductItem-gallery-slides-item' ).each ( function ( ) {
      
        let $this = $( this );
        
        const dataImageId = $this.attr ( 'data-image-id' );
        
        const title = imageIdTileMappings [ dataImageId ];
        
        if ( title == undefined ) return true;
        
        $( '<div class="tc-ProductItem-variant-image-title" />' )
        
          .text ( title )
          
          .appendTo ( $this );
          
        } );
        
      } );
      
    </script>
    
  <!-- end add product item variant text to corresponding image as badge -->

This is for a v7.1 site and is specific to the OP's needs.

I couldn't find a clean way to add the title per your posted image. I ended up adding it as a badge in the lower left corner of the image.

946214541_ScreenShot2021-03-05at8_39_07PM.png.e3031030578f41996769369a60af893c.png

Let us know how it goes.

Edited by creedon
version 2

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

Link to comment
  • 3 weeks later...
3 hours ago, JDisney said:

how do I move the variant text up or down?

You can move it up but not down.

It's going to be a little tricky getting things pixel perfect in that area. I have updated my code post. The badge will not be perfectly in the corner but hopefully will ride pretty close to the bottom. You can change the percentage for bottom or you can even use other units such as px.

You can push it to the right, if you want with the left property I added.

left : 15px;

The reason for the changing position of the banner in different situations is SS, probably, handles the CSS/Javascript a little differently between desktop and mobile.

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

Yikes looking at another of your questions I discovered another issue with the code. When you have tall/narrow images mixed with short/wide images in the same gallery the badge is not in a good place for tall/narrow images.  Makes perfect sense now that I see it! 🙂 Doh! I'll need to cogitate on this one a bit.

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

Link to comment
  • 1 month later...
Posted (edited)

Trying to use this (just what I was looking for) code but not getting anything displayed.

Here's an example page:
https://shop.hopeindustrial.com/products/p/15-panel-mount-monitor

  • ajax js added to site header & confirmed
  • script added to product page header & confirmed
  • variant image assigned to each possible variant (the kid on the bike for testing)

Still nothing.  Any idea?  Maybe does not work with compound/complex variants?

Edit:  I think this has something to do with the text to be displayed ("title" mentioned above) - don't have this on my variants but not seeing where to add it.

Edit Edit:  Its the image title, duh! 

thanks!

djm

Edited by djm1
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...