Related Products Heading not appearing in section

Site URL: https://yarradayspa.com.au/online-beauty-store/hydra-24-crme-glace

Hi 

I've got a site on the rally template which is not displaying the heading (You might also like)  for the related products. It means that the images for the related products are appearing almost touching the image of the actual product the website visitor is looking at so looks really weird. 

I've contacted and this was their response 

I can confirm that we are experiencing an issue where the default "You Might Also Like" section title for related products is not rendering properly. We’ve noted this for our Design and Engineering teams to review, and they’ll use this feedback when implementing fixes and improvements in future releases.

Please keep in mind that there are many moving parts we need to address before any changes are made, and we can't guarantee changes to this behavior in the immediate future. That said, all feedback is reviewed and your continued input is always encouraged.

For the time being, you may want to consider customizing the text or letter case of the section title in the Related Products panel (Commerce > Related Products). Since this is only affecting the default text, that should clear up the issue for you. 

Does anyone have some CSS code to target that heading/section title? I've tried a few different things but so far no luck, any suggestions would be appreciated.
 

Add to Home > Design > custom CSS

/* Product related title */
.ProductItem-relatedProducts-grid:before {
    content: "You may also like";
    display: block;
    margin-bottom: 10px;
    font-size: 2rem;
}

On 9/22/2020 at 11:38 PM, tuanphan said:

/* Product related title */ .ProductItem-relatedProducts-grid:before { content: "You may also like"; display: block; margin-bottom: 10px; font-size: 2rem; }

I have just tried this code on my website; 

https://gopher-blue-48ch.squarespace.com/mama-moon-shop/p/candles/moon-ritual and it didn't work.  

any other suggestions?

3 hours ago, MamaMoon said:

I have just tried this code on my website and it didn't work.

Please post your site-wide password password here and then we can take a look at your issue.

all I did was add ... to the default and it works fine

You Might Also Like...

On 9/22/2020 at 6:38 PM, tuanphan said:

/* Product related title */ .ProductItem-relatedProducts-grid:before { content: "You may also like"; display: block; margin-bottom: 10px; font-size: 2rem; }

I tried this out and it doesn't seem to work? Any chance anyone could help me out? I would also like to use the same font as my product titles.

Thanks!

https://www.terroir-imports.com/products/bourgogne-blanc-2018-mark-haisma

@tuanphan @creedon

@codefordummies

I tried @tuanphan's code on your site here locally and it works.

Did you put it in Custom CSS as mentioned in tuanphan's post?

If you are trying to put in Store Settings > Advanced > Page Header Code Injection wrap it in a style tag.

<style>

  /* Add a margin on top of related products area */
  
  .ProductItem-relatedProducts {
  
    margin-top: 3vw;
    
    }
    
  /* Product related title */
  
  .ProductItem-relatedProducts-grid:before {
  
    color: #222;
    content: "You may also like";
    display: block;
    font-family: din-condensed-web;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: .075em;
    line-height: .9em;
    margin-bottom: 1em;
    text-transform: uppercase;
    
    }
    
  </style>

Let us know how it goes.

22 minutes ago, creedon said:

@codefordummies

I tried @tuanphan's code on your site here locally and it works.

 

Did you put it in Custom CSS as mentioned in tuanphan's post?

If you are trying to put in Store Settings > Advanced > Page Header Code Injection wrap it in a style tag.

<style>

  /* Product related title */
  
  .ProductItem-relatedProducts-grid:before {
  
    content: "You may also like";
    display: block;
    font-size: 2rem;
    margin-bottom: 1em;
    
    }
    
  </style>

Let us know how it goes.

Is there a way of adding more space between the product (Mark Haisma Bourgogne) pictures and the "You may also like"? Also how could I change the font to match that of the product title?

Thanks 🙂  @creedon

1 hour ago, codefordummies said:

Is there a way of adding more space between the product (Mark Haisma Bourgogne) pictures and the "You may also like"? Also how could I change the font to match that of the product title?

I updated my previous post. Remember to keep or delete the style tag depending on where you are putting the CSS.

8 minutes ago, creedon said:

I updated my previous post. Remember to keep or delete the style tag depending on where you are putting the CSS.

Thank you @creedon!!!!!