/** Shopify CDN: Minification failed Line 16:0 Unexpected "<" Line 17:32 Comments in CSS use "/* ... */" instead of "//" Line 18:452 Expected ":" Line 18:535 Unexpected "if(" Line 18:541 Expected identifier but found "if(" Line 18:614 Unexpected "if(" Line 18:665 Expected identifier but found "if(" Line 18:740 Expected identifier but found "if(" Line 18:754 Expected identifier but found "if(" Line 18:789 Expected ":" ... and 177 more hidden warnings **/ Shopify Liquid Templates [ENG]

🛒 Paginapictogram

Shopify Liquid Templates [ENG]

This Notion page provides an overview of all Liquid files for Shopify stores available for implementation. Regularly updated with new templates and adjustments to ensure you always have access to the latest and most useful Liquid files. Ideal for developers and store owners looking to optimize and customize their Shopify store.

Gallery view

You’ve unlocked Free Shipping

Only 8 items left at this price

Amy just added this to her bag

4 people have this in their cart

Reviews rating

Loved by 10,000+

Payment icons

International Women’s Day Sale

Liked by 1000+ customers!

Low Stock Warning

Heart Review Icons

4.5/5 with 100+ satisfied customers!

Trustscore Display with Star Rating

Mothers Day Sale

Loved by 10,000+ (Red)

Benefits list

Benefits list (with emojis)

Benefits list 2.0

Recently Viral on Facebook

Comparison table

Viral on Tiktok

You’ve unlocked a free gift at checkout!

30-day money-back guarantee!

30-day money-back guarantee!

Try it risk free for 30 days

Tabbed container

Emoji trust badges

Delivery date estimate

Free shipping with icon

“X” people have this in their cart (random number)

In stock label

600 people bought this item flash 

Our customers love the product

