Dynamic Custom Review Sliders for Shopify: Top Customer Feedback in 2025

                    <section class="review-slider-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="review-slider-container page-width">
    <!-- Title and Subtitle -->
    <div class="review-header">
      <h2 class="review-title">{{ section.settings.title }}</h2>
      <div class="cont-text">
        <p class="review-subtitle">{{ section.settings.subtitle }}</p>
        <svg role="img" aria-labelledby="trustpilotLogo-n8eb7vke1e9" viewBox="0 0 126 31" xmlns="http://www.w3.org/2000/svg" style="position: absolute; height: 100%; width: 100%; left: 0; top: 0;">
      <title id="trustpilotLogo-n8eb7vke1e9">Trustpilot</title>
      <path class="tp-logo__text" d="M33.074774 11.07005H45.81806v2.364196h-5.010656v13.290316h-2.755306V13.434246h-4.988435V11.07005h.01111zm12.198892 4.319629h2.355341v2.187433h.04444c.077771-.309334.222203-.60762.433295-.894859.211092-.287239.466624-.56343.766597-.79543.299972-.243048.633276-.430858.999909-.585525.366633-.14362.744377-.220953 1.12212-.220953.288863 0 .499955.011047.611056.022095.1111.011048.222202.033143.344413.04419v2.408387c-.177762-.033143-.355523-.055238-.544395-.077333-.188872-.022096-.366633-.033143-.544395-.033143-.422184 0-.822148.08838-1.199891.254096-.377744.165714-.699936.41981-.977689.740192-.277753.331429-.499955.729144-.666606 1.21524-.166652.486097-.244422 1.03848-.244422 1.668195v5.39125h-2.510883V15.38968h.01111zm18.220567 11.334883H61.02779v-1.579813h-.04444c-.311083.574477-.766597 1.02743-1.377653 1.369908-.611055.342477-1.233221.51924-1.866497.51924-1.499864 0-2.588654-.364573-3.25526-1.104765-.666606-.740193-.999909-1.856005-.999909-3.347437V15.38968h2.510883v6.948968c0 .994288.188872 1.701337.577725 2.1101.377744.408763.922139.618668 1.610965.618668.533285 0 .96658-.077333 1.322102-.243048.355524-.165714.644386-.37562.855478-.65181.222202-.265144.377744-.596574.477735-.972194.09999-.37562.144431-.784382.144431-1.226288v-6.573349h2.510883v11.323836zm4.27739-3.634675c.07777.729144.355522 1.237336.833257 1.535623.488844.287238 1.06657.441905 1.744286.441905.233312 0 .499954-.022095.799927-.055238.299973-.033143.588836-.110476.844368-.209905.266642-.099429.477734-.254096.655496-.452954.166652-.198857.244422-.452953.233312-.773335-.01111-.320381-.133321-.585525-.355523-.784382-.222202-.209906-.499955-.364573-.844368-.497144-.344413-.121525-.733267-.232-1.17767-.320382-.444405-.088381-.888809-.18781-1.344323-.287239-.466624-.099429-.922138-.232-1.355432-.37562-.433294-.14362-.822148-.342477-1.166561-.596573-.344413-.243048-.622166-.56343-.822148-.950097-.211092-.386668-.311083-.861716-.311083-1.436194 0-.618668.155542-1.12686.455515-1.54667.299972-.41981.688826-.75124 1.14434-1.005336.466624-.254095.97769-.430858 1.544304-.541334.566615-.099429 1.11101-.154667 1.622075-.154667.588836 0 1.15545.066286 1.688736.18781.533285.121524 1.02213.320381 1.455423.60762.433294.276191.788817.640764 1.07768 1.08267.288863.441905.466624.98324.544395 1.612955h-2.621984c-.122211-.596572-.388854-1.005335-.822148-1.204193-.433294-.209905-.933248-.309334-1.488753-.309334-.177762 0-.388854.011048-.633276.04419-.244422.033144-.466624.088382-.688826.165715-.211092.077334-.388854.198858-.544395.353525-.144432.154667-.222203.353525-.222203.60762 0 .309335.111101.552383.322193.740193.211092.18781.488845.342477.833258.475048.344413.121524.733267.232 1.177671.320382.444404.088381.899918.18781 1.366542.287239.455515.099429.899919.232 1.344323.37562.444404.14362.833257.342477 1.17767.596573.344414.254095.622166.56343.833258.93905.211092.37562.322193.850668.322193 1.40305 0 .673906-.155541 1.237336-.466624 1.712385-.311083.464001-.711047.850669-1.199891 1.137907-.488845.28724-1.04435.508192-1.644295.640764-.599946.132572-1.199891.198857-1.788727.198857-.722156 0-1.388762-.077333-1.999818-.243048-.611056-.165714-1.14434-.408763-1.588745-.729144-.444404-.33143-.799927-.740192-1.05546-1.226289-.255532-.486096-.388853-1.071621-.411073-1.745528h2.533103v-.022095zm8.288135-7.700208h1.899828v-3.402675h2.510883v3.402675h2.26646v1.867052h-2.26646v6.054109c0 .265143.01111.486096.03333.684954.02222.18781.07777.353524.155542.486096.07777.132572.199981.232.366633.298287.166651.066285.377743.099428.666606.099428.177762 0 .355523 0 .533285-.011047.177762-.011048.355523-.033143.533285-.077334v1.933338c-.277753.033143-.555505.055238-.811038.088381-.266642.033143-.533285.04419-.811037.04419-.666606 0-1.199891-.066285-1.599855-.18781-.399963-.121523-.722156-.309333-.944358-.552381-.233313-.243049-.377744-.541335-.466625-.905907-.07777-.364573-.13332-.784383-.144431-1.248384v-6.683825h-1.899827v-1.889147h-.02222zm8.454788 0h2.377562V16.9253h.04444c.355523-.662858.844368-1.12686 1.477644-1.414098.633276-.287239 1.310992-.430858 2.055369-.430858.899918 0 1.677625.154667 2.344231.475048.666606.309335 1.222111.740193 1.666515 1.292575.444405.552382.766597 1.193145.9888 1.92229.222202.729145.333303 1.513527.333303 2.3421 0 .762288-.099991 1.50248-.299973 2.20953-.199982.718096-.499955 1.347812-.899918 1.900194-.399964.552383-.911029.98324-1.533194 1.31467-.622166.33143-1.344323.497144-2.18869.497144-.366634 0-.733267-.033143-1.0999-.099429-.366634-.066286-.722157-.176762-1.05546-.320381-.333303-.14362-.655496-.33143-.933249-.56343-.288863-.232-.522175-.497144-.722157-.79543h-.04444v5.656393h-2.510883V15.38968zm8.77698 5.67849c0-.508193-.06666-1.005337-.199981-1.491433-.133321-.486096-.333303-.905907-.599946-1.281527-.266642-.37562-.599945-.673906-.988799-.894859-.399963-.220953-.855478-.342477-1.366542-.342477-1.05546 0-1.855387.364572-2.388672 1.093717-.533285.729144-.799928 1.701337-.799928 2.916578 0 .574478.066661 1.104764.211092 1.59086.144432.486097.344414.905908.633276 1.259432.277753.353525.611056.629716.99991.828574.388853.209905.844367.309334 1.355432.309334.577725 0 1.05546-.121524 1.455423-.353525.399964-.232.722157-.541335.97769-.905907.255531-.37562.444403-.79543.555504-1.270479.099991-.475049.155542-.961145.155542-1.458289zm4.432931-9.99812h2.510883v2.364197h-2.510883V11.07005zm0 4.31963h2.510883v11.334883h-2.510883V15.389679zm4.755124-4.31963h2.510883v15.654513h-2.510883V11.07005zm10.210184 15.963847c-.911029 0-1.722066-.154667-2.433113-.452953-.711046-.298287-1.310992-.718097-1.810946-1.237337-.488845-.530287-.866588-1.160002-1.12212-1.889147-.255533-.729144-.388854-1.535622-.388854-2.408386 0-.861716.133321-1.657147.388853-2.386291.255533-.729145.633276-1.35886 1.12212-1.889148.488845-.530287 1.0999-.93905 1.810947-1.237336.711047-.298286 1.522084-.452953 2.433113-.452953.911028 0 1.722066.154667 2.433112.452953.711047.298287 1.310992.718097 1.810947 1.237336.488844.530287.866588 1.160003 1.12212 1.889148.255532.729144.388854 1.524575.388854 2.38629 0 .872765-.133322 1.679243-.388854 2.408387-.255532.729145-.633276 1.35886-1.12212 1.889147-.488845.530287-1.0999.93905-1.810947 1.237337-.711046.298286-1.522084.452953-2.433112.452953zm0-1.977528c.555505 0 1.04435-.121524 1.455423-.353525.411074-.232.744377-.541335 1.01102-.916954.266642-.37562.455513-.806478.588835-1.281527.12221-.475049.188872-.961145.188872-1.45829 0-.486096-.066661-.961144-.188872-1.44724-.122211-.486097-.322193-.905907-.588836-1.281527-.266642-.37562-.599945-.673907-1.011019-.905907-.411074-.232-.899918-.353525-1.455423-.353525-.555505 0-1.04435.121524-1.455424.353525-.411073.232-.744376.541334-1.011019.905907-.266642.37562-.455514.79543-.588835 1.281526-.122211.486097-.188872.961145-.188872 1.447242 0 .497144.06666.98324.188872 1.458289.12221.475049.322193.905907.588835 1.281527.266643.37562.599946.684954 1.01102.916954.411073.243048.899918.353525 1.455423.353525zm6.4883-9.66669h1.899827v-3.402674h2.510883v3.402675h2.26646v1.867052h-2.26646v6.054109c0 .265143.01111.486096.03333.684954.02222.18781.07777.353524.155541.486096.077771.132572.199982.232.366634.298287.166651.066285.377743.099428.666606.099428.177762 0 .355523 0 .533285-.011047.177762-.011048.355523-.033143.533285-.077334v1.933338c-.277753.033143-.555505.055238-.811038.088381-.266642.033143-.533285.04419-.811037.04419-.666606 0-1.199891-.066285-1.599855-.18781-.399963-.121523-.722156-.309333-.944358-.552381-.233313-.243049-.377744-.541335-.466625-.905907-.07777-.364573-.133321-.784383-.144431-1.248384v-6.683825h-1.899827v-1.889147h-.02222z" fill="#191919"></path>
      <path class="tp-logo__star" fill="#00B67A" d="M30.141707 11.07005H18.63164L15.076408.177071l-3.566342 10.892977L0 11.059002l9.321376 6.739063-3.566343 10.88193 9.321375-6.728016 9.310266 6.728016-3.555233-10.88193 9.310266-6.728016z"></path>
      <path class="tp-logo__star-notch" fill="#005128" d="M21.631369 20.26169l-.799928-2.463625-5.755033 4.153914z"></path>
    </svg>

      </div>
    </div>
    <!-- Slider -->
    <div class="review-slider">
      {% for block in section.blocks %}
      <div class="review-item">
        <div class="review-content">
          <div class="review-icon-starts-cont">
            <div class="review-icons">
              <svg class="icon icon-quote" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 18" aria-hidden="true" focusable="false" fill="none">
                <path d="M9 0C4.05 0 0 4.05 0 9V18H9V9H3C3 5.67 5.67 3 9 3V0ZM20.4 0C15.45 0 11.4 4.05 11.4 9V18H20.4V9H14.4C14.4 5.67 17.07 3 20.4 3V0Z" fill="currentColor"></path>
              </svg>
            </div>
            <div class="review-stars">
                 <svg class="icon icon-trustpilot-stars" aria-hidden="true" focusable="false" viewBox="0 0 107 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 0H0V20H20V0Z" fill="#219653"></path>
