How To Make ''Related Products'' As Carousel Dawn Theme?

Store Design
1

Hello there,

In my product page, at the bottom, I have related product sections

I would like to have these related product appear as slideable carousel and not as vertical column

please not I was able to acheive this for desktop view, but the issue still exist for mobile view.

please help

site

https://www.mabooz.shop/products/booz-r6

2

With CSS only this is the best I can do, Integrating a custom carousell is not the easiest this to do. Try this horizontal scroll version and see if you like it.

.related-products .grid.product-grid.grid--1-col-desktop.grid--2-col-tablet-down {
  display: flex;
  flex-wrap: nowrap;
  overflow: scroll;
}
3

Hi Mabooz9561,

In Shopify Admin, navigate to “Edit theme code”, then open the “base.css” file and add the following code at the end:

@media (max-width: 768px) {
.related-products .grid.product-grid.grid--1-col-desktop.grid--2-col-tablet-down {
  display: flex;
  flex-wrap: nowrap;
  overflow: scroll;
}
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

4

Where I need to put this code?

5

i add the code but no result, can you help me

6

Hey,

Do you mind show how did you add the related product to the section? I am using DAWN theme, and I saw the pre-made section, but I dont know how to add stuff to it