Pay in 4 (Klarna // Clearpay)

Trustpilot reviews

Summer Sale

94% of customers…

Sticky Slider Announcement Bar [Section]

Before/After Slider [Section]

Trustpilot Slider [Section]

1. Create a New Snippet: progress-bar

Go to your Shopify admin dashboard.

Navigate to Online Store > Themes.

Click Actions > Edit code.

Under the Snippets folder, click Add a new snippet.

Name the new snippet progress-bar.

Progress Bar on Cart Drawer and Cart Page [Section]

Size Guide Integration [Section]

Other Attachments

Trustpilot Slider [Section]

Created

20 september 2024 20:12

Tags

Leeg

Date

Leeg

Steps to Create a New Section

Access Your Shopify Admin:

Go to your Shopify admin panel.

Navigate to Online Store:

From the Shopify admin, click on Online Store.

Open Theme Code Editor:

Click on Themes.

Find the theme you’re currently using and click on Actions.

Select Edit code from the dropdown menu.

Add a New Section:

In the left sidebar, look for the Sections directory.

Click on Add a new section.

Name Your New Section:

In the dialog box that appears, name the new section aus-tp-slider. Shopify will automatically add the .liquid file extension. Click Create section.

Paste the Code:

Your new section file (aus-tp-slider.liquid) will open in the code editor.

Replace the existing code with the following code:

Section Code (aus-tp-slider.liquid):

JavaScript

Kopiëren

<!-- aus-plugin -->
<script src="{{ 'jquery-3.7.0.min.js' | asset_url }}"></script>
<script src="{{ 'slick.min.js' | asset_url }}"></script>
{{ 'slick-theme.css' | asset_url | stylesheet_tag: preload: true }}
{{ 'slick.css' | asset_url | stylesheet_tag: preload: true }}
<!-- End aus plugin -->
<style>
    button.slick-prev.aus-prev.slick-arrow::before {
          display: none;
      }

      svg.prev_arrow {
          fill: white;
          height: 30px;
          position: relative;
          left: -15px;
      }

      button.slick-next.aus-prev.slick-arrow::before {
          display: none;
      }

      svg.newxt_arrow {
          fill: white;
          transform: rotate(180deg);
          height: 30px;
      }
    .aus_reviews_all {
      padding: 20px 50px;
      margin-right: 15px !important;
  }
    .aus_t_svg {
      display: flex;
    }
    .aus_tp_stars svg {
        width: 80px;
        height: auto;
        display: block;
    }
    .aus_review_container {
      display: flex;
      margin: .3%;
      align-items: center;
    }

    .aus_reviews_all {
      width: 80%;
      padding: 0 2%;
    }

    .verified-icon {
      width: 14px;
    }

    .verified-badge-wrapper {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-left: 3px;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      grid-column-gap: 3px;
      grid-row-gap: 3px;
    }

    .verified-text {
      color: #6c6c85;
      font-weight: 300;
      font-size: 12px;
    }

    .us-post {
      background: #fff;
      margin: 10px 10px;
      border-radius: 5px;
      box-shadow: 1px 1px 11px 2px rgb(0 0 0 / 16%);
    }

    .aus-section {
      padding: 15px 0;
      background: #FAFAFC;
    }

    .us-post-info {
      padding: 20px 15px;
    }

    .us-post h5 {
      margin: 0;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .01em;
      color: grey;
      font-family: "Roboto", sans-serif !important;
    }

    .str-rating {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .str-rating p {
      font-size: 12px;
      font-weight: 400;
      font-family: "Roboto", sans-serif !important;
    }

    .TP-heading .TP-text {
      font-size: 13px;
      font-family: "Roboto", sans-serif !important;
    }

    .TP-heading {
      width: 20%;
      text-align: center;
      padding: 10px 0;
    }

    .verified-badge-wrapper {
      margin-top: 10px;
    }

    .aus_t_svg {
      flex-direction: column;
    }

    .TP-reviews h3 {
      margin: 5px 0;
      font-size: 14px !important;
      font-weight: 600;
      letter-spacing: .01em;
      font-family: "Roboto", sans-serif !important;
    }

    .TP-reviews .rev p {
      font-size: 13px !important;
      font-family: "Roboto", sans-serif !important;
    }

    @media(max-width:481px) {
      .aus_review_container {
        flex-direction: column;
      }

      .TP-heading {
        width: 100%;
      }

      .aus_reviews_all {
        width: 100%;
      }
    }

    .us-post-info h3 {
      font-size: 14px;
    }

    .us-post-info .rev p {
      margin-top: 0;
      margin-bottom: 3px;
    }

    .us-post-info h3 {
      margin-top: 5px;
      margin-bottom: 3px;
    }

    .us-post-info p {
      font-size: 12px;
    }
    .aus_review_container {
      max-width: 1200px;
      margin: 40px auto;
  }
</style>

<div class="box" id="aus-tp-slider">
  <div class="wrapper">
    <div class="aus_review_width">
      <div class="aus_review_container">
        <div class="TP-heading">
          <h2 class="TP-title">{{ section.settings.heading }}</h2>
          <svg
            class="star-rating dkt"
            width="1068"
            height="200"
            viewBox="0 0 1068 200"
            style="height: 30px;width: auto;"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M0 0V200H200V0H0ZM130 127.5L143 166.5L100 135.5L57 165.5L73 115.5L30.5 84H83.5L100 33.5L116.5 84H169.5L101 134.5L130 127.5Z"
              fill="#00B67B"></path>
            <path
              d="M217 0V200H417V0H217ZM347 127.5L360 166.5L317 135.5L274 165.5L290 115.5L247.5 84H300.5L317 33.5L333.5 84H386.5L318 134.5L347 127.5Z"
              fill="#00B67B"></path>
            <path
              d="M434 0V200H634V0H434ZM564 127.5L577 166.5L534 135.5L491 165.5L507 115.5L464.5 84H517.5L534 33.5L550.5 84H603.5L535 134.5L564 127.5Z"
              fill="#00B67B"></path>
            <path
              d="M651 0V200H851V0H651ZM781 127.5L794 166.5L751 135.5L708 165.5L724 115.5L681.5 84H734.5L751 33.5L767.5 84H820.5L752 134.5L781 127.5Z"
              fill="#00B67B"></path>
            <path
              d="M868 0V200H1068V0H868ZM998 127.5L1011 166.5L968 135.5L925 165.5L941 115.5L898.5 84H951.5L968 33.5L984.5 84H1037.5L969 134.5L998 127.5Z"
              fill="#00B67B"></path>
            <path d="M968 0V33.5L984.5 84H1037.5L969 134.5L998 127.5L1011 166.5L968 135.5V200H1068V0H968Z"
              fill="#DBDBDD"></path>
          </svg>
          <!--
            <svg class="star-rating dkt" xmlns="http://www.w3.org/2000/svg" id="" data-name="Calque 2" viewBox="0 0 1068 200" style="height: 30px;"><defs><linearGradient id=""><stop offset="0%" stop-color="#00b67b"></stop><stop offset="0%" stop-color="#dbdce4" stop-opacity="1"></stop></linearGradient><style>.filled {fill: #00b67b;}.empty {fill: #dbdce4;}</style></defs><path class="filled" d="M0,0V200H200V0ZM130,127.5l13,39-43-31-43,30,16-50L30.5,84h53L100,33.5,116.5,84h53L101,134.5Z"></path><path class="filled" d="M217,0V200H417V0ZM347,127.5l13,39-43-31-43,30,16-50L247.5,84h53L317,33.5,333.5,84h53L318,134.5Z"></path><path class="filled" d="M434,0V200H634V0ZM564,127.5l13,39-43-31-43,30,16-50L464.5,84h53L534,33.5,550.5,84h53L535,134.5Z"></path><path class="filled" d="M651,0V200H851V0ZM781,127.5l13,39-43-31-43,30,16-50L681.5,84h53L751,33.5,767.5,84h53L752,134.5Z"></path><path class="filled" d="M868,0V200h200V0ZM998,127.5l13,39-43-31-43,30,16-50L898.5,84h53L968,33.5,984.5,84h53L969,134.5Z"></path></svg>
          -->
          <div class="TP-text">{{ section.settings.content }}</div>

          <svg
            role="img"
            aria-labelledby="trustpilotLogo"
            viewBox="0 0 126 31"
            xmlns="http://www.w3.org/2000/svg"
            style="width: 110px"
          >
            <title id="trustpilotLogo">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>

          <!-- <img src="//cdn.shopify.com/s/files/1/0555/4444/7249/t/8/assets/trustpilot.png?261" responsive> -->
        </div>
        <div class="aus_reviews_all">
          <div class="aus_review_slider">
            {% for block in section.blocks %}
              <div class="us-post">
                <div class="us-post-info">
                  <div class="str-rating">
                    <div class="aus_t_svg">
                      <div class="aus_tp_stars">
                        {% if block.settings.rating == '5' %}
                          <div class="aus_five_star">
                            <svg
                              role="img"
                              aria-labelledby="starRating"
                              viewBox="0 0 251 46"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <title id="starRating" lang="en">5 out of five star rating on Trustpilot</title>
                              <g class="tp-star">
                                  <path class="tp-star__canvas" fill="#00B67A" d="M0 46.330002h46.375586V0H0z"></path>
                                  <path class="tp-star__shape"
                                      d="M39.533936 19.711433L13.230239 38.80065l3.838216-11.797827L7.02115 19.711433h12.418975l3.837417-11.798624 3.837418 11.798624h12.418975zM23.2785 31.510075l7.183595-1.509576 2.862114 8.800152L23.2785 31.510075z"
                                      fill="#FFF"></path>
                              </g>
                              <g class="tp-star">
                                  <path class="tp-star__canvas" fill="#00B67A" d="M51.24816 46.330002h46.375587V0H51.248161z">
                                  </path>
                                  <path class="tp-star__canvas--half" fill="#00B67A"
                                      d="M51.24816 46.330002h23.187793V0H51.248161z"></path>
                                  <path class="tp-star__shape"
                                      d="M74.990978 31.32991L81.150908 30 84 39l-9.660206-7.202786L64.30279 39l3.895636-11.840666L58 19.841466h12.605577L74.499595 8l3.895637 11.841466H91L74.990978 31.329909z"
                                      fill="#FFF"></path>
                              </g>
                              <g class="tp-star">
                                  <path class="tp-star__canvas" fill="#00B67A"
                                      d="M102.532209 46.330002h46.375586V0h-46.375586z"></path>
                                  <path class="tp-star__canvas--half" fill="#00B67A"
                                      d="M102.532209 46.330002h23.187793V0h-23.187793z"></path>
                                  <path class="tp-star__shape"
                                      d="M142.066994 19.711433L115.763298 38.80065l3.838215-11.797827-10.047304-7.291391h12.418975l3.837418-11.798624 3.837417 11.798624h12.418975zM125.81156 31.510075l7.183595-1.509576 2.862113 8.800152-10.045708-7.290576z"
                                      fill="#FFF"></path>
                              </g>
                              <g class="tp-star">
                                  <path class="tp-star__canvas" fill="#00B67A"
                                      d="M153.815458 46.330002h46.375586V0h-46.375586z"></path>
                                  <path class="tp-star__canvas--half" fill="#00B67A"
                                      d="M153.815458 46.330002h23.187793V0h-23.187793z"></path>
                                  <path class="tp-star__shape"
                                      d="M193.348355 19.711433L167.045457 38.80065l3.837417-11.797827-10.047303-7.291391h12.418974l3.837418-11.798624 3.837418 11.798624h12.418974zM177.09292 31.510075l7.183595-1.509576 2.862114 8.800152-10.045709-7.290576z"
                                      fill="#FFF"></path>
                              </g>
                              <g class="tp-star">
                                  <path class="tp-star__canvas" fill="#00B67A"
                                      d="M205.064416 46.330002h46.375587V0h-46.375587z"></path>
                                  <path class="tp-star__canvas--half" fill="#00B67A"
                                      d="M205.064416 46.330002h23.187793V0h-23.187793z"></path>
                                  <path class="tp-star__shape"
                                      d="M244.597022 19.711433l-26.3029 19.089218 3.837419-11.797827-10.047304-7.291391h12.418974l3.837418-11.798624 3.837418 11.798624h12.418975zm-16.255436 11.798642l7.183595-1.509576 2.862114 8.800152-10.045709-7.290576z"
                                      fill="#FFF"></path>
                              </g>
                            </svg>
                          </div>
                        {% else %}
                          <div class="aus_four_star">
                            <svg
                              role="img"
                              aria-labelledby="starRating"
                              viewBox="0 0 251 46"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <title id="starRating" lang="en">5 out of five star rating on Trustpilot</title>
                              <g class="tp-star">
                                  <path class="tp-star__canvas" fill="#73CF12" d="M0 46.330002h46.375586V0H0z"></path>
                                  <path class="tp-star__shape"
                                      d="M39.533936 19.711433L13.230239 38.80065l3.838216-11.797827L7.02115 19.711433h12.418975l3.837417-11.798624 3.837418 11.798624h12.418975zM23.2785 31.510075l7.183595-1.509576 2.862114 8.800152L23.2785 31.510075z"
                                      fill="#FFF"></path>
                              </g>
                              <g class="tp-star">
                                  <path class="tp-star__canvas" fill="#73CF12" d="M51.24816 46.330002h46.375587V0H51.248161z">
                                  </path>
                                  <path class="tp-star__canvas--half" fill="#73CF12"
                                      d="M51.24816 46.330002h23.187793V0H51.248161z"></path>
                                  <path class="tp-star__shape"
                                      d="M74.990978 31.32991L81.150908 30 84 39l-9.660206-7.202786L64.30279 39l3.895636-11.840666L58 19.841466h12.605577L74.499595 8l3.895637 11.841466H91L74.990978 31.329909z"
                                      fill="#FFF"></path>
                              </g>
                              <g class="tp-star">
                                  <path class="tp-star__canvas" fill="#73CF12"
                                      d="M102.532209 46.330002h46.375586V0h-46.375586z"></path>
                                  <path class="tp-star__canvas--half" fill="#73CF12"
                                      d="M102.532209 46.330002h23.187793V0h-23.187793z"></path>
                                  <path class="tp-star__shape"
                                      d="M142.066994 19.711433L115.763298 38.80065l3.838215-11.797827-10.047304-7.291391h12.418975l3.837418-11.798624 3.837417 11.798624h12.418975zM125.81156 31.510075l7.183595-1.509576 2.862113 8.800152-10.045708-7.290576z"
                                      fill="#FFF"></path>
                              </g>
                              <g class="tp-star">
                                  <path class="tp-star__canvas" fill="#73CF12"
                                      d="M153.815458 46.330002h46.375586V0h-46.375586z"></path>
                                  <path class="tp-star__canvas--half" fill="#73CF12"
                                      d="M153.815458 46.330002h23.187793V0h-23.187793z"></path>
                                  <path class="tp-star__shape"
                                      d="M193.348355 19.711433L167.045457 38.80065l3.837417-11.797827-10.047303-7.291391h12.418974l3.837418-11.798624 3.837418 11.798624h12.418974zM177.09292 31.510075l7.183595-1.509576 2.862114 8.800152-10.045709-7.290576z"
                                      fill="#FFF"></path>
                              </g>
                              <g class="tp-star">
                                  <path class="tp-star__canvas" fill="#DCDCE6"
                                      d="M205.064416 46.330002h46.375587V0h-46.375587z"></path>
                                  <path class="tp-star__canvas--half" fill="#DCDCE6"
                                      d="M205.064416 46.330002h23.187793V0h-23.187793z"></path>
                                  <path class="tp-star__shape"
                                      d="M244.597022 19.711433l-26.3029 19.089218 3.837419-11.797827-10.047304-7.291391h12.418974l3.837418-11.798624 3.837418 11.798624h12.418975zm-16.255436 11.798642l7.183595-1.509576 2.862114 8.800152-10.045709-7.290576z"
                                      fill="#FFF"></path>
                              </g>
                            </svg>
                          </div>
                        {% endif %}
                      </div>
                      <div class="verified-badge-wrapper">
                        {% if block.settings.verified != blank %}
                          <img
                            src="https://cdn.shopify.com/s/files/1/0667/6869/9616/files/verified-badge.svg?v=1667239046"
                            loading="lazy"
                            alt=""
                            class="verified-icon"
                          >
                          <div class="verified-text">{{ block.settings.verified }}</div>
                        {% endif %}
                      </div>
                    </div>
                    <p>{{ block.settings.review_time }}</p>
                  </div>
                  <h3>{{ block.settings.review_title }}</h3>
                  <div class="rev">{{ block.settings.review_content }}</div>
                  <h5>{{ block.settings.customer_name }}</h5>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% capture prevArrow %}
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="prev_arrow">
    <circle class="arrow-slider-circle" cx="12" cy="12" r="11.5" stroke="#8C8C8C"></circle>
    <path class="arrow-slider-shape" fill="#8C8C8C"
        d="M10.5088835 12l3.3080582-3.02451041c.2440777-.22315674.2440777-.5849653 0-.80812204-.2440776-.22315673-.6398058-.22315673-.8838834 0L9.18305826 11.595939c-.24407768.2231567-.24407768.5849653 0 .808122l3.75000004 3.4285714c.2440776.2231568.6398058.2231568.8838834 0 .2440777-.2231567.2440777-.5849653 0-.808122L10.5088835 12z">
    </path>
</svg>
{% endcapture %}
{% capture nextArrow %}
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="newxt_arrow">
    <circle class="arrow-slider-circle" cx="12" cy="12" r="11.5" stroke="#8C8C8C"></circle>
    <path class="arrow-slider-shape" fill="#8C8C8C"
        d="M10.5088835 12l3.3080582-3.02451041c.2440777-.22315674.2440777-.5849653 0-.80812204-.2440776-.22315673-.6398058-.22315673-.8838834 0L9.18305826 11.595939c-.24407768.2231567-.24407768.5849653 0 .808122l3.75000004 3.4285714c.2440776.2231568.6398058.2231568.8838834 0 .2440777-.2231567.2440777-.5849653 0-.808122L10.5088835 12z">
    </path>
</svg>
{% endcapture %}

<script>
  jQuery(document).ready(function($){
    $('.aus_review_slider').slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      arrows:true,
      autoplaySpeed: 5000,
      prevArrow: `<button type="button" class="slick-prev aus-prev">{{ prevArrow }}</button>`,
      nextArrow: `<button type="button" class="slick-next aus-prev">{{ nextArrow }}</button>`,
      responsive: [
        {
          breakpoint: 900,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 2
          }
        },
        {
          breakpoint: 600,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 1
          }
        }
      ]
    });
  
  })