<path d="M41.6667 0H21.6667V20H41.6667V0Z" fill="#219653"></path>
<path d="M63.3333 0H43.3333V20H63.3333V0Z" fill="#219653"></path>
<path d="M85 0H65V20H85V0Z" fill="#219653"></path>
<path d="M106.667 0H86.6667V20H106.667V0Z" fill="#219653"></path>
<path d="M9.99976 13.4789L13.0414 12.7081L14.3123 16.6248L9.99976 13.4789ZM16.9998 8.41642H11.6456L9.99976 3.37476L8.35392 8.41642H2.99976L7.33309 11.5414L5.68726 16.5831L10.0206 13.4581L12.6873 11.5414L16.9998 8.41642Z" fill="white"></path>
<path d="M31.6665 13.4789L34.7082 12.7081L35.979 16.6248L31.6665 13.4789ZM38.6665 8.41642H33.3123L31.6665 3.37476L30.0207 8.41642H24.6665L28.9998 11.5414L27.354 16.5831L31.6873 13.4581L34.354 11.5414L38.6665 8.41642Z" fill="white"></path>
<path d="M53.333 13.4789L56.3747 12.7081L57.6455 16.6248L53.333 13.4789ZM60.333 8.41642H54.9788L53.333 3.37476L51.6872 8.41642H46.333L50.6663 11.5414L49.0205 16.5831L53.3538 13.4581L56.0205 11.5414L60.333 8.41642Z" fill="white"></path>
<path d="M74.9998 13.4789L78.0414 12.7081L79.3123 16.6248L74.9998 13.4789ZM81.9998 8.41642H76.6456L74.9998 3.37476L73.3539 8.41642H67.9998L72.3331 11.5414L70.6873 16.5831L75.0206 13.4581L77.6873 11.5414L81.9998 8.41642Z" fill="white"></path>
<path d="M96.6665 13.4789L99.7082 12.7081L100.979 16.6248L96.6665 13.4789ZM103.667 8.41642H98.3123L96.6665 3.37476L95.0207 8.41642H89.6665L93.9998 11.5414L92.354 16.5831L96.6873 13.4581L99.354 11.5414L103.667 8.41642Z" fill="white"></path>
</svg>
            </div>
          </div>
          <div class="review-text-title">
            <p class="review-text-title">{{ block.settings.review_title }}</p>
          </div>
          <div class="review-text-cont">
            <p class="review-text">{{ block.settings.review_text }}</p>
          </div>
          <div class="review-text-auth">
            <p class="review-author">{{ block.settings.author }}</p>
            <p class="review-date">{{ block.settings.date }}</p>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
 
  </div>
