Shopify Review Section – Interactive & Customizable

                    <!-- 
========================================
Section Name: Review Section
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does: 
- Displays a review section with customizable ratings, star reviews, and customer feedback.
- Includes a swiper slider for showcasing multiple reviews interactively.
- Fully responsive design for seamless mobile and desktop experiences.
- Supports customizable background colors, button links, and review content.

Promotion: 
Boost your Shopify store's credibility with an engaging review section. Showcase customer feedback dynamically and interactively. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="custom-review-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="review-container page-width">
    
    <!-- Left Column -->
    <div class="review-left" style="background-color: {{ section.settings.left_col_bg }};">
      <div class="review-left-cont">
      <h2 class="rating">{{ section.settings.rating }}</h2>
      <div class="stars">
        {% for i in (1..section.settings.star_rating) %}
          <span style="color: #000; font-size: 28px;">★</span>
        {% endfor %}
      </div>
      <p class="review-count">{{ section.settings.review_text }}</p>
    </div>
      <a href="{{ section.settings.button_link }}" class="review-button" style="background-color: {{ section.settings.button_bg }}; color: {{ section.settings.button_text_color }};">
        {{ section.settings.button_label }}
        <span class="arrow">➜</span>
      </a>
    </div>

    <!-- Right Column with Swiper Slider -->
    <div class="review-right" style="background-color: {{ section.settings.right_col_bg }};">
      <h2 class="review-title">{{ section.settings.review_title }}</h2>

      <div class="swiper review-slider">
        <div class="swiper-wrapper">
          {% for block in section.blocks %}
            <div class="swiper-slide">
              <div class="review-content">{{ block.settings.review_text }}</div>
              <p class="review-author">{{ block.settings.reviewer_name }}</p>
            </div>
          {% endfor %}
        </div>
        
        <!-- Navigation Arrows -->
        <div class="swiper-btn-cont">
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      </div>
    </div>
  </div>
</section>

<!-- Swiper.js CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<style>
.custom-review-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.review-container {
  display: flex;
  gap: 40px;
  max-width: 1200px;
  width: 100%;
}
.review-left, .review-right {
    padding: 20px;
    border-radius: 10px;
}
.review-left {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.review-left .rating {
    font-size: 40px;
    margin: 0;
}
  .review-left-cont {
    line-height: 1.1;
}
p.review-count {
    margin: 0;
    font-size: 14px;
    margin-top: 8px;
}
.review-left .stars {
  font-size: 30px;
}
.review-left .review-button {
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: center;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px;
    border-radius: 5px;
}
.review-left .arrow {
  margin-left: 10px;
}
.review-right {
  width: 60%;
}
.review-title {
    font-size: 34px;
    margin: 0;
    /* font-weight: bold; */
    max-width: 310px;
    letter-spacing: 0;
    line-height: 1;
}
.review-slider {
  position: relative;
  overflow: hidden;
}
.review-content {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.4;
    margin: 30px 0;
}
.review-author {
    font-size: 14px;
    margin: 0;
    color: #000;
}
.swiper-button-prev, .swiper-button-next {
    display: flex!important;
    align-items: center;
    height: 100%;
    margin: 0;
    position: relative!important;
}
.swiper-button-prev, .swiper-button-next {
    color: black;
    position: relative;
}
.swiper-btn-cont {
    margin-top: 25px;
    position: relative;
    display: flex;
    padding: 5px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    gap: 30px;
    border-radius: 20px;
    width: fit-content;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    font-size: 12px!important;
}
  .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    font-size: 12px!important;
}

/* Responsive */
@media (max-width: 768px) {
  .review-container {
    flex-direction: column;
    gap: 20px;
  }
  .review-left, .review-right {
    width: 100%;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  new Swiper('.review-slider', {
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    slidesPerView: 1,
  
  });
});
</script>

{% schema %}
{
  "name": "Review Section",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 2
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 2
    },
    {
      "type": "color",
      "id": "left_col_bg",
      "label": "Left Column Background"
    },
    {
      "type": "color",
      "id": "right_col_bg",
      "label": "Right Column Background"
    },
    {
      "type": "text",
      "id": "rating",
      "label": "Rating",
      "default": "4.9/5"
    },
    {
      "type": "range",
      "id": "star_rating",
      "label": "Star Rating",
      "default": 5,
      "min": 1,
      "max": 5,
      "step": 1
    },
    {
      "type": "text",
      "id": "review_text",
      "label": "Review Count Text",
      "default": "from 300+ reviews"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button Text",
      "default": "Read all reviews"
    },
    {
      "type": "color",
      "id": "button_bg",
      "label": "Button Background Color"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "text",
      "id": "review_title",
      "label": "Review Section Title",
      "default": "What other trailblazers say."
    }
  ],
  "blocks": [
    {
      "type": "review",
      "name": "Review",
      "settings": [
        {
          "type": "richtext",
          "id": "review_text",
          "label": "Review Content"
        },
        {
          "type": "text",
          "id": "reviewer_name",
          "label": "Reviewer Name"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Review Section"
    }
  ]
}
{% endschema %}