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

[mabooz9561]

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

[ThePrimeWeb · Accepted solution]

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;
}

[ThePrimeWeb · Accepted solution]

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;
}

[KhallP]

Where I need to put this code?

[topnewyork · Accepted solution]

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!

[domenicoferrara]

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

[WaDesign]

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