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

Solved

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

mabooz9561
New Member
15 0 0

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

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an 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;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

topnewyork
Navigator
310 35 47

This is an 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!

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an 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;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
KhallP
Excursionist
63 0 11

Where I need to put this code?

topnewyork
Navigator
310 35 47

This is an 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!

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
domenicoferrara
New Member
5 0 0

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

WaDesign
Shopify Partner
2 0 0

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