Collection list On Home page

<section class='shopify-section section'
  id='shopify-section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f'>
  <style data-shopify=''>
    .section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-padding {
      max-width: 120rem;
      margin: 0 auto;
      padding: 0 1.5rem;
      padding-top: 36px;
      padding-bottom: 75px;
    }

    @media screen and (min-width: 750px) {
      .section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-padding {
        padding: 0 5rem;
        padding-top: 48px;
        padding-bottom: 100px;
      }
    }
  </style>
  <style>
    .easy-setup {
      color: var(--text-color);
    }

    .easy-setup div {
      box-sizing: border-box;
    }

    .easy-setup p {
      margin-top: 0;
      margin-bottom: 0;
    }

    @media screen and (min-width: 750px) {
      .easy-setup .swiper-arrow-icon-wrapper {
        display: none;
      }
    }

    .swiper-arrow-icon-wrapper {
      display: flex;
      gap: 1rem;
    }

    @media screen and (min-width: 750px) {
      .swiper-arrow-icon-wrapper {
        gap: 1.5rem;
      }
    }

    .swiper-arrow-icon {
      color: var(--text-color);
      display: inline-block;
      width: 70px;
      height: 70px;
      position: unset;
      margin-top: unset;
      margin-bottom: 43px;
    }

    .swiper-arrow-icon--left {
      transform: rotate(180deg);
    }

    @media screen and (min-width: 750px) {
      .swiper-arrow-icon {
        width: 97px;
        height: 97px;
        margin-bottom: 60px;
      }
    }

    .easy-setup-title {
      font-size: calc(var(--title-font-size) * 0.5);
      font-weight: 800;
      line-height: 107%;
      letter-spacing: 0.04em;
      margin-bottom: 1rem;
      color: var(--title-color);
    }

    @media screen and (min-width: 750px) {
      .easy-setup-title {
        font-size: calc(var(--title-font-size) * 0.75);
        text-align: center;
        margin-bottom: 2rem;
      }
    }

    @media screen and (min-width: 750px) {
      .easy-setup-title {
        font-size: var(--title-font-size);
        margin-bottom: 2.5rem;
      }
    }

    /* .ss-custom-card will be reused on other sections */
    .ss-custom-card {
      border: 1px solid var(--text-color);
      border-radius: 29px;
      background: var(--card-background-color, #fef9f3);
      padding: 20px;
      height: auto;
      width: 100%;
    }

    @media screen and (min-width: 750px) {
      .ss-custom-card {
        padding: 23px 27px;
      }
    }

    .ss-custom-card__title {
      font-weight: 800;
      font-size: var(--product-card-title-font-size, 24px);
      margin-bottom: 5px;
      text-align: center;
    }

    .ss-custom-card__desc {
      font-weight: 500;
      font-size: var(--product-card-description-font-size, 20px);
      margin-bottom: 13px;
    }

    .ss-custom-card__link {
      border: 1px solid var(--text-color);
      color: var(--text-color);
      font-weight: 800;
      background: var(--link-background-color, #fbf4fe);
      border-radius: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      width: 100%;
      text-decoration: none;
    }

    @media screen and (min-width: 750px) {
      .ss-custom-card__link {
        height: 60px;
      }
    }

    .ss-custom-card__image {
      width: 100%;
      object-fit: cover;
      aspect-ratio: 1/1;
      border: 1px solid var(--text-color);
      border-radius: 26px;
    }

    .ss-custom-card__index {
      border: 1px solid var(--text-color);
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 1rem auto;
      background: var(--second-card-background-color, #f9f9f9);
      font-weight: 500;
      font-size: 28px;
    }
  </style>
  <style>
    .ss-custom-cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      width: 277px;
      margin: 0 auto;
      background: var(--second-card-background-color);
      border-radius: 45px;
      font-size: 20px;
      font-weight: 800;
      border: 1px solid var(--text-color);
      color: var(--text-color);
      margin-top: 45px;
      text-decoration: none;
    }
  </style>
  <div class='easy-setup' id='easy-setup' style='
 background-color:#bb8fc1;
 --title-font-size: 48px;
 --title-color: #ffffff;
 --product-card-title-font-size: 24px;
 --text-color:#432a54;
 --card-background-color: #fef9f3;
 --second-card-background-color: #fbf4fe;
 overflow: hidden;
 '>
    <div class='page-width section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-padding'>
      <div class='easy-setup-title'>
        EASY SET UP IN 3 STEPS
      </div>
      <div class='swiper swiper-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f'
        style='overflow:visible'>
        <div class='swiper-arrow-icon-wrapper'>
          <svg class='swiper-button-prev swiper-arrow-icon swiper-arrow-icon--left' fill='none' viewbox='0 0 97 97'
            xmlns='http://www.w3.org/2000/svg'>
            <circle cx='48.6602' cy='48.75' fill='#fef9f3' r='47.5' stroke='currentColor'>
            </circle>
            <path
              d='M72.9825 49.8107C73.5683 49.2249 73.5683 48.2751 72.9825 47.6893L63.4366 38.1434C62.8508 37.5576 61.9011 37.5576 61.3153 38.1434C60.7295 38.7292 60.7295 39.6789 61.3153 40.2647L69.8006 48.75L61.3153 57.2353C60.7295 57.8211 60.7295 58.7708 61.3153 59.3566C61.9011 59.9424 62.8508 59.9424 63.4366 59.3566L72.9825 49.8107ZM29.9219 50.25H71.9219V47.25H29.9219V50.25Z'
              fill='currentColor'>
            </path>
          </svg>
          <svg class='swiper-button-next swiper-arrow-icon swiper-arrow-icon--right' fill='none' viewbox='0 0 97 97'
            xmlns='http://www.w3.org/2000/svg'>
            <circle cx='48.6602' cy='48.75' fill='#fef9f3' r='47.5' stroke='currentColor'>
            </circle>
            <path
              d='M72.9825 49.8107C73.5683 49.2249 73.5683 48.2751 72.9825 47.6893L63.4366 38.1434C62.8508 37.5576 61.9011 37.5576 61.3153 38.1434C60.7295 38.7292 60.7295 39.6789 61.3153 40.2647L69.8006 48.75L61.3153 57.2353C60.7295 57.8211 60.7295 58.7708 61.3153 59.3566C61.9011 59.9424 62.8508 59.9424 63.4366 59.3566L72.9825 49.8107ZM29.9219 50.25H71.9219V47.25H29.9219V50.25Z'
              fill='currentColor'>
            </path>
          </svg>
        </div>
        <div class='swiper-wrapper'>
          <div class='swiper-slide ss-custom-card'>
            <img alt='' class='ss-custom-card__image' src='//section.store/cdn/shop/files/image_6_400x.png?v=1677651130'
              srcset='
 //section.store/cdn/shop/files/image_6_400x.png?v=1677651130 400w,
 //section.store/cdn/shop/files/image_6_600x.png?v=1677651130 800w,
 //section.store/cdn/shop/files/image_6_800x.png?v=1677651130 1200w,
 //section.store/cdn/shop/files/image_6_1000x.png?v=1677651130 1600w,
 //section.store/cdn/shop/files/image_6.png?v=1677651130 2000w' />
            <div class='ss-custom-card__index'>
              1
            </div>
            <div class='ss-custom-card__title'>
              <p>
                Rip open the package
              </p>
            </div>
          </div>
          <div class='swiper-slide ss-custom-card'>
            <img alt='' class='ss-custom-card__image' src='//section.store/cdn/shop/files/image_6_400x.png?v=1677651130'
              srcset='
 //section.store/cdn/shop/files/image_6_400x.png?v=1677651130 400w,
 //section.store/cdn/shop/files/image_6_600x.png?v=1677651130 800w,
 //section.store/cdn/shop/files/image_6_800x.png?v=1677651130 1200w,
 //section.store/cdn/shop/files/image_6_1000x.png?v=1677651130 1600w,
 //section.store/cdn/shop/files/image_6.png?v=1677651130 2000w
 ' />
            <div class='ss-custom-card__index'>
              2
            </div>
            <div class='ss-custom-card__title'>
              <p>
                Put in a cup with tea & stir
              </p>
            </div>
          </div>
          <div class='swiper-slide ss-custom-card'>
            <img alt='' class='ss-custom-card__image' src='//section.store/cdn/shop/files/image_6_400x.png?v=1677651130'
              srcset='
 //section.store/cdn/shop/files/image_6_400x.png?v=1677651130 400w,
 //section.store/cdn/shop/files/image_6_600x.png?v=1677651130 800w,
 //section.store/cdn/shop/files/image_6_800x.png?v=1677651130 1200w,
 //section.store/cdn/shop/files/image_6_1000x.png?v=1677651130 1600w,
 //section.store/cdn/shop/files/image_6.png?v=1677651130 2000w
 ' />
            <div class='ss-custom-card__index'>
              3
            </div>
            <div class='ss-custom-card__title'>
              <p>
                Enjoy the funky stuff
              </p>
            </div>
          </div>
        </div>
      </div>
      <a class='ss-custom-cta' href=''>
        SHOP NOW
      </a>
    </div>
  </div>
  <script>
    // load the swiper css and js only once:
    (function () {
      const cssId = 'swiper-css';
      let existingLink = document.getElementById(cssId);
      if (!existingLink) {
        let link = document.createElement('link');
        link.href = 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css';
        link.rel = 'stylesheet';
        link.id = cssId;
        let head = document.getElementsByTagName('head')[0];
        head.appendChild(link);
      }
      const jsId = 'swiper-js';
      let existingScript = document.getElementById(jsId);
      if (!existingScript) {
        let script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js';
        script.id = jsId;
        script.defer = true;
        // fire a custom event when the script is loaded:
        script.onload = function () {
          let event = new Event('swiper:loaded');
          document.dispatchEvent(event);
        };
        let head = document.getElementsByTagName('head')[0];
        head.appendChild(script);
      }
      function loadSwiper() {
        try {
          new Swiper('.swiper-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f', {
            slidesPerView: 1.2,
            spaceBetween: 22,
            navigation: {
              nextEl: '.swiper-arrow-icon--right',
              prevEl: '.swiper-arrow-icon--left',
            },
            breakpoints: {
              750: {
                slidesPerView: 3,
                spaceBetween: 32,
              },
              //1440: {
              // slidesPerView: 3.8,
              // spaceBetween: 32,
              //},
            },
          });
        } catch (e) {
          console.log('Swiper not loaded');
          console.log(e);
        }
      }
      document.addEventListener('swiper:loaded', loadSwiper);
      if (window.Shopify && Shopify.designMode) {
        document.addEventListener('shopify:section:load', loadSwiper);
      }
    })();
  </script>
</section>
<style>
  .easy-setup-title {
    margin-top: 20px;
  }

  a.ss-custom-cta {
    margin-bottom: 20px;
  }

  .ss-custom-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    width: 277px;
    margin: 0 auto;
    background: var(--second-card-background-color);
    border-radius: 45px;
    font-size: 20px;
    font-weight: 800;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    margin-top: 45px;
    text-decoration: none;
  }
</style>
<style>
  .section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-pad ding {
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    padding-top: 36px;
    padding-bottom: 75px;
  }

  @media screen and (min-width: 750px) {
    .section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-padding {
      padding: 0 5rem;
      padding-top: 48px;
      padding-bottom: 100px;
    }
  }
</style>
<style>
  .best-seller {
    color: var(--text-color);
  }

  .best-seller div {
    box-sizing: border-box;
  }

  .best-seller p {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.07;
  }

  .swiper-arrow-icon-wrapper {
    display: flex;
    gap: 1rem;
  }

  @media screen and (min-width: 750px) {
    .swiper-arrow-icon-wrapper {
      gap: 1.5rem;
    }
  }

  .swiper-arrow-icon {
    color: var(--text-color);
    display: inline-block;
    width: 70px;
    height: 70px;
    position: unset;
    margin-top: unset;
    margin-bottom: 43px;
  }

  .swiper-arrow-icon--left {
    transform: rotate(180deg);
  }

  @media screen and (min-width: 750px) {
    .swiper-arrow-icon {
      width: 97px;
      height: 97px;
      margin-bottom: 60px;
    }
  }

  .best-seller-title {
    font-size: calc(var(--title-font-size) * 0.5);
    font-weight: 800;
    line-height: 107%;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
  }

  @media screen and (min-width: 750px) {
    .best-seller-title {
      font-size: calc(var(--title-font-size) * 0.75);
    }
  }

  @media screen and (min-width: 750px) {
    .best-seller-title {
      font-size: var(--title-font-size);
      margin-bottom: 2rem;
    }
  }

  .best-seller-card {
    border: 1px solid var(--text-color);
    border-radius: 29px;
    background: var(--card-background-color, #fef9f3);
    padding: 20px;
    height: auto;
  }

  @media screen and (min-width: 750px) {
    .best-seller-card {
      padding: 23px 27px;
    }
  }

  .best-seller-card__title {
    font-weight: 800;
    font-size: var(--product-card-title-font-size, 24px);
    margin-bottom: 5px;
  }

  .best-seller-card__desc {
    font-weight: 500;
    font-size: var(--product-card-description-font-size, 20px);
    margin-bottom: 13px;
  }

  .best-seller-card__link {
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-weight: 800;
    background: var(--link-background-color, #fbf4fe);
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    text-decoration: none;
    font-size: 20px;
  }

  @media screen and (min-width: 750px) {
    .best-seller-card__link {
      height: 60px;
    }
  }

  .best-seller-card__image {
    width: 100%;
    object-fit: contain;
  }
</style>
<style>
  .rating-item svg {
    width: 16px;
    height: 16px;
    border: none;
    margin-right: 0px;
    line-height: 1.6;
    fill: var(--text-color);
  }

  .customers-reviews {
    color: var(--text-color);
    text-align: center;
  }

  .customers-reviews div {
    box-sizing: border-box;
  }

  .customers-reviews p {
    margin-top: 0;
    margin-bottom: 0;
  }

  @media screen and (min-width: 750px) {
    .customers-reviews .swiper-arrow-icon-wrapper {
      display: none;
    }
  }

  .swiper-arrow-icon-wrapper {
    display: flex;
    gap: 1rem;
  }

  @media screen and (min-width: 750px) {
    .swiper-arrow-icon-wrapper {
      gap: 1.5rem;
    }
  }

  .swiper-arrow-icon {
    color: var(--text-color);
    display: inline-block;
    width: 70px;
    height: 70px;
    position: unset;
    margin-top: unset;
    margin-bottom: 43px;
  }

  .swiper-arrow-icon--left {
    transform: rotate(180deg);
  }

  @media screen and (min-width: 750px) {
    .swiper-arrow-icon {
      width: 97px;
      height: 97px;
      margin-bottom: 60px;
    }
  }

  .customers-reviews-title {
    font-size: calc(var(--title-font-size) * 0.5);
    font-weight: 800;
    line-height: 107%;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    color: var(--title-color);
  }

  @media screen and (min-width: 750px) {
    .customers-reviews-title {
      font-size: calc(var(--title-font-size) * 0.75);
      margin-bottom: 60px;
      text-align: center;
    }
  }

  @media screen and (min-width: 750px) {
    .customers-reviews-title {
      font-size: var(--title-font-size);
    }
  }

  /* .ss-custom-card will be reused on other sections */
  .ss-custom-card {
    border: 1px solid var(--text-color);
    border-radius: 29px;
    background: var(--card-background-color, #fef9f3);
    padding: 20px;
    height: auto;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .ss-custom-card {
      padding: 23px 27px;
    }
  }

  .ss-custom-card__title {
    font-weight: 800;
    font-size: var(--product-card-title-font-size, 24px);
    margin-bottom: 5px;
    text-align: center;
  }

  .ss-custom-card__desc {
    font-weight: 500;
    font-size: var(--product-card-description-font-size, 20px);
    margin-bottom: 13px;
  }

  .ss-custom-card__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 13px;
  }

  .ss-custom-card__author {
    font-size: 24px;
    font-weight: 800;
  }

  .ss-custom-card__link {
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-weight: 800;
    background: var(--link-background-color, #fbf4fe);
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    text-decoration: none;
  }

  @media screen and (min-width: 750px) {
    .ss-custom-card__link {
      height: 60px;
    }
  }

  .ss-custom-card__image {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    border: 1px solid var(--text-color);
    border-radius: 26px;
  }

  .ss-custom-card__index {
    border: 1px solid var(--text-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    background: var(--second-card-background-color, #f9f9f9);
    font-weight: 500;
    font-size: 28px;
  }
</style>
<style>
  .easy-setup {
    color: var(--text-color);
  }

  .easy-setup div {
    box-sizing: border-box;
  }

  .easy-setup p {
    margin-top: 0;
    margin-bottom: 0;
  }

  @media screen and (min-width: 750px) {
    .easy-setup .swiper-arrow-icon-wrapper {
      display: none;
    }
  }

  .swiper-arrow-icon-wrapper {
    display: flex;
    gap: 1rem;
  }

  @media screen and (min-width: 750px) {
    .swiper-arrow-icon-wrapper {
      gap: 1.5rem;
    }
  }

  .swiper-arrow-icon {
    color: var(--text-color);
    display: inline-block;
    width: 70px;
    height: 70px;
    position: unset;
    margin-top: unset;
    margin-bottom: 43px;
  }

  .swiper-arrow-icon--left {
    transform: rotate(180deg);
  }

  @media screen and (min-width: 750px) {
    .swiper-arrow-icon {
      width: 97px;
      height: 97px;
      margin-bottom: 60px;
    }
  }

  .easy-setup-title {
    font-size: calc(var(--title-font-size) * 0.5);
    font-weight: 800;
    line-height: 107%;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    color: var(--title-color);
  }

  @media screen and (min-width: 750px) {
    .easy-setup-title {
      font-size: calc(var(--title-font-size) * 0.75);
      text-align: center;
      margin-bottom: 2rem;
    }
  }

  @media screen and (min-width: 750px) {
    .easy-setup-title {
      font-size: var(--title-font-size);
      margin-bottom: 2.5rem;
    }
  }

  /* .ss-custom-card will be reused on other sections */
  .ss-custom-card {
    border: 1px solid var(--text-color);
    border-radius: 29px;
    background: var(--card-background-color, #fef9f3);
    padding: 20px;
    height: auto;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .ss-custom-card {
      padding: 23px 27px;
    }
  }

  .ss-custom-card__title {
    font-weight: 800;
    font-size: var(--product-card-title-font-size, 24px);
    margin-bottom: 5px;
    text-align: center;
  }

  .ss-custom-card__desc {
    font-weight: 500;
    font-size: var(--product-card-description-font-size, 20px);
    margin-bottom: 13px;
  }

  .ss-custom-card__link {
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-weight: 800;
    background: var(--link-background-color, #fbf4fe);
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    text-decoration: none;
  }

  @media screen and (min-width: 750px) {
    .ss-custom-card__link {
      height: 60px;
    }
  }

  .ss-custom-card__image {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    border: 1px solid var(--text-color);
    border-radius: 26px;
  }

  .ss-custom-card__index {
    border: 1px solid var(--text-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    background: var(--second-card-background-color, #f9f9f9);
    font-weight: 500;
    font-size: 28px;
  }
</style>