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

Related Products Heading not appearing in section

kieren.yen

Asked by kieren.yen,

Followers 7

Question

kieren.yen    6

kieren.yen
Posted

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.
 

Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

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 St

creedon

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

codefordummies

Thank you @creedon!!!!!

Posted Images

9 answers to this question

Recommended Posts

  • 0

MamaMoon    0

MamaMoon
Posted
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?

 

Link to post
  • 0

creedon    222

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

codefordummies    6

codefordummies
Posted (edited)
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

Edited by codefordummies
forgot website link
Link to post
  • 0

creedon    222

creedon
Posted (edited)

@codefordummies

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

265569928_ScreenShot2020-10-24at3_10_09PM.png.c14812f2b6f0be05b101b5c09c2d9357.png

 

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.

Edited by creedon
adding some padding and font change

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

codefordummies    6

codefordummies
Posted
22 minutes ago, creedon said:

@codefordummies

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

265569928_ScreenShot2020-10-24at3_10_09PM.png.c14812f2b6f0be05b101b5c09c2d9357.png

 

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

 

Link to post
  • 0

creedon    222

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Followers 7
Go to question listing
×
×
  • Create New...

Support

Community

Developers

Resources