Related Products Heading not appearing in section

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