Carrousel layout

Store Design
,
1

Hi, I am using Theme Trade 15.1.0 and I want to add the section “related products” to my productpage. But the carrousel layout isn’t possible. Is there a possibility to fix this? Because a carroussel layout for example “featured collection” is possible, so wht not for “related products”

Would be great if someone can help :slightly_smiling_face:

Kind regards,

Tommie

2

Hi @twikkersss

I understand you want to implement a carousel layout for the “Related Products” section on your product page. While the theme doesn’t natively support a carousel for “Related Products,” you can customize the theme by following these steps:

Step-by-Step Solution:1. Create or Edit the “Related Products” Section

  • Go to Online Store > Themes > Actions > Edit Code.
  • In the Sections folder, locate the section handling related products (often named related-products.liquid). If it doesn’t exist, create a new section.

  1. Add Carousel Code to the Related Products Section

    • Modify the section or create a custom one by adding the following slick carousel code:
{% for product in related_products %} {% endfor %}

3. Include the Slick Carousel JavaScript

  • Scroll down in the same related-products.liquid file and add the following JavaScript code to enable the carousel (you can use libraries like Slick Carousel :disappointed_face:
  1. Add Styles for the Carousel (CSS)
  • In your theme’s CSS file (theme.scss.liquid or theme.css), add the following styles:

.related-products-carousel {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
width: 100%;
}

.related-product-item {
padding: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
margin: 5px;
}

.related-product-item img {
max-width: 100%;
height: auto;
}

Final Step:

Make sure to save all the changes. The related products should now appear in a carousel layout similar to the “Featured Collection.”

Let me know if this resolves the issue or if you need further assistance!

Best regards,

[Rajat Sharma]

3

Hi Rajweb, thanks a lot! But unfortunatly it didn’t succeed for me… Can you maybe help me? I have added all the codes but I think in the wrong position and step 4 I don’t understand since I don’t have theme.scss.liquid or theme.css in my codes…