Show recommend products as a carousel dawn theme

[houseofviraasi]

Hey,

How can I show all recommended products as a carousel in my dawn theme?

Im sure it pretty simple but don't know what to add in custom CSS 

https://houseofviraasi.com/

[KetanKumar]

@houseofviraasi  thanks for post yes can you try this code

2. Create a New Section for the Carousel
Create a new section file
In the theme code editor, find the Sections directory. Click Add a new section, and name it recommended-products-carousel.liquid.

Paste the following code for the carousel:

{% schema %}
  {
    "name": "Recommended Products Carousel",
    "settings": [
      {
        "type": "text",
        "label": "Section Title",
        "id": "section_title",
        "default": "Recommended Products"
      }
    ],
    "presets": [
      {
        "name": "Default",
        "category": "Custom"
      }
    ]
  }
{% endschema %}

{% assign recommended_products = collections['all'].products | limit: 10 %}

<section class="recommended-products-carousel">
  <div class="carousel-wrapper">
    <h2>{{ section.settings.section_title }}</h2>
    <div class="carousel-container">
      {% for product in recommended_products %}
        <div class="carousel-item">
          <a href="{{ product.url }}" class="product-link">
            <img src="{{ product.featured_image | img_url: '300x' }}" alt="{{ product.title }}">
            <div class="product-info">
              <h3>{{ product.title }}</h3>
              <span class="price">{{ product.price | money }}</span>
            </div>
          </a>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

3 Style the Carousel
Add this css base.css

.recommended-products-carousel {
  padding: 20px;
  text-align: center;
}

.carousel-container {
  display: flex;
  overflow-x: scroll;
  gap: 20px;
}

.carousel-item {
  min-width: 250px;
  max-width: 250px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  padding: 10px;
}

.carousel-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.product-info {
  margin-top: 10px;
}

.product-info h3 {
  font-size: 16px;
  margin: 0;
}

.product-info .price {
  color: #333;
  font-size: 14px;
  font-weight: bold;
}

.carousel-container::-webkit-scrollbar {
  display: none;
}

3. Add the Section to Your Homepage
above footer section

{% section 'recommended-products-carousel' %}

[houseofviraasi]

Hey @KetanKumar its not letting me save the section due to this error

 

[KetanKumar]

@houseofviraasi just rename section