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 post
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

I'm more than happy with what you provided and can't thank you enough! This is perfect! @creedon

Posted Images

  • 2 weeks later...
On 2/27/2021 at 8:03 AM, cat5934 said:

id like to know this too please for all images.

Can you share link to a variant product? Above link doesn't exist.

Link to post
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 post
  • 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 post

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 post

Create an account or sign in to comment

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


×
×
  • Create New...