Changing related products to carousel on mobile?

Hey, I am currently using a code to only show 4 items for the related products in a Shop. However, I would prefer this was actually a carousel, similar to a summary block, but without having to do it all the time.

//only 4 per row related products//
.ProductItem .ProductItem-relatedProducts .grid-item:nth-child(n+5) {
  display: none
}
// end of related products//
 

Is there a way to turn the related products into a carousel? If not, can we show 2 on mobile? I tried adding a code from a blog but it's no longer working.

https://studio-apri.squarespace.com/shop/?noredirect/password=hair (password hair)

I have the same question!

14 minutes ago, ellenbrown said:

I have the same question!

In the end, I just did a 2 X 2 grid of related products, so 4 total 

My related products are showing up stacked, individually. I'd love for them to be two side by side in a carousel, the way summary blocks show up. How did you get yours side by side? The only thing I can think is to manually replace related products with an actual summary block. 

4 minutes ago, ellenbrown said:

My related products are showing up stacked, individually. I'd love for them to be two side by side in a carousel, the way summary blocks show up. How did you get yours side by side? The only thing I can think is to manually replace related products with an actual summary block. 

You can add this to the Shop or Main Code Injection

<style> /* Product 2 columns mobile */ @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 10px; } } </style>

@lara_e Thank you! I actually only want to create that 2-product carousel on mobile effect on the related products, not the main shop page, so I think I'll need to target that specifically.