</section>

<style>

.review-icon-starts-cont {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.review-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}
  .cont-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
  .review-text-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
  .review-slider.slick-initialized.slick-slider .slick-prev {
    left: 10px!important;
}
 .review-slider.slick-initialized.slick-slider .slick-next {
    right: 10px!important;
}
.review-header svg {
    width: 91px!important;
    height: 21px!important;
    position: relative!important;
}
.review-title {
  font-size: 32px;
  font-weight: bold;
}

.review-subtitle {
  font-size: 16px;
  color: #555;
}

.swiper {
  width: 100%;
}

.review-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px;
  background-color: #fff;
  border-radius: 8px;
}
.review-slider-container.page-width .slick-prev {
    display: block;
}
  .review-slider-container.page-width  .slick-next {
    display: block;
}
.review-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}
p.review-text-title {
    margin-bottom: 16px;
    font-size: 15px;
    font-size: 15px;
    font-weight: 400;
    color: #1e1e1e;
    letter-spacing: 0;
    line-height: 24px;
}
.review-icons svg {
    width: 21px;
    height: 18px;
    color: rgba(99, 82, 71, .2);

}

.review-text {
    font-size: 15px;
    font-weight: 400;
    color: #1e1e1e;
    margin: 15px 0;
    letter-spacing: 0;
    line-height: 24px;
}

