Show recommend products as a carousel dawn theme

Store Design
,

Topic summary

A user seeks help displaying recommended products as a carousel in Shopify’s Dawn theme.

Solution Provided:

  • Create a new section file named recommended-products-carousel.liquid in the Sections directory
  • Add provided Liquid markup code that pulls products from collections (limited to 10 items)
  • Include custom CSS styling for carousel layout, product cards, images, and scrolling behavior
  • Add the section to the homepage above the footer

Implementation Issue:
The original poster encountered a save error when attempting to create the section (screenshot provided showing the error message).

Current Status:
The helper suggested simply renaming the section as a potential fix. The discussion remains open with the technical issue unresolved.

Note: Some text in the conversation appears corrupted or reversed, making portions difficult to parse accurately.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
2

@houseofviraasi thanks for post yes can you try this code

  1. 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 %}

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;
}
  1. Add the Section to Your Homepage
    above footer section
{% section 'recommended-products-carousel' %}