</script>

{% schema %}
{
  "name": "Custom Trust Pilot",
  "class": "aus-section",
  "limit": 1,
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default":"Uitstekend!"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "Content",
      "default":"<p>Gebaseerd op 827+ reviews </p>"
    }
  ],
  "blocks": [
  {
    "name":"Review Widget",
    "type":"richtext",
    "settings": [
      {
          "type": "select",
          "id":"rating",
          "label":"Rating",
          "default":"5",
          "options": [
              {
              "value": "5",
              "label": "Five Star"
              },
              {
              "value": "4",
              "label": "Four Star"
              }
          ]

      },
      {
        "type": "text",
        "id": "verified",
        "label": "Verified",
        "default":"Verified"
      },
      {
        "type": "text",
        "id": "review_title",
        "label": "Review Title",
        "default":"Snelle verzending!"
      },
      {
        "type": "richtext",
        "id": "review_content",
        "label": "Review Content",
        "default":"<p>Ik had mijn pakketje vorige week besteld en ik kreeg dezelfde avond nog een mailtje dat mijn pakket al verzonden was. Erg tevreden! </p>"
      },
      {
        "type": "text",
        "id": "review_time",
        "label": "Review Time",
        "default": "28-02-2023"
      },
      {
        "type": "text",
        "id": "customer_name",
        "label": "Customer Name",
        "default":"Jhon K."
      }
      ]
  }
],
"presets": [
    {
    "name": "Custom Trust Pilot"
    }
  ]
}
{% endschema %}