.review-stars svg {
  width: 100px;
  margin-bottom: 10px;
}

.review-author {
    font-weight: 400;
    color: #8e7667;
    font-size: 15px;
      margin: 0;
    line-height: 24px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.review-date {
    font-weight: 400;
    text-transform: uppercase;
    color: #8e7667;
    font-size: 15px;
    line-height: 24px;
    margin: 0;
    letter-spacing: 0.5px;
}

/* Swiper Navigation */
.swiper-button-prev,
.swiper-button-next {
  color: #000;
}

@media (max-width: 768px) {
  .review-item {
    padding: 15px;
  }

  .review-title {
    font-size: 24px;
  }
}
</style>
<style>

.review-slider {
  overflow: hidden;
  position: relative;
}

.review-item {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin: 0 10px;
}
  .review-slider-container.page-width {
    position: relative;
}

.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  z-index: 1000;
  cursor: pointer;
}
  .slick-next:before, .slick-prev:before {
    color: #000!important;
}

.slick-prev {
  left: -30px;
}

.slick-next {
  right: -30px;
}

.review-header {
  text-align: center;
  margin-bottom: 30px;
}

.review-title {
    font-size: 40px;
    letter-spacing: 0;
    margin: 0;
    color: #1e1e1e;
    font-weight: 400;
    line-height: 36px;
}
  .review-slider .slick-prev1 svg , .review-slider .slick-next1 svg {
    width: 10px !important;
    height: 10px !important;
}
 .slick-prev1 ,   .slick-next1 {
    top: calc(50% + 44px) !important;
    position: absolute;
}

 .review-slider-container. button.slick-prev.slick-arrow, .review-slider-container. button.slick-next.slick-arrow {
    display: none!important;
}
  .review-slider-container.page-width .slick-next1 {
    right: 70px;
    background: #fff;
    /* border: 1px solid; */
    width: 20px;
    height: 20px;
    display: flex;
        cursor:pointer;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
.review-slider-container.page-width .slick-prev1 svg.icon.icon-arrow-prew {
    width: 12px;
    height: 12px;
}
.review-slider-container.page-width .slick-next1 svg.icon.icon-arrow-next {
    width: 12px;
    height: 12px;
}
  .review-slider-container.page-width .slick-prev1 {
    left: 70px;
    background: #fff;
    /* border: 1px solid; */
    width: 20px;
    cursor:pointer;
    height: 20px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
.review-subtitle {
  font-size: 16px;
  color: #555;
}



  .review-slider .slick-next:before, .slick-prev:before {
    display: none!important;

}



    .review-slider button.slick-next.slick-arrow svg path{
  fill: #000;
} 
  button.slick-prev.slick-arrow svg.icon.icon-arrow-prev path {
    fill: #000;
}
    .review-slider button.slick-next.slick-arrow svg {
    width: 30px;
    height: 30px;
    padding: 9px;
    border-radius: 50%;
    background: #fff;
}
  
  .review-slider button.slick-prev.slick-arrow svg {
    width: 30px;
    height: 30px;
    padding: 9px;
    border-radius: 50%;
    background: #fff;
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
$(document).ready(function () {
  $(".slick-prev1").click(function () {
        $(".slick-next.slick-arrow").trigger("click");
    });

    // Trigger the corresponding Slick arrow button when .slick-next is clicked
    $(".slick-next1").click(function () {
        $(".slick-prev.slick-arrow").trigger("click");
    });
  $('.review-slider').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    infinite: true,
    arrows: true,
    prevArrow: `<button type="button" class="slick-prev">
                  <svg class="icon icon-arrow-prev" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.06667 -9.0518e-07L4.76995e-08 4C1.02014 5.00069 3.04658 6.99929 4.06667 8L4.57986 7.50347C3.66249 6.60347 2.44866 5.4048 1.37772 4.35342L7.99995 4.35342L7.99995 3.64716L1.37772 3.64716L4.57986 0.502097L4.06667 -9.0518e-07Z" fill="currentColor"></path>
                  </svg>
                </button>`,
    nextArrow: `<button type="button" class="slick-next">
                  <svg class="icon icon-arrow-next" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.93333 8L8 4C6.97986 2.99931 4.95342 1.00071 3.93333 0L3.42014 0.49653C4.33751 1.39653 5.55134 2.5952 6.62228 3.64658L0 3.64658L0 4.35284L6.62228 4.35284L3.42014 7.4979L3.93333 8Z" fill="currentColor"></path>
                  </svg>
                </button>`,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  });
});
</script>

{% schema %}
{
  "name": "Review Slider",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f9f4ee"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Our community can't get enough of it!"
    },
    {
      "type": "richtext",
      "id": "subtitle",
      "label": "Subtitle"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 5
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 5
    }
  ],
  "blocks": [
    {
      "type": "review",
      "name": "Review",
      "settings": [
        {
          "type": "text",
          "id": "review_title",
          "label": "Title"
        },
        {
          "type": "textarea",
          "id": "review_text",
          "label": "Review Text",
          "default": "Unbelievable what a difference! Love this! ❤️ Recently owned the primer, color-changing foundation, brush, mascara, lipstick, and eyeliner. Super thanks for these fine products!"
        },
        {
          "type": "text",
          "id": "author",
          "label": "Author",
          "default": "Denise"
        },
        {
          "type": "text",
          "id": "date",
          "label": "Date",
          "default": "3 days ago"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Review Slider",
      "category": "Custom Sections"
    }
  ]
}
{% endschema %}