Related Products Customizations

Hello, 

I am needing help customizing just the Related Products section of my Product Pages. I am wanting to make just the Related Products section have a different background color to help differentiate it from the actual product being looked at. 

I am also wanting to limit the number of related products that are visible. Example: Currently it's set to displaying five products but I only want to suggest three. 

Any help in fixing this would be greatly appreciated! Thank you! 

-Basil 

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

7 hours ago, bbouras said:

I am also wanting to limit the number of related products that are visible. Example: Currently it's set to displaying five products but I only want to suggest three. 

See my post Improving the 'Related Products' section to limit the number of related products to a single row.

@paul2009 Thanks for posting your article. Could you tell me where this code needs to be injected? 

In the Custom CSS tab in Design or on the Advanced Settings of the Store Page? 

Thanks!

Basil 

@creedon

Sure thing – My store is at bourasdesigns.com/prints 

Just click on any item and at the bottom of each product page is the Related Products section. 

Hope that makes sense. 

Basil 

@paul2009 Check that! One day I'll learn to read all the words. 

I got it copied in the Custom CSS section but nothing is changing on my page though...

Other suggestions? 

9 hours ago, bbouras said:

nothing is changing on my page though...

Hmm, that's strange. The markup on your site is different (of course I didn't know this earlier because I didn't know the site's URL 🙂).

Try this instead:

.ProductItem-relatedProducts .grid-item:nth-child(1n+4) {
  display: none;
}