Steps to Create the aus-tp-slider.liquid Snippet

Access Your Shopify Admin:

Log in to your Shopify admin panel.

Navigate to Online Store:

From the Shopify admin dashboard, click on Online Store in the left-hand menu.

Open the Theme Code Editor:

Click on Themes under the Online Store section.

Find the theme you’re currently using, click on Actions, and select Edit code.

Add a New Snippet:

In the code editor, locate the Snippets folder in the left-hand sidebar.

Click on Add a new snippet.

Name Your Snippet:

In the dialog box that appears, name the new snippet aus-tp-slider. Shopify will automatically append the .liquid file extension.

Click Create snippet.

Add Code to aus-tp-slider.liquid:

The new snippet file aus-tp-slider.liquid will open in the code editor.

Replace the existing code with the following code:

Section Code (aus-tp-slider.liquid):

JavaScript

Kopiëren

<a href="#aus-tp-slider" class="reviews_stars">
  <div class="aus-pilot">
    <style>
          .tp-widget-stars {
              margin: 0 0 8px;
              width: 94%;
          }
        div#tp-widget-stars {
            max-width: 120px;
        }
        .aus-pilot {
          display: flex;
          margin-bottom:10px;
        }

        .aus-pilot > span {
            display: inline-block;
            margin-left: 5px;
            font-size: 16px;
        }
          a.reviews_stars {
          text-decoration: none;
          color: inherit;
      }
    </style>

    <div id="tp-widget-stars" class="tp-widget-stars">
      <div class="">
        <div class="tp-stars tp-stars--4 tp-stars--4--half">
          <div style="position: relative; height: 0; width: 100%; padding: 0; padding-bottom: 18.326693227091635%;">
            <svg
              role="img"
              aria-labelledby="starRating"
              viewBox="0 0 251 46"
              xmlns="http://www.w3.org/2000/svg"
              style="position: absolute; height: 100%; width: 100%; left: 0; top: 0;"
            >
              <title id="starRating" lang="en">4.6 out of five star rating on Trustpilot</title>
              <g class="tp-star">
                  <path class="tp-star__canvas" fill="#00B67A" d="M0 46.330002h46.375586V0H0z"></path>
                  <path class="tp-star__shape" d="M39.533936 19.711433L13.230239 38.80065l3.838216-11.797827L7.02115 19.711433h12.418975l3.837417-11.798624 3.837418 11.798624h12.418975zM23.2785 31.510075l7.183595-1.509576 2.862114 8.800152L23.2785 31.510075z" fill="#FFF"></path>
              </g>
              <g class="tp-star">
                  <path class="tp-star__canvas" fill="#00B67A" d="M51.24816 46.330002h46.375587V0H51.248161z">
                  </path>
                  <path class="tp-star__canvas--half" fill="#00B67A" d="M51.24816 46.330002h23.187793V0H51.248161z"></path>
                  <path class="tp-star__shape" d="M74.990978 31.32991L81.150908 30 84 39l-9.660206-7.202786L64.30279 39l3.895636-11.840666L58 19.841466h12.605577L74.499595 8l3.895637 11.841466H91L74.990978 31.329909z" fill="#FFF"></path>
              </g>
              <g class="tp-star">
                  <path class="tp-star__canvas" fill="#00B67A" d="M102.532209 46.330002h46.375586V0h-46.375586z">
                  </path>
                  <path class="tp-star__canvas--half" fill="#00B67A" d="M102.532209 46.330002h23.187793V0h-23.187793z"></path>
                  <path class="tp-star__shape" d="M142.066994 19.711433L115.763298 38.80065l3.838215-11.797827-10.047304-7.291391h12.418975l3.837418-11.798624 3.837417 11.798624h12.418975zM125.81156 31.510075l7.183595-1.509576 2.862113 8.800152-10.045708-7.290576z" fill="#FFF"></path>
              </g>
              <g class="tp-star">
                  <path class="tp-star__canvas" fill="#00B67A" d="M153.815458 46.330002h46.375586V0h-46.375586z">
                  </path>
                  <path class="tp-star__canvas--half" fill="#00B67A" d="M153.815458 46.330002h23.187793V0h-23.187793z"></path>
                  <path class="tp-star__shape" d="M193.348355 19.711433L167.045457 38.80065l3.837417-11.797827-10.047303-7.291391h12.418974l3.837418-11.798624 3.837418 11.798624h12.418974zM177.09292 31.510075l7.183595-1.509576 2.862114 8.800152-10.045709-7.290576z" fill="#FFF"></path>
              </g>
              <g class="tp-star">
                  <path class="tp-star__canvas" fill="#dcdce6" d="M205.064416 46.330002h46.375587V0h-46.375587z">
                  </path>
                  <path class="tp-star__canvas--half" fill="#00B67A" d="M205.064416 46.330002h23.187793V0h-23.187793z"></path>
                  <path class="tp-star__shape" d="M244.597022 19.711433l-26.3029 19.089218 3.837419-11.797827-10.047304-7.291391h12.418974l3.837418-11.798624 3.837418 11.798624h12.418975zm-16.255436 11.798642l7.183595-1.509576 2.862114 8.800152-10.045709-7.290576z" fill="#FFF"></path>
              </g>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <span>(871+ Trustpilot reviews)</span>
  </div>
</a>

Step 3: Upload the Assets

You need to upload the following assets: jquery-3.7.0.min.js, slick.min.js, slick.css, and slick-theme.css.

Locate the Assets Folder:

In the code editor, locate the Assets folder on the left-hand sidebar.

Upload Files:

Click on the Add a new asset link.

You will be prompted to upload your file. For each of the following files:

Upload jquery-3.7.0.min.js to the Assets folder.

Upload slick.min.js to the Assets folder.

Upload slick.css and slick-theme.css to the Assets folder.

Click Upload and repeat for each file.

slick.min.js

slick-theme.css

slick.css

jquery-3.7.0.min.js

Gallery view